Shunsuke Kataoka Blog

ここからは 実際にWebAssembly（Wasm）を動かしてみる ステップに入ります。

1. WebAssembly（WAT）を手書きで書いてみる

まずは、 WebAssemblyのテキストフォーマット（WAT） を使って簡単なプログラムを作成し、 .wasm にコンパイルしてブラウザやNode.jsで実行します。

✅ WATとは？

WAT（WebAssembly Text Format）は、WebAssemblyの 人間が読める形式 のコードです。

例えば、以下のようなコードは 2 + 3 を計算する Wasm のWATコードです：

(module
  (func $add (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.add
  )
  (export "add" (func $add))
)

✅ `.wasm` に変換

まず、この .wat ファイルを .wasm に変換します。

📌 `wabt` のインストール

brew install wabt

ファイルを作成add.wat を作成し、上記のコードを保存。
バイナリに変換wat2wasm を使用して .wasm に変換（wabt ツールが必要）

生成された add.wasm を確認

2. JavaScript で WebAssembly をロード

次に、 JavaScript から WebAssembly を実行 してみましょう。

✅ JavaScript のコード

以下のような index.js を作成します：

async function loadWasm() {
  // WebAssembly モジュールをロード
  const response = await fetch("add.wasm");
  const buffer = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(buffer);

  // 関数を実行
  console.log("2 + 3 =", instance.exports.add(2, 3));
}

loadWasm();

✅ 簡単なHTMLを作成

index.html:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebAssembly Test</title>
</head>
<body>
  <h1>WebAssembly Test</h1>
  <script src="index.js" defer></script>
</body>
</html>

✅ ローカルで実行

Webサーバーを立ち上げて実行しましょう。

Node.jsがインストールされている場合、簡単なローカルサーバーを起動できます：

npx http-server

または

python -m http.server 8080

そして、ブラウザで http://localhost:8080/ を開くと、コンソールに 2 + 3 = 5 が表示されるはずです！

3. JavaScript とのデータのやり取り

WebAssembly の関数を JavaScript から呼び出せることを確認したので、次に データのやり取り を試します。

✅ 文字列のやり取り（WebAssemblyは基本的にバイナリデータを扱う）

WebAssemblyは バイナリデータ を扱うため、JavaScriptの 文字列 を扱う場合は メモリを共有 する必要があります。

なぜ WebAssembly では文字列のやり取りが難しいのか？

WebAssembly は C / C++ / Rust などの低レベル言語向け に設計されており、基本的に 固定長のバイナリデータ（数値やバイト配列） を扱います。

✅ JavaScript と WebAssembly のメモリ管理の違い

項目	JavaScript	WebAssembly
メモリ管理	自動（GCあり）	手動（メモリ管理が必要）
文字列の扱い	`string` 型あり	`char*` や `u8` 配列として管理
データ共有	オブジェクトを扱える	リニアメモリ（ArrayBuffer）を直接操作

つまり、WebAssembly 内では文字列は char* のようなポインタとして管理 され、

JavaScript 側とやり取りするには エンコード/デコード する必要があります。

✅ 次のステップ

📌 次は Rust を WebAssembly にコンパイルして、実際のアプリで動かしてみます！