2026年版 RustとWebAssembly入門：Wasm、wasm-bindgenの実践ガイドと面接対策

# install-wasm-tools.sh
# rustupにWebAssemblyターゲットを追加
rustup target add wasm32-unknown-unknown

# ビルドとパッケージング用にwasm-packをインストール
cargo install wasm-pack

# インストールを確認
wasm-pack --version

# Cargo.toml
[package]
name = "wasm-calculator"
version = "0.1.0"
edition = "2024"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.100"

[profile.release]
opt-level = "z"      # サイズを最適化
lto = true           # リンク時最適化

use wasm_bindgen::prelude::*;

// この関数をJavaScriptにエクスポート
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    // 再帰のベースケース
    match n {
        0 => 0,
        1 => 1,
        // 末尾呼び出し最適化を伴う再帰計算
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// JavaScriptからconsole.logをインポート
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// console.logを使用する関数をエクスポート
#[wasm_bindgen]
pub fn greet(name: &str) {
    log(&format!("Hello, {}!", name));
}

# build-wasm.sh
# webpack、Vite、Rollupなどのバンドラー用にビルド
wasm-pack build --target bundler --release

# ネイティブESモジュール（ブラウザ）用にビルド
wasm-pack build --target web --release

# Node.js用にビルド
wasm-pack build --target nodejs --release

// 生成されたWebAssemblyモジュールをインポート
import init, { fibonacci, greet } from './pkg/wasm_calculator.js';

async function run() {
    // WebAssemblyモジュールを初期化
    await init();
    
    // エクスポートされたRust関数を呼び出し
    const result = fibonacci(20);
    console.log(`fibonacci(20) = ${result}`);
    
    greet('WebAssembly');
}

run();

use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};

// wasm-bindgenのserdeサポートを有効化
#[derive(Serialize, Deserialize)]
pub struct Point {
    pub x: f64,
    pub y: f64,
}

// JavaScriptオブジェクトを受け取って返す
#[wasm_bindgen]
pub fn distance(a: JsValue, b: JsValue) -> Result<f64, JsValue> {
    // JavaScriptオブジェクトをRust構造体にデシリアライズ
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    // ユークリッド距離を計算
    let dx = point_b.x - point_a.x;
    let dy = point_b.y - point_a.y;
    
    Ok((dx * dx + dy * dy).sqrt())
}

// Rust構造体をJavaScriptオブジェクトとして返す
#[wasm_bindgen]
pub fn midpoint(a: JsValue, b: JsValue) -> Result<JsValue, JsValue> {
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    let mid = Point {
        x: (point_a.x + point_b.x) / 2.0,
        y: (point_a.y + point_b.y) / 2.0,
    };
    
    // Rust構造体をJavaScriptオブジェクトにシリアライズ
    Ok(serde_wasm_bindgen::to_value(&mid)?)
}

# optimize-wasm.sh
# wasm-opt用にbinaryenをインストール
# macOS: brew install binaryen
# Ubuntu: apt install binaryen

# 積極的なサイズ最適化を適用
wasm-opt -Oz -o pkg/wasm_calculator_opt.wasm pkg/wasm_calculator_bg.wasm

# 代わりに速度最適化を適用
wasm-opt -O3 -o pkg/wasm_calculator_fast.wasm pkg/wasm_calculator_bg.wasm

# Cargo.toml - 追加の最適化
[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"
strip = true

use wasm_bindgen::prelude::*;
use wasm_bindgen::Clamped;

#[wasm_bindgen]
pub fn grayscale(data: Clamped<Vec<u8>>, width: u32, height: u32) -> Clamped<Vec<u8>> {
    let mut pixels = data.0;
    let len = (width * height * 4) as usize;
    
    // 各ピクセルを処理（RGBA形式）
    for i in (0..len).step_by(4) {
        // 標準係数を使用して輝度を計算
        let r = pixels[i] as f32;
        let g = pixels[i + 1] as f32;
        let b = pixels[i + 2] as f32;
        
        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
        
        // RGBチャンネルをグレースケール値に設定
        pixels[i] = gray;     // R
        pixels[i + 1] = gray; // G
        pixels[i + 2] = gray; // B
        // アルファチャンネル（i + 3）は変更なし
    }
    
    Clamped(pixels)
}

import init, { grayscale } from './pkg/image_processor.js';

async function applyGrayscale(canvas) {
    await init();
    
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    // ピクセルデータをWebAssemblyに渡す
    const result = grayscale(imageData.data, canvas.width, canvas.height);
    
    // 処理されたピクセルで新しいImageDataを作成
    const processed = new ImageData(result, canvas.width, canvas.height);
    ctx.putImageData(processed, 0, 0);
}

#[cfg(test)]
mod tests {
    use super::*;
    use wasm_bindgen_test::*;
    
    // ブラウザでテストを実行するよう構成
    wasm_bindgen_test_configure!(run_in_browser);
    
    #[wasm_bindgen_test]
    fn test_fibonacci() {
        assert_eq!(fibonacci(0), 0);
        assert_eq!(fibonacci(1), 1);
        assert_eq!(fibonacci(10), 55);
    }
    
    #[wasm_bindgen_test]
    fn test_greet() {
        // このテストはgreetがパニックしないことを確認
        greet("Test User");
    }
}

# test-wasm.sh
# ヘッドレスChromeでテストを実行
wasm-pack test --headless --chrome

# ヘッドレスFirefoxでテストを実行
wasm-pack test --headless --firefox

use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn init_panic_hook() {
    console_error_panic_hook::set_once();
}