はじめてのWebAssembly

はじめに

WebAssembly（Wasm）は、コンパイルされたコードをネイティブに近い速度でブラウザ上で実行できる技術です。Rustはゼロコスト抽象化、ガベージコレクタなし、小さなバイナリサイズという特徴から、Wasm開発に最適な言語の一つです。

仕組み

1. Rustコードを書き、関数に #[wasm_bindgen] アトリビュートを付けます
2. wasm-pack ツールがRustコードを .wasm バイナリにコンパイルします
3. JavaScriptからエクスポートされた関数を直接呼び出せます

主要な概念

• #[wasm_bindgen] — JavaScriptからアクセス可能な関数を示すアトリビュート
• &str — Rustの文字列スライス型。JS文字列から自動変換されます
• 戻り値の型 — String、i32、f64 などのRust型はJS型に自動変換されます

JavaScriptからの呼び出し

wasm-pack でコンパイルした後、Rust関数を直接インポートして呼び出せます:

import init, { greet, add } from './pkg/hello_wasm.js';

async function run() {
    await init();
    console.log(greet("World"));
    console.log("2 + 3 =", add(2, 3));
}
run();

試してみよう

greet 関数を変更してカスタムメッセージを追加したり、multiply のような新しい関数を作ってみましょう。