✍️ 필사 모드: WebAssembly完全ガイド2025：ブラウザを超えて — WASI、Component Model、サーバーサイドWasm

2015: WebAssemblyプロジェクト発表（W3C）
2017: 4大ブラウザでWasm 1.0サポート
2019: WASI初期提案（非ブラウザWasm）
2020: Wasm 1.0がW3C公式勧告
2021: Component Model提案、Fermyon創立
2022: Docker+Wasm技術プレビュー、WASI Preview 1
2023: WASI 0.2安定化、Component Model成熟
2024: GC proposal実装、主要ランタイム最適化
2025: WASI 0.2 Production-ready、サーバーサイドWasm本格採用

Wasmモジュール構造：
+------------------+
| Magic Number     |  0x00 0x61 0x73 0x6D ("\0asm")
| Version          |  0x01 0x00 0x00 0x00 (v1)
+------------------+
| Type Section     |  関数シグネチャ定義
| Import Section   |  外部関数/メモリインポート
| Function Section |  関数インデックス
| Table Section    |  間接呼び出しテーブル
| Memory Section   |  線形メモリ定義
| Global Section   |  グローバル変数
| Export Section   |  外部公開関数/メモリ
| Start Section    |  自動実行関数
| Element Section  |  テーブル初期化
| Code Section     |  関数本体（バイトコード）
| Data Section     |  メモリ初期データ
+------------------+

;; 二つの数を足すシンプルなWasmモジュール
(module
  ;; 関数型定義
  (type $add_type (func (param i32 i32) (result i32)))

  ;; 関数実装
  (func $add (type $add_type) (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )

  ;; 線形メモリ（1ページ = 64KB）
  (memory (export "memory") 1)

  ;; 関数エクスポート
  (export "add" (func $add))
)

// lib.rs - RustからWasmへ
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    if n <= 1 {
        return n as u64;
    }
    let mut a: u64 = 0;
    let mut b: u64 = 1;
    for _ in 2..=n {
        let temp = a + b;
        a = b;
        b = temp;
    }
    b
}

#[wasm_bindgen]
pub struct ImageProcessor {
    width: u32,
    height: u32,
    pixels: Vec<u8>,
}

#[wasm_bindgen]
impl ImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(width: u32, height: u32) -> ImageProcessor {
        ImageProcessor {
            width,
            height,
            pixels: vec![0; (width * height * 4) as usize],
        }
    }

    pub fn grayscale(&mut self) {
        for chunk in self.pixels.chunks_exact_mut(4) {
            let gray = (0.299 * chunk[0] as f64
                + 0.587 * chunk[1] as f64
                + 0.114 * chunk[2] as f64) as u8;
            chunk[0] = gray;
            chunk[1] = gray;
            chunk[2] = gray;
        }
    }

    pub fn pixels_ptr(&self) -> *const u8 {
        self.pixels.as_ptr()
    }
}

# Rust -> Wasm ビルド
wasm-pack build --target web

// image_filter.c - CからWasmへ
#include <emscripten.h>
#include <stdint.h>

EMSCRIPTEN_KEEPALIVE
void apply_blur(uint8_t* pixels, int width, int height) {
    uint8_t* temp = (uint8_t*)malloc(width * height * 4);

    for (int y = 1; y < height - 1; y++) {
        for (int x = 1; x < width - 1; x++) {
            for (int c = 0; c < 3; c++) {
                int sum = 0;
                for (int dy = -1; dy <= 1; dy++) {
                    for (int dx = -1; dx <= 1; dx++) {
                        sum += pixels[((y+dy)*width + (x+dx))*4 + c];
                    }
                }
                temp[(y*width + x)*4 + c] = sum / 9;
            }
            temp[(y*width + x)*4 + 3] = pixels[(y*width + x)*4 + 3];
        }
    }

    memcpy(pixels, temp, width * height * 4);
    free(temp);
}

// Wasmモジュールのロードと使用
async function initWasm() {
  // 方法1: fetch + instantiate
  const response = await fetch('module.wasm');
  const bytes = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(bytes, {
    env: {
      // ホスト関数をWasmに提供
      log_value: (value) => console.log('Wasm says:', value),
      get_time: () => Date.now(),
    }
  });

  // Wasm関数呼び出し
  const result = instance.exports.add(10, 20);
  console.log('Result:', result); // 30

  // 線形メモリアクセス
  const memory = new Uint8Array(instance.exports.memory.buffer);

  return instance;
}

// 方法2: wasm-bindgen (Rust)
import init, { fibonacci, ImageProcessor } from './pkg/my_wasm.js';

async function main() {
  await init();
  console.log('fib(40):', fibonacci(40));

  const processor = new ImageProcessor(800, 600);
  processor.grayscale();
}

WASI 0.2構造：
+----------------------------------+
| wasi:cli        (CLIアプリサポート)    |
| wasi:http       (HTTPクライアント/サーバー) |
| wasi:filesystem (ファイルシステムアクセス)  |
| wasi:sockets    (ネットワークソケット)   |
| wasi:clocks     (時間関連)      |
| wasi:random     (乱数生成)      |
| wasi:io         (ストリームI/O)     |
+----------------------------------+
| Component Model (基盤レイヤー)     |
+----------------------------------+
| Wasm Core (実行エンジン)           |
+----------------------------------+

// Rust + WASI HTTPサーバー
use spin_sdk::http::{IntoResponse, Request, Response};
use spin_sdk::http_component;
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize)]
struct TodoItem {
    id: u32,
    title: String,
    completed: bool,
}

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

    match (method, path) {
        ("GET", "/api/todos") => {
            let todos = vec![
                TodoItem { id: 1, title: "Learn WASI".into(), completed: false },
                TodoItem { id: 2, title: "Build Wasm app".into(), completed: false },
            ];
            Ok(Response::builder()
                .status(200)
                .header("content-type", "application/json")
                .body(serde_json::to_string(&todos)?)
                .build())
        },
        ("POST", "/api/todos") => {
            let body: TodoItem = serde_json::from_slice(req.body())?;
            Ok(Response::builder()
                .status(201)
                .header("content-type", "application/json")
                .body(serde_json::to_string(&body)?)
                .build())
        },
        _ => Ok(Response::builder()
            .status(404)
            .body("Not Found")
            .build())
    }
}

# WASI実行時の権限付与例
# 特定ディレクトリのみ読み取り許可
wasmtime run --dir /data::/data:readonly my-app.wasm

# ネットワークアクセス許可
wasmtime run --tcplisten 0.0.0.0:8080 my-server.wasm

# 環境変数の渡し
wasmtime run --env KEY=VALUE my-app.wasm

従来のセキュリティモデル（Ambient Authority）：
  プロセス -> [全ファイルシステムアクセス可能]
           -> [全ネットワークアクセス可能]
           -> [全環境変数読み取り可能]

WASIセキュリティモデル（Capability-Based）：
  Wasmモジュール -> [/dataディレクトリのみ読み取り可能]
                -> [localhost:8080のみリスン可能]
                -> [指定された環境変数のみアクセス可能]

// todo.wit - インターフェース定義
package example:todo@0.1.0;

interface types {
    record todo-item {
        id: u32,
        title: string,
        completed: bool,
    }

    variant todo-error {
        not-found(string),
        validation-error(string),
        storage-error(string),
    }
}

interface todo-store {
    use types.{todo-item, todo-error};

    list-todos: func() -> result<list<todo-item>, todo-error>;
    get-todo: func(id: u32) -> result<todo-item, todo-error>;
    create-todo: func(title: string) -> result<todo-item, todo-error>;
    update-todo: func(id: u32, title: string, completed: bool) -> result<todo-item, todo-error>;
    delete-todo: func(id: u32) -> result<_, todo-error>;
}

world todo-app {
    import wasi:http/outgoing-handler@0.2.0;
    import wasi:logging/logging;

    export todo-store;
}

# 複数コンポーネントを組み合わせて一つのアプリを構成
# 1. 各コンポーネントをビルド
cargo component build --release  # Rustコンポーネント
componentize-py -d todo.wit -w todo-app app.py  # Pythonコンポーネント

# 2. コンポーネント合成
wasm-tools compose \
  --definitions auth-component.wasm \
  --definitions db-component.wasm \
  app-component.wasm \
  -o composed-app.wasm

# 3. 合成されたコンポーネントを実行
wasmtime serve composed-app.wasm

# spin.toml - Spinアプリ設定
spin_manifest_version = 2

[application]
name = "my-api"
version = "1.0.0"
description = "WasmベースAPIサーバー"

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

[[trigger.http]]
route = "/api/users/..."
component = "users"

[component.hello]
source = "target/wasm32-wasi/release/hello.wasm"
allowed_outbound_hosts = []

[component.users]
source = "target/wasm32-wasi/release/users.wasm"
allowed_outbound_hosts = ["https://api.example.com"]
key_value_stores = ["default"]
sqlite_databases = ["default"]

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

#[http_component]
fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
    // Key-Valueストア使用
    let store = Store::open_default()?;

    match req.method().as_str() {
        "GET" => {
            let key = req.path().trim_start_matches("/api/users/");
            match store.get(key)? {
                Some(value) => Ok(Response::builder()
                    .status(200)
                    .header("content-type", "application/json")
                    .body(value)
                    .build()),
                None => Ok(Response::builder()
                    .status(404)
                    .body("Not found")
                    .build()),
            }
        },
        "POST" => {
            let body = req.body().to_vec();
            let key = format!("user:{}", uuid::Uuid::new_v4());
            store.set(&key, &body)?;

            Ok(Response::builder()
                .status(201)
                .header("content-type", "application/json")
                .body(body)
                .build())
        },
        _ => Ok(Response::builder()
            .status(405)
            .body("Method not allowed")
            .build()),
    }
}

# Spinアプリのビルドと実行
spin build
spin up  # ローカル実行（ポート3000）

# Fermyon Cloudにデプロイ
spin deploy

# wadm.yaml - wasmCloudアプリマニフェスト
apiVersion: core.oam.dev/v1beta1
kind: Application
metadata:
  name: my-api
  annotations:
    description: "wasmCloud HTTP API"
spec:
  components:
    - name: api-handler
      type: component
      properties:
        image: ghcr.io/myorg/api-handler:0.1.0
      traits:
        - type: spreadscaler
          properties:
            instances: 5
        - type: link
          properties:
            target: httpserver
            namespace: wasi
            package: http
            interfaces: [incoming-handler]

    - name: httpserver
      type: capability
      properties:
        image: ghcr.io/wasmcloud/http-server:0.22.0
      traits:
        - type: link
          properties:
            target: api-handler
            namespace: wasi
            package: http
            interfaces: [incoming-handler]
            source_config:
              - name: default-http
                properties:
                  address: 0.0.0.0:8080

従来のLinuxコンテナ：
  Docker Engine -> containerd -> runc -> Linuxコンテナ
                                         （フルOS、数十〜数百MB）

Wasmコンテナ：
  Docker Engine -> containerd -> runwasi -> Wasmランタイム（wasmtime/wasmedge）
                                            （Wasmモジュール、数MB）

# Dockerfile.wasm - Wasmコンテナイメージ
FROM scratch
COPY target/wasm32-wasi/release/my-app.wasm /my-app.wasm
ENTRYPOINT ["/my-app.wasm"]

# Wasmイメージのビルドと実行
docker buildx build --platform wasi/wasm -t my-wasm-app .
docker run --runtime=io.containerd.wasmtime.v1 \
  --platform wasi/wasm \
  -p 8080:8080 \
  my-wasm-app

# docker-compose.yml - Wasm + Linuxコンテナ混在
version: "3"

services:
  # Wasmサービス（超軽量）
  api:
    image: my-wasm-api:latest
    runtime: io.containerd.wasmtime.v1
    platform: wasi/wasm
    ports:
      - "8080:8080"
    environment:
      - DB_HOST=postgres

  # 従来のLinuxコンテナ
  postgres:
    image: postgres:16
    environment:
      POSTGRES_DB: mydb
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
    volumes:
      - pgdata:/var/lib/postgresql/data

  # Wasmワーカーサービス
  worker:
    image: my-wasm-worker:latest
    runtime: io.containerd.wasmtime.v1
    platform: wasi/wasm
    environment:
      - QUEUE_URL=redis://redis:6379

  redis:
    image: redis:7-alpine

volumes:
  pgdata:

// Cloudflare Worker（Wasmベース）
export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname === '/api/compute') {
      // Wasmモジュールで重い計算を実行
      const wasmModule = await import('./compute.wasm');
      const result = wasmModule.heavy_computation(42);

      return new Response(JSON.stringify({ result }), {
        headers: { 'Content-Type': 'application/json' }
      });
    }

    // KVストア使用
    if (url.pathname.startsWith('/api/cache/')) {
      const key = url.pathname.split('/').pop();

      if (request.method === 'GET') {
        const value = await env.MY_KV.get(key);
        return new Response(value || 'Not found', {
          status: value ? 200 : 404
        });
      }

      if (request.method === 'PUT') {
        const body = await request.text();
        await env.MY_KV.put(key, body, { expirationTtl: 3600 });
        return new Response('OK');
      }
    }

    return new Response('Not found', { status: 404 });
  }
};

// Fastly Compute（Rust + Wasm）
use fastly::{Error, Request, Response};
use fastly::http::StatusCode;

#[fastly::main]
fn main(req: Request) -> Result<Response, Error> {
    let path = req.get_path().to_string();

    match path.as_str() {
        "/api/hello" => {
            Ok(Response::from_status(StatusCode::OK)
                .with_body_text_plain("Hello from Fastly Compute!"))
        },
        path if path.starts_with("/api/proxy/") => {
            let backend_path = path.trim_start_matches("/api/proxy");
            let mut backend_req = req;
            backend_req.set_path(backend_path);
            backend_req.send("origin_backend")
        },
        _ => {
            Ok(Response::from_status(StatusCode::NOT_FOUND)
                .with_body_text_plain("Not found"))
        }
    }
}

// Cargo.toml
[package]
name = "my-wasm-app"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wit-bindgen = "0.25"
serde = { version = "1", features = ["derive"] }
serde_json = "1"

# ビルドターゲット
rustup target add wasm32-wasi     # WASIターゲット
rustup target add wasm32-unknown-unknown  # ブラウザターゲット

# ビルド
cargo build --target wasm32-wasi --release

# Componentに変換
wasm-tools component new target/wasm32-wasi/release/my_app.wasm \
  -o my_app.component.wasm

// main.go - TinyGo Wasm
package main

import (
    "encoding/json"
    "net/http"

    spinhttp "github.com/fermyon/spin/sdk/go/v2/http"
)

type Response struct {
    Message string `json:"message"`
    Count   int    `json:"count"`
}

func init() {
    spinhttp.Handle(func(w http.ResponseWriter, r *http.Request) {
        resp := Response{
            Message: "Hello from Go Wasm!",
            Count:   42,
        }

        w.Header().Set("Content-Type", "application/json")
        json.NewEncoder(w).Encode(resp)
    })
}

func main() {}

# TinyGoでWasmビルド
tinygo build -target=wasi -o main.wasm main.go

# app.py - Python Wasm (Spin)
from spin_sdk.http import IncomingHandler, Request, Response
import json

class IncomingHandler(IncomingHandler):
    def handle_request(self, request: Request) -> Response:
        if request.method == "GET" and request.uri == "/api/hello":
            body = json.dumps({
                "message": "Hello from Python Wasm!",
                "path": request.uri,
            })
            return Response(
                200,
                {"content-type": "application/json"},
                bytes(body, "utf-8")
            )

        return Response(404, {}, b"Not found")

HTTP "Hello World" ベンチマーク（単一インスタンス）：

Spin（Rust/Wasm）：     ~150,000 req/s
Native Rust（Actix）：  ~200,000 req/s
Go（net/http）：        ~120,000 req/s
Node.js（Express）：    ~30,000 req/s
Python（FastAPI）：     ~10,000 req/s

Wasmはネイティブの70-90%のパフォーマンスを達成

単一HTTPサービスのメモリ使用量：

Wasm（Spin）：          2-5 MB
Wasm（wasmtime）：      5-15 MB
Node.js：              30-80 MB
Python：               30-60 MB
Java（JVM）：           100-300 MB
.NET：                 50-150 MB
Go：                   10-30 MB

1GBメモリでの同時サービス数：
Wasm：約200サービス
Node.js：約15サービス
Java：約5サービス

従来のプロセス：
+------------------------------------------+
| プロセス                                  |
|  - 全ファイルシステムアクセス               |
|  - 全ネットワークアクセス                   |
|  - 無制限システムコール                     |
|  - 他プロセスメモリアクセス（exploit時）     |
+------------------------------------------+

Wasmサンドボックス：
+------------------------------------------+
| Wasmモジュール                            |
|  +------------------------------------+  |
|  | 線形メモリ（モジュール専用）           |  |
|  | - 境界検査（bounds checking）        |  |
|  | - ホストメモリアクセス不可            |  |
|  +------------------------------------+  |
|  | 許可されたシステムインターフェースのみ  |  |
|  | - wasi:filesystem（指定パスのみ）     |  |
|  | - wasi:sockets（指定アドレスのみ）    |  |
|  +------------------------------------+  |
+------------------------------------------+

// ホストアプリケーション - プラグインローダー
use wasmtime::*;
use wasmtime_wasi::WasiCtxBuilder;

fn load_plugin(plugin_path: &str) -> Result<(), Box<dyn std::error::Error>> {
    let engine = Engine::default();
    let mut linker = Linker::new(&engine);
    wasmtime_wasi::add_to_linker(&mut linker, |s| s)?;

    // プラグインに最小権限のみ付与
    let wasi = WasiCtxBuilder::new()
        .inherit_stdout()  // stdoutのみ許可
        // ファイルシステムアクセスなし
        // ネットワークアクセスなし
        .build();

    let mut store = Store::new(&engine, wasi);
    let module = Module::from_file(&engine, plugin_path)?;
    let instance = linker.instantiate(&mut store, &module)?;

    // プラグイン関数呼び出し
    let process = instance
        .get_typed_func::<(i32,), i32>(&mut store, "process")?;
    let result = process.call(&mut store, (42,))?;

    println!("Plugin result: {}", result);
    Ok(())
}

Edge Wasmアーキテクチャ：

ユーザーリクエスト -> [CDN Edge（300+ PoP）]
                       |
                       v
                    [Wasm Worker]
                       |
                       +-> キャッシュヒット：即座に応答（0ms）
                       |
                       +-> キャッシュミス：オリジンサーバーにリクエスト
                       |                |
                       |                v
                       |           [Origin Server]
                       |                |
                       v                v
                    [応答 + キャッシュ保存]

利点：
- ユーザーに最も近い場所で実行
- コールドスタートほぼなし
- グローバル分散自動デプロイ

2025-2026展望：
- WASI 0.2完全安定化・主要クラウド採用
- Component Modelエコシステム成熟
- Docker Wasmプロダクションレディ
- GC proposal主要ランタイム実装
- Threads proposal安定化

2027+展望：
- Wasmがコンテナと同等の地位
- Edge-firstアーキテクチャのデフォルトランタイム
- IoT/組み込みの標準実行環境
- 多言語コンポーネントエコシステム確立