ハンズオンWebAssembly

―EmscriptenとC++を使って学ぶWebAssemblyアプリケーションの開発方法

[cover photo]
TOPICS
Web , C/C++
発行年月日
PRINT LENGTH
516
ISBN
978-4-8144-0010-2
原書
WebAssembly in Action
FORMAT
Print PDF EPUB
Ebook
4,180円
Ebookを購入する
Print
4,180円

WebAssemblyはWebブラウザ上で効率的かつ安全にコードを実行するために開発された技術です。様々なプラットフォームでの実行や、C++やRustなどのプログラミング言語で開発が可能です。本書はWebAssemblyの技術的な原理、動作、どのようなことが可能なのかを基礎からしっかり学ぶことができ、かつ実践的な開発テクニックにまで踏み込んだ開発者向けの解説書です。プログラミング言語は主にC++を取り扱います。簡単な例から解説をはじめ、動的リンクや並列処理、デバッグといった複雑な話題を解説する構成になっており、WebAssemblyモジュールの開発を助ける1冊です。

目次

訳者まえがき
はじめに

第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 コードをテストする

索引