diff options
Diffstat (limited to 'files/ja/web/javascript/reference/global_objects/webassembly/module')
4 files changed, 433 insertions, 0 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 new file mode 100644 index 0000000000..757c3e33e4 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/customsections/index.html @@ -0,0 +1,144 @@ +--- +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> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>57</td> + <td>15<sup>[2]</sup></td> + <td>{{CompatGeckoDesktop(52)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>44</td> + <td>11</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome for Android</th> + <th>Android Webview</th> + <th>Edge Mobile</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>57</td> + <td>57</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>11</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] WebAssemblyはFirefox 52+で有効です。<a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 52 Extended Support Release</a> (ESR.)では無効化されています。</p> + +<p>[2] 現在、“Experimental JavaScript Features” フラグを付けることでサポートされます。詳細については <a href="https://blogs.windows.com/msedgedev/2017/04/20/improved-javascript-performance-webassembly-shared-memory/">このブログ記事</a> を参照してください。</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/exports/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.html new file mode 100644 index 0000000000..fb852a1a29 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/exports/index.html @@ -0,0 +1,109 @@ +--- +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/imports/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.html new file mode 100644 index 0000000000..2d2cea9f08 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/imports/index.html @@ -0,0 +1,83 @@ +--- +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> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</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/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/module/index.html new file mode 100644 index 0000000000..3db453a95d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/module/index.html @@ -0,0 +1,97 @@ +--- +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> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</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> |