diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-07 00:43:38 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-07 00:43:38 +0900 |
commit | ad9ea64ce997fb0bf4e8bef04605ec4b1cff1147 (patch) | |
tree | cb454a911a0bd74789dae11fc766d94bc6205839 /files/ja/web/javascript/reference | |
parent | c01e8779a5fed876331e3933e8e19e1daecab11c (diff) | |
download | translated-content-ad9ea64ce997fb0bf4e8bef04605ec4b1cff1147.tar.gz translated-content-ad9ea64ce997fb0bf4e8bef04605ec4b1cff1147.tar.bz2 translated-content-ad9ea64ce997fb0bf4e8bef04605ec4b1cff1147.zip |
Global_Objects/WebAssembly/Module 以下を更新 (#2275)
- Markdown化
- 2021/08/28 時点の英語版に同期
- コンストラクターの文書を新規翻訳
Diffstat (limited to 'files/ja/web/javascript/reference')
9 files changed, 403 insertions, 373 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.html deleted file mode 100644 index 1915dd6f59..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: WebAssembly.Module.customSections() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections ---- -<div>{{JSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>WebAssembly.customSections()</code></strong> 関数はモジュールと文字列名を指定して、全てのカスタムセクションのコンテンツのコピーを返します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">var custSec = WebAssembly.Module.customSections(<em>module</em>, <em>sectionName</em>);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>module</em></dt> - <dd>カスタムセクションが考慮されている {{jsxref("WebAssembly.Module")}} オブジェクト。</dd> - <dt><em>sectionName</em></dt> - <dd>目的のカスタムセクションの文字列名。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p><code>sectionName</code> にマッチした全てのカスタムセクションの {{domxref("ArrayBuffer")}} コピーの配列 (もしかしたら空の場合もあります) 。</p> - -<h3 id="例外">例外</h3> - -<p>もし <code>module</code> が {{jsxref("WebAssembly.Module")}} オブジェクトインスタンスでない場合、{{jsxref("TypeError")}} がスローされます。</p> - -<h2 id="カスタムセクション">カスタムセクション</h2> - -<p>wasm モジュールは一連の <strong>セクション</strong> で構成されています。これらのセクションのほとんどは wasm の仕様によって完全に指定、バリデーションされますが、バリデーション中に無視されスキップされる <strong>カスタムセクション</strong> をモジュールに含めることができます (通常のセクション("既知のセクション")とカスタムセクションを区別するための情報は <a href="https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#high-level-structure">高レベルの構造</a> を読んでください)。</p> - -<p>これにより開発者は他の目的のために wasm モジュール内にカスタムデータを含めることができます。例えば、開発者がモジュール内の全ての関数とローカル変数に名前を付けられる (ネイティブビルドにおける "シンボル" のようなもの) <a href="https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#name-section">ネームカスタムセクション</a> のようなものがあります 。</p> - -<p>Note that the WebAssembly テキストフォーマットには現在新しいカスタムセクションのための構文の仕様がありません。しかし、テキストフォーマットから .wasm に変換するときに wasm にネームセクションを追加することができます。<a href="https://github.com/webassembly/wabt">wabt tool</a> の一部である wast2wasm コマンドで <code>--debug-names</code> オプションを指定することができます。これを指定することにより、ネームカスタムセクションを持つ .wasm に変換することができます:</p> - -<pre class="brush: bash">wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names</pre> - -<h2 id="例">例</h2> - -<p>次の例では(custom-section.html の <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/custom-section.html">ソース</a> と <a href="https://mdn.github.io/webassembly-examples/other-examples/custom-section.html">動作例</a> をご確認ください) 、ロードした section.wasm バイトコードをコンパイルしています。</p> - -<p>それから、<code>WebAssembly.Module.customSections</code> を使用して <code>length</code> が0より大きいかチェックして、モジュールに "name" カスタムセクションが含まれているかどうかチェックします。この例では "name" カスタムセクションが存在するため、<code>ArrayBuffer</code> オブジェクトが返されます。</p> - -<pre class="brush: js">fetch('simple-name-section.wasm').then(response => - response.arrayBuffer() -).then(bytes => - WebAssembly.compile(bytes) -).then(function(mod) { - var nameSections = WebAssembly.Module.customSections(mod, "name"); - if (nameSections.length != 0) { - console.log("Module contains a name section"); - console.log(nameSections[0]); - }; -});</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblymodulecustomsections', 'customSections()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("javascript.builtins.WebAssembly.Module.customSections")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</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> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.md new file mode 100644 index 0000000000..401ddba03f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.md @@ -0,0 +1,84 @@ +--- +title: WebAssembly.Module.customSections() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections +tags: + - API + - JavaScript + - Method + - Module + - Object + - Reference + - WebAssembly + - customSections +browser-compat: javascript.builtins.WebAssembly.Module.customSections +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections +--- +{{JSRef}} + +**`WebAssembly.customSections()`** 関数はモジュールと文字列名を指定して、すべてのカスタムセクションのコンテンツのコピーを返します。 + +## 構文 + +```js +WebAssembly.Module.customSections(module, sectionName) +``` + +### 引数 + +- _module_ + - : カスタムセクションを考慮する {{jsxref("WebAssembly.Module")}} オブジェクト。 +- _sectionName_ + - : 目的のカスタムセクションの文字列名。 + +### 返値 + +`sectionName` に一致するすべてのカスタムセクションの {{jsxref("ArrayBuffer")}} コピーの配列 (空の場合もあります)。 + +### 例外 + +`module` が {{jsxref("WebAssembly.Module")}} オブジェクトのインスタンスでない場合、{{jsxref("TypeError")}} が発生します。 + +## 解説 + +wasm モジュールは一連の **セクション** で構成されています。これらのセクションのほとんどは wasm の仕様によって完全に指定、検証されますが、検証中に無視されスキップされる **カスタムセクション** をモジュールに含めることができます (通常のセクション ("既知のセクション") とカスタムセクションを区別するための情報は [高レベルの構造](https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#high-level-structure) を読んでください)。 + +これにより開発者は他の目的のために wasm モジュール内にカスタムデータを含めることができます。例えば、開発者がモジュール内の全ての関数とローカル変数に名前を付けられる (ネイティブビルドにおける "シンボル" のようなもの) [ネームカスタムセクション](https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#name-section) のようなものがあります 。 + +なお、 WebAssembly テキストフォーマットには現在新しいカスタムセクションのための構文の仕様がありません。しかし、テキストフォーマットから .wasm に変換するときに wasm にネームセクションを追加することができます。 [wabt tool](https://github.com/webassembly/wabt) の一部である wast2wasm コマンドで `--debug-names` オプションを指定することができ、これを指定することにより、ネームカスタムセクションを持つ .wasm に変換することができます。 + +```bash +wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names +``` + +## 例 + +### customSections の使用 + +次の例では (custom-section.html の[ソース](https://github.com/mdn/webassembly-examples/blob/master/other-examples/custom-section.html)と[動作例](https://mdn.github.io/webassembly-examples/other-examples/custom-section.html)をご確認ください) 、読み込んだ section.wasm バイトコードをコンパイルします。 + +それから、`WebAssembly.Module.customSections` を使用して `length` が 0 より大きいかチェックして、モジュールに "name" カスタムセクションが含まれているかどうかチェックします。この例では "name" カスタムセクションが存在するため、`ArrayBuffer` オブジェクトが返されます。 + +```js +WebAssembly.compileStreaming(fetch('simple-name-section.wasm')) +.then(function(mod) { + var nameSections = WebAssembly.Module.customSections(mod, "name"); + if (nameSections.length != 0) { + console.log("Module contains a name section"); + console.log(nameSections[0]); + }; +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.html deleted file mode 100644 index fb852a1a29..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: WebAssembly.Module.exports() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports -tags: - - API - - Constructor - - Experimental - - JavaScript - - Method - - Module - - Object - - Reference - - WebAssembly - - exports -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports ---- -<div>{{JSRef}} {{ SeeCompatTable}}</div> - -<p><strong><code>WebAssembly.exports()</code></strong> 関数は指定した <code>Module</code> のエクスポート宣言の定義の配列を返します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">var exports = WebAssembly.Module.exports(module);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>module</em></dt> - <dd>{{jsxref("WebAssembly.Module")}} オブジェクト。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>指定したモジュールのエクスポートされた関数を表現するオブジェクトの配列。</p> - -<h3 id="例外">例外</h3> - -<p>もしモジュールが {{jsxref("WebAssembly.Module")}} オブジェクトインスタンス出ない場合、{{jsxref("TypeError")}} がスローされます。</p> - -<h2 id="例">例</h2> - -<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> もご確認ください) {{jsxref("WebAssembly.compile()")}} 関数を使用してロードした simple.wasm をコンパイルして、 <a href="/ja/docs/Web/API/Worker/postMessage">postMessage()</a> を使用してそれを <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API">worker</a> に送信しています。</p> - -<pre class="brush: js">var worker = new Worker("wasm_worker.js"); - -fetch('simple.wasm').then(response => - response.arrayBuffer() -).then(bytes => - WebAssembly.compile(bytes) -).then(mod => - worker.postMessage(mod) -);</pre> - -<p>worker (<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()")}} メソッドを使用してインスタンスを生成し、その内部でエクスポートされた関数を実行します。そのあとに <code>WebAssembly.Module.exports</code> を使用してモジュール上の利用可能なエクスポートの情報を返す方法を示します。</p> - -<pre class="brush: js">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(); - }); - - var exports = WebAssembly.Module.exports(mod); - console.log(exports[0]); -};</pre> - -<p><code>exports[0]</code> のアウトプットはこのようになります:</p> - -<pre class="brush: js">{ name: "exported_func", kind: "function" }</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly JS', '#webassemblymoduleexports', 'exports()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>Initial draft definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly.Module.exports")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</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> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.md new file mode 100644 index 0000000000..a9a33494b3 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.md @@ -0,0 +1,96 @@ +--- +title: WebAssembly.Module.exports() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports +tags: + - API + - JavaScript + - Method + - Module + - Object + - Reference + - WebAssembly + - exports +browser-compat: javascript.builtins.WebAssembly.Module.exports +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports +--- +{{JSRef}} + +**`WebAssembly.Module.exports()`** 関数は、指定された `Module` のエクスポート宣言の定義の配列を返します。 + +## 構文 + +```js +WebAssembly.Module.exports(module) +``` + +### 引数 + +- _module_ + - : {{jsxref("WebAssembly.Module")}} オブジェクトです。 + +### 返値 + +指定したモジュールのエクスポートされた関数を表現するオブジェクトの配列です。 + +### 例外 + +モジュールが {{jsxref("WebAssembly.Module")}} オブジェクトのインスタンスではない場合、{{jsxref("TypeError")}} が発生します。 + +## 例 + +### exports の使用 + +次の例 (Github のデモ [index-compile.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html) と、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html)も参照) では、{{jsxref("WebAssembly.compileStreaming()")}} 関数を使用して読み込んだ simple.wasm のバイトコードをコンパイルして、[ワーカー](/ja/docs/Web/API/Web_Workers_API)に [postMessage()](/ja/docs/Web/API/Worker/postMessage) を使用して送信しています。</p> + +```js +var worker = new Worker("wasm_worker.js"); + +WebAssembly.compileStreaming(fetch('simple.wasm')) +.then(mod => + worker.postMessage(mod) +); +``` + +ワーカー ([`wasm_worker.js`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js) を参照) 内で、モジュールで使用するためにインポートオブジェクトを定義して、そのあとにメインスレッドからモジュールを受け取るためのイベントハンドラをセットアップします。モジュールを受け取ったとき、{{jsxref("WebAssembly.Instantiate()")}} メソッドを使用してインスタンスを生成し、その内部でエクスポートされた関数を実行します。そのあとに `WebAssembly.Module.exports` を使用してモジュール上の利用可能なエクスポートの情報を返す方法を示します。 + +```js +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(); + }); + + var exports = WebAssembly.Module.exports(mod); + console.log(exports[0]); +}; +``` + +`exports[0]` の出力はこのようになります。 + +```js +{ name: "exported_func", kind: "function" } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.html deleted file mode 100644 index 564219f9af..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: WebAssembly.Module.imports() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports -tags: - - API - - JavaScript - - Method - - Module - - Object - - Reference - - WebAssembly - - imports - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports ---- -<div>{{JSRef}}</div> - -<p><strong><code>WebAssembly.imports()</code></strong> 関数は、指定した <code>Module</code> の全てのインポート宣言の定義を配列として返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">WebAssembly.Module.imports(module);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><em>module</em></dt> - <dd>{{jsxref("WebAssembly.Module")}} オブジェクトです。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定したモジュールのインポートされた関数を表現するオブジェクトの配列。</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<p>もしモジュールが {{jsxref("WebAssembly.Module")}} オブジェクトのインスタンスでなければ {{jsxref("TypeError")}} が発生します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>次の例では (imports.html の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/imports.html">ソースコード</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/imports.html">動作例</a> もご確認ください) ロードした simple.wasm モジュールをコンパイルした後、インポート宣言を問い合わせています。</p> - -<pre class="brush: js">WebAssembly.compileStreaming(fetch('simple.wasm')) -.then(function(mod) { - var imports = WebAssembly.Module.imports(mod); - console.log(imports[0]); -}); -</pre> - -<p>出力結果は次のようになります。</p> - -<pre class="brush: js">{ module: "imports", name: "imported_func", kind: "function" }</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-module-imports', 'imports()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Module.imports")}}</p> -</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> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.md new file mode 100644 index 0000000000..29cf2c4a99 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.md @@ -0,0 +1,71 @@ +--- +title: WebAssembly.Module.imports() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports +tags: + - API + - JavaScript + - メソッド + - Module + - Object + - Reference + - WebAssembly + - imports +browser-compat: javascript.builtins.WebAssembly.Module.imports +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports +--- +{{JSRef}} + +**`WebAssembly.imports()`** 関数は、指定された `Module` の全てのインポート宣言の定義を配列として返します。 + +## 構文 + +```js +WebAssembly.Module.imports(module) +``` + +### 引数 + +- _module_ + - : {{jsxref("WebAssembly.Module")}} オブジェクトです。 + +### 返値 + +指定されたモジュールのインポートされた関数を表現するオブジェクトの配列。 + +### 例外 + +module が {{jsxref("WebAssembly.Module")}} オブジェクトインスタンスでなかった場合は、 {{jsxref("TypeError")}} が発生します。 + +## 例 + +### imports の使用 + +次の例では ([imports.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/imports.html) と[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/imports.html)も参照)、読み込んだ simple.wasm モジュールをコンパイルします。このモジュールは imports から問い合わせされます。 + +```js +WebAssembly.compileStreaming(fetch('simple.wasm')) +.then(function(mod) { + var imports = WebAssembly.Module.imports(mod); + console.log(imports[0]); +}); +``` + +出力はこのようになります。 + +```js +{ module: "imports", name: "imported_func", kind: "function" } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/index.html deleted file mode 100644 index 36fabff4a2..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/module/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: WebAssembly.Module -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module -tags: - - API - - Constructor - - Experimental - - JavaScript - - Module - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module ---- -<div>{{JSRef}}</div> - -<p><strong><code>WebAssembly.Module</code></strong> オブジェクトには、ブラウザーでコンパイルされたステートレスな WebAssembly コードが含まれています。これを効率的に<a href="/ja/docs/Web/API/Worker/postMessage">ワーカー間で共有</a>したり、複数回インスタンス化したりすることができます。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Global_Objects/WebAssembly/Module/Module", "WebAssembly.Module()")}}</dt> - <dd>新しい <code>Module</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_properties" name="Static_properties">静的プロパティ</h2> - -<dl> - <dt>{{jsxref("Global_Objects/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}}</dt> - <dd><code>Module</code> と文字列を指定すると、モジュール内の与えられた文字列を名前に持つ全てのカスタムセクションの内容を返します。</dd> - <dt>{{jsxref("Global_Objects/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}}</dt> - <dd><code>Module</code> を指定すると、エクスポート宣言の情報を配列として返します。</dd> - <dt>{{jsxref("Global_Objects/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}}</dt> - <dd><code>Module</code> を指定すると、インポート宣言の情報を配列として返します。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Sending_a_compiled_module_to_a_worker" name="Sending_a_compiled_module_to_a_worker">コンパイル済みのモジュールをワーカーに送信</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>も参照してください)、読み込まれた <code>simple.wasm</code> のバイトコードを {{jsxref("WebAssembly.compileStreaming()")}} メソッドでコンパイルし、結果の <code>Module</code> インスタンスを<a href="/ja/docs/Web/API/Web_Workers_API">ワーカー</a>へ、 {{domxref("Worker/postMessage", "postMessage()")}} を使用して送信します。</p> - -<pre class="brush: js notranslate">var worker = new Worker("wasm_worker.js"); - -WebAssembly.compileStreaming(fetch('simple.wasm')) -.then(mod => - 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> を参照)、モジュールを使用するための import オブジェクトを定義し、メインスレッドからモジュールを受け取るためのイベントハンドラーをセットアップします。モジュールを受け取ったら、 {{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', '#modules', 'WebAssembly.Module()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.WebAssembly.Module")}}</p> -</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> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/index.md new file mode 100644 index 0000000000..64cdd9d996 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/index.md @@ -0,0 +1,79 @@ +--- +title: WebAssembly.Module +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module +tags: + - Class + - JavaScript + - Module + - Reference + - WebAssembly +browser-compat: javascript.builtins.WebAssembly.Module +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module +--- +{{JSRef}} + +**`WebAssembly.Module`** オブジェクトには、ブラウザーでコンパイルされたステートレスな WebAssembly コードが含まれています。これを効率的に[ワーカー間で共有](/ja/docs/Web/API/Worker/postMessage)したり、複数回インスタンス化したりすることができます。 + +## コンストラクター + +- {{jsxref("Global_Objects/WebAssembly/Module/Module", "WebAssembly.Module()")}} + - : 新しい `Module` オブジェクトを生成します。 + +## 静的プロパティ + +- {{jsxref("Global_Objects/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}} + - : `Module` と文字列を指定すると、モジュール内の与えられた文字列を名前に持つすべてのカスタムセクションの内容を返します。 +- {{jsxref("Global_Objects/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}} + - : `Module` を指定すると、エクスポート宣言の情報を配列として返します。 +- {{jsxref("Global_Objects/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}} + - : `Module` を指定すると、インポート宣言の情報を配列として返します。 + +## 例 + +### コンパイル済みのモジュールをワーカーに送信 + +以下の例では (GitHub 上の [index-compile.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html) および[実行例](https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html)も参照)、読み込まれた `simple.wasm` のバイトコードを {{jsxref("WebAssembly.compileStreaming()")}} メソッドでコンパイルし、結果の `Module` インスタンスを[ワーカー](/ja/docs/Web/API/Web_Workers_API)へ、 {{domxref("Worker/postMessage", "postMessage()")}} を使用して送信します。 + +```js +var worker = new Worker("wasm_worker.js"); + +WebAssembly.compileStreaming(fetch('simple.wasm')) +.then(mod => + worker.postMessage(mod) +); +``` + +ワーカー内では ([`wasm_worker.js`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js) を参照)、モジュールを使用するための import オブジェクトを定義し、メインスレッドからモジュールを受け取るためのイベントハンドラーをセットアップします。モジュールを受け取ったら、 {{jsxref("WebAssembly.instantiate()")}} メソッドを使ってインスタンスを作成し、その中からエクスポートされた関数を呼び出します。 + +```js +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(); + }); +}; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/module/module/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/module/module/index.md new file mode 100644 index 0000000000..c92057ae93 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/module/index.md @@ -0,0 +1,73 @@ +--- +title: WebAssembly.Module() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/Module +tags: + - Constructor + - JavaScript + - Module + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/Module +browser-compat: javascript.builtins.WebAssembly.Module.Module +--- +{{JSRef}} + +**`WebAssembly.Module()`** コンストラクターは、ステートレスな WebAssembly コードを含む新しい Module オブジェクトを生成します。これはブラウザーでコンパイルされ、[Worker と効率的に共有する](/ja/docs/Web/API/Worker/postMessage)ことができ、複数回インスタンス化することができます。 + +`WebAssembly.Module()` コンストラクター関数は、与えられた WebAssembly バイナリーコードを同期的にコンパイルするために呼び出すことができます。しかし、`Module` を取得するには、 +{{jsxref("WebAssembly.compile()")}} のような非同期コンパイル関数を使用するほうが主流です。 + +## 構文 + +> **Warning:** 大きなモジュールのコンパイルにはコストがかかるため、開発者はどうしても同期コンパイルが必要な場合にのみ `Module()` コンストラクターを使用し、それ以外の場合には非同期の {{jsxref("WebAssembly.compileStreaming()")}} メソッドを使用してください。 + +```js +new WebAssembly.Module(bufferSource) +``` + +### 引数 + +- _bufferSource_ + - : [型付き配列](/en-US/docs/Web/JavaScript/Typed_arrays)または [ArrayBuffer](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) で、コンパイルしたい .wasm モジュールのバイナリーコードです。 + +## 例 + +### WebAssembly モジュールの同期的なコンパイル + +```js +var importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +function createWasmModule(bytes) { + return new WebAssembly.Module(bytes); +} + +fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(bytes => { + let mod = createWasmModule(bytes); + WebAssembly.instantiate(mod, importObject) + .then(result => + result.exports.exported_func() + ); +}) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) |