ハンズオン WebAssembly

Web サイトのパフォーマンス向上を実現させる新技術の解説書!
WebAssembly は Web サイトのパフォーマンス向上のため Mozilla 社によって開発された新技術で、JavaScript と比較すると最大で 3 倍速くなると言われています。JavaScript の諸問題を補完し、共存を目指す思想のもと開発が進められています。本書は、WebAssembly の技術的な原理を基礎からしっかり学ぶことができ、かつ実践的な開発テクニックにまで踏み込んだ開発者向けの技術書です。

WebAssembly のモジュールを C++ と Emscripten で作り、JavaScript と連携させてブラウザーや Node.js で動かす方法を、基礎の原理から動的リンク、スレッド処理、デバッグとテストまで段階的に学ぶ開発者向けの解説書です。『ハンズオン WebAssembly』は Gerard Gallant の著作を、北原 憲、洲崎 俊、西谷 完太、磯野 亘平、米内 貴志の 5 名が訳したもので、原書は WebAssembly in Action、オライリー・ジャパンから 2022 年 10 月 12 日に発行されました。副題は「Emscripten と C++ を使って学ぶ WebAssembly アプリケーションの開発方法」で、版元の紹介文は、プログラミング言語は主に C++ を取り扱い、簡単な例から複雑な話題へ進む構成と説明しています。

4 部 13 章の構成、asm.js の経緯から Mocha によるテストまで

第 I 部「WebAssembly の初歩」では、1 章で前身の asm.js から WebAssembly MVP への経緯、解決する問題、コンパイルからインスタンス化までの流れ、モジュールの構造とテキスト形式、安全性を概観し、2 章で Known セクションと Custom セクション、3 章で Emscripten の出力オプションと、HTML テンプレート付き、JavaScript 付き、モジュール単体という出力の違いを扱います。第 II 部「WebAssembly モジュールの導入」は、4 章の既存の C++ コードの再利用、5 章の JavaScript を呼び出すモジュール、6 章の関数ポインターを用いた連携で、ブラウザー側のコードとの受け渡しを固めます。第 III 部「高度な話題」は 7 章と 8 章の動的リンク、9 章の Web Worker と pthread によるスレッド処理、10 章の Node.js での活用、第 IV 部「デバッグとテスト」は 11 章のテキスト形式、12 章のデバッグ、13 章の Mocha と Chai を使ったテストで締めくくります。付録には、Python や Emscripten、Node.js、WebAssembly Binary Toolkit の導入、ccall と cwrap による関数の呼び出し、Emscripten のマクロ、テキスト形式の補足が並び、3 章から 13 章の演習問題の解答も付録 D に収められています。

グルーコードとモジュールの境界を理解する意味

WebAssembly は、ブラウザー上で JavaScript 以外の言語から作ったコードを効率よく安全に実行するためのバイナリ形式で、その出発点には、JavaScript の部分集合に型の手がかりを持たせてエンジンに最適化させる asm.js の試みがありました。JavaScript はエンジンの JIT コンパイル によって高速化されてきたものの、実行しながら型を推測する仕組みである以上、性能には揺らぎが残ります。あらかじめ型の決まった低水準の命令として配る WebAssembly は、この揺らぎを小さくし、C や C++ の既存資産をブラウザーへ持ち込む道を開きました。一方で、モジュール自体は DOM を直接操作できず、文字列や配列も数値と線形メモリの上のバイト列としてしか受け渡せません。Emscripten が生成する JavaScript のグルーコードは、この境界をまたぐ変換を肩代わりする層であり、何を自動でしてくれて何を自分で書く必要があるのかを理解しているかどうかで、デバッグの難しさが大きく変わります。本書は出力オプションの違いや、標準 C ライブラリ関数を使わないモジュールの作成、テキスト形式の読み方まで扱っており、この境界を自分の目で確かめる手がかりになります。

動的リンクと Web Worker のスレッド処理に進むための前提

読み進めるには、C++ でコードを書いてコンパイルできることと、HTML と JavaScript で簡単な Web ページを組めることが前提になります。WebAssembly を初めて触る人でも 1 章から順に読めます。ブラウザーの JavaScript は基本的に 1 本のメインスレッドで画面の処理と計算を受け持つため、重い計算を並行させるには Web Worker のような別スレッドの仕組みが要ります。C++ の pthread をブラウザーで動かす場合もこの上に載せる形になり、メモリを共有する SharedArrayBuffer が必要なため、配信する側にもクロスオリジン分離の設定が求められます。Emscripten は版を重ねるごとにオプションや既定値が変わるツールです。また版元の紹介文が示すとおり扱う言語は主に C++ で、Rust で WebAssembly のモジュールを作りたい人には、言語固有の道具立てが合いません。

既存の C++ のライブラリや計算処理を Web アプリケーションに組み込みたい人、ブラウザーでの処理速度の限界に突き当たり、モジュール単体の出力から動的リンク、スレッド処理まで一通りの選択肢を把握したい人に向けて、本書は仕組みと実装を同じ流れで扱います。本書には演習問題と解答も収められています。