WebAssembly - WASMにコンパイルするためのツール

こんにちは、将来のプログラマーさんたち！WebAssembly（WASM）のエキサイティングな世界と、この強力な形式にコードをコンパイルするためのツールについて案内するのがとても楽しみです。あなたの近所の親切なコンピュータサイエンスの先生として、多くの学生がこれらの概念を理解したときに目を輝かせたのを見てきました。あなたも例外ではありません。一緒にこの旅に出発しましょう！

WebAssembly - Tools to Compile to WASM

WebAssemblyとは？

ツールに入る前に、まずWebAssemblyとは何かを理解しましょう。砂の城を建てていると imagine してください。HTML、CSS、JavaScriptは、バケツ、シャベル、砂の型を使って基本構造を作るのに似ています。WebAssemblyは、それまで砂浜では不可能だった精巧で効率的なデザインを作ることのできる高機能な砂像職人のツールのようなものです！

WebAssemblyは、C、C++、Rustなどの言語で書かれたコードを、ブラウザ内で近原生速度で実行できるバイナリ命令形式です。あなたのウェブアプリケーションにスーパーパワーを与えるようなものです！

では、このパワーを引き出すためのツールを見てみましょう。

WebAssembly.studio

WebAssembly.studioとは？

WebAssembly.studioはWebAssembly開発のための遊び場のようなものです。オンライン統合開発環境（IDE）で、ブラウザ内でWebAssemblyコードを書いたり、コンパイルしたり、実行したりできます。コンピュータに何かをインストールする必要はありません！

WebAssembly.studioの使い方

ブラウザを開き、WebAssembly.studioにアクセスします。
プロジェクトテンプレート（C、Rust、AssemblyScript）を選びます。
エディタにコードを書きます。
「Build」ボタンをクリックしてコードをWebAssemblyにコンパイルします。
「Run」ボタンをクリックしてコードを実行します！

以下はC言語の簡単な例です：

#include <stdio.h>

int main() {
printf("Hello, WebAssembly!\n");
return 0;
}

コンパイルして実行すると、「Hello, WebAssembly!」がコンソールに表示されます。簡単ですね！

WebAssembly Explorer

WebAssembly Explorerとは？

WebAssembly Explorerはコードの魔法の翻訳者のようなものです。C/C++コードを取り入れ、それがWebAssemblyに変換されたときの样子を見せてくれます。あなたの高レベルなコードがWASM命令にどのように変換されるかを理解するのに最適です。

WebAssembly Explorerの使い方

WebAssembly Explorerにアクセスします。
左側のパネルにC/C++コードを書きます。
「Compile」をクリックして右側にWebAssembly出力を確認します。

以下は簡単な例です：

int add(int a, int b) {
return a + b;
}

コンパイルすると、右側にWebAssemblyテキスト形式（WAT）が表示されます。初めて見ると少し威圧的かもしれませんが、練習すれば低レベルの命令を理解できるようになります！

WASMFiddle

WASMFiddleとは？

WASMFiddleはWebAssembly実験のためのスイスアーミーナイフのようなものです。WebAssemblyコードを書いたり、コンパイルしたり、実行したり、そしてJavaScriptとどのように相互作用するかを確認できます。

WASMFiddleの使い方

WASMFiddleにアクセスします。
左上のパネルにCコードを書きます。
「Build」をクリックしてWebAssemblyにコンパイルします。
左下のパネルにJavaScriptコードを書きます。
「Run」をクリックして結果を確認します。

以下は楽しい例です：

// Cコード
int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}

// JavaScriptコード
Module.onRuntimeInitialized = () => {
const result = Module._factorial(5);
console.log(`Factorial of 5 is: ${result}`);
};

これはWebAssemblyを使って5の階乗を計算し、JavaScriptで結果を表示します。クールですね？

WASM to WAT

WASM to WATとは？

WASM to WATはWebAssemblyのデコーダリングリングのようなものです。バイナリWASM形式を取り入れ、WebAssemblyテキスト形式（WAT）に変換します。これは人間が読める形式です。

WASM to WATの使い方

この変換にはいくつかのオンラインツールがありますが、一般的な選択肢之一はWebAssembly Binary Toolkit（WABT）です。

WABTデモにアクセスします。
.wasmファイルをアップロードするか、バイナリコンテンツを貼り付けます。
「Convert」をクリックしてWAT出力を確認します。

これはWebAssemblyコードの理解とデバッグに非常に役立ちます。

WAT to WASM

WAT to WASMとは？

WAT to WASMはWASM to WATの逆プロセスです。人間が読めるWAT形式を取り入れ、ブラウザで実行できるバイナリWASM形式に変換します。

WAT to WASMの使い方

再びWABTデモを使います：

WABTデモにアクセスします。
WATコードを書いたり、貼り付けます。
「Convert」をクリックしてWASMバイナリを生成します。

以下は簡単なWATの例です：

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

これはモジュールに「add」関数を定義し、2つの32ビット整数を加算します。

ツールの比較

以下に、私たちが議論したツールの簡単な比較を示します：

ツール	主な用途	入力	出力	最適な用途
WebAssembly.studio	開発	C, Rust, AssemblyScript	WASM	初心者、簡単な実験
WebAssembly Explorer	探索	C/C++	WAT	WASM生成の理解
WASMFiddle	実験	C	WASM, JavaScript相互作用	WASM-JS相互作用のテスト
WASM to WAT	変換	WASM	WAT	デバッグ、WASMの理解
WAT to WASM	変換	WAT	WASM	から scratchのWASM作成

そして、ここまでがWebAssemblyツールの紹介です！WebAssemblyのلندスケープを一緒に旅しました。新しいスキルを学ぶことは時間と練習が必要ですが、これらのツールを使えば、WebAssemblyの冒険を始めるのに十分な装備を整えました。

では、これらのツールで実験をしてみましょう。何か壊れても、修理して、そして最も重要なのは、楽しむことです！次世代の革命的なウェブアプリケーションが、数えるかのWASM命令から生まれるかもしれません。ハッピーコーディング、そしてあなたのウェブアプリケーションが非常に高速になることを祈っています！

Credits: Image by storyset

前のチュートリアル:

WebAssembly - インストール

次のチュートリアル:

WebAssembly - プログラム構造