WebAssemblyとは何か、Reactとの関係

WebAssembly（WASM）は、Webブラウザーでネイティブに近い速度で実行できるよう設計されたバイナリ命令形式です。高水準のインタープリタ型言語であるJavaScriptとは異なり、WASMは低水準のバイトコードです。ブラウザーのJavaScriptエンジンがほとんどオーバーヘッドなくコンパイルして実行するため、ネイティブコードに対して10～20%以内の性能差を実現します。

WebAssemblyは、直接記述するプログラミング言語ではなく、コンパイルターゲットです。Rust、C、C++、Goなどの言語は、それぞれのツールチェーンを使ってWASMバイトコードにコンパイルできます。システム言語でコードを記述し、WASMにコンパイルして、そのバイナリモジュールをブラウザーに配布します。

WASMはブラウザー内のサンドボックス化された仮想マシンで実行され、JavaScriptと同じセキュリティ制限を受けます。DOM、ネットワーク、ファイルシステムには直接アクセスできず、こうしたアクセスはすべてJavaScriptのバインディングを介して行います。このサンドボックス化により、ネイティブに近い速度のコードであってもブラウザーのセキュリティポリシーを回避できないようにします。

WASMとJavaScriptは、互いに置き換えるのではなく、連携して動作するように設計されています。JavaScriptは、オーケストレーション、DOM操作、イベント処理、ブラウザーAPIの呼び出しを得意とします。WASMは、計算負荷の高いアルゴリズムを得意とします。一般的なパターンは、JavaScriptがアプリケーションを統括し、WASMが負荷の高い計算を処理することです。

WASMは線形メモリモデルを使用します。これは、JavaScriptのArrayBufferとして表現される連続したバイト領域です。WASMとJavaScriptはどちらも、この共有メモリを読み書きできます。JavaScriptとWASMの間で大きなデータを受け渡す場合は、この共有バッファに書き込み、そこから読み取ることで、コストの高いシリアライズを避けられます。

Reactは、レンダリング、状態管理、ユーザー操作といったUI層を担当します。WASMは、ReactがJavaScriptでは効率よく実行できない計算を担当します。ReactはイベントハンドラーやエフェクトからWASM関数を呼び出し、結果を受け取って状態を更新し、再レンダリングを発生させます。Reactがプレゼンテーション層であり、WASMが計算エンジンです。

WASMは、画像・動画処理（ピクセル操作）、音声の合成・処理、暗号処理（ハッシュ化、暗号化）、物理シミュレーション、ゲームロジック、圧縮・展開、大規模データのテキスト検索が必要なReactアプリケーションに適しています。いずれも、JavaScriptでは性能不足が明確になるタスクです。

WASMは、CPUバウンドな計算でネイティブに近い速度を実現します。これは、ブラウザーのJITコンパイラーが、ほとんど最適化作業を必要とせずにWASMをマシンコードへコンパイルできるためです。ただし、JavaScriptとWASMの境界をまたぐ処理（JSからWASM関数を呼び出す場合や、その逆）にはオーバーヘッドがあります。WASM内部でデータ操作をまとめて実行し、境界をまたぐ回数を最小限に抑えてください。

WASMとWeb Workerは、どちらも性能の向上に役立ちます。Web WorkerはJavaScriptの計算をメインスレッドの外で実行します。WASMは、実行されるスレッドに関係なく計算を高速化します。最適なパターンは両方を組み合わせることです。つまり、WASMの計算をWeb Workerで実行し、WASMがネイティブに近い速度で動作している間も、ReactのメインスレッドをUI更新用に空けておきます。

WebAssemblyは、2017年以降、最新のすべてのブラウザー（Chrome、Firefox、Safari、Edge）でサポートされています。WASM仕様の基本部分は、ほぼすべての環境で利用できます。新しい拡張機能（SharedArrayBufferを使うスレッド、ベクトル化演算向けのSIMD、マネージド言語向けのガベージコレクション）はサポート状況に差がありますが、段階的に標準化と実装が進んでいます。

WASMのエコシステムは急速に拡大しています。本番環境での注目すべき利用例には、Figma（レンダリングエンジン）、Google Earth（3D地球儀）、Adobe Photoshop Web（画像処理）、AutoCAD Web（CADレンダリング）、多数の暗号ライブラリなどがあります。Reactアプリケーションでも、これらと同じカテゴリの計算負荷が高い部分にWASMをよく使用します。

WebAssemblyはブラウザー内でどのように実行されるのでしょうか？

WebAssemblyは、Rust、C、C++、Go向けのバイナリコンパイルターゲット（言語ではありません）であり、サンドボックス化されたブラウザーVM内でネイティブに近い速度で実行されます。WASMとJavaScriptは相互補完的です。JSが処理を統括し、WASMが計算を担当します。ReactはUI層として、負荷の高い計算をWASMに呼び出させます。画像処理、暗号処理、物理シミュレーション、音声処理、大規模データ検索にはWASMを使用してください。WASM内部で操作をまとめて実行し、JSとWASMの境界をまたぐ回数を最小限に抑えます。