ハンズオンWebAssembly
オライリー・ジャパン
著者：Gerard Gallant
訳者：北原憲、洲崎俊、西谷完太、磯野亘平、米内貴志
訳者まえがき
はじめに
第I部 WebAssemblyの初歩
1章 WebAssemblyとの邂逅
1.1 WebAssemblyの概要
1.1.1 WebAssemblyの前身asm.js
1.1.2 asm.jsからWebAssembly MVPへ
1.2 WebAssemblyが解決する問題
1.2.1 パフォーマンス改善
1.2.2 JavaScriptよりも速い起動時間
1.2.3 ブラウザでのJavaScript以外のプログラミング言語の使用
1.2.4 コードの再利用
1.3 WebAssemblyの動作原理
1.3.1 コンパイルの流れ
1.3.2 WebAssemblyモジュールのロードからインスタンス化までの流れ
1.4 WebAssemblyモジュールの構造
1.4.1 プリアンブル
1.4.2 Knownセクション
1.4.3 Customセクション
1.5 WebAssemblyのテキスト形式
1.6 WebAssemblyの安全性
1.7 WebAssemblyモジュールの開発に利用できるプログラミング言語
1.8 開発したWebAssemblyモジュールの利用
1.9 まとめ
2章 WebAssemblyモジュールの基礎
2.1 Knownセクション
2.2 Customセクション
2.3 まとめ
3章 WebAssemblyモジュール開発の第一歩
3.1 Emscripten
3.2 WebAssemblyモジュール
3.2.1 WebAssemblyモジュールが苦手なこと
3.3 Emscriptenの出力オプション
3.4 EmscriptenによるC/C++のコンパイルとHTMLテンプレートの利用
3.5 EmscriptenによるJavaScriptのコードの生成
3.5.1 EmscriptenによるC/C++のコンパイルによるJavaScriptの生成
3.5.2 HTMLページの作成
3.6 EmscriptenでWebAssemblyモジュールのみを作成する場合
3.6.1 EmscriptenによるC/C++のコードをサイドモジュールとしてコンパイルする方法
3.6.2 ブラウザでのWebAssemblyモジュールのロードとインスタンス化
3.7 機能の検知：WebAssemblyが使用できるかどうかを確認する手法
3.8 実用例
3.9 演習問題
3.10 まとめ
第II部 WebAssemblyモジュールの導入
4章 既存のC++コードの再利用
4.1 WebAssemblyモジュールとJavaScriptのコードの生成
4.1.1 C++コードの変更
4.1.2 WebAssemblyモジュールへのコンパイル
4.1.3 Webページの作成
4.1.4 WebAssemblyモジュールと連携するJavaScriptのコードの作成
4.1.5 動作確認
4.2 標準Cライブラリ関数を利用しないC/C++のコードからのWebAssemblyモジュールの作成
4.2.1 C++コードの変更
4.2.2 WebAssemblyモジュールへのコンパイル
4.2.3 WebAssemblyモジュールと連携するためのJavaScriptのコードの作成
4.2.4 動作確認
4.3 実用例
4.4 演習問題
4.5 まとめ
5章 JavaScriptを呼び出すWebAssemblyモジュールの作成
5.1 EmscriptenによるJavaScriptのコードとWebAssemblyモジュールの生成
5.1.1 C++のコードの変更
5.1.2 Emscriptenが生成するJavaScriptのコードに組み込むJavaScriptのコードの作成
5.1.3 WebAssemblyモジュールへのコンパイル
5.1.4 WebページのJavaScriptのコードの変更
5.1.5 動作確認
5.2 EmscriptenでJavaScriptのコードを生成せずにWebAssemblyモジュールを作成
5.2.1 C++のコードの変更
5.2.2 WebAssemblyモジュールへのコンパイル
5.2.3 WebAssemblyモジュールと連携するJavaScriptのコードの調整
5.2.4 動作確認
5.3 実用例
5.4 演習問題
5.5 まとめ
6章 関数ポインタを用いたWebAssemblyモジュールとJavaScriptのコードの連携
6.1 EmscriptenによるJavaScriptのコードとWebAssemblyモジュールの作成
6.1.1 JavaScriptのコードから渡された関数ポインタの使用
6.1.2 C++のコードの調整
6.1.3 WebAssemblyモジュールへのコンパイル
6.1.4 WebページのJavaScriptのコードの調整
6.1.5 動作確認
6.2 Emscriptenが生成するJavaScriptなしのWebAssemblyモジュールの作成
6.2.1 JavaScriptのコードからWebAssemblyモジュールに渡された関数ポインタの使用
6.2.2 C++のコードの変更
6.2.3 WebAssemblyモジュールへのコンパイル
6.2.4 WebAssemblyモジュールと連携するJavaScriptのコードの調整
6.2.5 動作確認
6.3 実用例
6.4 演習問題
6.5 まとめ
第Ⅲ部 高度な話題
7章 動的リンクの基礎
7.1 動的リンクの長所と短所
7.2 動的リンクの実装方法
7.2.1 サイドモジュールとメインモジュール
7.2.2 dlopen関数による動的リンク
7.2.3 dynamicLibraries配列による動的リンク
7.2.4 WebAssembly JavaScript APIによる動的リンク
7.3 動的リンクのまとめ
7.4 実用例
7.5 演習問題
7.6 まとめ
8章 動的リンクの実装
8.1 WebAssemblyモジュールの作成
8.1.1 validate.cppの処理の分割
8.1.2 発注フォームの処理用の新しいC++のコードの作成
8.1.3 サイドモジュールの生成
8.1.4 検証の問題を処理するJavaScriptの関数の定義
8.1.5 メインモジュールの生成
8.2 Webページの調整
8.2.1 JavaScriptのコードの調整
8.2.2 動作確認
8.3 実用例
8.4 演習問題
8.5 まとめ
9章 Web Workerとpthreadによるスレッド処理
9.1 Web Workerの利点
9.2 Web Workerの使用が好ましい場合
9.3 Web WorkerによるWebAssemblyモジュールのプリフェッチ
9.3.1 calculate_primes.cppの変更
9.3.2 EmscriptenによるWebAssemblyモジュールの生成
9.3.3 正しい場所へのファイルのコピー
9.3.4 Webページ用のHTMLファイルの作成
9.3.5 Webページの処理に用いるJavaScriptのコードの作成
9.3.6 Web Workerの処理をするJavaScriptのコードの作成
9.3.7 動作確認
9.4 pthreadの使用
9.4.1 pthreadによるcalculate_primes.cppの処理の実装
9.4.2 EmscriptenによるWebAssemblyモジュールの生成
9.4.3 動作確認
9.5 実用例
9.6 演習問題
9.7 まとめ
10章 Node.jsでのWebAssemblyモジュールの活用
10.1 これまでの復習
10.2 サーバサイドの入力検証
10.3 Emscriptenで作成したWebAssemblyモジュールの使用
10.3.1 WebAssemblyモジュールのロード
10.3.2 WebAssemblyモジュールの呼び出し
10.3.3 JavaScriptのコードの呼び出し
10.3.4 関数ポインタの呼び出し
10.4 WebAssembly JavaScript APIを使用
10.4.1 WebAssemblyモジュールのロードとインスタンス化
10.4.2 WebAssemblyモジュールの関数呼び出し
10.4.3 WebAssemblyモジュールからJavaScriptの呼び出し
10.4.4 WebAssemblyモジュールからJavaScriptの関数ポインタの呼び出し
10.5 実用例
10.6 演習問題
10.7 まとめ
第Ⅳ部 デバッグとテスト
11章 WebAssemblyのテキスト形式
11.1 WebAssemblyテキスト形式を利用したゲームの内部処理の作成
11.1.1 モジュールのセクション
11.1.2 コメント
11.1.3 関数シグネチャの書式
11.1.4 moduleノード
11.1.5 importノード
11.1.6 globalノード
11.1.7 exportノード
11.1.8 startノード
11.1.9 Codeセクションの定義
11.1.10 typeノード
11.1.11 dataノード
11.2 テキスト形式からのWebAssemblyモジュールの生成
11.3 Emscriptenで生成されたWebAssemblyモジュール
11.3.1 C++ファイルの作成
11.3.2 WebAssemblyモジュールの生成
11.4 HTMLとJavaScriptのコードの作成
11.4.1 HTMLファイルの変更
11.4.2 JavaScriptのコードの作成
11.5 動作確認
11.6 実用例
11.7 演習問題
11.8 まとめ
12章 デバッグ
12.1 ゲームを拡張する
12.2 HTMLの変更
12.3 試行回数の表示
12.3.1 generateCards関数の変更
12.3.2 WebAssemblyのテキスト形式のコードの変更
12.3.3 WebAssemblyモジュールの生成
12.3.4 変更の動作確認
12.4 試行回数をインクリメントする
12.4.1 updateTriesTotal関数の実装
12.4.2 テキスト形式を変更する
12.4.3 WebAssemblyモジュールの生成
12.4.4 変更のテスト
12.5 結果画面の更新
12.5.1 levelComplete関数の変更
12.5.2 WebAssemblyのテキスト形式のコードの変更
12.5.3 WebAssemblyモジュールの生成
12.5.4 動作確認
12.6 演習問題
12.7 まとめ
13章 テスト̶̶そして？
13.1 JavaScriptのテストフレームワークのインストール
13.1.1 package.json
13.1.2 MochaとChai のインストール
13.2 テストの作成と実行
13.2.1 テストの作成
13.2.2 コマンドラインからのテストの実行
13.2.3 テストをロードするHTMLページ
13.2.4 ブラウザからのテストの実行
13.2.5 テストの成功の確認
13.3 ここからどう進もうか？
13.4 演習問題
13.5 まとめ
付録A インストールとツールのセットアップ
A.1 Python
A.1.1 PythonによるWebサーバの起動
A.1.2 WebAssemblyメディアタイプ
A.2 Emscripten
A.2.1 Emscripten SDKのダウンロード
A.2.2 Windowsを使用している場合
A.2.3 MacまたはLinuxを使用している場合
A.2.4 インストール時における問題の回避
A.3 Node.js
A.4 WebAssembly Binary Toolkit
A.5 Bootstrap
付録B ccall、cwrap、直接的な関数の呼び出し
B.1 ccall関数
B.1.1 簡単なWebAssemblyモジュールの構築
B.1.2 WebAssemblyモジュールと連携するWebページの構築
B.2 cwrap関数
B.2.1 cwrap関数を使用するためのJavaScriptのコードの修正
B.3 直接的な関数の呼び出し
B.4 モジュールへの配列の受け渡し
付録C Emscriptenマクロ
C.1 emscripten_run_scriptシリーズのマクロ
C.2 EM_JSシリーズのマクロ
C.2.1 パラメータ値を持たないマクロ関数の定義
C.2.2 パラメータ値を持つマクロ関数の定義
C.2.3 パラメータにポインタを用いるマクロ関数の定義
C.2.4 文字列のポインタを返す
C.3 EM_ASMシリーズのマクロ
C.3.1 EM_ASM
C.3.2 EM_ASM_
C.3.3 パラメータとしてポインタを渡す
C.3.4 EM_ASM_INTとEM_ASM_DOUBLE
C.3.5 文字列ポインタを返す
付録D 演習問題の解答
D.1 第3章
D.2 第4章
D.3 第5章
D.4 第6章
D.5 第7章
D.6 第8章
D.7 第9章
D.8 第10章
D.9 第11章
D.10 第12章
D.11 第13章
付録E テキスト形式の補足
E.1 制御構文
E.1.1 if文
E.1.2 ループ処理
E.2 関数ポインタ
E.2.1 コードをテストする
索引