日本語訳

こんにちは、未来のプログラマーたち！今日は、WebAssemblyの世界に足を踏み入れる興奮的な旅に出かけます。特に、WebAssembly Text（WAT）をWebAssemblyバイナリ（WASM）に変換することに焦点を当てます。これらの用語が未知のものに聞こえるかもしれませんが、心配しないでください。すべてをステップバイステップで解説します。このチュートリアルの終わりには、プロのようにWATをWASMに変換できるようになるでしょう！

WebAssembly - Convert WAT to WASM

WebAssemblyとは？

変換プロセスに進む前に、まずWebAssemblyとは何かを理解しましょう。砂の城を建てているとします。WebAssemblyは、魔法のバケツのように、完璧な砂の構造を即座に作成できるものです。これにより、ビーチの創造物がより速く、印象的になります。

ウェブ開発の世界では、WebAssemblyはC++やRustなどの言語で書かれたコードを、ウェブブラウザで近いネイティブスピードで実行できる低レベルの言語です。JavaScriptと一緒に動作し、ウェブアプリケーションのパフォーマンスを向上させます。

WATとWASM：基本

次に、WATとWASMについて話しましょう。WATは砂の城の設計図であり、人間が読める言語で書かれています。一方、WASMは最終的な砂の城で、コンピュータが理解し、迅速に実行できる形式です。

WAT（WebAssembly Text Format）：人間が読める、アセンブリ言語に似た形式
WASM（WebAssembly Binary Format）：機械が読める、コンパクトなバイナリ形式

WATからWASMへの変換：プロセス

WATをWASMに変換することは、砂の城の設計図を実際の砂の構造に変換することに似ています。ステップバイステップに進みましょう。

ステップ1：WATコードを書く

まず、WATコードを作成します。以下は簡単な例です：

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  (export "add" (func $add))
)

このWATコードは、32ビット整数を2つ足す関数を定義しています。詳細をすべて理解する必要はありません。以下に解説します：

(module ...)：私たちのすべてのWATコードをラップします。
(func $add ...)：名前が「add」の関数を定義します。
(param $a i32) (param $b i32)：2つの32ビット整数パラメータを指定します。
(result i32)：関数が32ビット整数を返すことを示します。
local.get $aおよびlocal.get $b：関数のパラメータを取得します。
i32.add：2つの数を足します。
(export "add" (func $add))：関数をモジュールの外からアクセス可能にします。

ステップ2：WATファイルを保存

このコードを.wat拡張子のファイルに保存します。例えば、add.watという名前のファイルにします。

ステップ3：WATからWASMへの変換ツールを使用する

ここで魔法の部分が始まります。WATをWASMに変換するために、WebAssembly Binary Toolkit（WABT）の一部であるwat2wasmというツールを使用します。

以下のように使用します：

WABTをインストールします（まだしていない場合）：
- macOSでは：brew install wabt
- Ubuntuでは：sudo apt-get install wabt
- 他のシステムでは、WABT GitHubリポジトリを確認してください。
ターミナルを開き、WATファイルがあるディレクトリに移動します。
以下のコマンドを実行します：

wat2wasm add.wat -o add.wasm

このコマンドは、wat2wasmに私たちのadd.watファイルをadd.wasmという名前のWASMファイルに変換するように指示します。

ステップ4：WASMファイルを確認

おめでとうございます！あなたは初めてのWASMファイルを作成しました。でも、実際に動作したか確認する必要があります。WABTの別のツールであるwasm2watを使用して、WASMをWATに変換し、元のコードと一致するか確認します：

wasm2wat add.wasm -o add_verified.wat

add_verified.watをテキストエディタで開くと、元のWATコードと非常に似ているはずですが、若干のフォーマットの違いがあるかもしれません。

WASMファイルの使用

WASMファイルを手に入れたら、どのようにウェブアプリケーションで使用するのでしょうか？以下は簡単なHTMLとJavaScriptの例です：

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Add Function</title>
</head>
<body>
    <h1>WebAssembly Add Function</h1>
    <p>Result: <span id="result"></span></p>
    <script>
        (async () => {
            const response = await fetch('add.wasm');
            const bytes = await response.arrayBuffer();
            const { instance } = await WebAssembly.instantiate(bytes);
            const result = instance.exports.add(5, 3);
            document.getElementById('result').textContent = result;
        })();
    </script>
</body>
</html>

このHTMLファイルは、私たちのWASMモジュールを読み込み、add関数に5と3の引数を渡します。結果（8）はページに表示されます。

結論

そして、ここまでです！WATコードを書いて、それをWASMに変換し、最終的にウェブページで使用するまでの旅を終えました。これが氷山の一角です。WebAssemblyは、高パフォーマンスなウェブアプリケーションのための多くの可能性を開きます。

プログラミングの冒険を続ける中で、さまざまなWAT関数を試してみて、WebAssemblyの機能を探求してください。もしかしたら、世界を変える次の画期的なウェブアプリケーションを作成するかもしれません！

未来のWebAssemblyウィザードたち、ハッピーコーディングを！

Credits: Image by storyset

前のチュートリアル:

WebAssembly - テキストフォーマット

次のチュートリアル:

WebAssembly - 动的リンク