WebAssemblyとは何か——ブラウザで動くネイティブ速度の正体

// 大量の数値計算：JSは遅い
function sumArray(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];  // 動的型チェックが毎回発生
    }
    return sum;
}

;; WASMのテキスト表現（WAT形式）
(module
  (func (export "add") (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add
  )
)

// ベンチマーク例（概念的）
// フィボナッチ数列の計算（n=45）

// JavaScript: 約7秒
function fib(n) {
    if (n <= 1) return n;
    return fib(n-1) + fib(n-2);
}

// WASM (Rustコンパイル): 約0.5秒
// → 約14倍高速

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[wasm_bindgen]
pub fn sum_array(arr: &[f64]) -> f64 {
    arr.iter().sum()
}

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => {
            let mut a = 0u64;
            let mut b = 1u64;
            for _ in 2..=n {
                let c = a + b;
                a = b;
                b = c;
            }
            b
        }
    }
}

# ビルド
wasm-pack build --target web

# 生成物
pkg/
  ├── my_lib_bg.wasm   # WASMバイナリ
  ├── my_lib.js        # JSラッパー
  └── my_lib.d.ts      # TypeScript型定義

// JavaScriptから使う
import init, { add, fibonacci } from './pkg/my_lib.js';

async function main() {
    await init();  // WASMを初期化
    console.log(add(3, 5));        // 8
    console.log(fibonacci(45));    // 1134903170
}
main();

import * as ort from 'onnxruntime-web';

async function runInference(imageTensor) {
    // WASMバックエンドでモデルを読み込み
    const session = await ort.InferenceSession.create(
        './model.onnx',
        { executionProviders: ['wasm'] }  // WASMで実行
    );

    const feeds = { input: imageTensor };
    const results = await session.run(feeds);
    return results.output.data;
}

import { pipeline } from '@xenova/transformers';

// モデルはブラウザにダウンロード・WASMで実行
const classifier = await pipeline('sentiment-analysis');
const result = await classifier('I love WebAssembly!');
// [{ label: 'POSITIVE', score: 0.999 }]

// 音声認識（Whisper）もブラウザで動く
const transcriber = await pipeline('automatic-speech-recognition', 'openai/whisper-tiny');
const output = await transcriber('audio.wav');

// WebGPU バックエンドを優先（対応ブラウザのみ）
const session = await ort.InferenceSession.create('./model.onnx', {
    executionProviders: ['webgpu', 'wasm'],  // 順に試みる
});

# WasmtimeでWASMを実行（ブラウザ不要）
wasmtime my_program.wasm

# Docker + WASM（実験的）
docker run --runtime=io.containerd.wasmtime.v1 my-wasm-image