最近の注目トピック

WebAssembly うぇぶあせんぶり

バイナリフォーマットブラウザ高速実行WASMコンパイルポータビリティ

WebAssemblyについて教えて

簡単に言うとこんな感じ！

ブラウザの中でゲームや動画編集ソフト並みの処理をサクサク動かせる技術だよ！いままでWebはJavaScriptしか動かなかったけど、C++やRustで書いたプログラムをブラウザにそのまま持ち込めるようになったってこと！

WebAssemblyとは

WebAssembly（略称：WASM）は、Webブラウザ上でネイティブアプリに近いスピードでコードを実行するためのバイナリ形式の命令セット（仮想マシン向けの低レベル言語）です。2019年にW3Cの公式勧告となり、現在はChrome・Firefox・Safari・Edgeすべての主要ブラウザが対応しています。

従来、Webブラウザで動くプログラミング言語はJavaScript一択でした。JavaScriptは非常に柔軟ですが、画像処理・3Dレンダリング・音楽合成・科学計算といった「重い処理」には向いていません。WebAssemblyはその限界を打ち破るために生まれた技術で、C・C++・Rust・Goといった言語で書いたコードをブラウザで動かせるようにします。

重要なのは「JavaScriptの置き換え」ではなく「JavaScriptとの協調動作」という点です。WASMはJavaScriptと仲良く共存しながら、重い処理だけを担当するというイメージです。実務上は「ブラウザだけでここまでできるの？」という体験——たとえばブラウザ上で動くPhotoshop・AutoCAD・動画編集ツールなど——の裏側でWASMが活躍しています。

WebAssemblyの仕組みと構造

WebAssemblyの処理の流れを整理するとこうなります。

ステップ	内容
① ソースコード記述	C++ / Rust / Go などで書く
② コンパイル	`emcc`（Emscripten）や`wasm-pack`などでWASM形式に変換
③ `.wasm`ファイル生成	バイナリ形式の命令ファイルが生成される
④ ブラウザで読み込み	JavaScriptが`.wasm`を`fetch()`して呼び出す
⑤ 高速実行	ブラウザ内のWASMランタイムが高速に処理

WASMのバイナリは人間が直接読めませんが、WAT（WebAssembly Text Format） という人間可読のテキスト形式も存在します。

;; WAT形式（人間が読めるWASMの表現例）
(module
  (func $add (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add)
  (export "add" (func $add))
)

覚え方

「WASMはブラウザ用の『ネイティブアプリの速さをWeb向けに圧縮したもの』」と覚えると◎。語呂合わせなら「ウェブでアセンブリ並みの速さ → WASM」。

WASMの4つの設計原則

原則	意味
高速（Fast）	ネイティブコードに近い実行速度
安全（Safe）	サンドボックス環境で動作、ホストに影響しない
オープン（Open）	特定企業に依存しないW3C標準
ポータブル（Portable）	OS・アーキテクチャを問わず動作

歴史と背景

2010年代前半：JavaScriptの高速化競争（V8エンジン等）が進むが、ネイティブアプリとの性能差は依然大きかった
2013年：Mozillaがasm.jsを発表。JavaScriptのサブセットで高速化を試みる先駆け的技術
2015年：Google・Mozilla・Microsoft・Appleの4社が共同でWebAssemblyの開発を発表
2017年：主要4ブラウザ（Chrome・Firefox・Safari・Edge）が一斉にWASMの初期版をサポート開始
2019年：W3C公式勧告となり、Webの第4の標準言語（HTML・CSS・JavaScriptに次ぐ）として認定
2022年以降：WASI（WebAssembly System Interface） が登場し、ブラウザ外（サーバー・エッジ・IoT）でも動作可能に。Dockerの共同創業者が「もしWASMがLinuxより先にあったらDockerは要らなかった」と発言し話題に

JavaScriptとWebAssemblyの比較

WASMはJavaScriptを置き換えるものではなく、得意領域が異なります。

比較軸	JavaScript	WebAssembly
実行速度	中程度（JIT最適化あり）	非常に高速（ネイティブに近い）
記述のしやすさ	直接ブラウザで書ける	別言語をコンパイルして生成
DOM操作	◎ 得意	△ 直接はできない（JSを介す）
重い数値計算	△ 苦手	◎ 得意
ファイルサイズ	テキスト（gzip圧縮で小さい）	バイナリ（コンパクト）
デバッグ	◎ 容易	△ やや難しい
主な用途	UI制御・イベント処理	画像処理・ゲーム・科学計算

ブラウザ外でも使えるWASI

2022年以降、WASI（WebAssembly System Interface） という仕様が整備され、WASMはブラウザの外でも動くようになりました。これにより「一度コンパイルすればどこでも動く（Write Once, Run Anywhere）」という夢に近づいています。

実行環境	用途例
ブラウザ	高性能Webアプリ、ゲーム
サーバー	エッジコンピューティング（Cloudflare Workers等）
IoT・組み込み	軽量ランタイムでの実行
プラグイン	Figma・Shopify等のプラグイン基盤

規格・仕様	内容
W3C WebAssembly 1.0	2019年公式勧告。基本仕様
W3C WebAssembly 2.0	SIMD・参照型など拡張仕様（策定中）
WASI（WebAssembly System Interface）	ブラウザ外でのシステムAPI標準
Emscripten	C/C++をWASMにコンパイルするツールチェーン
wasm-pack	RustをWASMにコンパイルするツール