├── .gitignore
├── LICENSE
├── README.md
├── ch01
    ├── ca.js
    └── index.html
├── ch05
    ├── ex1
    │   ├── index.html
    │   └── module.js
    ├── ex2
    │   ├── index.html
    │   └── sideeffect.js
    ├── ex3
    │   ├── index.html
    │   └── module.js
    ├── ex4
    │   ├── index.html
    │   ├── module.js
    │   └── module2.js
    ├── ex5
    │   ├── index.html
    │   └── module.js
    ├── ex6
    │   ├── index.html
    │   └── module.js
    ├── ex7
    │   ├── index.html
    │   └── module.js
    └── ex8
    │   ├── index.html
    │   ├── module.js
    │   ├── submodule.js
    │   └── submodule2.js
├── ch12
    ├── ex1
    │   └── index.html
    ├── ex2
    │   └── index.html
    └── ex3
    │   └── index.html
├── ch15
    ├── cssanimation.html
    ├── csstransform.html
    ├── csstransition.html
    ├── ex1
    │   ├── JavaScript-logo.png
    │   ├── Network-12716.mp4
    │   ├── brook1.mp3
    │   ├── bulbul.mp3
    │   ├── fall_morning_river.mp3
    │   ├── index.html
    │   ├── refs.txt
    │   └── takedown.mp4
    ├── ex2
    │   └── index.html
    └── webgl.html
├── ch17
    ├── ex1
    │   ├── index.html
    │   └── sw.js
    ├── ex2
    │   ├── index.html
    │   ├── sw1.js
    │   ├── v1
    │   │   ├── page1.html
    │   │   └── page2.html
    │   └── v2
    │   │   ├── page3.html
    │   │   └── page4.html
    ├── ex3
    │   ├── index.html
    │   └── sw.js
    ├── ex4
    │   ├── icon.png
    │   ├── index.html
    │   ├── manifest.webmanifest
    │   └── sw.js
    └── ex5
    │   └── index.html
├── ch19
    ├── index.html
    ├── js
    │   ├── worker1.js
    │   ├── worker2.js
    │   ├── worker3.js
    │   ├── worker4.js
    │   ├── worker5.js
    │   ├── worker6.js
    │   └── worker7.js
    └── wasm
    │   ├── add.wasm
    │   └── add.wat
├── hands-on-javascript.png
├── repl.txt
└── toc.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *~
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 ANDO Yasushi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ハンズオンJavaScript
 2 | 
 3 | ---
 4 | 
 5 | ![表紙](hands-on-javascript.png)
 6 | 
 7 | ---
 8 | 
 9 | 本リポジトリはオライリー・ジャパン発行書籍『[ハンズオンJavaScript](https://www.oreilly.co.jp/books/9784873119229/)』のサポートサイトです。
10 | 
11 | ## ソースコード
12 | 
13 | ### ファイル構成
14 | 
15 | |ファイル名 |説明                      |
16 | |:--        |:--                       |
17 | |ch01/      |1章で使用するベースサイト |
18 | |ch05/      |5章で使用するベースサイト |
19 | |ch12/      |12章で使用するベースサイト|
20 | |ch15/      |15章で使用するベースサイト|
21 | |ch17/      |17章で使用するベースサイト|
22 | |ch19/      |19章で使用するベースサイト|
23 | |repl.txt   |書籍から抽出したコード    |
24 | 
25 | 起動方法や利用方法は本書籍をご覧ください。
26 | 
27 | ## ライセンス
28 | 本リポジトリのソースコードは[MITライセンス](http://www.opensource.org/licenses/MIT)です。
29 | 商用・非商用問わず、自由にご利用ください。
30 | 
31 | ## 正誤表
32 | 
33 | 本書の正誤情報は以下のページで公開しています。
34 | 
35 | https://github.com/oreilly-japan/hands-on-javascript/wiki/errata
36 | 
37 | 本ページに掲載されていない誤植など間違いを見つけた方は、[japan＠oreilly.co.jp](<mailto:japan＠oreilly.co.jp>)までお知らせください。
38 | 


--------------------------------------------------------------------------------
/ch01/ca.js:
--------------------------------------------------------------------------------
 1 | class CA1Rule90 {
 2 |   constructor(initialStates) {
 3 |     this.rule = {
 4 |       "000": "0",
 5 |       "001": "1",
 6 |       "010": "0",
 7 |       "011": "1",
 8 |       "100": "1",
 9 |       "101": "0",
10 |       "110": "1",
11 |       "111": "0",
12 |     }
13 |     this.initialStates = initialStates
14 |     this.reset()
15 |   }
16 | 
17 |   next() {
18 |     const currentStates = `0${this.states}0`
19 |     const nextStates = []
20 |     for (let c = 0; c < currentStates.length - 2; c++) {
21 |       const state = currentStates.substring(c, c+3)
22 |       nextStates[c] = this.nextCell(state)
23 |     }
24 |     this.states = nextStates.join("")
25 |   }
26 | 
27 |   nextCell(state) {
28 |     return this.rule[state]
29 |   }
30 | 
31 |   reset() {
32 |     this.states = `${this.initialStates}`
33 |   }
34 | 
35 |   toString() {
36 |     return this.states.replace(/./g, s => s === "0" ? " " : "*")
37 |   }
38 | }
39 | 
40 | export { CA1Rule90 }
41 | 
42 | // How to instantiate
43 | //   new CA1({
44 | //     rule:90, 
45 | //     states:[
46 | //       0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
47 | //       1,
48 | //       0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
49 | //     ]
50 | //   })
51 | export class CA1 {
52 |   constructor(opts={}) {
53 |     this.rule = opts.rule
54 |     this.initialStates = opts.states
55 |     this.reset()
56 |   }
57 | 
58 |   next() {
59 |     let curr = [0].concat(this.states, [0])
60 |     for (let c = 1; c < curr.length - 1; c++) {
61 |       const state = 0b100 * curr[c+1] + 0b010 * curr[c] + 0b001 * curr[c-1]
62 |       this.states[c-1] = this.nextCell(state)
63 |     }
64 |   }
65 | 
66 |   nextCell(state) {
67 |     return (this.rule & (0x1 << state)) >> state
68 |   }
69 | 
70 |   reset() {
71 |     this.states = [].concat(this.initialStates)
72 |   }
73 | 
74 |   toString() {
75 |     return this.states.map(c => c === 0 ? " " : "*").join("")
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/ch01/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <title>Ch. 1. Cellular Automaton</title>
 5 |     <style>
 6 |       /* 全体的な設定 */
 7 |       :root {
 8 |         /* 一行あたりのセルの数 */
 9 |         --cells:41;
10 | 
11 |         /* 一行あたりの幅 */
12 |         --width:410px;
13 | 
14 |         /* セルの幅 ＝ 一行あたりの幅 ／ 一行あたりのセルの数*/
15 |         --cell-size:calc(var(--width)/var(--cells));
16 |       }
17 | 
18 |       /* 表全体の見た目 */
19 |       #result {
20 |         /* フレックスボックスを使用してレイアウト */
21 |         display:flex;
22 | 
23 |         /* 横方向に並べ、必要に応じて折り返す */
24 |         flex-flow:row wrap;
25 | 
26 |         /* 横幅 */
27 |         width:var(--width);
28 | 
29 |         /* 枠線。幅1px、実線、灰色 */
30 |         border-bottom:1px solid gray;
31 |         border-right:1px solid gray;
32 |       }
33 | 
34 |       /* セルの見た目（基本） */
35 |       .cell {
36 |         /* 幅 */
37 |         flex:var(--cell-size);
38 | 
39 |         /* 高さ */
40 |         height:var(--cell-size);
41 | 
42 |         /* 枠線をサイズ計算に含めない */
43 |         box-sizing:border-box;
44 | 
45 |         /* 枠線。幅1px、実線、灰色 */
46 |         border-top:1px solid gray;
47 |         border-left:1px solid gray;
48 |       }
49 | 
50 |       /* 0に対応するセル */
51 |       .dead { background-color:white; }
52 | 
53 |       /* 1に対応するセル */
54 |       .live { background-color:black; }
55 |     </style>
56 |   </head>
57 |   <body>
58 |     <div id="result"></div>
59 |     <script type="module">
60 |       import { CA1Rule90, CA1 } from "./ca.js"
61 | 
62 |       function addResult(ca) {
63 |         const result = document.getElementById("result")
64 |         for (let i = 0; i < ca.states.length; i++) {
65 |           const cell = document.createElement("div")
66 |           if (ca.states[i] === "0") {
67 |             cell.classList.add("cell", "dead")
68 |           } else {
69 |             cell.classList.add("cell", "live")
70 |           }
71 |           result.appendChild(cell)
72 |         }
73 |       }
74 | 
75 |       const ca1 = new CA1Rule90("00000000000000000000100000000000000000000")
76 |       for (let i = 0; i <= 20; i++) {
77 |         addResult(ca1)
78 |         ca1.next()
79 |       }
80 | 
81 |       // 練習問題用
82 |       window.CA1 = CA1
83 |       window.addResult = ca => {
84 |         const result = document.getElementById("result")
85 |         for (let i = 0; i < ca.states.length; i++) {
86 |           const cell = document.createElement("div")
87 |           cell.classList.add("cell", ca.states[i] === 0 ? "dead" : "live")
88 |           result.appendChild(cell)
89 |         }
90 |       }
91 |     </script>
92 |   </body>
93 | </html>
94 | 


--------------------------------------------------------------------------------
/ch05/ex1/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <script type="module" src="module.js"></script>
 5 |     <!--
 6 |     <script type="module">
 7 |       import "./module.js"
 8 |     </script>
 9 |     -->
10 |   </head>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/ch05/ex1/module.js:
--------------------------------------------------------------------------------
1 | console.log("module.js")
2 | 


--------------------------------------------------------------------------------
/ch05/ex2/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <script type="module">
 6 |     console.log("最初のインポート")
 7 |     import "./sideeffect.js"
 8 |     console.log("二度目のインポート")
 9 |     import "./sideeffect.js"
10 |     console.log("終了")
11 |     </script>
12 |   <head>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/ch05/ex2/sideeffect.js:
--------------------------------------------------------------------------------
1 | console.log("モジュールの副作用")
2 | 


--------------------------------------------------------------------------------
/ch05/ex3/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <script type="module">
 6 |       import { Klass, func } from "./module.js"
 7 |       const k = new Klass()
 8 |       const f = func()
 9 |       console.log(k, f)
10 |     </script>
11 |   </head>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/ch05/ex3/module.js:
--------------------------------------------------------------------------------
1 | class Klass {}
2 | function func() { return "module func" }
3 | let variable = "var"
4 | const constant = "constant"
5 | export {Klass, func, variable, constant}
6 | 


--------------------------------------------------------------------------------
/ch05/ex4/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <script type="module">
 6 |       import { Klass, func } from "./module.js"
 7 |       import { Klass as Klass2, func as func2 } from "./module2.js"
 8 |       const k = new Klass()
 9 |       const f = func()
10 |       const k2 = new Klass2()
11 |       const f2 = func2()
12 |       console.log(k, f, k2, f2)
13 |     </script>
14 |   </head>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/ch05/ex4/module.js:
--------------------------------------------------------------------------------
1 | class Klass {}
2 | function func() { return "module func" }
3 | let variable = "var"
4 | const constant = "constant"
5 | export {Klass, func, variable, constant}
6 | 


--------------------------------------------------------------------------------
/ch05/ex4/module2.js:
--------------------------------------------------------------------------------
1 | class Klass {}
2 | function func() { return "module func2" }
3 | let variable = "var2"
4 | const constant = "constant2"
5 | export {Klass, func, variable, constant}
6 | 


--------------------------------------------------------------------------------
/ch05/ex5/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <script type="module">
 6 |       import * as Module from "./module.js"
 7 |       console.log(Module.Klass, Module.func, Module.variable, Module.constant)
 8 |     </script>
 9 |   </head>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/ch05/ex5/module.js:
--------------------------------------------------------------------------------
1 | class Klass {}
2 | function func() { return "module func" }
3 | let variable = "var"
4 | const constant = "constant"
5 | export {Klass, func, variable, constant}
6 | 


--------------------------------------------------------------------------------
/ch05/ex6/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <script type="module">
 6 |       import Module, {Klass, func} from "./module.js"
 7 |       console.log(Module.Klass, Module.func, Module.variable, Module.constant, Klass, func)
 8 |     </script>
 9 |   </head>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/ch05/ex6/module.js:
--------------------------------------------------------------------------------
1 | class Klass {}
2 | function func() { return "module func" }
3 | let variable = "var"
4 | const constant = "constant"
5 | export {Klass, func, variable, constant}
6 | export default {Klass, func, variable, constant}
7 | 


--------------------------------------------------------------------------------
/ch05/ex7/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <script type="module">
 6 |       import("./module.js").then(Module => {
 7 |         console.log(Module)
 8 |       })
 9 |     </script>
10 |   </head>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/ch05/ex7/module.js:
--------------------------------------------------------------------------------
1 | class Klass {}
2 | function func() { return "module func" }
3 | let variable = "var"
4 | const constant = "constant"
5 | export {Klass, func, variable, constant}
6 | export default {Klass, func, variable, constant}
7 | 


--------------------------------------------------------------------------------
/ch05/ex8/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <script type="module">
 6 |       import Module, {K, f, Klass, func, constant} from "./module.js"
 7 |       console.log(Module, K, f, Klass, func, constant)
 8 |     </script>
 9 |   </head>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/ch05/ex8/module.js:
--------------------------------------------------------------------------------
1 | export { Klass as K, func as f } from "./submodule.js"
2 | export * from "./submodule.js"
3 | export * from "./submodule2.js"
4 | export { default } from "./submodule.js"
5 | 


--------------------------------------------------------------------------------
/ch05/ex8/submodule.js:
--------------------------------------------------------------------------------
1 | class Klass {}
2 | function func() { return "func1" }
3 | let variable = "variable1"
4 | const constant = "constant1"
5 | 
6 | export { variable as default, Klass, func, constant }
7 | 


--------------------------------------------------------------------------------
/ch05/ex8/submodule2.js:
--------------------------------------------------------------------------------
1 | function func() { return "func2" }
2 | const constant = "constant2"
3 | 


--------------------------------------------------------------------------------
/ch12/ex1/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="ja">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>ウェブ</title>
 6 |   </head>
 7 |   <body>
 8 |     <section id="html" class="note">
 9 |       <h1>HTML</h1>
10 |       <p><strong>HTML</strong>は文書のコンテンツと構造を表現します。</p>
11 |     </section>
12 |     <section id="css" class="note">
13 |       <h1>CSS</h1>
14 |       <p><strong>CSS</strong>はHTMLのスタイルを指定します。</p>
15 |     </section>
16 |     <section id="js" class="note">
17 |       <h1>JavaScript</h1>
18 |       <p><strong>JavaScript</strong>はHTMLとCSSの両方を制御できます。</p>
19 |     </section>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/ch12/ex2/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="ja">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>ウェブ</title>
 6 |     <style>
 7 |     h1 {
 8 |       background:black;
 9 |       color:white;
10 |       margin:10px;
11 |       padding:10px;
12 |     }
13 |     p {
14 |       border:1px solid gray;
15 |       margin:10px;
16 |       padding:5px;
17 |     }
18 |     strong {
19 |       color:red;
20 |       font-size:1.5em;
21 |     }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <section id="html" class="note">
26 |       <h1>HTML</h1>
27 |       <p><strong>HTML</strong>は文書のコンテンツと構造を表現します。</p>
28 |     </section>
29 |     <section id="css" class="note">
30 |       <h1>CSS</h1>
31 |       <p><strong>CSS</strong>はHTMLのスタイルを指定します。</p>
32 |     </section>
33 |     <section id="js" class="note">
34 |       <h1>JavaScript</h1>
35 |       <p><strong>JavaScript</strong>はHTMLとCSSの両方を制御できます。</p>
36 |     </section>
37 |     <script>
38 |     document.body.addEventListener("click", function() {
39 |       this.style.filter = this.style.filter ? "" : "blur(5px)"
40 |     })
41 |     </script>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/ch12/ex3/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="ja">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Web Components</title>
 6 |   </head>
 7 |   <body>
 8 |     <info-panel name="Black Sabbath" power="E" speed="A" range="A"></info-panel>
 9 | 
10 |     <template id="info-panel-template">
11 |       <style>
12 |         .info-panel {
13 |           margin: 10px;
14 |           padding: 10px;
15 |           border: 1px solid gray;
16 |         }
17 |         dt {
18 |           width: 120px;
19 |           float: left;
20 |         }
21 |       </style>
22 |       <div class="info-panel">
23 |         <h1 id="name"></h1>
24 |         <dl>
25 |           <dt>Power</dt><dd id="power"></dd>
26 |           <dt>Speed</dt><dd id="speed"></dd>
27 |           <dt>Range</dt><dd id="range"></dd>
28 |         </dl>
29 |       </div>
30 |     </template>
31 | 
32 |     <script>
33 |       class InfoPanel extends HTMLElement {
34 |         constructor() {
35 |           super()
36 |           const template = document.getElementById("info-panel-template")
37 |           const content = template.content.cloneNode(true);
38 |           ["name", "power", "speed", "range"].forEach(id => 
39 |             content.getElementById(id).textContent = this.getAttribute(id))
40 | 
41 |           const shadow = this.attachShadow({mode: "open"})
42 |           shadow.append(content)
43 |         }
44 |       }
45 |       customElements.define("info-panel", InfoPanel)
46 |     </script>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/ch15/cssanimation.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <style>
 4 |       #box {
 5 |         border:1px solid gray;
 6 |         width:50px;
 7 |         height:50px;
 8 |         position:absolute;
 9 |         top:10px;
10 |         left:10px;
11 |       }
12 | 
13 |       #box.move {
14 |         animation-name:loop;
15 |         animation-duration:10s;
16 |         animation-iteration-count: infinite;
17 |       }
18 | 
19 |       @keyframes loop {
20 |         0% {
21 |           top:10px;
22 |           left:10px;
23 |           transform:rotate(0deg);
24 |         }
25 | 
26 |         33% {
27 |           top:calc(100vh - 60px);
28 |           left:10px;
29 |           transform:rotate(90deg);
30 |         }
31 | 
32 |         66% {
33 |           top:calc(100vh - 60px);
34 |           left:calc(100vw - 60px);
35 |           transform:rotate(180deg);
36 |         }
37 | 
38 |         100% {
39 |           top:10px;
40 |           left:10px;
41 |           transform:rotate(360deg);
42 |         }
43 |       }
44 |     </style>
45 |   </head>
46 |   <body>
47 |     <div id="box" class="move"></div>
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/ch15/csstransform.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <style>
 4 |       div {
 5 |         position:absolute;
 6 |         border:1px solid gray;
 7 |       }
 8 |       #box {
 9 |         width:50px;
10 |         height:50px;
11 |         top:10px;
12 |         left:10px;
13 |       }
14 |       .t {
15 |         transform:translate(0px, 0px);
16 |       }
17 |     </style>
18 |   </head>
19 |   <body>
20 |     <div style="top:40px; left:20px">
21 |     hello <div id="box" class="t">world</div>!!
22 |     </div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/ch15/csstransition.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <style>
 4 |       #box {
 5 |         border:1px solid gray;
 6 |         width:50px;
 7 |         height:50px;
 8 | 
 9 |         position:absolute;
10 |         top:calc(50vh - 25px);
11 |         left:calc(50vw - 25px);
12 | 
13 |         transition-property:top, left, transform;
14 |         transition-duration:2s;
15 |         transition-timing-function:ease-in-out;
16 |       }
17 |       #box.move {
18 |         top:0;
19 |         left:0;
20 |         transform:rotate(45deg);
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="box"></div>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/ch15/ex1/JavaScript-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreilly-japan/hands-on-javascript/79eb96f36be51098a4bb41806d3123229d2d0913/ch15/ex1/JavaScript-logo.png


--------------------------------------------------------------------------------
/ch15/ex1/Network-12716.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreilly-japan/hands-on-javascript/79eb96f36be51098a4bb41806d3123229d2d0913/ch15/ex1/Network-12716.mp4


--------------------------------------------------------------------------------
/ch15/ex1/brook1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreilly-japan/hands-on-javascript/79eb96f36be51098a4bb41806d3123229d2d0913/ch15/ex1/brook1.mp3


--------------------------------------------------------------------------------
/ch15/ex1/bulbul.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreilly-japan/hands-on-javascript/79eb96f36be51098a4bb41806d3123229d2d0913/ch15/ex1/bulbul.mp3


--------------------------------------------------------------------------------
/ch15/ex1/fall_morning_river.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreilly-japan/hands-on-javascript/79eb96f36be51098a4bb41806d3123229d2d0913/ch15/ex1/fall_morning_river.mp3


--------------------------------------------------------------------------------
/ch15/ex1/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <style>
 5 |     #audio {
 6 |       transition-property:transform, filter;
 7 |       transition-duration:2s;
 8 |       transition-timing-function:ease-in-out;
 9 |     }
10 |     #audio.invert-rotate {
11 |       filter: invert(100%);
12 |       transform: rotate(360deg);
13 |     }
14 |     </style>
15 |   </head>
16 |   <body>
17 |     <!-- https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png -->
18 |     <img id="image" src="./JavaScript-logo.png" width="200" />
19 |     <canvas id="canvas" width="200" height="200"></canvas>
20 |     <br />
21 |     <video id="video" src="./Network-12716.mp4" controls width="400"></video><br />
22 |     <audio id="audio" src="./brook1.mp3" controls></audio>
23 | 
24 |     <section>
25 |       <h3>Ref.</h3>
26 |       <ul>
27 |         <li><a href="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" target="_blank">Image</a></li>
28 |         <li><a href="https://pixabay.com/videos/network-loop-energy-technology-12716/" target="_blank">Video</a></li>
29 |         <li><a href="https://taira-komori.jpn.org/nature01.html" target="_blank">Audio</a></li>
30 |       </ul>
31 |     </section>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/ch15/ex1/refs.txt:
--------------------------------------------------------------------------------
1 | - https://taira-komori.jpn.org/nature01.html
2 |   - brook1
3 | 


--------------------------------------------------------------------------------
/ch15/ex1/takedown.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreilly-japan/hands-on-javascript/79eb96f36be51098a4bb41806d3123229d2d0913/ch15/ex1/takedown.mp4


--------------------------------------------------------------------------------
/ch15/ex2/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |   </head>
 5 |   <body>
 6 |     <canvas id="canvas" width="200" height="200"></canvas>
 7 |     <script>
 8 |     const canvas = document.getElementById("canvas")
 9 | 
10 |     const gl = canvas.getContext("webgl")
11 | 
12 |     const vertices = [-0.5, 0.5, -0.5, -0.5, 0.5, -0.5]
13 |     const vertexBuffer = gl.createBuffer()
14 |     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
15 |     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)
16 |     gl.bindBuffer(gl.ARRAY_BUFFER, null)
17 | 
18 |     const vertexCode = `
19 |       attribute vec2 coordinates;
20 |       void main(void) {
21 |         gl_Position = vec4(coordinates, 0., 1.);
22 |       }
23 |     `
24 |     const vertexShader = gl.createShader(gl.VERTEX_SHADER)
25 |     gl.shaderSource(vertexShader, vertexCode)
26 |     gl.compileShader(vertexShader)
27 | 
28 |     const fragmentCode = `
29 |       void main(void) {
30 |         gl_FragColor = vec4(1., 1., 1., 1.);
31 |       }
32 |     `
33 |     const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
34 |     gl.shaderSource(fragmentShader, fragmentCode)
35 |     gl.compileShader(fragmentShader)
36 | 
37 |     const shaderProgram = gl.createProgram()
38 |     gl.attachShader(shaderProgram, vertexShader) 
39 |     gl.attachShader(shaderProgram, fragmentShader)
40 |     gl.linkProgram(shaderProgram)
41 |     gl.useProgram(shaderProgram)
42 | 
43 |     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
44 |     const coordinates = gl.getAttribLocation(shaderProgram, "coordinates")
45 |     gl.vertexAttribPointer(coordinates, 2, gl.FLOAT, false, 0, 0)
46 |     gl.enableVertexAttribArray(coordinates)
47 | 
48 |     gl.clearColor(0., 0., 0., 1.)
49 |     gl.enable(gl.DEPTH_TEST) 
50 |     gl.clear(gl.COLOR_BUFFER_BIT)
51 |     gl.viewport(0, 0, canvas.width, canvas.height)
52 |     gl.drawArrays(gl.TRIANGLES, 0, 3)
53 |     </script>
54 |   </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/ch15/webgl.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <body>
 4 |     <canvas width="300" height="300" id="glcanvas"></canvas>
 5 | 		
 6 |     <script>
 7 |       // glコンテキストを用意する
 8 |       const canvas = document.getElementById('glcanvas');
 9 |       const gl = canvas.getContext('webgl');
10 | 
11 |       // バッファオブジェクトに頂点を保存する
12 |       const vertices = [-0.5, 0.5, -0.5, -0.5, 0.5, -0.5,];
13 |       const vertexBuffer = gl.createBuffer();
14 |       gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
15 |       gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
16 |       gl.bindBuffer(gl.ARRAY_BUFFER, null);
17 | 
18 |       // 頂点シェーダーを作成する
19 |       const vertexCode = `
20 |         attribute vec2 coordinates;
21 |         varying vec2 color;
22 |         void main(void) {
23 |           gl_Position = vec4(coordinates, 0., 1.);
24 |           color = coordinates * 0.5 + 0.5;
25 |         }
26 |       `;
27 |       const vertexShader = gl.createShader(gl.VERTEX_SHADER);
28 |       gl.shaderSource(vertexShader, vertexCode);
29 |       gl.compileShader(vertexShader);
30 | 
31 |       // フラグメントシェーダーを作成する
32 |       const fragmentCode = `
33 |         precision mediump float;
34 |         varying vec2 color;
35 |         void main(void) {
36 |           //gl_FragColor = vec4(1., 1., 1., 1.);
37 |           gl_FragColor = vec4(color, 0., 1.);
38 |         }
39 |       `;
40 |       const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
41 |       gl.shaderSource(fragmentShader, fragmentCode);
42 |       gl.compileShader(fragmentShader);
43 | 
44 |       // シェーダープログラムを作成する
45 |       const shaderProgram = gl.createProgram();
46 |       gl.attachShader(shaderProgram, vertexShader); 
47 |       gl.attachShader(shaderProgram, fragmentShader);
48 |       gl.linkProgram(shaderProgram);
49 |       gl.useProgram(shaderProgram);
50 | 
51 |       // シェーダープログラムとバッファオブジェクトを関連付ける
52 |       gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
53 |       const coordinates = gl.getAttribLocation(shaderProgram, "coordinates");
54 |       gl.vertexAttribPointer(coordinates, 2, gl.FLOAT, false, 0, 0);
55 |       gl.enableVertexAttribArray(coordinates);
56 | 
57 |       // 描画する
58 |       gl.clearColor(0., 0., 0., 1.);
59 |       gl.enable(gl.DEPTH_TEST); 
60 |       gl.clear(gl.COLOR_BUFFER_BIT);
61 |       gl.viewport(0, 0, canvas.width, canvas.height);
62 |       gl.drawArrays(gl.TRIANGLES, 0, 3);
63 |     </script>
64 |   </body>
65 | </html>
66 | <html>
67 | <body>
68 | 


--------------------------------------------------------------------------------
/ch17/ex1/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <meta charset="utf-8">
 4 |   </head>
 5 |   <body>
 6 |     /proxy/以下で拡張子を".html"にすると生成（プロキシ）された内容が返ります。
 7 |     <script>
 8 |       window.addEventListener('load', () => {
 9 |         navigator.serviceWorker.register('/ch17/ex1/sw.js').then(registration => {
10 |           console.log('ServiceWorker登録成功');
11 |           console.log(registration)
12 |         }, err => {
13 |           console.log('ServiceWorker登録失敗: ', err);
14 |         });
15 |       });
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/ch17/ex1/sw.js:
--------------------------------------------------------------------------------
 1 | self.addEventListener('install', event => {
 2 |   console.log(`install:${event}`)
 3 | });
 4 | 
 5 | self.addEventListener('activate', event => {
 6 |   console.log(`activate:${event}`)
 7 | });
 8 | 
 9 | self.addEventListener('fetch', event => {
10 |   event.respondWith(new Promise((resolve, reject) => {
11 |     const pathname = new URL(event.request.url).pathname
12 |     console.log(pathname)
13 |     if (pathname.startsWith("/ch17/ex1/proxy/")) {
14 |       if (pathname.endsWith(".html")) {
15 |         resolve(new Response("Proxy World!"))
16 |       } else {
17 |         resolve(Response.error())
18 |       }
19 |     } else {
20 |       resolve(fetch(event.request))
21 |     }
22 |   }))
23 | });
24 | 


--------------------------------------------------------------------------------
/ch17/ex2/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <meta charset="utf-8">
 4 |   </head>
 5 |   <body>
 6 |     <script>
 7 |       window.addEventListener('load', () => {
 8 |         navigator.serviceWorker.register('/ch17/ex2/sw1.js', {scope:"./v1/"}).then(registration => {
 9 |           console.log('ServiceWorker登録成功');
10 |         }, err => {
11 |           console.log('ServiceWorker登録失敗: ', err);
12 |         });
13 |       });
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/ch17/ex2/sw1.js:
--------------------------------------------------------------------------------
 1 | self.addEventListener('install', event => {
 2 |   event.waitUntil(
 3 |     caches.open('v1').then(cache => {
 4 |       return cache.addAll([
 5 |         '/ch17/ex2/v1/page1.html'
 6 |       ]);
 7 |     })
 8 |   );
 9 | });
10 | 
11 | self.addEventListener('fetch', event => {
12 |   event.respondWith(caches.match(event.request).then(response => {
13 |     return response || fetch(event.request).then(response => {
14 |       return caches.open('v1').then(cache => {
15 |         cache.put(event.request, response.clone())
16 |         return response
17 |       })
18 |     })
19 |   }));
20 | });
21 | 


--------------------------------------------------------------------------------
/ch17/ex2/v1/page1.html:
--------------------------------------------------------------------------------
1 | <html><body>page1
2 | 


--------------------------------------------------------------------------------
/ch17/ex2/v1/page2.html:
--------------------------------------------------------------------------------
1 | <html><body>page2
2 | 


--------------------------------------------------------------------------------
/ch17/ex2/v2/page3.html:
--------------------------------------------------------------------------------
1 | <html><body>page3
2 | 


--------------------------------------------------------------------------------
/ch17/ex2/v2/page4.html:
--------------------------------------------------------------------------------
1 | <html><body>page4
2 | 


--------------------------------------------------------------------------------
/ch17/ex3/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <meta charset="utf-8">
 4 |   </head>
 5 |   <body>
 6 |     <script>
 7 |       function urlBase64ToUint8Array(base64String) {
 8 |         const padding = '='.repeat((4 - base64String.length % 4) % 4);
 9 |         const base64 = (base64String + padding)
10 |           .replace(/-/g, '+')
11 |           .replace(/_/g, '/');
12 |        
13 |         const rawData = window.atob(base64);
14 |         const outputArray = new Uint8Array(rawData.length);
15 |        
16 |         for (let i = 0; i < rawData.length; ++i) {
17 |           outputArray[i] = rawData.charCodeAt(i);
18 |         }
19 |         return outputArray;
20 |       }
21 | 
22 |       const vapidKey = "BJpqQp6CMl63XZRfvi3NFD5NwxU4bsHA7m8fY69WuRre263NAsKakFPjTLHrA5GqM1itivgddBKQMtgJ1rUF3JI"
23 |       const convertedVapidKey = urlBase64ToUint8Array(vapidKey)
24 | 
25 |       window.addEventListener('load', () => {
26 |         navigator.serviceWorker.register('/ch17/ex3/sw.js').then(registration => {
27 |           registration.pushManager.subscribe({
28 |             userVisibleOnly: true,
29 |             applicationServerKey: convertedVapidKey
30 |           }).then(subscription => {
31 |             console.log(subscription)
32 |           })
33 |         })
34 |       })
35 |     </script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/ch17/ex3/sw.js:
--------------------------------------------------------------------------------
1 | self.addEventListener('push', event => {
2 |   //console.log(`プッシュ通知: ${event.data.text()}`)
3 |   const data = event.data.json()
4 |   event.waitUntil(self.registration.showNotification(data.title, {body:data.body}))
5 | })
6 | 


--------------------------------------------------------------------------------
/ch17/ex4/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreilly-japan/hands-on-javascript/79eb96f36be51098a4bb41806d3123229d2d0913/ch17/ex4/icon.png


--------------------------------------------------------------------------------
/ch17/ex4/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <link rel="manifest" href="manifest.webmanifest">
 6 |   </head>
 7 |   <body>
 8 |     Installable app
 9 |     <script>
10 |       window.addEventListener('load', () => {
11 |         navigator.serviceWorker.register('/ch17/ex4/sw.js').then(registration => {
12 |           console.log('ServiceWorker登録成功');
13 |           console.log(registration)
14 |         }, err => {
15 |           console.log('ServiceWorker登録失敗: ', err);
16 |         });
17 |       });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/ch17/ex4/manifest.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "サンプルアプリ名",
 3 |   "description": "どのようなアプリであるかの説明",
 4 |   "display": "fullscreen",
 5 |   "icons": [{
 6 |     "src": "/ch17/ex4/icon.png",
 7 |     "sizes": "256x256"
 8 |   }],
 9 |   "start_url": "/ch17/ex4/"
10 | }
11 | 


--------------------------------------------------------------------------------
/ch17/ex4/sw.js:
--------------------------------------------------------------------------------
 1 | self.addEventListener('install', event => {
 2 |   console.log(`install:${event}`)
 3 | });
 4 | 
 5 | self.addEventListener('activate', event => {
 6 |   console.log(`activate:${event}`)
 7 | });
 8 | 
 9 | self.addEventListener('fetch', event => {
10 |   event.respondWith(new Promise((resolve, reject) => {
11 |     resolve(new Response("Installable app"))
12 |   }))
13 | });
14 | 


--------------------------------------------------------------------------------
/ch17/ex5/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <body>
 4 |     <button id="buy">購入</button>
 5 |     <script>
 6 |       document.getElementById("buy").addEventListener("click", () => {
 7 |         let supportedInstruments = [{
 8 |             supportedMethods: ["basic-card"],
 9 |             data: { supportedNetworks: ["visa", "mastercard"] }
10 |         }]
11 |         let details = {
12 |           displayItems: [{
13 |             label: "かけそば",
14 |             amount: { currency: "JPY", value: "150" }
15 |           }],
16 |           total: {
17 |             label: "合計",
18 |             amount: { currency: "JPY", value : "150" }
19 |           }
20 |         }
21 |         let request = new PaymentRequest(supportedInstruments, details)
22 |         request.show().then(result => {
23 |           console.log(result.toJSON())
24 |           // result.toJSON()をサーバーに送信して決済を実行する
25 |           result.complete("success")
26 |         })
27 |       })
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/ch19/index.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <html>
3 |   <body>
4 |     <input><br />
5 |     <canvas id="canvas" width="200" height="200"></canvas>
6 |   </body>
7 | </html>
8 | 


--------------------------------------------------------------------------------
/ch19/js/worker1.js:
--------------------------------------------------------------------------------
1 | console.log("worker1実行中")
2 | while (true) {}
3 | 


--------------------------------------------------------------------------------
/ch19/js/worker2.js:
--------------------------------------------------------------------------------
1 | self.addEventListener("message", event => {
2 |   const name = event.data
3 |   if (typeof name !== "string") throw "名前が文字列ではありません"
4 |   self.postMessage(`Hello, ${name}`)
5 | })
6 | 


--------------------------------------------------------------------------------
/ch19/js/worker3.js:
--------------------------------------------------------------------------------
1 | let messageData
2 | self.addEventListener("message", event => messageData = event.data)
3 | 


--------------------------------------------------------------------------------
/ch19/js/worker4.js:
--------------------------------------------------------------------------------
1 | importScripts("https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.2/math.js")
2 | self.addEventListener("message", event => {
3 |   postMessage(math.evaluate(event.data))
4 | })
5 | 


--------------------------------------------------------------------------------
/ch19/js/worker5.js:
--------------------------------------------------------------------------------
 1 | let canvas
 2 | self.addEventListener("message", event => {
 3 |   if ("canvas" in event.data) canvas = event.data.canvas
 4 | 
 5 |   const ctx = canvas.getContext("2d")
 6 |   ctx.fillStyle = event.data.color
 7 |   ctx.beginPath()
 8 |   ctx.moveTo(50, 50)
 9 |   ctx.lineTo(50, 80)
10 |   ctx.lineTo(10, 80)
11 |   ctx.closePath()
12 |   ctx.fill()
13 |   ctx.beginPath()
14 |   ctx.moveTo(55, 80)
15 |   ctx.arc(125, 80, 70, Math.PI, 0, true)
16 |   ctx.bezierCurveTo(170, 100, 120, -50, 55, 50)
17 |   ctx.closePath()
18 |   ctx.moveTo(105, 50)
19 |   ctx.ellipse(85, 50, 20, 15, 0, 0, 2 * Math.PI)
20 |   ctx.moveTo(90, 50)
21 |   ctx.arc(80, 50, 10, 0, 2 * Math.PI)
22 |   ctx.rect(10, 85, 40, 5)
23 |   ctx.fill()
24 | })
25 | 


--------------------------------------------------------------------------------
/ch19/js/worker6.js:
--------------------------------------------------------------------------------
 1 | let messageData = "初期値"
 2 | 
 3 | self.addEventListener("connect", event => {
 4 |   let port = event.ports[0]
 5 |   port.addEventListener("message", event => {
 6 |     let prevData = messageData
 7 |     messageData = event.data
 8 |     port.postMessage(prevData)
 9 |   })
10 |   port.start()
11 | })
12 | 


--------------------------------------------------------------------------------
/ch19/js/worker7.js:
--------------------------------------------------------------------------------
 1 | const drawBird = (scale, dx, dy) => {
 2 |   ctx.clearRect(0, 0, 200, 200)
 3 |   ctx.beginPath()
 4 |   ctx.moveTo(50*scale+dx, 50*scale+dy)
 5 |   ctx.lineTo(50*scale+dx, 80*scale+dy)
 6 |   ctx.lineTo(10*scale+dx, 80*scale+dy)
 7 |   ctx.closePath()
 8 |   ctx.fill()
 9 |   ctx.beginPath()
10 |   ctx.moveTo(55*scale+dx, 80*scale+dy)
11 |   ctx.arc(125*scale+dx, 80*scale+dy, 70*scale, Math.PI, 0, true)
12 |   ctx.bezierCurveTo(170*scale+dx, 100*scale+dy, 120*scale+dx, -50*scale+dy, 55*scale+dx, 50*scale+dy)
13 |   ctx.closePath()
14 |   ctx.moveTo(105*scale+dx, 50*scale+dy)
15 |   ctx.ellipse(85*scale+dx, 50*scale+dy, 20*scale, 15*scale, 0, 0, 2 * Math.PI)
16 |   ctx.moveTo(90*scale+dx, 50*scale+dy)
17 |   ctx.arc(80*scale+dx, 50*scale+dy, 10*scale, 0, 2 * Math.PI)
18 |   ctx.rect(10*scale+dx, 85*scale+dy, 40*scale, 5*scale)
19 |   ctx.fill()
20 | }
21 | 
22 | const moveBird = timestamp => {
23 |   if (stopping) return
24 | 
25 |   const angle = (timestamp / 20 % 360) / 180 * Math.PI
26 |   const scale = 0.3
27 |   const dx = 70 + 70 * Math.cos(angle*2)
28 |   const dy = 70 + 70 * Math.sin(angle*5)
29 |   drawBird(scale, dx, dy)
30 | 
31 |   requestAnimationFrame(moveBird)
32 | }
33 | 
34 | let ctx
35 | let stopping = true
36 | self.addEventListener("message", event => {
37 |   if ("stop" in event.data) {
38 |     stopping = true
39 |   } else if (("canvas" in event.data || "start" in event.data) && stopping) {
40 |     stopping = false
41 |     if (!ctx) ctx = event.data.canvas.getContext("2d")
42 |     requestAnimationFrame(moveBird)
43 |   }
44 | })
45 | 


--------------------------------------------------------------------------------
/ch19/wasm/add.wasm:
--------------------------------------------------------------------------------
1 | asm


2 | `
`consolelogjsmem



add

3 | 


  
j!A 6 


--------------------------------------------------------------------------------
/ch19/wasm/add.wat:
--------------------------------------------------------------------------------
 1 | (module
 2 |   ;; JSから受け取る関数
 3 |   (import "console" "log" (func $log (param i32)))
 4 | 
 5 |   ;; JSと共有する記憶領域
 6 |   (import "js" "mem" (memory 1))
 7 | 
 8 |   ;; JSから利用できるadd関数定義
 9 |   (func (export "add") (param $v1 i32) (param $v2 i32)
10 | 
11 |     ;; 変数宣言
12 |     (local $result i32)
13 | 
14 |     ;; 引数を合計した結果を$resultに保存
15 |     (set_local $result (i32.add (get_local $v1) (get_local $v2)))
16 | 
17 |     ;; 結果を共有領域に保存
18 |     (i32.store (i32.const 0) (get_local $result))
19 | 
20 |     ;; 結果を$log関数で表示
21 |     (call $log (get_local $result))
22 |   )
23 | )
24 | 


--------------------------------------------------------------------------------
/hands-on-javascript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oreilly-japan/hands-on-javascript/79eb96f36be51098a4bb41806d3123229d2d0913/hands-on-javascript.png


--------------------------------------------------------------------------------
/toc.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |   </head>
 6 |   <body>
 7 |     <ul>
 8 |       <li><a href="ch01/">1章 学び始めるまえに</a></li>
 9 |       <li><a href="ch05/">5章 モジュールを学ぶ</a></li>
10 |       <li><a href="ch12/">12章 Webを学ぶ</a></li>
11 |       <li><a href="ch15/">15章 マルチメディアを学ぶ</a></li>
12 |       <li><a href="ch17/">17章 PWAを学ぶ</a></li>
13 |       <li><a href="ch19/">19章 パフォーマンスを学ぶ</a></li>
14 |     </ul>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------