日本語

WebAssembly チュートリアル

WebAssembly - モジュール

こんにちは、将来のプログラマーたち！今日は、WebAssemblyモジュールの世界に興味深い旅に出かけます。プログラミングが新しい方也不用担心 – 私があなたの親切なガイドになり、ステップバイステップで進めます。このレッスンが終わるまでには、WebAssemblyモジュールとその動作について確固たる理解を持つことでしょう。さあ、潜りましょう！

WebAssembly - Modules

WebAssemblyとは？

モジュールについて話す前に、まずWebAssemblyとは何か簡単に説明しましょう。砂の城を建てているとします。WebAssemblyは、城をより速く強く建てられる特別なバケツのようなものです。ウェブ開発の世界で、WebAssemblyはブラウザ内で動作する低レベルの言語で、近いネイティブパフォーマンスを提供します。

ステップ1: WebAssemblyモジュールの理解

WebAssemblyモジュールはWebAssemblyアプリケーションの構成要素です。レゴのピースを思い浮かべてください – 各モジュールは、他と組み合わせて素晴らしいものを創造できる独立したユニットです。

主要概念

  1. バイナリフォーマット: モジュールは通常、バイナリフォーマット（.wasmファイル）で配布されます。
  2. コンパイル: これらのモジュールはC、C++、またはRustなどの言語からコンパイルされます。
  3. インポートとエクスポート: モジュールは機能をインポートし、自身の関数をエクスポートできます。

ステップ2: WebAssemblyモジュールの作成と使用

では、WebAssemblyモジュールの作成と使用の手順を見ていきましょう。

2.1 WebAssemblyモジュールの書き方

まず、モジュールを書く必要があります。簡単なC関数を使って例示します：

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

この関数は二つの数を足します。簡単ですね？

2.2 WebAssemblyへのコンパイル

これをWebAssemblyにコンパイルするために、Emscriptenというツールを使います。以下のコマンドを実行します：

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

このコマンドは二つのファイルを作成します：

  • add.wasm: 私たちのWebAssemblyモジュール
  • add.js: モジュールを読み込み、使用するためのJavaScriptのグルーコード

2.3 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 src="add.js"></script>
<script>
Module.onRuntimeInitialized = async _ => {
const result = Module._add(5, 3);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

コードの説明

このコードで何が起こっているのかを分解してみましょう：

  1. add.jsファイルをインクルードし、私たちのWebAssemblyモジュールを読み込みます。
  2. Module.onRuntimeInitializedを使って、モジュールが完全に読み込まれるまで待ちます。
  3. Module._add(5, 3)を使って、私たちのadd関数を呼び出します。
  4. 結果をページに表示します。

例: もっと複雑なモジュール

簡単な例を見たので、もう少し複雑なものに挑戦してみましょう。数の階乗を計算するモジュールを作成します。

// factorial.c
int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}

同じようにコンパイルします：

emcc factorial.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_factorial"]' -o factorial.js

次に、HTMLで使用します：

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Factorial</title>
</head>
<body>
<h1>WebAssembly Factorial Calculator</h1>
<input type="number" id="input" value="5">
<button onclick="calculateFactorial()">Calculate</button>
<p>Result: <span id="result"></span></p>
<script src="factorial.js"></script>
<script>
function calculateFactorial() {
const n = document.getElementById('input').value;
const result = Module._factorial(n);
document.getElementById('result').textContent = result;
}

Module.onRuntimeInitialized = async _ => {
calculateFactorial();
};
</script>
</body>
</html>

出力

これをブラウザで実行すると、数を入力できるフィールドが表示されます。\"Calculate\"ボタンをクリックすると、その数の階乗が表示されます。すべて私たちのWebAssemblyモジュールで計算されます！

結論

おめでとうございます！あなたはWebAssemblyモジュールの世界への第一歩を踏み出しました。私たちは、WebAssemblyモジュールの作成、コンパイル、使用の基本的なことをカバーしました。これが始まりに過ぎません – WebAssemblyは、ゲームから複雑なデータ処理まで、ウェブ開発における新しい可能性を開くものです。実験を続け、ブラウザにおける可能性の限界を押し広げてください！

以下のメソッドを覚えておいてください：

メソッド 説明
Module.onRuntimeInitialized WebAssemblyモジュールが完全に読み込まれるまで待ちます
Module._functionName WebAssemblyモジュールからエクスポートされた関数を呼び出します
emcc EmscriptenコンパイラコマンドでWebAssemblyモジュールを作成します

WebAssemblyを学ぶことは、自転車に乗るのと同じです – 初めは難しいように思えるかもしれませんが、練習すればすぐにスムーズに進むようになります。お楽しみに！

Credits: Image by storyset

前のチュートリアル:
WebAssembly - 「こんにちは世界」
次のチュートリアル:
WebAssembly - 維護