WebAssembly - JavaScript API: 基礎者のガイド

こんにちは、未来のプログラミングスーパースター！? 今日は、WebAssemblyとそのJavaScript APIの世界に興味深い旅に出発します。プログラムを書いたことがないとしても心配しないでください - 私があなたの親切なガイドとして、ステップバイステップで進めます。このチュートリアルの終わりには、WebAssemblyで何をできるか驚くことでしょう！

WebAssemblyとは？

JavaScript APIに詳しくなる前に、まずWebAssemblyとは何か簡単に理解しましょう。超高速のレーシングカー（それがWebAssembly）をイメージして、あなたのウェブブラウザで爆速で走らせ、ウェブアプリケーションが雷速で動作するものです。しかし、この車を運転するには特別な鍵が必要です - それがJavaScript APIなのです。JavaScript（ウェブ開発でよく使う言語）がWebAssemblyと話し合い、制御するためのインターフェースです。

では、このAPIの異なる部分を探ってみましょう。まず、私たちのWebAssemblyコードをウェブページに取り込む方法から始めます。

fetch()ブラウザAPI: WebAssemblyモジュールを取得する

WebAssemblyを使うための最初のステップは、WebAssemblyモジュールを取得することです。これを、レーシングカーを店で買うことに例えるとします。ブラウザのAPIであるfetch()関数を使ってこれを行います。

以下に例を示します：

fetch('my_wasm_module.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(result => {
// WebAssemblyモジュールを使います
});

これを分解してみましょう：

1. fetch('my_wasm_module.wasm')：この行はブラウザにWebAssemblyファイルを取得するよう指示します。
2. .then(response => response.arrayBuffer())：レスポンスを取得すると、それをArrayBufferに変換します（ファイルの(raw)データを考えます）。
3. .then(bytes => WebAssembly.instantiate(bytes))：そのバイト列を取り出し、WebAssemblyインスタンスを作成します（後ほど詳しく説明します）。
4. .then(result => { ... })：最後に、私たちのWebAssemblyモジュールを使えます！

WebAssembly.compile(): モジュールを準備する

WebAssemblyファイルを取得したら、それをコンパイルする必要があります。これは、レーシングカーを組み立てて運転する前にするのと同じです。

WebAssembly.compile(wasmBuffer)
.then(module => {
// コンパイルされたモジュールを使います
});

この例では、wasmBufferはfetch()コールから取得したArrayBufferです。compile()関数はこのバッファを取り出し、使用可能なWebAssemblyモジュールに変換します。

WebAssembly.Instance: 準備が整ったモジュール

インスタンスは、運転できる準備が整った車のようです。初期化され、実行可能なWebAssemblyモジュールです。

WebAssembly.instantiate(wasmModule)
.then(instance => {
// インスタンスを使います
let result = instance.exports.myFunction(5, 3);
console.log(result);
});

ここで、wasmModuleは先ほどコンパイルしたモジュールです。instantiate()関数はこのモジュールのインスタンスを作成します。その後、myFunctionのようなWebAssemblyモジュールのエクスポートされた関数を使うことができます。

WebAssembly.instantiate: 一括アプローチ

WebAssembly.instantiateは、一括ショッピングのようです。バイナリコード（ArrayBuffer）またはコンパイルされたモジュールを受け取り、コンパイルされたモジュールとインスタンスの両方を返します。

WebAssembly.instantiate(wasmBuffer, importObject)
.then(result => {
const instance = result.instance;
const module = result.module;
// インスタンスとモジュールを使います
});

この例では、wasmBufferは我们的生のWebAssemblyコードで、importObjectはWebAssemblyモジュールにインポートされる値を含むオブジェクトです（WebAssemblyコードが呼び出すJavaScript関数など）。

WebAssembly.instantiateStreaming: スピードデーモン

最後に、instantiateStreamingがあります。これは、レーシングカーがあなたの家に届き、組み立てられて運転準備が整うのと同じです！

WebAssembly.instantiateStreaming(fetch('my_wasm_module.wasm'), importObject)
.then(result => {
const instance = result.instance;
// インスタンスを使います
});

この関数は、fetch()とインスタンス化のステップを一つにまとめ、WebAssemblyモジュールを最速で起動する方法です。

メソッドのまとめ

ここで学んだメソッドの摘要を以下に示します：

メソッド	説明
fetch()	WebAssemblyファイルを取得します
WebAssembly.compile()	WebAssemblyモジュールをコンパイルします
WebAssembly.Instance	WebAssemblyインスタンスを表します
WebAssembly.instantiate	WebAssemblyモジュールをコンパイルおよびインスタンス化します
WebAssembly.instantiateStreaming	フェッチ、コンパイル、インスタンス化を一つのステップで行います

そして、ここまで！あなたはWebAssemblyとそのJavaScript APIの世界に初めてのステップを踏み出しました。コードを書くことは運転することと同じで、練習が必要ですが、すぐにプロのように情報のスーパーハイウェイを駆け巡るでしょう！

実験を続け、学びを続け、最も重要なのは、楽しむことです！もしかしたら、次回はあなたがこのクラスを教えるかもしれません！?

Credits: Image by storyset