Antigravity × Rust/WebAssembly — AI エージェントで高速 Web アプリを構築する

# Rust のインストール（rustup 経由）
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source ~/.cargo/env
 
# WebAssembly ターゲットの追加
rustup target add wasm32-unknown-unknown
 
# wasm-pack のインストール
cargo install wasm-pack
 
# Cloudflare Workers 用ターゲット（Rust で Workers を書く場合）
cargo install worker-build
 
# インストール確認
rustc --version     # rustc 1.76.0 (07dca489a 2024-02-04) 以降であることを確認
wasm-pack --version # wasm-pack 0.13.0 以降

[package]
name = "wasm-core"
version = "0.1.0"
edition = "2021"
 
[lib]
crate-type = ["cdylib", "rlib"]
 
[dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
js-sys = "0.3"
web-sys = { version = "0.3", features = ["console", "Window", "Performance"] }
serde = { version = "1.0", features = ["derive"] }
serde-wasm-bindgen = "0.6"
rayon = { version = "1.8", optional = true }
 
[dev-dependencies]
wasm-bindgen-test = "0.3"
 
[profile.release]
opt-level = 3
lto = true
# WASM バイナリサイズを最小化
panic = "abort"

use wasm_bindgen::prelude::*;
use serde::{Deserialize, Serialize};
 
// JavaScript のコンソールへのアクセス
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}
 
// デバッグ用マクロ（開発時のみ有効）
macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}
 
/// 画像の輝度を高速計算する WASM 関数
/// JavaScript から `Uint8ClampedArray` を受け取り、
/// グレースケール変換した結果を返す
#[wasm_bindgen]
pub fn to_grayscale(pixels: &[u8]) -> Vec<u8> {
    // RGBA 形式: 4バイトごとに R, G, B, A
    pixels
        .chunks_exact(4)
        .flat_map(|chunk| {
            let r = chunk[0] as f32;
            let g = chunk[1] as f32;
            let b = chunk[2] as f32;
            let a = chunk[3];
            // 人間の視覚特性に基づいた輝度計算（ITU-R BT.601）
            let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
            [gray, gray, gray, a]
        })
        .collect()
}
 
/// 統計データ構造（JavaScript と共有）
#[derive(Serialize, Deserialize)]
pub struct Statistics {
    pub mean: f64,
    pub variance: f64,
    pub std_dev: f64,
    pub min: f64,
    pub max: f64,
}
 
/// 大量データの統計計算（JavaScript の約15倍高速）
#[wasm_bindgen]
pub fn calculate_statistics(data: &[f64]) -> JsValue {
    if data.is_empty() {
        return JsValue::NULL;
    }
 
    let n = data.len() as f64;
    let mean = data.iter().sum::<f64>() / n;
    let variance = data.iter().map(|x| (x - mean).powi(2)).sum::<f64>() / n;
    let std_dev = variance.sqrt();
    let min = data.iter().cloned().fold(f64::INFINITY, f64::min);
    let max = data.iter().cloned().fold(f64::NEG_INFINITY, f64::max);
 
    let stats = Statistics { mean, variance, std_dev, min, max };
 
    // serde で JavaScript オブジェクトに変換
    serde_wasm_bindgen::to_value(&stats).unwrap_or(JsValue::NULL)
}
 
/// ハッシュ計算（暗号学的に安全ではないが高速なチェックサム）
#[wasm_bindgen]
pub fn fnv1a_hash(data: &[u8]) -> u64 {
    const FNV_PRIME: u64 = 1099511628211;
    const OFFSET_BASIS: u64 = 14695981039346656037;
 
    data.iter().fold(OFFSET_BASIS, |hash, &byte| {
        (hash ^ byte as u64).wrapping_mul(FNV_PRIME)
    })
}
 
// WASM テスト（`wasm-pack test --headless --firefox` で実行）
#[cfg(test)]
mod tests {
    use super::*;
    use wasm_bindgen_test::*;
 
    wasm_bindgen_test_configure!(run_in_browser);
 
    #[wasm_bindgen_test]
    fn test_grayscale_conversion() {
        // 赤ピクセル [255, 0, 0, 255] のグレースケール変換
        let pixels = vec![255u8, 0, 0, 255];
        let result = to_grayscale(&pixels);
        // 期待値: 輝度 = 0.299 * 255 ≈ 76
        assert_eq!(result[0], 76);
        assert_eq!(result[3], 255); // アルファ値は保持
    }
 
    #[wasm_bindgen_test]
    fn test_statistics() {
        let data = vec![1.0, 2.0, 3.0, 4.0, 5.0];
        let result = calculate_statistics(&data);
        // 基本的な統計値の検証
        assert!(!result.is_null());
    }
}

# ブラウザ向けビルド（ES モジュール形式）
cd crates/core
wasm-pack build --target web --out-dir ../../app/src/wasm-pkg
 
# ビルド後の確認
ls ../../app/src/wasm-pkg/
# → wasm_core.js, wasm_core_bg.wasm, wasm_core.d.ts など

// app/src/wasm-worker.ts
// Web Worker 内で WASM モジュールを初期化し、メインスレッドをブロックしない設計
 
import init, {
  to_grayscale,
  calculate_statistics,
  fnv1a_hash,
} from './wasm-pkg/wasm_core';
 
let initialized = false;
 
async function ensureInitialized() {
  if (!initialized) {
    await init();
    initialized = true;
  }
}
 
// Web Worker のメッセージハンドラ
self.onmessage = async (event: MessageEvent) => {
  await ensureInitialized();
 
  const { type, payload, id } = event.data;
 
  try {
    let result: unknown;
 
    switch (type) {
      case 'grayscale': {
        // ImageData の pixels 配列を WASM に渡す
        const gray = to_grayscale(payload.pixels);
        result = { pixels: gray, width: payload.width, height: payload.height };
        break;
      }
      case 'statistics': {
        result = calculate_statistics(payload.data);
        break;
      }
      case 'hash': {
        const encoder = new TextEncoder();
        result = fnv1a_hash(encoder.encode(payload.text)).toString(16);
        break;
      }
      default:
        throw new Error(`Unknown message type: ${type}`);
    }
 
    self.postMessage({ id, result });
  } catch (error) {
    self.postMessage({ id, error: (error as Error).message });
  }
};

// app/src/main.ts — メインスレッドから Worker を使う
const worker = new Worker(new URL('./wasm-worker.ts', import.meta.url), {
  type: 'module',
});
 
let messageId = 0;
const pending = new Map<number, (result: unknown) => void>();
 
worker.onmessage = (event) => {
  const { id, result } = event.data;
  pending.get(id)?.(result);
  pending.delete(id);
};
 
function callWasm<T>(type: string, payload: unknown): Promise<T> {
  return new Promise((resolve) => {
    const id = messageId++;
    pending.set(id, resolve as (r: unknown) => void);
    worker.postMessage({ type, payload, id });
  });
}
 
// 使用例: 100万件のデータ統計を WASM で計算
async function benchmark() {
  const data = Array.from({ length: 1_000_000 }, () => Math.random() * 100);
 
  const t0 = performance.now();
  const stats = await callWasm<{
    mean: number;
    std_dev: number;
    min: number;
    max: number;
  }>('statistics', { data });
  const t1 = performance.now();
 
  console.log(`WASM 統計計算（100万件）: ${(t1 - t0).toFixed(1)}ms`);
  console.log(`平均: ${stats.mean.toFixed(2)}, 標準偏差: ${stats.std_dev.toFixed(2)}`);
  // → WASM 統計計算（100万件）: 12.4ms（JS 実装の約15倍高速）
}

# workers/Cargo.toml
[package]
name = "cf-workers-rust"
version = "0.1.0"
edition = "2021"
 
[lib]
crate-type = ["cdylib"]
 
[dependencies]
worker = "0.3"
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"

// workers/src/lib.rs
use worker::*;
use serde::{Deserialize, Serialize};
 
#[derive(Deserialize)]
struct StatRequest {
    data: Vec<f64>,
}
 
#[derive(Serialize)]
struct StatResponse {
    mean: f64,
    std_dev: f64,
    count: usize,
    processing_time_ms: f64,
}
 
#[event(fetch)]
pub async fn main(req: Request, env: Env, _ctx: Context) -> Result<Response> {
    let router = Router::new();
 
    router
        .post_async("/api/statistics", |mut req, _ctx| async move {
            let body: StatRequest = req.json().await?;
            let start = Date::now().as_millis() as f64;
 
            // コアライブラリと同じロジックをサーバーサイドで実行
            let n = body.data.len();
            if n == 0 {
                return Response::error("Empty data", 400);
            }
 
            let mean = body.data.iter().sum::<f64>() / n as f64;
            let variance = body.data.iter().map(|x| (x - mean).powi(2)).sum::<f64>() / n as f64;
            let std_dev = variance.sqrt();
 
            let end = Date::now().as_millis() as f64;
 
            let response = StatResponse {
                mean,
                std_dev,
                count: n,
                processing_time_ms: end - start,
            };
 
            Response::from_json(&response)
        })
        .get("/health", |_, _| Response::ok("OK"))
        .run(req, env)
        .await
}

# Antigravity のターミナルで実行（エージェントが自動補完）
cd workers
wrangler deploy
# → Uploaded cf-workers-rust (1.2 sec)
# → Deployed at: https://cf-workers-rust.masakihirokawa.workers.dev

# エージェントが提案・実行する最適化コマンド例
wasm-opt -Oz --strip-debug ./pkg/wasm_core_bg.wasm -o ./pkg/wasm_core_bg_opt.wasm
 
# 最適化前後の比較
ls -lh ./pkg/wasm_core_bg.wasm        # 842KB
ls -lh ./pkg/wasm_core_bg_opt.wasm    # 312KB（62% 削減）

<!-- GEMINI.md -->
# WASM Core ライブラリ
 
## このトピックの全体像
このプロジェクトは Rust + WebAssembly で実装した高速計算ライブラリです。
 
## テスト実行
- ユニットテスト: `wasm-pack test --headless --firefox`
- ベンチマーク: `cd app && npm run bench`
- 本番ビルド: `wasm-pack build --target web --release`
 
## 注意事項
- WASM のメモリは線形で成長する。メモリリークに注意
- `wasm-bindgen` の型マッピングは `src/lib.rs` の `#[wasm_bindgen]` を参照
- Cloudflare Workers デプロイ前に `wrangler dev` でローカル確認を行うこと