WASM の活用例：画像処理と計算

WASMを使った標準的な画像処理パイプラインでは、まずキャンバスからImageDataオブジェクトを取得し、そのピクセルデータを型付き配列（Uint8Array）に変換します。次にWASMの線形メモリへコピーし、WASM関数を呼び出してフィルターを適用します。結果をコピーして取り出し、putImageData()を使って処理済みの画像をキャンバスに描画します。

ベンチマークの比較では、大きな画像に対するWASMのグレースケールおよびぼかしフィルターの実装が、同等のJavaScript実装を5～10倍上回ることが一貫して示されています。4000x3000ピクセルの画像の場合、JavaScriptのグレースケールフィルターでは80msかかることがありますが、RustのWASM版は10ms未満で処理を完了します。この差は、リアルタイム編集の場面でユーザーにも感じられるほどです。

リアルタイムの音声処理には、メインスレッドとは別の専用オーディオスレッドで実行されるWeb Audio APIのAudioWorkletを使用します。WASMはAudioWorklet内で実行でき、ネイティブに近い音声エフェクト（リバーブ、コンプレッサー、イコライザー）を実現します。これにより音声処理経路ではReactを完全に介さず、Reactは音声パラメータを設定するUIコントロールだけを扱います。

Papa Parseは小～中規模のファイルのCSV解析には適していますが、数百万行を含むファイルでは、WASMにコンパイルしたRustのCSVパーサーのほうが大幅に高速です。WASMパーサーは生のバイト配列を処理し、Rustでフィルタリングと変換を行ったうえで、処理済みの結果だけをJavaScriptに返します。これにより、中間的なJavaScriptオブジェクトを数百万個生成せずに済みます。

ログファイル、コードベース、大規模なデータセットなどの大きなドキュメントを高速に全文検索するには、WASMにコンパイルしたRustの正規表現エンジンによってネイティブに近い検索パフォーマンスを実現できます。RustのregexクレートなどをWASMにコンパイルすると、数百万行を数ミリ秒で検索できます。Reactは検索結果を描画し、WASMが検索を実行します。

Rust WASMで実装された暗号学的ハッシュ関数（SHA-256、SHA-512）や対称暗号（AES）は、JavaScriptエンジンの最適化に左右されず、安定して高速に動作します。クライアント側で暗号化を行うアプリケーション（エンドツーエンド暗号化メッセージング、Argon2によるパスワード導出）では、WASMベースの暗号ライブラリが純粋なJavaScript実装を大幅に上回ります。

物理演算エンジンのRapier（rapier.rs）はRustで記述され、WASMにコンパイルされているため、ブラウザーゲームやインタラクティブなシミュレーションで利用できます。ReactはゲームのUIとステータスパネルを描画し、RapierのWASMモジュールは各フレームで物理シミュレーションを実行します。このパターンにより、UIの関心事とゲームエンジンの関心事を明確に分離できます。

Reactの観点では、WASM関数は純粋な計算関数です。入力データを受け取り、結果を返します。Reactが関数を呼び出して結果を受け取り、状態を更新します。const result = await runWasm(inputData); setState(result)。その後、Reactが再レンダリングして結果を表示します。この明確な分離により、計算の複雑さに関係なく、コンポーネントのコードをシンプルに保てます。

Reactのメインスレッドで同期的にWASM計算を実行すると、ブラウザーがブロックされます。計算が完了するまで、UIの更新、イベント処理、アニメーションが一切行われません。60fpsで1フレームに相当する16msを超えるWASM処理は、Web Workerに移す必要があります。Reactはメッセージを介してWorkerと通信し、結果が届いたときに状態を更新します。

JavaScriptとWASMの間で大きな配列を渡す場合は、可能な限りコピーを避けます。memory.bufferのArrayBufferを介してWASMの線形メモリに直接アクセスし、new Uint8Array(wasmMemory.buffer, offset, length)などの型付き配列ビューを使って入力データを書き込みます。その後WASM関数を呼び出し、同じバッファーから結果を読み取ります。このゼロコピーのパターンは、大きな画像や音声のバッファーを扱う際に重要です。

WASMにコンパイルされたBrotliおよびZstd圧縮アルゴリズムは、高速なクライアント側圧縮を実現します。Reactアプリケーションでは、大きなJSONペイロードをアップロード前に圧縮して帯域幅を節約する、サーバーから受け取ったバイナリデータ形式を解凍して表示する、圧縮データをIndexedDBに保存するリッチなオフライン対応アプリケーションを実現するといった用途があります。

なぜ長時間実行されるWASMの計算をWeb Workerに移す必要があるのでしょうか。

WASMは、ピクセル操作（画像フィルターではJSより5〜10倍高速）、AudioWorkletsでのリアルタイム音声処理、大規模なCSVやテキストの解析、暗号処理、物理シミュレーションに適しています。Reactでのパターンはシンプルです。Reactが純粋な計算関数としてWASMを呼び出し、その結果を描画します。メインスレッドを空けておくため、16msを超える計算は必ずWeb Workerで実行してください。大きなデータ転送のオーバーヘッドを最小限に抑えるには、ゼロコピー技術（shared ArrayBuffer）を使用してください。