WebAssembly

WebAssemblyとは

WebAssembly(Wasm)は、ブラウザ上で高速に実行できるバイナリ形式のコードです。C・C++・Rust・[[Go]] などの言語で書いたプログラムを Wasm にコンパイルすると、ブラウザで(ほぼ)ネイティブに近い速度で実行できます。

長年「ブラウザで動く言語は [[JavaScript]] だけ」でしたが、Wasm の登場により、計算量の多い処理を得意な言語で書いてWebに持ち込めるようになりました。

JavaScriptとの関係 — 置き換えではなく補完

よくある誤解が「WasmはJSを置き換える」というものです。実際は補完関係です。

	JavaScript	WebAssembly
形式	テキストのソースコード	コンパイル済みバイナリ
得意分野	UI操作、[[DOM]] 操作、アプリのロジック	数値計算、画像・動画処理、物理演算
DOM操作	直接できる	直接はできない(JS経由で行う)
実行速度	JITで十分速いが変動あり	安定して高速

Wasm は DOM に直接アクセスできないため、画面まわりはJS、重い計算はWasmという分担になります。JSから Wasm の関数を呼び出し、結果を受け取って画面に反映する、という構成が基本形です。

実際の活用例

Figma — C++製の描画エンジンをWasm化してブラウザで動作
Google Meet — 背景ぼかしなどの映像処理
ffmpeg.wasm — 動画変換をブラウザ内で完結
ゲームエンジン — Unity などのWebビルド

共通するのは「従来ならネイティブアプリが必要だった重い処理」であることです。逆に、普通のWebサイトのロジックをWasmにしても速くなりません。ボトルネックが計算にある場合の選択肢です([[Webパフォーマンス最適化]] の一環として検討します)。

初学者向けポイント

Wasm を書くのに新しい言語を覚える必要はありません。Rust や Go など既存言語からコンパイルします
JSとWasmの間のデータ受け渡しにはコストがあります。細かく呼び合うと逆に遅くなるため、「まとめて渡してまとめて返す」が設計のコツです
ブラウザ外でも実行できるランタイム(WASI)があり、サーバーサイドやエッジ環境でも活用が広がっています

関連技術とのつながり

[[JavaScript]] — Wasmと役割分担するパートナー
[[Webパフォーマンス最適化]] — 計算ボトルネックへの強力な選択肢
[[SVGとCanvas]] — Figma などの描画事例が土台にする、Canvas とその上の WebGL による描画
[[Go]] — Wasmへコンパイルできる言語の一つ

Q: WebAssemblyの説明として正しいのはどれ?
- [x] C++やRustなどから変換して、ブラウザで高速実行できるバイナリ形式
- [ ] JavaScriptの新しいフレームワークの名前
- [ ] HTMLを圧縮するファイル形式
解説: WasmはC・C++・Rust・Goなどをコンパイルして得られるバイナリ形式で、ブラウザで高速に実行できます。

Q: WebAssemblyとJavaScriptの関係として正しいのはどれ?
- [ ] WasmがJSを完全に置き換える
- [x] 画面まわりはJS、重い計算はWasmという補完関係
- [ ] 同時には使えず、どちらか一方を選ぶ必要がある
解説: WasmはDOMを直接操作できないため、UIはJSが担い、計算の重い処理をWasmが担う分担が基本形です。

Q: Wasmの採用が効果を発揮する場面はどれ?
- [ ] 静的なブログの表示
- [ ] フォームの入力チェック
- [x] 画像・動画処理や物理演算など計算量の多い処理
解説: Wasmの強みは計算性能です。通常のWebサイトのロジックを移しても速くはなりません。