MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

WebAssembly.instantiate()

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

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.Memory オブジェクトなどの新しく生成される Instance にインポートされる値を含むオブジェクト。宣言されたモジュールのインポートごとに1つの一致するプロパティが存在する必要があります。そうでない場合、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();
  });
};

仕様

仕様 策定状況 コメント
Web Assembly JavaScript API
instantiate() の定義
ドラフト 初回ドラフト定義。

ブラウザ実装状況

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 57 15[2] 52 (52)[1] 未サポート 44 11
Feature Chrome for Android Android Webview Edge Mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 57 57 未サポート 52.0 (52)[1] 未サポート 未サポート 11

[1] WebAssemblyはFirefox 52+で有効です。Firefox 52 Extended Support Release (ESR.)では無効化されています。

[2] 現在、“Experimental JavaScript Features” フラグを付けることでサポートされます。詳細については このブログ記事 を参照してください。

関連情報

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

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