Skip to content

Latest commit

 

History

History
113 lines (82 loc) · 7.66 KB

index.md

File metadata and controls

113 lines (82 loc) · 7.66 KB
Raw
title slug l10n
WebAssembly コードの読み込みと実行
WebAssembly/Loading_and_running
sourceCommit
4a6dacf8c68925a8538585be3b2728bcb271241e

{{WebAssemblySidebar}}

JavaScript で WebAssembly を使用するには、まずコンパイル/インスタンス化の前にモジュールをメモリーにプルする必要があります。この記事では、WebAssembly バイトコードをフェッチするために使用できるさまざまなメカニズムのリファレンスと、それをコンパイル/インスタンス化して実行する方法について説明します。

どんな方法があるの?

WebAssembly は <script type='module'> または import 文とまだ統合されていないため、インポートを使用してブラウザーでモジュールをフェッチする組み込みの方法はありません。

以前の WebAssembly.compile/WebAssembly.instantiate メソッドでは、生のバイトをフェッチした後 WebAssembly モジュールのバイナリーを含む {{jsxref("ArrayBuffer")}} を作成し、コンパイル/インスタンス化する必要があります。これは文字列（JavaScript ソースコード）をバイトの配列バッファー（WebAssembly ソースコード）で置き換えることを除いて、new Function(string) に似ています。

新しい WebAssembly.compileStreaming/WebAssembly.instantiateStreaming メソッドは、より効率的です。ネットワークからの生のバイトストリームに対して直接アクションを実行し、 {{jsxref("ArrayBuffer")}} ステップの必要性がなくなりました。

では、どのようにバイト列を配列バッファーに読み込んでコンパイルするのでしょうか? 次の節で説明します。

Fetch を使用する

Fetch はネットワークリソースを取得するための便利で新しい API です。

wasm モジュールをフェッチする最も簡単で効率的な方法は、新しい WebAssembly.instantiateStreaming() メソッドを使用することです。このメソッドは最初の引数として fetch() を呼び出すことができ、1 つのステップでフェッチ、モジュールをインスタンス化し、サーバーからストリームされる生のバイトコードにアクセスします。

WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
  (results) => {
    // Do something with the results!
  },
);

直接ストリームでは動作しない古い WebAssembly.instantiate() メソッドを使用した場合、フェッチされたバイトコードを {{jsxref("ArrayBuffer")}} に変換する必要があります。次のようにです。

fetch("module.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes, importObject))
  .then((results) => {
    // コンパイルされた結果 (results) で何かする!
  });

余談: instantiate() のオーバーロード

WebAssembly.instantiate() 関数は 2 つのオーバーロードを持ちます。 1 つ目（上の例を参照）はバイトコードを受け取ってプロミスを返します。解決されたプロミスでコンパイルされたモジュールと、それをインスタンス化したものを含むオブジェクトとして受け取ります。オブジェクトの構造は以下のようになります。

{
  module: Module, // コンパイルされた WebAssembly.Module オブジェクト,
  instance: Instance, // モジュールオブジェクトから生成された WebAssembly.Instance
}

Note

通常はインスタンスのみを気にしますが、キャッシュする場合や、postMessage() を使用して別のワーカーやウィンドウと共有する場合や、インスタンスをさらに作成したい場合に備えて、モジュールを用意すると便利です。

Note

第二のオーバーロード形式は WebAssembly.Module オブジェクトを引数としてとり、結果としてインスタンスオブジェクトを直接含む Promise を返します。第二のオーバーロードの例を参照してください。

WebAssembly コードを実行する

JavaScript 内で WebAssembly インスタンスが有効になったら WebAssembly.Instance.exports プロパティを通してエクスポートされた機能を使い始めることができます。コードは以下のようになります。

WebAssembly.instantiateStreaming(fetch("myModule.wasm"), importObject).then(
  (obj) => {
    // Call an exported function:
    obj.instance.exports.exported_func();

    // or access the buffer contents of an exported memory:
    const i32 = new Uint32Array(obj.instance.exports.memory.buffer);

    // or access the elements of an exported table:
    const table = obj.instance.exports.table;
    console.log(table.get(0)());
  },
);

Note

WebAssembly モジュールからのエクスポートの仕組みの詳細については WebAssembly JavaScript API の使用 と WebAssembly テキストフォーマットを理解する を参照してください。

XMLHttpRequest の使用

XMLHttpRequest は Fetch よりやや古いですが、引き続き型付き配列を取得するために適切に使用することができます。繰り返しますが、モジュール名は simple.wasm とします。

  1. {{domxref("XMLHttpRequest()")}} インスタンスを生成して、{{domxref("XMLHttpRequest.open","open()")}} メソッドでリクエストをオープン、リクエストメソッドを GET に設定し、フェッチするためのパスを宣言します。
  2. キーは {{domxref("XMLHttpRequest.responseType","responseType")}} を使用してレスポンスタイプを 'arraybuffer' にすることです。
  3. 次に {{domxref("XMLHttpRequest.send()")}} を使用してリクエストします。
  4. そのあと、ダウンロードが終了したときに {{domxref("XMLHttpRequest.load_event", "load")}} のイベントハンドラーから関数を実行します。この関数内で {{domxref("XMLHttpRequest.response", "response")}} プロパティから array buffer を取得し、Fetch で行ったように WebAssembly.instantiate() メソッドに渡します。

最終的なコードは以下のようになります。

const request = new XMLHttpRequest();
request.open("GET", "simple.wasm");
request.responseType = "arraybuffer";
request.send();

request.onload = () => {
  const bytes = request.response;
  WebAssembly.instantiate(bytes, importObject).then((results) => {
    results.instance.exports.exported_func();
  });
};

Note

動作例は xhr-wasm.html を参照してください。