WebAssembly 2025：ブラウザを超えてサーバー・エッジ・AIへ — Wasmが変えるコンピューティングの未来

;; WAT（WebAssembly Text Format）例 - 2つの数を足す関数
(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )
  (export "add" (func $add))
)

┌──────────────────────────────────────────┐
│         ホスト環境（Host）                 │
│  ┌────────────┐  ┌────────────┐         │
│  │ Wasmモジュール │  │ Wasmモジュール │         │
│  │     A       │  │     B       │         │
│  │ ┌────────┐ │  │ ┌────────┐ │         │
│  │ │ 線形   │ │  │ │ 線形   │ │         │
│  │ │ メモリ  │ │  │ │ メモリ  │ │         │
│  │ └────────┘ │  │ └────────┘ │         │
│  └────────────┘  └────────────┘         │
│       互いに完全に隔離されている             │
└──────────────────────────────────────────┘

// WASI Preview 1スタイル - ファイル読み込み
use std::fs;

fn main() {
    let content = fs::read_to_string("/data/config.toml")
        .expect("ファイルを読み込めません");
    println!("設定: {}", content);
}

// WIT（Wasm Interface Type）定義例
package my-app:backend;

interface http-handler {
    handle-request: func(req: request) -> response;
}

world my-server {
    import wasi:http/outgoing-handler;
    export http-handler;
}

// WASI 0.3 - ネイティブasync HTTPハンドラー
use wasi::http::handler;

async fn handle(request: handler::Request) -> handler::Response {
    // 非同期データベースクエリ
    let user = db::query("SELECT * FROM users WHERE id = ?", &[request.user_id]).await;

    // 非同期外部APIコール
    let enriched = external_api::enrich(user).await;

    handler::Response::new(200, serde_json::to_string(&enriched).unwrap())
}

# Rustで書かれたビジネスロジックとPythonで書かれたMLモジュールを合成
wasm-tools compose business-logic.wasm -d ml-module.wasm -o combined-app.wasm

# spin.toml - Spinアプリケーション設定
spin_manifest_version = 2

[application]
name = "my-api"
version = "1.0.0"

[[trigger.http]]
route = "/api/hello"
component = "hello-handler"

[component.hello-handler]
source = "target/wasm32-wasip2/release/hello_handler.wasm"
allowed_outbound_hosts = ["https://api.example.com"]

// Spin HTTPハンドラー（Rust）
use spin_sdk::http::{IntoResponse, Request, Response};
use spin_sdk::http_component;

#[http_component]
fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
    let name = req
        .query()
        .get("name")
        .unwrap_or(&"World".to_string())
        .clone();

    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(format!(r#"{{"message": "Hello, {}!"}}"#, name))
        .build())
}

// Cloudflare Worker - Wasmモジュールの使用
export default {
  async fetch(request, env) {
    // Rustでコンパイルされたwasmモジュールで画像処理
    const wasmModule = await import('./image-processor.wasm')
    const imageData = await request.arrayBuffer()

    const processed = wasmModule.resize(
      new Uint8Array(imageData),
      800, // width
      600 // height
    )

    return new Response(processed, {
      headers: { 'Content-Type': 'image/webp' },
    })
  },
}

// Fastly Computeハンドラー
use fastly::{Error, Request, Response};

#[fastly::main]
fn main(req: Request) -> Result<Response, Error> {
    // 地理情報ベースのルーティング
    let geo = req.get_client_geo().unwrap();
    let country = geo.country_code().unwrap_or("US");

    let backend = match country {
        "KR" | "JP" => "origin-apac",
        "DE" | "FR" | "GB" => "origin-eu",
        _ => "origin-us",
    };

    // オリジンにリクエスト転送
    let mut beresp = req.send(backend)?;
    beresp.set_header("X-Served-By", "fastly-compute-wasm");

    Ok(beresp)
}

質問1: 主要言語がGoですか？
  |-- YES -> wazero（外部依存ゼロ、CGoが不要）
  |-- NO
      |-- 質問2: 最新のWASI標準準拠が重要ですか？
      |   |-- YES -> Wasmtime（Bytecode Alliance、標準を先導）
      |   |-- NO
      |       |-- 質問3: AI/MLワークロードが主目的ですか？
      |       |   |-- YES -> WasmEdge（GGML、TensorFlow Lite統合）
      |       |   |-- NO  -> Wasmer（汎用、wapmパッケージマネージャー）

HTTP "Hello World" レスポンスタイム（p99、マイクロ秒）:

Wasmtime:     ████████░░░░░░░░  45us
WasmEdge:     ████████░░░░░░░░  48us
Wasmer:       █████████░░░░░░░  52us
wazero:       ██████████░░░░░░  62us
Node.js:      ████████████████  120us
Docker+Node:  スケール外（ms単位）

// ONNX Runtime Web（Wasmバックエンド）例
import * as ort from 'onnxruntime-web'

// Wasmバックエンド設定
ort.env.wasm.numThreads = 4
ort.env.wasm.simd = true

async function classifyImage(imageData) {
  const session = await ort.InferenceSession.create('mobilenet-v2.onnx', {
    executionProviders: ['wasm'],
  })

  const tensor = new ort.Tensor('float32', preprocessImage(imageData), [1, 3, 224, 224])
  const results = await session.run({ input: tensor })

  return postprocess(results.output)
}

# WasmEdgeでLLMを実行
wasmedge --dir .:. \
  --nn-preload default:GGML:AUTO:llama-2-7b-chat.Q4_K_M.gguf \
  llm-chat.wasm

// SpinでのLLM推論
use spin_sdk::http::{IntoResponse, Request, Response};
use spin_sdk::llm;

#[spin_sdk::http_component]
fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
    let prompt = req.body().as_str()?;

    let result = llm::infer(
        llm::InferencingModel::Llama2Chat,
        prompt,
    )?;

    Ok(Response::builder()
        .status(200)
        .header("content-type", "text/plain")
        .body(result.text)
        .build())
}

┌──────────────────────────────────────────────────┐
│                 ユーザーリクエスト                   │
└─────────────┬────────────────────────────────────┘
              v
┌─────────────────────────┐
│    エッジ（Wasm/Spin）    │  認証、キャッシュ、A/Bテスト
│    - マイクロ秒応答       │  ジオベースルーティング
└─────────────┬───────────┘
              v
┌─────────────────────────┐
│  サーバーレス（Lambda）    │  ビジネスロジック、API
│  - イベント処理           │  DBクエリ、外部API
└─────────────┬───────────┘
              v
┌─────────────────────────┐
│  コンテナ（ECS/K8s）      │  ML学習、バッチ処理
│  - 長時間タスク           │  ステートフルサービス
└─────────────────────────┘

# Rustのインストール（既にインストール済みならスキップ）
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Wasmターゲットの追加
rustup target add wasm32-wasip2

# Spin CLIのインストール
curl -fsSL https://developer.fermyon.com/downloads/install.sh | bash
sudo mv spin /usr/local/bin/

# HTTPハンドラーテンプレートでプロジェクト作成
spin new -t http-rust my-wasm-api
cd my-wasm-api

// src/lib.rs
use spin_sdk::http::{IntoResponse, Request, Response};
use spin_sdk::http_component;
use spin_sdk::key_value::Store;
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize)]
struct VisitorCount {
    path: String,
    count: u64,
    last_visited: String,
}

#[http_component]
fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
    let path = req.path().to_string();
    let method = req.method().to_string();

    match (method.as_str(), path.as_str()) {
        ("GET", "/api/health") => health_check(),
        ("GET", "/api/visitors") => get_visitor_count(&path),
        ("POST", "/api/visitors") => increment_visitor(&path),
        _ => Ok(Response::builder()
            .status(404)
            .body("Not Found")
            .build()),
    }
}

fn health_check() -> anyhow::Result<impl IntoResponse> {
    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(r#"{"status": "healthy", "runtime": "wasm"}"#)
        .build())
}

fn get_visitor_count(path: &str) -> anyhow::Result<impl IntoResponse> {
    let store = Store::open_default()?;
    let count = store
        .get(path)
        .map(|bytes| String::from_utf8(bytes).unwrap_or_default())
        .unwrap_or_else(|| "0".to_string());

    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(format!(r#"{{"path": "{}", "count": {}}}"#, path, count))
        .build())
}

fn increment_visitor(path: &str) -> anyhow::Result<impl IntoResponse> {
    let store = Store::open_default()?;
    let current: u64 = store
        .get(path)
        .map(|bytes| String::from_utf8(bytes).unwrap_or_default())
        .unwrap_or_else(|| "0".to_string())
        .parse()
        .unwrap_or(0);

    let new_count = current + 1;
    store.set(path, new_count.to_string().as_bytes())?;

    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(format!(r#"{{"path": "{}", "count": {}}}"#, path, new_count))
        .build())
}

# ビルド
spin build

# ローカル実行
spin up

# 別のターミナルでテスト
curl http://localhost:3000/api/health
# 出力: {"status": "healthy", "runtime": "wasm"}

curl -X POST http://localhost:3000/api/visitors
# 出力: {"path": "/api/visitors", "count": 1}

curl http://localhost:3000/api/visitors
# 出力: {"path": "/api/visitors", "count": 1}

# Fermyon Cloudにログイン
spin cloud login

# デプロイ
spin cloud deploy

# 出力例:
# Uploading my-wasm-api version 1.0.0...
# Deploying...
# Application deployed!
# URL: https://my-wasm-api-xyz123.fermyon.app

ビルド成果物サイズ:
  Wasmバイナリ:           247 KB
  Node.js (node_modules):  45 MB
  Goバイナリ:             8.2 MB
  Dockerイメージ (Node):  145 MB
  Dockerイメージ (Alpine): 52 MB

// Rust - 完全なWASI 0.2サポート
use std::io::Write;

fn main() {
    let mut stdout = std::io::stdout();
    writeln!(stdout, "Hello from Rust + Wasm!").unwrap();
}

# コンパイル
cargo build --target wasm32-wasip2 --release
# 実行
wasmtime target/wasm32-wasip2/release/my-app.wasm

// C - EmscriptenまたはWASI-SDKでコンパイル
#include <stdio.h>

int main() {
    printf("Hello from C + Wasm!\n");
    return 0;
}

# wasi-sdkでコンパイル
/opt/wasi-sdk/bin/clang hello.c -o hello.wasm
wasmtime hello.wasm

// Go - TinyGoを使用したWasmコンパイル
package main

import "fmt"

func main() {
    fmt.Println("Hello from Go + Wasm!")
}

# TinyGoでコンパイル（標準GoもWASIサポート追加中）
tinygo build -target=wasip2 -o hello.wasm main.go
wasmtime hello.wasm

// C# - .NET 8+のWasmサポート
using System;

class Program {
    static void Main() {
        Console.WriteLine("Hello from C# + Wasm!");
    }
}

# .NET 8 WASIワークロードでビルド
dotnet workload install wasi-experimental
dotnet build -c Release
wasmtime bin/Release/net8.0/wasi-wasm/my-app.wasm

# Python - componentize-pyによるWasm変換
# まだ実験的だが急速に発展中

def handle_request(request):
    return {
        "status": 200,
        "body": f"Hello from Python + Wasm!"
    }

# componentize-pyでWasmコンポーネントを生成
componentize-py -d wit/ -w my-world componentize app -o app.wasm

// JavaScript - StarlingMonkey（SpiderMonkeyベース）またはjavy
export function handleRequest(request) {
  return {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: 'Hello from JS + Wasm!' }),
  }
}

採用曲線:

  イノベーター   アーリーアダプター   アーリーマジョリティ   レイトマジョリティ   ラガード
  (2019)        (2022)            (2025)             (2027?)           (2030?)
    |              |           <<<ここ>>>               |                 |
    v              v              v                     v                 v
  +--+        +--------+    +----------+
  |  |        |        |    |          |
  |  |        |        |    |  ここ!    |
  +--+        +--------+    +----------+
  Wasm MVP    WASI P1       WASI 0.2/0.3
  ブラウザ     サーバー実験   プロダクションデプロイ