We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

WebAssembly.instantiate() 関数はWebAssemblyコードをコンパイル、インスタンス化するための主要なAPIです。この関数は2つのオーバーロードを持ちます:

  • 1つ目のオーバーロードは 型付き配列 か ArrayBuffer で表現された WebAssembly バイナリコードを受け取ります。そして、コンパイルとインスタンス化の両方を1ステップで行います。返された Promise は解決時にコンパイルされた WebAssembly.Module と最初の WebAssembly.Instance を渡します。
  • 2つ目のオーバーロードはすでにコンパイルされた WebAssembly.Module を受け取り、解決時にその Module の Instance を渡す Promise を返します。このオーバーロードはすでにコンパイルされた Module や キャッシュから読み込む 場合に役に立ちます。

構文

1つ目のオーバーロード — wasm バイナリコード

Promise<ResultObject> WebAssembly.instantiate(bufferSource, importObject);

パラメータ

bufferSource
コンパイルする .wasm モジュールを含む 型付き配列 か ArrayBuffer
importObject Optional
関数や WebAssembly.Module オブジェクトなどの新しく生成される Instance にインポートされる値を持つオブジェクト。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、WebAssembly.LinkError がスローされます。

戻り値

解決時に次の2つのフィールドを持つ ResultObject を渡す Promise:

例外

2つ目のオーバーロード — モジュールオブジェクト

Promise<WebAssembly.Instance> WebAssembly.instantiate(module, importObject);

パラメータ

module
インスタンス化する WebAssembly.Module
importObject Optional
関数や WebAssembly.Memory オブジェクトなどの新しく生成される Instance にインポートされる値を含むオブジェクト。宣言されたモジュールのインポートごとに1つの一致するプロパティが存在する必要があります。そうでない場合、WebAssembly.LinkError がスローされます。

戻り値

解決時に WebAssembly.Instance オブジェクトを渡す Promise 。

例外

最初のオーバーロードの例

fetch を使用して WebAssembly バイトコードをフェッチした後、WebAssembly.instantiate() 関数を使用してモジュールをコンパイル、インスタンス化します。その過程で、WebAssembly モジュールに JavaScript の関数をインポートします。このプロミスは解決時に Module と Instance を含むオブジェクト (result) を渡します。次に、Instance からエクスポートされている エクスポートされたWebAssembly関数 を呼び出します。

var importObject = {
  imports: {
    imported_func: function(arg) {
      console.log(arg);
    }
  }
};

fetch('simple.wasm').then(response =>
  response.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes, importObject)
).then(result =>
  result.instance.exports.exported_func()
);

: Github上の例(動作例)のindex.htmlでは、我々で定義した fetchAndInstantiate() ライブラリ関数を使用しています。

2つ目のオーバーロードの例

次の例 (GitHub上の index-compile.html デモを参照、 そして 動作例 も確認してください) では simple.wasm バイトコードを compile() 関数を使用してコンパイルし、postMessage() を使用して worker に送信しています。

var worker = new Worker("wasm_worker.js");

fetch('simple.wasm').then(response =>
  response.arrayBuffer()
).then(bytes =>
  WebAssembly.compile(bytes)
).then(mod =>
  worker.postMessage(mod)
);

ワーカーでは (wasm_worker.jsを参照) モジュールで使用するためのインポートオブジェクトを定義して、メインスレッドからモジュールを受け取るイベントハンドラを設定し、WebAssembly.instantiate() メソッドを使用してインスタンスを生成し、エクスポートされた関数を呼び出します。

var importObject = {
  imports: {
    imported_func: function(arg) {
      console.log(arg);
    }
  }
};

onmessage = function(e) {
  console.log('module received from main thread');
  var mod = e.data;

  WebAssembly.instantiate(mod, importObject).then(function(instance) {
    instance.exports.exported_func();
  });
};

仕様

仕様 策定状況 コメント
WebAssembly JavaScript Interface
instantiate() の定義
草案 初回ドラフト定義。

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応5716522 なし4411
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5757 あり1522 ?117.0

1. This feature is behind the Experimental JavaScript Features preference.

2. Disabled in the Firefox 52 Extended Support Release (ESR).

関連情報

ドキュメントのタグと貢献者

このページの貢献者: ukyo
最終更新者: ukyo,