path: root/files/ja/web/javascript/reference/global_objects/webassembly/instantiate/index.html

---
title: WebAssembly.instantiate()
slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
tags:
  - API
  - JavaScript
  - Method
  - Object
  - Reference
  - WebAssembly
  - instantiate
  - オブジェクト
  - メソッド
translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
---
<div>{{JSRef}}</div>

<p><strong><code>WebAssembly.instantiate()</code></strong> 関数は WebAssembly コードをコンパイルおよびインスタンス化することができます。この関数は2つのオーバーロードを持ちます。</p>

<ul>
 <li>第一のオーバーロードは、 <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> または {{jsxref("ArrayBuffer")}} で表現された WebAssembly バイナリコードを受け取り、そして、コンパイルとインスタンス化の両方を1ステップで行います。返された <code>Promise</code> は解決時にコンパイルされた {{jsxref("WebAssembly.Module")}} と最初の {{jsxref("WebAssembly.Instance")}} を渡します。</li>
 <li>第二のオーバーロードは、すでにコンパイルされた {{jsxref("WebAssembly.Module")}} を受け取り、解決時にその <code>Module</code> の <code>Instance</code> を渡す <code>Promise</code> を返します。このオーバーロードは、すでに <code>Module</code> がコンパイル済みの場合に有用です。</li>
</ul>

<div class="warning">
<p><strong>重要</strong>: このメソッドは wasm モジュールの読み込みとインスタンス化に最も効率で黄な方法ではありません。可能であれば、代わりにもっと新しい {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用すれば、生のバイトコードから直接モジュールの読み込み、コンパイル、インスタンス化を1ステップで行うことができ、 {{jsxref("ArrayBuffer")}} へ変換する必要がありません。</p>
</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<h3 id="Primary_overload_—_taking_wasm_binary_code" name="Primary_overload_—_taking_wasm_binary_code">第一のオーバーロード — wasm バイナリコード</h3>

<pre class="syntaxbox notranslate">Promise&lt;ResultObject&gt; WebAssembly.instantiate(bufferSource, importObject);
</pre>

<h4 id="Parameters" name="Parameters">引数</h4>

<dl>
 <dt><em>bufferSource</em></dt>
 <dd>コンパイルする .wasm モジュールを含む <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> または {{jsxref("ArrayBuffer")}}。</dd>
 <dt><em>importObject</em> {{optional_inline}}</dt>
 <dd>関数や {{jsxref("WebAssembly.Memory")}} オブジェクトなどの新しく生成される <code>Instance</code> にインポートされる値を持つオブジェクト。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、 {{jsxref("WebAssembly.LinkError")}} がスローされます。</dd>
</dl>

<h4 id="Return_value" name="Return_value">返値</h4>

<p>解決時に次の2つのフィールドを持つ <code>ResultObject</code> を渡す <code>Promise</code>。</p>

<ul>
 <li><code>module</code>: コンパイルされた {{jsxref("WebAssembly.Module")}} オブジェクト。この <code>Module</code> は再度インスタンス化することや、 {{domxref("Worker.postMessage", "postMessage()")}} 経由で共有したり、 <a href="/ja/docs/WebAssembly/Caching_modules">IndexedDB にキャッシュ</a>することができます。</li>
 <li><code>instance</code>: {{jsxref("WebAssembly.Instance")}} オブジェクトで、すべての <a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a> を含む。</li>
</ul>

<h4 id="Exceptions" name="Exceptions">例外</h4>

<ul>
 <li>いずれかの引数が正しい型、または構造でない場合、 {{jsxref("TypeError")}} がスローされます。</li>
 <li>失敗した場合、プロミスは失敗の原因に応じて {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}}, {{jsxref("WebAssembly.RuntimeError")}} をもって棄却されます。</li>
</ul>

<h3 id="Secondary_overload_—_taking_a_module_object_instance" name="Secondary_overload_—_taking_a_module_object_instance">第二のオーバーロード — モジュールオブジェクトのインスタンスを取る</h3>

<pre class="syntaxbox notranslate">Promise&lt;WebAssembly.Instance&gt; WebAssembly.instantiate(module, importObject);
</pre>

<h4 id="Parameters_2" name="Parameters_2">引数</h4>

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

<h4 id="Return_value_2" name="Return_value_2">返値</h4>

<p>解決時に {{jsxref("WebAssembly.Instance")}} オブジェクトを渡す <code>Promise</code> 。</p>

<h4 id="Exceptions_2" name="Exceptions_2">例外</h4>

<ul>
 <li>いずれかの引数が正しくない型や構造のオブジェクトの場合、 {{jsxref("TypeError")}} がスローされます。</li>
 <li>失敗した場合、プロミスは失敗の原因に応じて {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}}, {{jsxref("WebAssembly.RuntimeError")}} をもって棄却されます。</li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

<p><strong>注</strong>: おそらく多くの場合は {{jsxref("WebAssembly.instantiateStreaming()")}} を使用したほうが、 <code>instantiate()</code> よりも効率的でしょう。</p>

<h3 id="First_overload_example" name="First_overload_example">第一のオーバーロードの例</h3>

<p>fetch を使用して WebAssembly バイトコードを読み込んだ後、 {{jsxref("WebAssembly.instantiate()")}} 関数を使用してモジュールをコンパイル、インスタンス化し、その処理中に JavaScript の関数を WebAssembly モジュールにインポートします。次に、 <code>Instance</code> によってエクスポートされた<a href="/ja/docs/WebAssembly/Exported_functions">エクスポート済み WebAssembly 関数</a>を呼び出します。</p>

<pre class="brush: js notranslate">var importObject = {
  imports: {
    imported_func: function(arg) {
      console.log(arg);
    }
  }
};

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

<div class="note">
<p><strong>注</strong>: この例は Github 上の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a> でも見ることができます (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">動作例</a>)。</p>
</div>

<h3 id="Second_overload_example" name="Second_overload_example">第二のオーバーロードの例</h3>

<p>次の例 (GitHub上の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a> デモを参照、 そして <a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">動作例</a> も確認してください) では、読み込まれた simple.wasm バイトコードを {{jsxref("WebAssembly.compileStreaming()")}} メソッドを使用してコンパイルし、 {{domxref("Worker.postMessage", "postMessage()")}} を使用して<a href="/ja/docs/Web/API/Web_Workers_API">ワーカー</a>に送信しています。</p>

<pre class="brush: js notranslate">var worker = new Worker("wasm_worker.js");

WebAssembly.compileStreaming(fetch('simple.wasm'))
.then(mod =&gt;
  worker.postMessage(mod)
);</pre>

<p>ワーカーでは (<code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a>を参照</code>) モジュールで使用するためのインポートオブジェクトを定義して、メインスレッドからモジュールを受け取るイベントハンドラーを設定し、 {{jsxref("WebAssembly.instantiate()")}} メソッドを使用してインスタンスを生成し、エクスポートされた関数を呼び出します。</p>

<pre class="brush: js notranslate">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();
  });
};</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebAssembly JS', '#dom-webassembly-instantiate', 'instantiate()')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div>{{Compat("javascript.builtins.WebAssembly.instantiate")}}</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/WebAssembly">WebAssembly</a> 概要ページ</li>
 <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly の概念</a></li>
 <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a></li>
</ul>