Global_Objects/WebAssembly/Instance/Instance を更新

- Markdownに変換
- 2021/07/21 時点の英語版に同期

1 files changed, 60 insertions, 40 deletions

diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.md
index 68ac6cb80a..0b8326c9d3 100644
--- a/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.md
+++ b/files/ja/web/javascript/reference/global_objects/webassembly/instance/instance/index.md
@@ -2,61 +2,81 @@
 title: WebAssembly.Instance() コンストラクター
 slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/Instance
 tags:
-  - Constructor
+  - コンストラクター
   - JavaScript
   - Reference
   - WebAssembly
-  - コンストラクター
+browser-compat: javascript.builtins.WebAssembly.Instance.Instance
 translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/Instance
 ---
-<div>{{JSRef}}</div>
+{{JSRef}}
+
+**`WebAssembly.Instance()`** コンストラクターは、新しい `Instance` オブジェクトを生成します。これはステートフルで実行可能な {{jsxref("WebAssembly.Module")}} のインスタンスです。
+
+## 構文
+
+> **Warning:** 巨大なモジュールのインスタンス化は高コストになる可能性があるので、開発者が同期的な `Instance()` コンストラクターを使用するのは、絶対に必要な場合のみにするべきです。それ以外の場合はすべて、{{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用してください。
+
+```js
+new WebAssembly.Instance(module, importObject)
+```
+
+### 引数
+
+- _module_
+  - : インスタンス化する {{jsxref("WebAssembly.Module")}} オブジェクト。
+- _importObject_ {{optional_inline}}
+  - : 新しく生成される `Instance` にインポートされる値を持つオブジェクトで、例えば関数や {{jsxref("WebAssembly.Memory")}} オブジェクトなどです。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、 {{jsxref("WebAssembly.LinkError")}} が発生します。
+
+## 例
 
-<p> <strong><code>WebAssembly.Instance()</code></strong> コンストラクターは、新しい <code>Instance</code> オブジェクトを生成し、これはステートフルで実行可能な {{jsxref("WebAssembly.Module")}} のインスタンスです。</p>
+### WebAssembly モジュールの同期的なインスタンス化
 
-<p> <code>WebAssembly.Instance()</code> コンストラクター関数は同期的に {{jsxref("WebAssembly.Module")}} オブジェクトをインスタンス化することができます。しかし、主な <code>Instance</code> の取得方法は非同期の {{jsxref("WebAssembly.instantiateStreaming()")}} 関数を使用する方法です。</p>
+次のように `WebAssembly.Instance()` コンストラクター関数を呼び出して、渡した {{jsxref("WebAssembly.Module")}} オブジェクトを同期的にインスタンス化することができます。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+```js
+const importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
 
-<div class="warning">
-<p><strong>重要</strong>: 巨大なモジュールのインスタンス化は高コストになる可能性があります。開発者が同期的な <code>Instance()</code> コンストラクターを使用するのは、絶対に必要な場合のみにするべきです。他のすべての場合で非同期の {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドの使用が推奨されます。</p>
-</div>
+fetch('simple.wasm').then(response =>
+  response.arrayBuffer()
+).then(bytes => {
+  let mod = new WebAssembly.Module(bytes);
+  let instance = new WebAssembly.Instance(mod, importObject);
+  instance.exports.exported_func();
+})
+```
 
-<pre class="syntaxbox">new WebAssembly.Instance(<em>module</em>, <em>importObject</em>);</pre>
+ただし、`Instance` を取得する方法としては、次のように、非同期の {{jsxref("WebAssembly.instantiateStreaming()")}} 関数を使用することをお勧めします。
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+```js
+const importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
 
-<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> にインポートされる値を持つオブジェクト。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、 {{jsxref("WebAssembly.LinkError")}} が発生します。</dd>
-</dl>
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj => obj.instance.exports.exported_func());
+```
 
-<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-instance-instance', 'Instance')}}</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<div>
-<p>{{Compat("javascript.builtins.WebAssembly.Instance.Instance")}}</p>
-</div>
+{{Compat}}
 
-<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>
+- [WebAssembly](/ja/docs/WebAssembly) 概要ページ
+- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts)
+- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API)