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

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() の定義
草案 初回ドラフト定義。

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung InternetNode.js
基本対応Chrome 完全対応 57Edge 完全対応 16Firefox 完全対応 52
補足
完全対応 52
補足
補足 Disabled in the Firefox 52 Extended Support Release (ESR).
IE 未対応 なしOpera 完全対応 44Safari 完全対応 11WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental JavaScript Features preference.
Firefox Android 完全対応 52
補足
完全対応 52
補足
補足 Disabled in the Firefox 52 Extended Support Release (ESR).
Opera Android ? Safari iOS 完全対応 11Samsung Internet Android 完全対応 7.0nodejs 完全対応 8.0.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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

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