【うぇぶあせんぶりー】

WebAssembly(Wasm) とは?

💡 ブラウザの中で「ほぼネイティブ速度」
📌 このページのポイント
WebAssembly vs JavaScript 実行フロー WebAssembly C / C++ Rust コンパイル .wasm ブラウザ実行 ネイティブ近速度 高速 JavaScript ソースコード .js パース インタ プリト JIT最適化 実行時コンパイル 中速 Wasmは事前コンパイル済みのため、ブラウザ上でほぼネイティブ速度で動作 計算負荷の高い処理(画像処理・ゲーム・暗号化)に最適
WebAssembly と JavaScript の実行フロー比較
ひよこ ひよこ

JavaScriptじゃダメなの?

ペンギン先生 ペンギン先生

JavaScriptは柔軟で開発効率が高いけど、動的型付けとGCのオーバーヘッドで重い計算には向かない。画像処理、動画編集、3Dレンダリング、暗号化処理などCPU集約型タスクではWasmが10〜100倍速いこともある。JSが得意な領域はJSで、重い処理はWasmで、と使い分けるのが現実的だよ

ひよこ ひよこ

どういう場面で使われてるの?

ペンギン先生 ペンギン先生

FigmaUIデザインツール):C++のレンダリングエンジンをWasmで動かしてブラウザ上で高速描画、②Google Earth:3D地球儀をブラウザで、③Photoshop Web版:画像処理エンジンをWasm化、④ゲーム:UnityやUnreal EngineのWebGLエクスポートでWasm使用。「デスクトップアプリ級の体験をブラウザで」を実現しているよ

ひよこ ひよこ

ブラウザ以外でも使えるの?

ペンギン先生 ペンギン先生

WASI(WebAssembly System Interface)という標準があって、ブラウザ外でもWasmを実行できる。サーバーレスCloudflare Workers、Fastly Compute)、プラグインシステム(Envoy ProxyのWasmフィルター)、エッジコンピューティングで採用が進んでいる。Docker共同創業者のSolomon Hykesが「Wasmがあれば2008年にDockerは作らなかった」と発言したほど注目されているよ

ひよこ ひよこ

学ぶにはどの言語がいい?

ペンギン先生 ペンギン先生

Rustが最も相性が良いよ。GCなし、小さなバイナリサイズ、wasm-bindgenやwasm-packなどのツールチェインが充実。AssemblyScript(TypeScriptサブセット→Wasm)はJS開発者にとっては入りやすい。C/C++はEmscriptenで既存コードをWasm化できる。まずはRust+wasm-packで「Hello Wasm」から始めるのがおすすめだよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「WebAssembly」って出てきたら「ブラウザでネイティブ並みの高速コードを動かす技術」と思えればだいたいOK!
📖 おまけ:英語の意味
「WebAssembly (Wasm)」 = Webアセンブリ
💬 Web上で動くAssembly(アセンブリ=低レベル命令)。2017年に主要ブラウザが一斉対応したよ
← 用語集にもどる