WebAssembly を読み込むベストプラクティス 2026年春版 / Best Practices for Loading WebAssembly (Spring 2026)

fukuoka.ts #4
https://fukuoka-ts.connpass.com/event/387858/

Transcript

1. WebAssembly を読み込む  ベストプラクティス 2026 年春版 fukuoka.ts #4 pixiv Inc. 森内建太 @petamoriken 2026.5.7
2. 2 自己紹介 • Web  エンジニア • Deno / ECMAScript コントリビューター • フロントエンドカンファレンス福岡スピーカー • Web 標準 を追うのが好き petamoriken WebDev in Fukuoka
3. 3 https://scrapbox.io/petamoriken/
4. 背景 4
5. 5 • W3C ワーキンググループが策定しているバイトコード • C/C++, Rust, AssemblyScript などからコンパイル ◦ C/C++ は Emscripten を使ってコンパイルする • ほとんどの JS エンジン上で実行できる ◦ Chrome, Firefox, Safari, Ladybird ◦ Deno, Node.js, Bun, Cloudflare Workers WebAssembly
6. 6 • 洞窟物語 Pixel さんが作った独自音楽形式 “pxtone” を ブラウザでデコード、再生するライブラリ • 10年前に Pixel さんにメールで頼み込んで C++ ソース コードをもらい、Emscripten をつかってコンパイル PxtoneJS
7. 7 • Emscripten の出力サイズがとにかくでかい ◦ Emscripten に依存せずに Wasm 化する方法を模索 👉 Wasm 化できる標準 C++ ライブラリがなさそう • いっそのこと C++ を Rust にポートしよう 👉 挫折 PxtoneJS v3 (2017-02)
8. 8 • 2026-02 Ladybird が LibJS を C++ から Rust へポート ◦ AI Agent を使えば Rust 化できるのでは？
9. 9 • GW に Claude Code を使って Rust にポートできた！ ◦ コンパイル後約 60% の容量削減 • ついでにストリーム再生 API を追加 ◦ Web 標準仕様にストリーム再生用の API がなかった ◦ 今は WebCodecs の AudioData がいい感じ PxtoneJS v4 (2026-05)
10. WebAssembly の読み込み 10
11. 11 WebAssembly の読み込み ArrayBuffer WebAssembly.Module WebAssembly.Instance const url = import.meta.resolve("./foo.wasm"); const response = await fetch(url); const buffer = await response.arrayBuffer(); const module = new WebAssembly.Module(buffer); const instance = new WebAssembly.Instance(module); const { foo } = instance.exports;
12. 12 WebAssembly の読み込み ArrayBuffer WebAssembly.Module WebAssembly.Instance const url = import.meta.resolve("./foo.wasm"); const response = await fetch(url); const buffer = await response.arrayBuffer(); const module = new WebAssembly.Module(buffer); const instance = new WebAssembly.Instance(module); const { foo } = instance.exports; モジュールの依存に入らない（要バンドラー設定）
13. 13 WebAssembly の読み込み ArrayBuffer WebAssembly.Module WebAssembly.Instance const url = import.meta.resolve("./foo.wasm"); const response = await fetch(url); const buffer = await response.arrayBuffer(); const module = new WebAssembly.Module(buffer); const instance = new WebAssembly.Instance(module); const { foo } = instance.exports; Top-level await で非同期モジュールが強制される
14. 14 WebAssembly の読み込み ArrayBuffer WebAssembly.Module WebAssembly.Instance const base64 = "AGFzbQEAAAABkAEVYAJ/fwF/YAJ..."; const { buffer } = Uint8Array.fromBase64(base64); const module = new WebAssembly.Module(buffer); const instance = new WebAssembly.Instance(module); const { foo } = instance.exports;
15. 15 WebAssembly の読み込み ArrayBuffer WebAssembly.Module WebAssembly.Instance const base64 = "AGFzbQEAAAABkAEVYAJ/fwF/YAJ..."; const { buffer } = Uint8Array.fromBase64(base64); const module = new WebAssembly.Module(buffer); const instance = new WebAssembly.Instance(module); const { foo } = instance.exports; Base64 文字列で無理矢理インライン化して解決
16. 16 WebAssembly の読み込み Stage 2.7 Import Bytes (Deno, Node.js, Bun サポート） ArrayBuffer WebAssembly.Module WebAssembly.Instance import buffer from "./foo.wasm" with { type: "bytes", }; const module = new WebAssembly.Module(buffer); const instance = new WebAssembly.Instance(module); const { foo } = instance.exports;
17. 17 WebAssembly の読み込み Stage 3 Source Phase Imports (Deno, Node.js, Cloudflare Workers サポート） ArrayBuffer WebAssembly.Module WebAssembly.Instance import source module from "./foo.wasm"; const instance = new WebAssembly.Instance(module); const { foo } = instance.exports;
18. 18 WebAssembly の読み込み Phase 3 ES Module Integration for WebAssembly (Deno, Node.js サポート） ArrayBuffer WebAssembly.Module WebAssembly.Instance import { foo } from "./foo.wasm";
19. 19 • AI Agent で C/C++ を Rust にポートするのが容易に ◦ ライセンスに注意 • ストリーム再生は WebCodecs の AudioData が便利 • WebAssembly を使ったライブラリを配布する場合、 現状 Base64 文字列でインライン化するのがよさそう ◦ 将来的に解決される予定 まとめ