WebAssembly入門：ブラウザでネイティブ速度を実現する

WebAssembly（WASM）は、ブラウザ上でネイティブに近い速度でコードを実行できる革新的な技術です。2019年にW3Cの正式勧告となり、現在ではすべての主要ブラウザでサポートされています。

WebAssemblyとは何か

WASMはスタックベースの仮想マシン向けバイナリ命令フォーマットです。C、C++、Rustなどの言語からコンパイルでき、JavaScriptと並行してブラウザ内で実行されます。

主な特徴：

• 高速実行：バイナリフォーマットにより、パースと実行が高速
• 安全性：サンドボックス環境で実行され、メモリ安全性を保証
• 移植性：OS・アーキテクチャに依存せず動作
• JavaScript連携：既存のWebエコシステムとシームレスに統合

なぜWASMが必要なのか

JavaScriptはインタープリタ言語であり、JITコンパイルによって大幅に最適化されていますが、CPU集中型タスクでは依然として限界があります。

代表的なユースケース：

• 画像・動画処理
• 3Dレンダリング（ゲームエンジン）
• 暗号処理
• 音声・信号処理
• 科学計算・シミュレーション

簡単なWASMの例

まずはC言語でシンプルな関数を書いてWASMにコンパイルしてみましょう。

// add.c
int add(int a, int b) {
    return a + b;
}

Emscriptenでコンパイル：

emcc add.c -o add.wasm -s EXPORTED_FUNCTIONS='["_add"]' --no-entry

JavaScriptから呼び出す：

const response = await fetch('add.wasm');
const buffer = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(buffer);

const result = instance.exports.add(3, 5);
console.log(result); // 8

RustとWASMの組み合わせ

現在、WASMと最も相性が良い言語の一つがRustです。wasm-packを使うことで、Rustコードをnpmパッケージとして公開できます。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

ビルド：

wasm-pack build --target web

JavaScriptから：

import init, { fibonacci } from './pkg/my_wasm.js';

await init();
console.log(fibonacci(10)); // 55

パフォーマンス比較

フィボナッチ数列（n=40）の計算時間を比較した場合の目安：

実装	実行時間（目安）
JavaScript	~1500ms
WASM (Rust)	~200ms
ネイティブ (Rust)	~50ms

WASMはJavaScriptに比べて数倍〜数十倍高速になるケースがあります。

WASM Component Model

2024年以降、WASMの進化として注目されているのがWASM Component Modelです。これにより：

• 言語をまたいだモジュール間の型安全な通信
• 再利用可能なコンポーネントのエコシステム形成
• サーバーサイド・エッジコンピューティングへの展開

が可能になります。WASIと組み合わせることで、WASMはブラウザを超えてサーバーレスやエッジ環境でも活躍し始めています。

まとめ

WebAssemblyはJavaScriptを置き換えるものではなく、パフォーマンスが求められる処理を補完する技術です。特にRustとの組み合わせは開発体験・実行速度ともに優れており、今後のWeb開発における重要なツールとなるでしょう。

次回はRustで本格的なWASMライブラリを構築する方法を詳しく解説します。