Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebAssembly 以下のファイルを更新 #8102

Merged
merged 10 commits into from
Sep 4, 2022
127 changes: 70 additions & 57 deletions files/ja/webassembly/c_to_wasm/index.md

Large diffs are not rendered by default.

93 changes: 47 additions & 46 deletions files/ja/webassembly/caching_modules/index.md

Large diffs are not rendered by default.

82 changes: 42 additions & 40 deletions files/ja/webassembly/concepts/index.md

Large diffs are not rendered by default.

69 changes: 37 additions & 32 deletions files/ja/webassembly/existing_c_to_wasm/index.md

Large diffs are not rendered by default.

56 changes: 29 additions & 27 deletions files/ja/webassembly/exported_functions/index.md
Original file line number Diff line number Diff line change
@@ -1,70 +1,72 @@
---
title: エクスポートされた WebAssembly 関数
slug: WebAssembly/Exported_functions
i10n:
sourceCommit: 0bb1a8c4e18c5068319e888bbf18c3599adb8324
---
{{WebAssemblySidebar}}

エクスポートされた WebAssembly 関数は WebAssembly 関数が JavaScript でどのように表現されるのか、この記事では、もう少し詳しく説明します。

## エクスポートされた...とは?

エクスポートされた WebAssembly 関数は WebAssembly 関数を表現する JavaScript ラッパーです。それらを呼び出したときにバックグラウンドでいくつかの動作を行います。引数を wasm で使える型に(例えば、JavaScript の数値を Int32 に)変換し、wasm モジュール内の関数に渡し、実行し、結果を変換して JavaScript 側に戻します。
エクスポートされた WebAssembly 関数は WebAssembly 関数を表現する JavaScript の単なるラッパーです。呼び出されると、バックグラウンドでいくつかの動作を行います。引数を wasm で使える型に例えば、 JavaScript の数値を Int32 に変換し、wasm モジュール内の関数に渡し、実行し、結果を変換して JavaScript 側に戻します。

エクスポートされた WebAssembly 関数は次の 2 つの方法で取得できます:
エクスポートされた WebAssembly 関数は次の 2 つの方法で取得できます

- 既存のテーブルの [`Table.prototype.get()`](/ja/docs/WebAssembly/API/Table/get) を呼び出す。
- wasm モジュールインスタンスの [`Instance.exports`](/ja/docs/WebAssembly/API/Instance/exports) を通してエクスポートされた関数にアクセスする。
- 既存のテーブルの [`Table.prototype.get()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get) を呼び出す。
- wasm モジュールインスタンスの [`Instance.exports`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports) を通してエクスポートされた関数にアクセスする。

いずれにしても、同じ種類の内在する関数のラッパーを取得できます。JavaScript からみると、すべての wasm 関数は JavaScript 関数のようにみえます。しかし、これは wasm 関数オブジェクトインスタンスによってカプセル化されており、アクセスする方法は限られています。
いずれにしても、同じ種類の内在する関数のラッパーを取得できます。 JavaScript からみると、すべての wasm 関数は JavaScript の関数のようにみえます。しかし、これは wasm 関数オブジェクトインスタンスによってカプセル化されており、アクセスする方法は限られています。

## 例

物事を明らかにするために例を見ていきましょう(例は GitHub の [table-set.html](https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html) と [動作例](https://mdn.github.io/webassembly-examples/other-examples/table-set.html)、wasm の [テキスト表現](https://github.com/mdn/webassembly-examples/blob/master/ja-api-examples/table.wat) を参照してください):
物事を明らかにするために例を見ていきましょう例は GitHub の [table-set.html](https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html) と [動作例](https://mdn.github.io/webassembly-examples/other-examples/table-set.html)、wasm の [テキスト表現](https://github.com/mdn/webassembly-examples/blob/master/ja-api-examples/table.wat) を参照してください)。

```js
var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 });
const otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 });

WebAssembly.instantiateStreaming(fetch('table.wasm'))
.then(function(obj) {
var tbl = obj.instances.exports.tbl;
console.log(tbl.get(0)()); // 13
console.log(tbl.get(1)()); // 42
otherTable.set(0,tbl.get(0));
otherTable.set(1,tbl.get(1));
console.log(otherTable.get(0)());
console.log(otherTable.get(1)());
});
.then((obj) => {
const tbl = obj.instance.exports.tbl;
console.log(tbl.get(0)()); // 13
console.log(tbl.get(1)()); // 42
otherTable.set(0,tbl.get(0));
otherTable.set(1,tbl.get(1));
console.log(otherTable.get(0)());
console.log(otherTable.get(1)());
});
```

ここでは、{{jsxref("WebAssembly.Table")}} コンストラクタを使用して JavaScript からテーブル(`otherTable`)を作成し、{{jsxref("WebAssembly.instantiateStreaming()")}} ユーティリティ関数を使用して table.wasm をページに読み込みます
ここでは、{{jsxref("WebAssembly.Table")}} コンストラクターを使用して JavaScript からテーブル(`otherTable`)を作成し、 table.wasm をページに読み込むために {{jsxref("WebAssembly.instantiateStreaming()")}} ユーティリティ関数を使用しています

そのあと、モジュールからエクスポートされた関数を取得し、関数の参照を [`tbl.get()`](/ja/docs/WebAssembly/API/Table/get) を通して取り出し、それぞれを実行した結果をコンソールに出力します。次に、 `set()` を使用して、`tbl` テーブルと同じ関数への参照を `otherTable` テーブルに含まれるようにします。
そのあと、モジュールからエクスポートされた関数を取得し、関数の参照を [`tbl.get()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get) を通して取り出し、それぞれを実行した結果をコンソールに出力します。次に、 `set()` を使用して、`tbl` テーブルと同じ関数への参照を `otherTable` テーブルに含まれるようにします。

確認するために、`otherTable` から参照を取得し直し、その結果もコンソールに出力します(同じ結果が得られます)。

## それらは本当の関数です
## それらは本物の関数です

前の例で、[`Table.prototype.get()`](/ja/docs/WebAssembly/API/Table/get) のそれぞれの返り値はエクスポートされた WebAssembly 関数でした。まさに私達が話していたことです
前の例で、 [`Table.prototype.get()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get) のそれぞれの返値はエクスポートされた WebAssembly 関数でした。まさに私たちが話していたことです

これらは WebAssembly 関数のラッパーであるのに加えて本当の JavaScript 関数 であることに注意してください。上の例を [WebAssembly をサポートするブラウザー](/ja/docs/WebAssembly#Browser_compatibility)でロードして、コンソール上で実行すると:
これらは WebAssembly 関数のラッパーであるのに加えて本物の JavaScript 関数であることに注意してください。上の例を [WebAssembly をサポートするブラウザー](/ja/docs/WebAssembly#ブラウザーの互換性)で読み込み、以下の行をコンソールで実行してみてください。

```js
var testFunc = otherTable.get(0);
const testFunc = otherTable.get(0);
typeof testFunc;
```

結果として関数が返されます。この関数は他の JavaScript の他の [関数](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function) と同じように扱うことができます(` call()、``bind()、その他 `)。`testFunc.toString()` は興味深い結果を返します:
結果として関数が返されます。この関数は他の JavaScript [関数](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function)と同じように扱うことができます。例えば [`call()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call) や [`bind()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) などです。 `testFunc.toString()` は興味深い結果を返します

```js
```plain
function 0() {
[native code]
}
```

これはラッパー型の性質のアイデアの多くを提供します
これで、よりラッパーの性質がよくわかると思います

エクスポートされた WebAssembly 関数について他の注意事項は:
エクスポートされた WebAssembly 関数について他の注意事項を挙げます。

- [length](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/length) プロパティは wasm 内の関数シグネチャで宣言されている引数の数です。
- [name](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/name) プロパティは `toString()` の結果で見えている wasm モジュール内での関数のインデックスです。
- i64 型の値を受け取る、または返すエクスポートされた wasm 関数を呼び出そうとすると、現在 JavaScript 上で i64 を表現する的確な方法がないためエラーをスローします。これは将来的に変わる可能性があります。新しい int64 型が将来の標準で検討されており、wasm によって使用される可能性があります。
- i64 型の値を受け取る、または返すエクスポートされた wasm 関数を呼び出そうとすると、現在 JavaScript 上で i64 を表現する的確な方法がないためエラーが発生します。。これは将来的に変わる可能性があります。新しい int64 型が将来の標準で検討されており、 wasm によって使用される可能性があります。
Loading