Vite + Rust で Wasm を ES Modulesとして使う

千歳ゆるい勉強会vol.8にて発表した内容です

Transcript

1. Vite + Rust で Wasm を ES Modulesとして 使う import { add } from './main.wasm' HakataYusuke(@hacusk) 千歳ゆるい勉強会 vol.8 2026.10.18(Sun.) @公立千歳科学技術大学 1
2. $ whoami Name: はくすけ(@hacusk) / HakataYusuke Job: 株式会社モニクル SWE Language:TypeScript, Go, PHP… FavoriteTech: MultiPlatformなもの, OSS, ネ ットワーク Love: 声優, 旅行, ライブ, アイドル, 車, モータ ースポーツ, ガジェット, 飛行機, 麻雀 Community: 函館本線沿線勉強会, フロントエ ンドカンファレンス北海道実行委員会, OSC北 海道実行委員会, 一般社団法人LOCAL Website: https://hacusk.net/ 2
3. WebAssembly（Wasm）ってなに？ 普通のコンパイル C / Rust / Go → その CPU 向けの機械語 x86 用バイナリは ARM では動かない OS・アーキテクチャに依存する Wasm → 仮想マシン向けのバイナリ ブラウザ（や WASI）が実行してくれる 一度作れば、環境が違っても同じファイル が動く JVM（Java のバイトコード）に近い発想。 違いは、最初から Web ブラウザで速く・安全に動かすことを狙って設計されている点（W3C 標準）。 3
4. なにがうれしいの？ JavaScript 以外の言語（Rust, Go, C/C++ …）のコードをブラウザで動かせる ネイティブに近い速さで計算できる（画像処理・圧縮・数値計算など） 主要ブラウザすべてで動く 4
5. Wasm をブラウザで使う従来の方法 const res = await fetch('./add.wasm') const { instance } = await WebAssembly.instantiateStreaming(res) const add = instance.exports.add 手動でフェッチ・インスタンス化が必要 普通の JS インポートとまったく異なる体験 5
6. Vite の Wasm サポート — 2 段階 アプローチ 構文 特徴 ?init import init from './add.wasm?init' init 関数を呼び、exports を取り出す ESM 統合 import { add } from './add.wasm' 通常の named import と同じ ESM 統合は WebAssembly/ES Module Integration 提案 に準拠 Vite 8.1〜 コアでサポート（追加プラグイン不要） 6
7. 言語の選択 — TinyGo vs Rust TinyGo Rust ( wasm32-unknown-unknown ) 500 B 不要 ゼロ Wasm サイズ 21 KB JS ランタイム wasm_exec.js 必須 Wasm imports go.* 多数 ?init 呼び出し await init(go.importObject) await init() Rust はランタイムを含まない 純粋な Wasm を出力 → ESM 統合と相性が良い 7
8. Rust 側のコード // wasm/src/lib.rs #[unsafe(no_mangle)] // edition 2024 では unsafe が必要 pub fn add(a: i32, b: i32) -> i32 { a + b } #[unsafe(no_mangle)] pub fn fibonacci(n: u32) -> u64 { /* ... */ } // → JS では BigInt # Cargo.toml [lib] crate-type = ["cdylib"] # C 互換の動的ライブラリとして出力 8
9. Vue コンポーネントでの使用 <script setup lang="ts"> import { add, fibonacci } from '../assets/main.wasm' // 非同期モジュール — 親で <Suspense> が必要 </script> <template> <output>{{ add(3, 4) }}</output> </template> 普通の JS モジュールと 完全に同じ感覚 でインポートできる 9
10. デモ 10
11. ハマりどころ（Vite 8.1+） 型は手書き .d.wasm.ts ＋ allowArbitraryExtensions // main.d.wasm.ts export declare function add(a: number, b: number): number 出典: Vite — ESM 統合 / TSConfig — allowArbitraryExtensions 非同期モジュール は TLA 相当の async module → Vue では親に <Suspense> .wasm <Suspense> <WasmDemo /> </Suspense> 出典: Vite — ESM 統合 11
12. まとめ Rust (edition 2024) └─ cargo wasm └─ main.wasm (500B、imports ゼロ) └─ Vite 8.1+（コアの ESM 統合） └─ import { add } from './main.wasm' └─ Vue コンポーネントで直接呼び出し Rust × wasm32-unknown-unknown が ESM 統合に最も相性が良い Vite 8.1〜 は import { add } from './x.wasm' が標準サポート 型は .d.wasm.ts + allowArbitraryExtensions で解決 コード: https://github.com/hacusk/vite-wasm-esm-integration-example 12
13. 告知 13
14. Sapporo.sre #1 2026.11.19(Thu.) @北海道ガス株式会社 本社ビル(札幌市) https://sapporo-sre.connpass.com/event/401691/ 14
15. TechRAMEN 2026 Conference 2026.11.20(Fri.)〜21(Sat.) @コンシェルジュ フラノ https://techramenconf.net/2026/ 15
16. LOCAL Developer Day '26 in EBETSU 2026.12.19(Sat.) @北海道情報大学 eDCタワー 10F(江別市) https://www.local.or.jp/2026/09/10111.html 16