wasm-packとReactでRustをWASMに変換する

標準的なRustからWASMへのワークフローでは、2つのツールを使用します。wasm-packはビルドを統括し（RustからWASMへのコンパイル、wasm-bindgenの実行、npmパッケージの生成）、wasm-bindgenは、Rustの関数を適切な型処理によって通常のJavaScript関数として呼び出せるようにするJavaScriptバインディングを生成します。

#[wasm_bindgen]属性は、JavaScriptにエクスポートするRustの関数、構造体、メソッドを示します。これがない場合、関数はWASMにコンパイルされますが、JavaScriptからアクセスできません。関数に#[wasm_bindgen]を付けると、wasm-bindgenが引数と戻り値の変換を処理するJavaScriptのグルーコードを生成します。

最小限のエクスポートされたRust関数は次のとおりです。use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }この関数は符号なし32ビット整数を2つ受け取り、1つの値を返します。wasm-bindgenは、この関数を数値の引数で呼び出し、数値の結果を返すJavaScriptコードを生成します。

Rustクレートのディレクトリでwasm-pack build --target webを実行します。RustコードをWASMにコンパイルし、wasm-bindgenを実行してJavaScriptバインディングを生成します。その後、.wasmバイナリ、JavaScriptのグルーコードモジュール、TypeScriptの型定義を含むpkg/ディレクトリを出力します。

生成されたモジュールをReactコンポーネントにインポートします。import init, { add } from '../pkg/my_lib'のinit関数がWASMバイナリを読み込んでインスタンス化するため、useEffect内で一度呼び出します。初期化後は、エクスポートされた関数を直接呼び出します。const result = add(2, 3)

プリミティブな数値以外の複雑なデータを扱うために、wasm-bindgenはjs_sys::Array（JavaScript配列）、js_sys::Object（JavaScriptオブジェクト）、wasm_bindgen::JsValue（任意のJavaScript値）を提供します。これらの型を使うと、Rust関数でJavaScriptの配列やオブジェクトを受け取ったり返したりできますが、プリミティブ型よりもシリアライズのオーバーヘッドが大きくなります。

重要なパフォーマンス原則は、データをWASMメモリ内に保持し、すべての計算をそこで行うことです。データを一度渡して計算し、最後の結果だけを返します。各ステップでWASM境界を越えてデータを繰り返し転送するパターンは避けてください。境界を越えるたびに発生するオーバーヘッドは小さくても、タイトなループでは積み重なります。

serde-wasm-bindgenクレートを使用すると、SerdeによってRustの構造体とJavaScriptオブジェクトの間でシリアライズおよびデシリアライズを行えます。構造体に#[derive(Serialize, Deserialize)]を付け、serde_wasm_bindgen::to_value()とfrom_value()を使用します。複雑な構造化データを受け渡す場合の標準的な方法です。

長時間実行されるWASMの計算は、実行しているスレッドをブロックします。WASMをWeb Workerに配置して、Reactのメインスレッドを空けておきます。WASMモジュールを初期化してメッセージを処理するWorkerファイルを作成します。postMessageでWorkerにデータを送り、messageイベントで結果を受け取ったら、その結果でReactの状態を更新します。

wasm-packは、エクスポートされたすべての関数と型について、TypeScriptの宣言ファイル（.d.ts）を自動生成します。これにより、Rustの関数を呼び出すReact TypeScriptプロジェクトで完全な型安全性を確保できます。生成される型はRustの関数シグネチャ（add(a: number, b: number): number）を反映するため、IDEの自動補完も正しく機能します。

WASMバイナリは、最適化後で通常100KB〜2MBになります。積極的にサイズを最適化するには、Cargo.tomlのreleaseプロファイルでopt-level = "z"を設定して、wasm-packのビルド時にwasm-optを有効にします。WASMファイルはContent-Type: application/wasmで配信し、HTTP/2を有効にして、ブラウザーがバイナリを効率的にストリーミングできるようにします。

Rustコードにおける#[wasm_bindgen]属性の目的は何ですか？

wasm-pack build --target webはRustをWASMにコンパイルし、wasm-bindgenによってJavaScriptバインディングを生成します。エクスポートする関数には#[wasm_bindgen]を付けます。Reactでinitとエクスポートされた関数をインポートし、useEffect内でinit()を呼び出してから、通常のJavaScriptと同じように関数を呼び出します。複雑な構造体のシリアライズにはserde-wasm-bindgenを使用します。長時間の計算では、WASMをWeb Workerで実行してReactのメインスレッドを空けておきます。