WebAssembly - WASM: 初心者のガイド

こんにちは、将来のプログラミングスーパースター！WebAssembly、またはWASMと略される、この興奮する世界へのガイドとして、私がお陪你します。これまでに一行のコードも書いたことがない場合でも、心配しないでください。私たちは完全に初めから始めて、一緒に上達していきます。お気に入りの飲み物を片手に、リラックスして、さあ、潜り込もう！

WebAssembly - WASM

WebAssemblyとは？

WebAssemblyは、ウェブブラウザが理解する秘密の言語のようなものです。ウェブアプリケーションをより速く、効率的に動作させるために設計されています。ウェブサイト上で複雑なビデオゲームをプレイしようとしていると想像してみてください。WebAssembly無しでは、遅くてぎくしゃくするかもしれませんが、WebAssemblyを利用すると、ゲームコンソールでプレイしているかのようなスムーズな動作が得られます！

短い歴史

WebAssemblyは、ウェブアプリケーションをより強力にするという願いから生まれました。2015年に初めて発表され、2017年までに主要なウェブブラウザ全てがサポートするようになりました。技術の世界では非常に早いスピードです。あなたの好きなソーシャルメディアアプリが新しい機能を更新するのと同じ速さです！

スタックマシンモデル

さあ、少し技術的な話ですが、実際には非常にシンプルな概念です：スタックマシンモデル。これはWebAssemblyがどのように動作するかの核心です。

スタックとは？

スタックは、プレートの山のようなものです。山のトップからしかプレートを追加したり削除したりできません。コンピュータ用語では、スタックに追加することを「プッシュ」と呼び、スタックから削除することを「ポップ」と呼びます。

WebAssemblyがスタックを使い方

WebAssemblyはこのスタックの概念を使って操作を行います。非常に効率的な厨房のシェフのように、次にどの材料（または数値）を使うかを正確に知っています。

簡単な例を見てみましょう：

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

パニックに陥らないでください！これが宇宙語のように見えるかもしれませんが、一緒に分解してみましょう：

(module): 「ここに新しいレシピ帳があります」と言うようなものです。
(func $add ...): 「add」という新しい関数（またはレシピ）を定義しています。
(param $a i32) (param $b i32): 関数は2つの材料（パラメータ）を受け取り、どちらも32ビットの整数です。
(result i32): 結果も32ビットの整数です。
local.get $a: 最初の数をプレートの山の上に置きます。
local.get $b: 二つ目の数を最初の上に置きます。
i32.add: 山のトップの二つの数を足し、結果で置き換えます。

この関数に5と3を引数として渡した場合、スタックは以下のようになります：

スタックを空に始めます：[]
local.get $aの後：[5]
local.get $bの後：[5, 3]
i32.addの後：[8]

それで、WebAssemblyのスタックマシンモデルを使って二つの数を足すことができました！

WebAssemblyを使う理由

「これは複雑そうだ。JavaScriptを使わないのか？」と思うかもしれません。素晴らしい質問です！WebAssemblyには以下のような特別なパワーがあります：

速さ: 特定のタスクではJavaScriptよりも遥かに速く実行できます。
効率: メモリとプロセスパワーを少なく使います。
言語の柔軟性: C++やRustなどの言語でコードを書いて、WebAssemblyに変換できます。

砂の城を築いていると想像してみてください。JavaScriptは手でやるようなものです。それは柔軟で始めるのが簡単ですが、WebAssemblyは特別なツールを持つようなものです。少しの設定が必要ですが、より複雑で頑丈な城を築くことができます！

最初のWebAssemblyプログラム

二つの数を足すシンプルなプログラムを書いてみましょう。WebAssemblyのテキスト形式、WATを使います。

(module
(func $add (param $left i32) (param $right i32) (result i32)
local.get $left
local.get $right
i32.add)
(export "add" (func $add))
)

これは先ほどの例と非常に似ています。以下のことを行います：

モジュール（プログラム）を定義します。
$addという関数を定義し、二つの32ビット整数を受け取り、一つの結果を返します。
最初の数（$left）をスタックに置きます。
二つ目の数（$right）を最初の上に置きます。
スタックの二つの数を足します。
関数をエクスポートしてJavaScriptから使えるようにします。

ウェブページでこれを使うには、少しのJavaScriptが必要です：

fetch('add.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(results => {
const add = results.instance.exports.add;
console.log(add(5, 3));  // 出力: 8
});

このコードは、私たちのWebAssemblyモジュールを読み込み、インスタンスを作成し、add関数を呼び出して数を足します。

結論

おめでとうございます！あなたはWebAssemblyの世界への最初の一歩を踏み出しました。WebAssemblyとは何か、どのようにスタックマシンモデルを使うか、そして最初のWebAssemblyプログラムを書くことをカバーしました。

コードを学ぶことは、新しい言語や楽器を学ぶのと同じです。練習と忍耐が必要です。すぐにすべてが理解できるわけではありません。実験を続け、学び続けると、いつの間にかWebAssemblyで素晴らしいものを築けるようになるでしょう！

次のレッスンでは、より複雑なWebAssemblyの概念に深く掘り下げ、実際にクールなプロジェクトを始めます。それまでに、ハッピーコーディング！

Credits: Image by storyset