日本語

WebAssembly チュートリアル

WebAssemblyチュートリアル：ビギナー向けガイド

こんにちは、未来のWebAssemblyの魔法使いさんたち！このエキサイティングな旅にあなた们的ガイドとして参加できることを嬉しく思います。コンピュータサイエンスを教えてきた年数は自分も驚きますが（フロッピーディスクが本当にフロッピーだった時代を覚えています）、この冒険をできるだけ楽しく、アクセスしやすいものにするためにここにいます。お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！

WebAssembly - Home

WebAssemblyとは？

砂の城を建てていると想像してみてください。JavaScriptはあなたの手を使うようなものです。柔軟で始めやすいですが、巨大な城を建てる最速の方法ではありません。一方、WebAssemblyは特別な道具セットを持つようなものです。少しの設定が必要ですが、ものすごく速く建てることができます！

WebAssembly、略してWasmは、ウェブブラウザで効率的に実行されるためのバイナリ命令フォーマットです。ブラウザが理解する秘密のコードで、プログラムを近いネイティブスピードで実行できるようにします。

なぜ関心を持つべきか？

  1. 速度：WebAssemblyは電光石火の速さです。ウェブアプリケーションのための自転車からスポーツカーへのアップグレードのようなものです。
  2. 言語の多様性：JavaScriptに限りません。C、C++、Rustなど、どんどん導入しましょう！
  3. セキュリティ：WebAssemblyはサンドボックス環境で実行されるため、安全です。

WebAssemblyを始める

開発環境の設定

コードを書く前に、 workspaceを設定する必要があります。これは、 gourmet料理を作る前にキッチンを準備するようなものです。以下が必要です：

  1. 現代のウェブブラウザ（Chrome、Firefox、Safari、Edge）
  2. テキストエディタ（Visual Studio Codeを推奨しますが、使い慣れたものを使ってください）
  3. Emscriptenツールキット（一緒にインストールします）

Emscriptenをインストールしましょう：

# Emscriptenリポジトリをクローン
git clone https://github.com/emscripten-core/emsdk.git

# クローンしたディレクトリに入る
cd emsdk

# 最新のSDKツールをダウンロードしてインストール
./emsdk install latest

# 最新のSDKツールを有効にする
./emsdk activate latest

# 環境変数を設定
source ./emsdk_env.sh

これが現在よくわからないでも、心配しないでください。キャンバスと絵の具を準備するようなものです！

最初のWebAssemblyプログラム

簡単な「Hello, World!」プログラムから始めましょう。C言語で書いて、その後WebAssemblyにコンパイルします。

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

hello.cという名前のファイルを作成し、以下のコードを追加します：

#include <stdio.h>

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

これは、ブラウザが理解するための翻訳を依頼する手紙を書くようなものです。

ステップ2：WebAssemblyにコンパイル

CコードをWebAssemblyに変換するためのコマンドを実行します：

emcc hello.c -s WASM=1 -o hello.html

このコマンドは、手紙を魔法の翻訳機に入れるようなものです。以下の3つのファイルが生成されます：

  • hello.wasm：WebAssemblyバイナリ
  • hello.js：JavaScriptのglueコード
  • hello.html：プログラムを実行するためのHTMLファイル

ステップ3：WebAssemblyプログラムを実行

hello.htmlファイルをウェブブラウザで開きます。ページに「Hello, WebAssembly World!」と表示されるはずです。おめでとうございます！あなたの最初のWebAssemblyプログラムを実行しました！

魔法の理解

刚才のことがどのように起こったのかを分解してみましょう：

  1. 簡単なCプログラムを書きました。
  2. Emscriptenを使ってCコードをWebAssemblyにコンパイルしました。
  3. EmscriptenはJavaScriptを生成して、私たちのWebAssemblyを実行しました。
  4. ブラウザは私たちのWebAssemblyコードを実行し、メッセージを表示しました。

これは、英語（C）で手紙を書き、普遍的な言語（WebAssembly）に翻訳し、それをブラウザ（翻訳者）が理解できるように読み上げるようなものです。

より深く：シンプルな計算機

足を濡らしてきましたので、もう少しインタラクティブなものに挑戦しましょう。二つの数を足すシンプルな計算機を作成します。

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

新しいファイルcalculator.cを作成し、以下のコードを追加します：

#include <emscripten.h>

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

ここでEMSCRIPTEN_KEEPALIVEは、この関数を重要視するための印です。Emscriptenにこの関数をJavaScriptから呼び出せるようにします。

ステップ2：WebAssemblyにコンパイル

計算機をコンパイルします：

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

このコマンドは、翻訳機に特定の指示を与えるようなものです。

ステップ3：HTMLインターフェースを作成

calculator.htmlという名前のファイルを作成し、以下のコードを追加します：

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Calculator</title>
</head>
<body>
<h1>WebAssembly Calculator</h1>
<input type="number" id="num1" placeholder="最初の数を入力してください">
<input type="number" id="num2" placeholder="二つ目の数を入力してください">
<button onclick="calculateSum()">足し算</button>
<p>結果: <span id="result"></span></p>

<script src="calculator.js"></script>
<script>
Module.onRuntimeInitialized = function() {
window.add = Module.cwrap('add', 'number', ['number', 'number']);
}

function calculateSum() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var sum = add(num1, num2);
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>

このHTMLファイルは、計算機のためのユーザーフレンドリーなインターフェースを作成するようなものです。入力ボックスと「足し算」ボタンがあります。

ステップ4：WebAssembly計算機を実行

calculator.htmlファイルをブラウザで開きます。二つの入力ボックスと「足し算」ボタンが表示されるはずです。二つの数を入力して「足し算」をクリックすると、 voila! WebAssembly計算機が動作します！

結論

そして、ここまでです！私たちはWebAssemblyのエキサイティングな世界への最初の一歩を踏み出しました。環境を設定し、「Hello, World!」プログラムを作成し、シンプルな計算機を作成しました。

思い出してください、WebAssemblyを学ぶことは自転車に乗るのと同じです。最初は揺れ揺れするかもしれませんが、練習を続ければすぐにウェブ開発の世界で駆け巡ることができます。実験を続け、学び続け、そして最も重要なのは、楽しむことです！

次のレッスンでは、WebAssemblyの機能をさらに深く掘り下げ、パフォーマンスを最適化する方法を探ります。それまでは、お楽しみに！

Credits: Image by storyset

 
次のチュートリアル:
WebAssembly - 概要