WebAssembly

WebAssembly とは

WebAssembly (Wasm) は、ブラウザでネイティブに近い速度でコードを実行するバイナリ命令形式である。C、C++、Rust で書いたコードを .wasm にコンパイルし、JavaScript から呼び出せる。2017 年に主要ブラウザが対応。

JavaScript vs WebAssembly

JavaScript と WebAssembly の違いを以下にまとめる。

観点	JavaScript	WebAssembly
実行速度	JIT で高速化	ネイティブに近い
起動速度	パース + JIT	デコード (高速)
型	動的型付け	静的型付け
メモリ	GC	手動 (線形メモリ)
用途	UI、ビジネスロジック	計算集約的な処理

Rust → Wasm

Rust → Wasm のコード例を示す。

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

wasm-pack build --target web

JavaScript からの呼び出し

JavaScript からの呼び出しのコード例を示す。

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

await init(); // Wasm モジュールの初期化
const result = fibonacci(40); // ネイティブに近い速度で実行

ユースケース

WebAssembly は JavaScript では処理速度が不足する計算集約型の処理に適している。C/C++/Rust で書かれた既存のライブラリをブラウザで実行できるため、ネイティブアプリの Web 移植にも活用される。

ユースケース	例
画像・動画処理	Photoshop Web, FFmpeg.wasm
ゲーム	Unity WebGL, Unreal Engine
暗号化	ハッシュ計算、暗号化処理
データ処理	CSV パース、圧縮・展開
CAD / 3D	AutoCAD Web

WASI (WebAssembly System Interface)

WASI (WebAssembly System Interface) を図で示す。

ブラウザ外での Wasm 実行:
  Wasm → WASI → ファイルシステム、ネットワーク

用途:
  - サーバーサイド (Cloudflare Workers)
  - エッジコンピューティング
  - プラグインシステム

Lambda での Wasm

Lambda での Wasm のコード例を示す。

import { readFileSync } from 'fs';

const wasmBuffer = readFileSync('./optimized.wasm');
const { instance } = await WebAssembly.instantiate(wasmBuffer);
const result = instance.exports.heavyComputation(input);

CPU 集約的な処理を Wasm で実行し、Lambda のパフォーマンスを向上させる。

Wasm の制限

Wasm の制限を以下にまとめる。

制限	説明
DOM アクセス	直接アクセス不可 (JS 経由)
GC	手動メモリ管理 (Rust は安全)
デバッグ	ソースマップが限定的
バンドルサイズ	.wasm ファイルの追加

WebAssembly を扱う関連書籍も多い。