WebAssembly Implementation dengan Claude Code

WebAssemblyintegrasi dengan Claude Code: 実現

WebAssembly（Wasm） browser ネイティブ 近い速度 動作 バイナリ形式.gambarpemrosesan、暗号計算、ゲームロジック dll.CPU負荷 高いpemrosesan Web cepat 実行 bisa dilakukan.Claude Code 使えば、Wasmmodul pembuatan dari integrasiま スムーズ 進められ.

RustからWasmmodulをpembuatan

> Rust dengan gambarフィルタpemrosesan Wasmmodul buatkan.
> wasm-pack dengan buildする構成.

# Cargo.toml
[package]
name = "image-filter"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
web-sys = { version = "0.3", features = ["console"] }

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

#[wasm_bindgen]
pub fn grayscale(pixels: &mut [u8]) {
    for chunk in 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;
        // chunk[3] アルファ値、そ まま
    }
}

#[wasm_bindgen]
pub fn blur(pixels: &mut [u8], width: u32, height: u32, radius: u32) {
    let src = pixels.to_vec();
    let r = radius as i32;

    for y in 0..height as i32 {
        for x in 0..width as i32 {
            let mut r_sum = 0u32;
            let mut g_sum = 0u32;
            let mut b_sum = 0u32;
            let mut count = 0u32;

            for dy in -r..=r {
                for dx in -r..=r {
                    let nx = (x + dx).clamp(0, width as i32 - 1) as usize;
                    let ny = (y + dy).clamp(0, height as i32 - 1) as usize;
                    let idx = (ny * width as usize + nx) * 4;
                    r_sum += src[idx] as u32;
                    g_sum += src[idx + 1] as u32;
                    b_sum += src[idx + 2] as u32;
                    count += 1;
                }
            }

            let idx = (y as usize * width as usize + x as usize) * 4;
            pixels[idx] = (r_sum / count) as u8;
            pixels[idx + 1] = (g_sum / count) as u8;
            pixels[idx + 2] = (b_sum / count) as u8;
        }
    }
}

JavaScriptからWasmを読み込む

> Wasmmodul browser dengan 読み込ん dengan 、
> Canvasgambar 適用するpemrosesan 書いて。

// src/wasm-loader.ts
import init, { grayscale, blur } from '../pkg/image_filter';

export async function initWasm() {
  await init();
}

export async function applyGrayscale(canvas: HTMLCanvasElement) {
  const ctx = canvas.getContext('2d')!;
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = new Uint8Array(imageData.data.buffer);

  grayscale(pixels);

  ctx.putImageData(imageData, 0, 0);
}

export async function applyBlur(
  canvas: HTMLCanvasElement,
  radius: number
) {
  const ctx = canvas.getContext('2d')!;
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = new Uint8Array(imageData.data.buffer);

  blur(pixels, canvas.width, canvas.height, radius);

  ctx.putImageData(imageData, 0, 0);
}

buildとbundlepengaturan

# wasm-packでビルド
wasm-pack build --target web --out-dir pkg

# Viteでの設定
# vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default defineConfig({
  plugins: [wasm(), topLevelAwait()],
  build: {
    target: 'esnext',
  },
});

Perbandingan Performa

JavaScript dan Wasm pemrosesan速度 比較 み.

// benchmark.ts
async function benchmark() {
  const size = 1920 * 1080 * 4;
  const pixels = new Uint8Array(size);
  crypto.getRandomValues(pixels);

  // JavaScript版
  const jsStart = performance.now();
  grayscaleJS(pixels);
  const jsTime = performance.now() - jsStart;

  // Wasm版
  const wasmStart = performance.now();
  grayscale(pixels);
  const wasmTime = performance.now() - wasmStart;

  console.log(`JS: ${jsTime.toFixed(2)}ms`);
  console.log(`Wasm: ${wasmTime.toFixed(2)}ms`);
  console.log(`速度比: ${(jsTime / wasmTime).toFixed(1)}x`);
}

Full HDサイズ gambarpemrosesan 、Wasm版 JavaScript版 3〜5倍cepat 動作 場合 あり.

Summary

WebAssembly pemanfaatanすれば、Webaplikasi performa 大幅 向上 bisa dilakukan.Claude Code 使えば、RustやAssemblyScript コードgenerate dari JavaScriptintegrasiま efisien 進められ.performaoptimasipanduanやRustpengembangan juga bisa dijadikan referensi.

Untuk WebAssemblyの詳細, lihat MDN WebAssemblyガイド.