From ad9ea64ce997fb0bf4e8bef04605ec4b1cff1147 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 7 Sep 2021 00:43:38 +0900 Subject: Global_Objects/WebAssembly/Module 以下を更新 (#2275) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Markdown化 - 2021/08/28 時点の英語版に同期 - コンストラクターの文書を新規翻訳 --- .../webassembly/module/customsections/index.html | 88 ----------------- .../webassembly/module/customsections/index.md | 84 ++++++++++++++++ .../webassembly/module/exports/index.html | 109 --------------------- .../webassembly/module/exports/index.md | 96 ++++++++++++++++++ .../webassembly/module/imports/index.html | 81 --------------- .../webassembly/module/imports/index.md | 71 ++++++++++++++ .../global_objects/webassembly/module/index.html | 95 ------------------ .../global_objects/webassembly/module/index.md | 79 +++++++++++++++ .../webassembly/module/module/index.md | 73 ++++++++++++++ 9 files changed, 403 insertions(+), 373 deletions(-) delete mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/module/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/module/index.md create mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/module/module/index.md (limited to 'files/ja/web/javascript/reference') 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 ---- -
{{JSRef}}{{SeeCompatTable}}
- -

WebAssembly.customSections() 関数はモジュールと文字列名を指定して、全てのカスタムセクションのコンテンツのコピーを返します。

- -

構文

- -
var custSec = WebAssembly.Module.customSections(module, sectionName);
- -

パラメータ

- -
-
module
-
カスタムセクションが考慮されている {{jsxref("WebAssembly.Module")}} オブジェクト。
-
sectionName
-
目的のカスタムセクションの文字列名。
-
- -

戻り値

- -

sectionName にマッチした全てのカスタムセクションの {{domxref("ArrayBuffer")}} コピーの配列 (もしかしたら空の場合もあります) 。

- -

例外

- -

もし module が {{jsxref("WebAssembly.Module")}} オブジェクトインスタンスでない場合、{{jsxref("TypeError")}} がスローされます。

- -

カスタムセクション

- -

wasm モジュールは一連の セクション で構成されています。これらのセクションのほとんどは wasm の仕様によって完全に指定、バリデーションされますが、バリデーション中に無視されスキップされる カスタムセクション をモジュールに含めることができます (通常のセクション("既知のセクション")とカスタムセクションを区別するための情報は 高レベルの構造 を読んでください)。

- -

これにより開発者は他の目的のために wasm モジュール内にカスタムデータを含めることができます。例えば、開発者がモジュール内の全ての関数とローカル変数に名前を付けられる (ネイティブビルドにおける "シンボル" のようなもの) ネームカスタムセクション のようなものがあります 。

- -

Note that the WebAssembly テキストフォーマットには現在新しいカスタムセクションのための構文の仕様がありません。しかし、テキストフォーマットから .wasm に変換するときに wasm にネームセクションを追加することができます。wabt tool  の一部である wast2wasm コマンドで --debug-names オプションを指定することができます。これを指定することにより、ネームカスタムセクションを持つ .wasm に変換することができます:

- -
wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names
- -

例

- -

次の例では(custom-section.html の ソース と 動作例 をご確認ください) 、ロードした section.wasm バイトコードをコンパイルしています。

- -

それから、WebAssembly.Module.customSections を使用して length が0より大きいかチェックして、モジュールに "name" カスタムセクションが含まれているかどうかチェックします。この例では "name" カスタムセクションが存在するため、ArrayBuffer オブジェクトが返されます。

- -
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]);
-  };
-});
- -

仕様

- - - - - - - - - - - - - - - - -
仕様策定状況コメント
{{SpecName('WebAssembly JS', '#webassemblymodulecustomsections', 'customSections()')}}{{Spec2('WebAssembly JS')}}初回ドラフト定義。
- -

ブラウザ実装状況

- -

{{Compat("javascript.builtins.WebAssembly.Module.customSections")}}

- -

関連情報

- - 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 ---- -
{{JSRef}} {{ SeeCompatTable}}
- -

WebAssembly.exports() 関数は指定した Module のエクスポート宣言の定義の配列を返します。

- -

構文

- -
var exports = WebAssembly.Module.exports(module);
- -

パラメータ

- -
-
module
-
{{jsxref("WebAssembly.Module")}} オブジェクト。
-
- -

戻り値

- -

指定したモジュールのエクスポートされた関数を表現するオブジェクトの配列。

- -

例外

- -

もしモジュールが {{jsxref("WebAssembly.Module")}} オブジェクトインスタンス出ない場合、{{jsxref("TypeError")}} がスローされます。

- -

例

- -

次の例では (Github のデモ index-compile.html と、動作例 もご確認ください) {{jsxref("WebAssembly.compile()")}} 関数を使用してロードした simple.wasm をコンパイルして、 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)
-);
- -

worker (wasm_worker.js を参照) 内で、モジュールで使用するためにインポートオブジェクトを定義して、そのあとにメインスレッドからモジュールを受け取るためのイベントハンドラをセットアップします。モジュールを受け取ったとき、{{jsxref("WebAssembly.Instantiate()")}} メソッドを使用してインスタンスを生成し、その内部でエクスポートされた関数を実行します。そのあとに WebAssembly.Module.exports を使用してモジュール上の利用可能なエクスポートの情報を返す方法を示します。

- -
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] のアウトプットはこのようになります:

- -
{ name: "exported_func", kind: "function" }
- -

仕様

- - - - - - - - - - - - - - - - -
仕様策定状況コメント
{{SpecName('WebAssembly JS', '#webassemblymoduleexports', 'exports()')}}{{Spec2('WebAssembly JS')}}Initial draft definition.
- -

ブラウザ実装状況

- -
{{Compat("javascript.builtins.WebAssembly.Module.exports")}}
- -

関連情報

- - 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) を使用して送信しています。

+ +```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 ---- -
{{JSRef}}
- -

WebAssembly.imports() 関数は、指定した Module の全てのインポート宣言の定義を配列として返します。

- -

構文

- -
WebAssembly.Module.imports(module);
- -

引数

- -
-
module
-
{{jsxref("WebAssembly.Module")}} オブジェクトです。
-
- -

返値

- -

指定したモジュールのインポートされた関数を表現するオブジェクトの配列。

- -

例外

- -

もしモジュールが {{jsxref("WebAssembly.Module")}} オブジェクトのインスタンスでなければ {{jsxref("TypeError")}} が発生します。

- -

例

- -

次の例では (imports.html の ソースコード と 動作例 もご確認ください) ロードした simple.wasm モジュールをコンパイルした後、インポート宣言を問い合わせています。

- -
WebAssembly.compileStreaming(fetch('simple.wasm'))
-.then(function(mod) {
-  var imports = WebAssembly.Module.imports(mod);
-  console.log(imports[0]);
-});
-
- -

出力結果は次のようになります。

- -
{ module: "imports", name: "imported_func", kind: "function" }
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('WebAssembly JS', '#dom-module-imports', 'imports()')}}
- -

ブラウザーの互換性

- -
-

{{Compat("javascript.builtins.WebAssembly.Module.imports")}}

-
- -

関連情報

- - 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 ---- -
{{JSRef}}
- -

WebAssembly.Module オブジェクトには、ブラウザーでコンパイルされたステートレスな WebAssembly コードが含まれています。これを効率的にワーカー間で共有したり、複数回インスタンス化したりすることができます。

- -

コンストラクター

- -
-
{{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 およびライブ表示も参照してください)、読み込まれた simple.wasm のバイトコードを {{jsxref("WebAssembly.compileStreaming()")}} メソッドでコンパイルし、結果の Module インスタンスをワーカーへ、 {{domxref("Worker/postMessage", "postMessage()")}} を使用して送信します。

- -
var worker = new Worker("wasm_worker.js");
-
-WebAssembly.compileStreaming(fetch('simple.wasm'))
-.then(mod =>
-  worker.postMessage(mod)
-);
- -

ワーカー内では (wasm_worker.js を参照)、モジュールを使用するための import オブジェクトを定義し、メインスレッドからモジュールを受け取るためのイベントハンドラーをセットアップします。モジュールを受け取ったら、 {{jsxref("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();
-  });
-};
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('WebAssembly JS', '#modules', 'WebAssembly.Module()')}}
- -

ブラウザーの互換性

- -
-

{{Compat("javascript.builtins.WebAssembly.Module")}}

-
- -

関連情報

- - 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) -- cgit v1.2.3-54-g00ecf