{ freetool24 }
Developer Tools

WebAssembly (WASM) — Webデベロッパーのための入門ガイド

WebAssemblyの実践的な入門ガイド — その概要、仕組み、そしてネイティブに近いパフォーマンスでWebアプリケーションを強化する方法を解説します。

10分で読めます

Code on a screen

WebAssembly（略称：WASM）は、ここ10年でブラウザに登場した最も革新的な技術の一つです。C、C++、Rust、Goなどのプログラミングによるコードをブラウザのタブ内で、プラグイン不要かつネイティブに近い速度で実行できます。

このガイドでは、Webデベロッパーが今日からWebAssemblyを始めるために必要な知識をすべて解説します。

WebAssemblyとは？

WebAssemblyは、スタックベースの仮想マシン向けのバイナリ命令フォーマットです。高水準言語のポータブルなコンパイルターゲットとして設計されており、クライアント・サーバーを問わずWebアプリケーションのデプロイを可能にします。

ブラウザ向けの低水準アセンブリ言語のようなものですが、安全でサンドボックス化されており、JavaScriptの代替ではなく、JavaScriptと共存する設計になっています。

重要な事実： WebAssemblyはW3C標準となっており、Chrome、Firefox、Safari、Edgeすべての主要ブラウザでサポートされています。

なぜ注目すべきなのか？

JavaScriptは非常に汎用性が高い言語ですが、特に以下のようなCPU負荷の高いタスクでは限界があります。

  • 動画・音声のエンコード/デコード
  • 画像処理とフィルター
  • 物理シミュレーションと3Dレンダリング
  • 暗号処理
  • レガシーなC/C++コードベースのブラウザ上での実行

WebAssemblyはネイティブのマシンコードに近い速度で実行することで、こうしたギャップを埋めます。

機能 JavaScript WebAssembly
実行速度 インタープリタ / JIT ネイティブに近い
型システム 動的型付け 強い型付け
言語サポート JSのみ C、C++、Rust、Goなど
ファイル形式 テキスト（.js） バイナリ（.wasm）
DOMアクセス 直接 JavaScriptブリッジ経由

WebAssemblyの仕組み

一般的なワークフローは次のとおりです。

  1. 記述： サポートされている言語（例：RustまたはC++）でコードを書く
  2. コンパイル： ツールチェーン（例：wasm-pack、Emscripten）を使って.wasmバイナリにコンパイルする
  3. 読み込み： WebAssembly APIを使ってJavaScriptで.wasmファイルを読み込む
  4. 呼び出し： JavaScriptコードからエクスポートされたWASM関数を直接呼び出す
ソースコード (Rust/C++) → コンパイラ → .wasm バイナリ → ブラウザ

はじめてのWebAssemblyモジュール

Rustとwasm-packを使ったシンプルな例を見ていきましょう。

Step 1: ツールチェーンをインストールする

# Install Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Install wasm-pack
cargo install wasm-pack

Step 2: Rustライブラリを作成する

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => {
            let mut a = 0u64;
            let mut b = 1u64;
            for _ in 2..=n {
                let c = a + b;
                a = b;
                b = c;
            }
            b
        }
    }
}

Step 3: WASMにコンパイルする

wasm-pack build --target web

これにより、.wasmファイルと自動生成されたJavaScriptバインディングを含むpkg/フォルダが生成されます。

Step 4: JavaScriptで使用する

import init, { add, fibonacci } from './pkg/my_wasm_lib.js';

async function run() {
  await init(); // Load and instantiate the WASM module

  console.log(add(3, 5));         // → 8
  console.log(fibonacci(40));     // → 102334155 (fast!)
}

run();

バンドラーなしでWASMを読み込む

バンドラーを使用しない場合、ブラウザのネイティブWebAssembly APIを使ってWASMモジュールを直接読み込むことができます。

async function loadWasm(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(buffer, {});
  return instance.exports;
}

const wasm = await loadWasm('/my-module.wasm');
console.log(wasm.add(10, 20)); // → 30

実際のユースケース

WebAssemblyはすでに様々な印象的なアプリケーションで活用されています。

🎬 動画処理

FFmpegなどのツールがWASMにコンパイルされており、ブラウザ上で完全にクライアントサイドで動画のトリミング、変換、エンコードが可能です — サーバーへのアップロードは不要です。

🖼️ 画像編集

PhotopeaやSquooshはWASMを使用して、高品質な画像圧縮のためにAVIFやWebPエンコーダーなどの高度なコーデックをブラウザ上で直接実行しています。

🎮 ゲーム

UnityとUnreal EngineはいずれもWebAssemblyへのゲームエクスポートをサポートしており、フル3Dゲームをブラウザのタブ上で動かすことができます。

🔒 暗号処理

libsodiumなどのライブラリはWASMにコンパイルされており、クライアント上で高速かつ安全な暗号処理（ハッシュ化、暗号化）を完結させることができます。

🗄️ ブラウザ上のSQLite

sql.jsなどのプロジェクトはSQLiteをWASMにコンパイルし、サーバー不要でローカルに完全なリレーショナルデータベースを実行できます。

WASMとJavaScript：最強の組み合わせ

WebAssemblyがJavaScriptを置き換えるものだという誤解がありますが、そうではありません。両者は補完的な関係にあります。

  • JavaScript はUI、DOM操作、イベント処理、グルーロジックを担当する
  • WebAssembly はJSでは処理が遅くなるような重い計算処理を担当する

WASMの関数は通常の関数と同様にJavaScriptから呼び出せます。両者の橋渡しはシームレスです。

ベストプラクティス：

  • WASMモジュールは計算処理に集中させる — WAMSからDOMを操作しようとするのは避ける
  • JSとWASMメモリ間のデータコピーを最小限に抑える（コストが発生する）
  • マルチスレッドのWASMワークロードにはSharedArrayBufferとAtomicsを使用する
  • .wasmファイルは積極的にキャッシュする — バイナリ形式で非常に高い圧縮率を得られる

WebAssemblyのデバッグ

モダンなブラウザのDevToolsはWASMを十分にサポートしています。

  • Chrome DevTools はWASMの命令をステップ実行でき、元のRust/C++コードへのソースマップも表示できる
  • JSサイドからconsole.logを使ってWASMとの間で受け渡される値を確認する
  • wasm-bindgen CLIにはソースマップを埋め込む--debugフラグが含まれている
wasm-pack build --target web --debug

未来：ブラウザを超えたWASM

WebAssemblyはもはやブラウザだけの技術ではありません。WASI（WebAssembly System Interface）標準により、WASMはブラウザ外 — サーバー、エッジ関数、IoTデバイスなど — でも、ポータブルかつサンドボックス化された実行モデルで動作できるようになりました。

Wasmtime、WasmEdge、WAMRなどのランタイムを使えばどこでもWASMモジュールを実行でき、ポータブルで安全なサーバーサイドコードの未来の有力候補となっています。

まとめ

WebAssemblyはWeb上のアプリケーションの可能性を大きく広げます。覚えておくべきポイントは以下のとおりです。

  • WASMはすべての主要ブラウザでネイティブに近い速度で動作する
  • Rust、C、C++、Goで記述し、.wasmにコンパイルする
  • 始めるにはwasm-pack（Rust）またはEmscripten（C/C++）を使用する
  • WASMとJavaScriptは協力して動作する — 競合関係ではない
  • 実際のユースケースには動画処理、画像編集、ゲーム、データベースなどがある

実際に試してみませんか？無料の Base64 Encoder/Decoder を使ってみてください — WASMのワークフローに近い高速なクライアントサイド処理技術を活用した、本サイトの数あるツールの一つです。

すべての記事に戻るツールを閲覧