{{WebAssemblySidebar}}
-
-
-
-
-警告: 実験的な {{jsxref("WebAssembly.Module")}} IndexedDB のシリアル化サポートがブラウザから削除されています。{{bug("1469395")}} とこの仕様の問題を参照してください。
-キャッシングはアプリケーションのパフォーマンスを向上させるのに役立ちます — コンパイルされた WebAssembly モジュールをクライアントに格納することによって、毎回ダウンロードしてコンパイルする必要がなくなります。この記事では、キャッシングまわりのベストプラクティスについて解説します。
- -IndexedDB を用いたキャッシング
- -IndexedDB はクライアント側で構造化されたデータを格納、検索できるトランザクショナルデータベースシステムです。 これはテキスト、blob、他のクローン可能なオブジェクトをアプリケーションのステートの保存、アセットの永続化をするのに理想的な方法です。
- -これには wasm モジュール ({{jsxref("WebAssembly.Module")}} JavaScript オブジェクト) も含まれます。
- -キャッシュライブラリをセットアップする
- -IndexedDB はやや昔ながらの API です。まず、私たちは今日のよりモダンな API にあわせて、キャッシュするコードを素早く書け、よりよく機能させるためのライブラリ関数を提供します。
- -wasm-utils.js ライブラリスクリプト内で instantiateCachedURL() を見つけることができます— この関数は url と dbVersion から wasm モジュールをフェッチし、importObject を指定してインスタンス化を行います。そして、成功時に wasm インスタンスを渡すプロミスを返します。さらに、コンパイルされた wasm モジュールをキャッシュするデータベースの作成、新しいモジュールのデータベースへの格納、事前にキャッシュされたモジュールのデータベースからの取得 (再度ダウンロードする必要がなくなります) を行います。
-
-
-注: サイト全体の wasm のキャッシュ (指定されたURLだけではありません) は関数に渡す dbVersion によってバージョニングされます。wasm モジュールコードが更新された場合や、URLが変更された場合は dbVersion を更新する必要があります。以降 instantiateCachedURL() を呼び出すと、キャッシュ全体がクリアされ、期限切れのモジュールの使用を避けることができます。
この関数はいくつかの必要な定数を定義することから始まります:
- -function instantiateCachedURL(dbVersion, url, importObject) {
- const dbName = 'wasm-cache';
- const storeName = 'wasm-cache';
-
-データベースをセットアップする
- -instantiateCachedURL() に含まれる最初のヘルパー関数 — openDatabase() — は wasm モジュールを格納するためのオブジェクトストアを作成し、 dbVersion が更新された場合はデータベースをクリアする処理をハンドリングも行います。これは解決時に新しいデータベースを渡すプロミスを返します。
function openDatabase() {
- return new Promise((resolve, reject) => {
- var request = indexedDB.open(dbName, dbVersion);
- request.onerror = reject.bind(null, 'Error opening wasm cache database');
- request.onsuccess = () => { resolve(request.result) };
- request.onupgradeneeded = event => {
- var db = request.result;
- if (db.objectStoreNames.contains(storeName)) {
- console.log(`Clearing out version ${event.oldVersion} wasm cache`);
- db.deleteObjectStore(storeName);
- }
- console.log(`Creating version ${event.newVersion} wasm cache`);
- db.createObjectStore(storeName)
- };
- });
- }
-
-データベースからモジュールを検索する
- -次の関数 — lookupInDatabase() — は上で作成したオブジェクトストアから指定した url で検索するプロミスベースの操作を提供します。解決時に格納されたコンパイル済モジュール、棄却時にエラーを渡すプロミスを返します。
function lookupInDatabase(db) {
- return new Promise((resolve, reject) => {
- var store = db.transaction([storeName]).objectStore(storeName);
- var request = store.get(url);
- request.onerror = reject.bind(null, `Error getting wasm module ${url}`);
- request.onsuccess = event => {
- if (request.result)
- resolve(request.result);
- else
- reject(`Module ${url} was not found in wasm cache`);
- }
- });
- }
-
-モジュールの保存とインスタンス化
- -次に storeInDatabase() 関数を定義します。この関数は非同期に指定された wasm モジュールを指定したデータベースに保存します。
function storeInDatabase(db, module) {
- var store = db.transaction([storeName], 'readwrite').objectStore(storeName);
- var request = store.put(module, url);
- request.onerror = err => { console.log(`Failed to store in wasm cache: ${err}`) };
- request.onsuccess = err => { console.log(`Successfully stored ${url} in wasm cache`) };
- }
-
-ヘルパー関数を使用する
- -プロミスベースのヘルパー関数が全て定義されました。これらを使用して IndexDB のキャッシュルックアップするコアロジックを表現できるようになりました。データベースをオープンし、url をキーとして db に格納されているコンパイル済モジュールの有無を確認してみましょう:
return openDatabase().then(db => {
- return lookupInDatabase(db).then(module => {
-
-成功したら、インポートオブジェクトを指定してモジュールをインスタンス化します:
- - console.log(`Found ${url} in wasm cache`);
- return WebAssembly.instantiate(module, importObject);
- },
-
-失敗した場合、スクラッチでコンパイルします。次回以降に使用するためにコンパイルしたモジュールを url をキーとしてデータベースに格納します:
- - errMsg => {
- console.log(errMsg);
- return WebAssembly.instantiateStreaming(fetch(url)).then(results => {
- storeInDatabase(db, results.module);
- return results.instance;
- });
- })
- },
-
-
-
-
-注: {{jsxref("WebAssembly.instantiate()")}} は {{jsxref("WebAssembly.Module()", "Module")}} と {{jsxref("WebAssembly.Instance()", "Instance")}} の両方を返します。Module はコンパイルされたコードを表し、IDB に格納したり、postMessage() を通じて ワーカーとの間で共有することができます。Instance はステートフルで、呼び出し可能な JavaScript の関数を含んでいるため、格納/共有することは出来ません。
データベースをオープンすることに失敗した場合(例えば、パーミッションやクォータ等の原因による)、モジュールをフェッチしてコンパイルするだけにし、結果を格納しないでください (格納するデータベースがないため) 。
- - errMsg => {
- console.log(errMsg);
- return WebAssembly.instantiateStreaming(fetch(url)).then(results => {
- return results.instance
- });
- });
-}
-
-wasm モジュールをキャッシュする
- -上で定義されたライブラリ関数を使用して、wasm モジュールインスタンスの取得やエクスポートされた機能を使用することが (その間にバックグラウンドでキャッシュのハンドリングをしています) 、次のパラメータで呼び出すだけのシンプルなものになります:
- --
-
- キャッシュバージョン — 詳細は上で説明されています — wasm モジュールが更新されたときや別 URL に移動したときに更新する必要があります。 -
- インスタンス化したい wasm モジュールの URL。 -
- インポートオブジェクト (必要ならば) -
const wasmCacheVersion = 1;
-
-instantiateCachedURL(wasmCacheVersion, 'test.wasm').then(instance =>
- console.log("Instance says the answer is: " + instance.exports.answer())
-).catch(err =>
- console.error("Failure to instantiate: " + err)
-);
-
-ソースコードと例は GitHub の indexeddb-cache.html (動作例) を参照してください。
- -ブラウザのサポート
- -現時点では、WebAssembly モジュールの構造化された複製をサポートしているため、この手法は Firefox と Edge で動作します。
- -Chrome は WebAssembly 構造化クローンサポートフラグの背後にサポートが実装されていますが、いくつかの懸念があるため、デフォルトではまだ有効にしていません (たとえば、この説明を参照)。
- -Safari ではまだ実装されていません。
diff --git a/files/ja/webassembly/caching_modules/index.md b/files/ja/webassembly/caching_modules/index.md new file mode 100644 index 00000000000000..08d742b3725676 --- /dev/null +++ b/files/ja/webassembly/caching_modules/index.md @@ -0,0 +1,168 @@ +--- +title: コンパイルされた WebAssembly モジュールをキャッシュする +slug: WebAssembly/Caching_modules +tags: + - Caching + - IndexedDB + - JavaScript + - Module + - WebAssembly + - compile + - wasm +translation_of: WebAssembly/Caching_modules +--- +{{WebAssemblySidebar}} + +> **Warning:** **警告**: 実験的な {{jsxref("WebAssembly.Module")}} IndexedDB のシリアル化サポートがブラウザから削除されています。{{bug("1469395")}} と[この仕様の問題](https://github.com/WebAssembly/spec/issues/821)を参照してください。 + +キャッシングはアプリケーションのパフォーマンスを向上させるのに役立ちます — コンパイルされた WebAssembly モジュールをクライアントに格納することによって、毎回ダウンロードしてコンパイルする必要がなくなります。この記事では、キャッシングまわりのベストプラクティスについて解説します。 + +## IndexedDB を用いたキャッシング + +[IndexedDB](/ja/docs/Web/API/IndexedDB_API) はクライアント側で構造化されたデータを格納、検索できるトランザクショナルデータベースシステムです。 これはテキスト、blob、他のクローン可能なオブジェクトをアプリケーションのステートの保存、アセットの永続化をするのに理想的な方法です。 + +これには wasm モジュール ({{jsxref("WebAssembly.Module")}} JavaScript オブジェクト) も含まれます。 + +## キャッシュライブラリをセットアップする + +IndexedDB はやや昔ながらの API です。まず、私たちは今日のよりモダンな API にあわせて、キャッシュするコードを素早く書け、よりよく機能させるためのライブラリ関数を提供します。 + +wasm-utils.js ライブラリスクリプト内で `instantiateCachedURL()` を見つけることができます— この関数は `url` と `dbVersion` から wasm モジュールをフェッチし、`importObject` を指定してインスタンス化を行います。そして、成功時に wasm インスタンスを渡すプロミスを返します。さらに、コンパイルされた wasm モジュールをキャッシュするデータベースの作成、新しいモジュールのデータベースへの格納、事前にキャッシュされたモジュールのデータベースからの取得 (再度ダウンロードする必要がなくなります) を行います。 + +> **Note:** **注**: サイト全体の wasm のキャッシュ (指定された URL だけではありません) は関数に渡す `dbVersion` によってバージョニングされます。wasm モジュールコードが更新された場合や、URL が変更された場合は `dbVersion` を更新する必要があります。以降 `instantiateCachedURL()` を呼び出すと、キャッシュ全体がクリアされ、期限切れのモジュールの使用を避けることができます。 + +この関数はいくつかの必要な定数を定義することから始まります: + +```js +function instantiateCachedURL(dbVersion, url, importObject) { + const dbName = 'wasm-cache'; + const storeName = 'wasm-cache'; +``` + +### データベースをセットアップする + +`instantiateCachedURL()` に含まれる最初のヘルパー関数 — `openDatabase()` — は wasm モジュールを格納するためのオブジェクトストアを作成し、 `dbVersion` が更新された場合はデータベースをクリアする処理をハンドリングも行います。これは解決時に新しいデータベースを渡すプロミスを返します。 + +```js + function openDatabase() { + return new Promise((resolve, reject) => { + var request = indexedDB.open(dbName, dbVersion); + request.onerror = reject.bind(null, 'Error opening wasm cache database'); + request.onsuccess = () => { resolve(request.result) }; + request.onupgradeneeded = event => { + var db = request.result; + if (db.objectStoreNames.contains(storeName)) { + console.log(`Clearing out version ${event.oldVersion} wasm cache`); + db.deleteObjectStore(storeName); + } + console.log(`Creating version ${event.newVersion} wasm cache`); + db.createObjectStore(storeName) + }; + }); + } +``` + +### データベースからモジュールを検索する + +次の関数 — `lookupInDatabase()` — は上で作成したオブジェクトストアから指定した `url` で検索するプロミスベースの操作を提供します。解決時に格納されたコンパイル済モジュール、棄却時にエラーを渡すプロミスを返します。 + +```js + function lookupInDatabase(db) { + return new Promise((resolve, reject) => { + var store = db.transaction([storeName]).objectStore(storeName); + var request = store.get(url); + request.onerror = reject.bind(null, `Error getting wasm module ${url}`); + request.onsuccess = event => { + if (request.result) + resolve(request.result); + else + reject(`Module ${url} was not found in wasm cache`); + } + }); + } +``` + +### モジュールの保存とインスタンス化 + +次に `storeInDatabase()` 関数を定義します。この関数は非同期に指定された wasm モジュールを指定したデータベースに保存します。 + +```js + function storeInDatabase(db, module) { + var store = db.transaction([storeName], 'readwrite').objectStore(storeName); + var request = store.put(module, url); + request.onerror = err => { console.log(`Failed to store in wasm cache: ${err}`) }; + request.onsuccess = err => { console.log(`Successfully stored ${url} in wasm cache`) }; + } +``` + +### ヘルパー関数を使用する + +プロミスベースのヘルパー関数が全て定義されました。これらを使用して IndexDB のキャッシュルックアップするコアロジックを表現できるようになりました。データベースをオープンし、`url` をキーとして `db` に格納されているコンパイル済モジュールの有無を確認してみましょう: + +```js + return openDatabase().then(db => { + return lookupInDatabase(db).then(module => { +``` + +成功したら、インポートオブジェクトを指定してモジュールをインスタンス化します: + +```js + console.log(`Found ${url} in wasm cache`); + return WebAssembly.instantiate(module, importObject); + }, +``` + +失敗した場合、スクラッチでコンパイルします。次回以降に使用するためにコンパイルしたモジュールを url をキーとしてデータベースに格納します: + +```js + errMsg => { + console.log(errMsg); + return WebAssembly.instantiateStreaming(fetch(url)).then(results => { + storeInDatabase(db, results.module); + return results.instance; + }); + }) + }, +``` + +> **Note:** **注**: {{jsxref("WebAssembly.instantiate()")}} は {{jsxref("WebAssembly.Module()", "Module")}} と {{jsxref("WebAssembly.Instance()", "Instance")}} の両方を返します。Module はコンパイルされたコードを表し、IDB に格納したり、[`postMessage()`](/ja/docs/Web/API/MessagePort/postMessage) を通じて ワーカーとの間で共有することができます。Instance はステートフルで、呼び出し可能な JavaScript の関数を含んでいるため、格納/共有することは出来ません。 + +データベースをオープンすることに失敗した場合(例えば、パーミッションやクォータ等の原因による)、モジュールをフェッチしてコンパイルするだけにし、結果を格納しないでください (格納するデータベースがないため) 。 + +```js + errMsg => { + console.log(errMsg); + return WebAssembly.instantiateStreaming(fetch(url)).then(results => { + return results.instance + }); + }); +} +``` + +## wasm モジュールをキャッシュする + +上で定義されたライブラリ関数を使用して、wasm モジュールインスタンスの取得やエクスポートされた機能を使用することが (その間にバックグラウンドでキャッシュのハンドリングをしています) 、次のパラメータで呼び出すだけのシンプルなものになります: + +- キャッシュバージョン — 詳細は上で説明されています — wasm モジュールが更新されたときや別 URL に移動したときに更新する必要があります。 +- インスタンス化したい wasm モジュールの URL。 +- インポートオブジェクト (必要ならば) + +```js +const wasmCacheVersion = 1; + +instantiateCachedURL(wasmCacheVersion, 'test.wasm').then(instance => + console.log("Instance says the answer is: " + instance.exports.answer()) +).catch(err => + console.error("Failure to instantiate: " + err) +); +``` + +ソースコードと例は GitHub の [indexeddb-cache.html](https://github.com/mdn/webassembly-examples/blob/master/other-examples/indexeddb-cache.html) ([動作例](https://mdn.github.io/webassembly-examples/other-examples/indexeddb-cache.html)) を参照してください。 + +## ブラウザのサポート + +現時点では、WebAssembly モジュールの構造化された複製をサポートしているため、この手法は Firefox と Edge で動作します。 + +Chrome は WebAssembly 構造化クローンサポートフラグの背後にサポートが実装されていますが、いくつかの懸念があるため、デフォルトではまだ有効にしていません (たとえば、[この説明を参照](https://github.com/WebAssembly/design/issues/972))。 + +Safari ではまだ実装されていません。 diff --git a/files/ja/webassembly/concepts/index.html b/files/ja/webassembly/concepts/index.html deleted file mode 100644 index 9e94a90ddbaf54..00000000000000 --- a/files/ja/webassembly/concepts/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: WebAssembly の概要 -slug: WebAssembly/Concepts -tags: - - C - - C++ - - Emscripten - - JavaScript - - Web プラットフォーム - - WebAssembly - - rust -translation_of: WebAssembly/Concepts ---- -{{WebAssemblySidebar}}
-
-この記事では、 WebAssembly がどのように機能しているか、その目標、解決している問題、ウェブブラウザーのレンダリングエンジン内での動作などの概念について説明します。
- -WebAssembly とは何か
- -WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマンス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されています。
- -この機能はウェブプラットフォームにとって大きな意味を持ちます。 — ウェブ上で動作するクライアントアプリで従来は実現できなかった、ネイティブ水準の速度で複数の言語で記述されたコードをウェブ上で動作させる方法を提供します。
- -それ以上に、その利点を享受するために利用者は WebAssembly のコードをどのように作成するのか知る必要さえ有りません。 WebAssembly モジュールはウェブ (あるいは Node.js) アプリにインポートする事ができ、 WebAssembly の機能は JavaScript を経由して他の領域から利用できる状態になります。 JavaScript 製フレームワークでは大幅なパフォーマンス改善と開発中の新機能をウェブ開発者が容易に利用できるようにするために WebAssembly を用いることができます。
- -WebAssembly の目標
- -WebAssembly は W3C WebAssembly Community Group 内で策定されるオープン標準として以下を目標に定めて作成されています:
- --
-
- 高速で、高効率であり、ポータブルである事 — WebAssembly のコードは 共通ハードウェア対応環境 を利用して異なるプラットフォーム間でネイティブ水準の速度で実行可能です。 -
- 可読性を持ちデバッグ可能である事 — WebAssembly は低水準のアセンブリ言語ですが、人間が読めるテキストフォーマットを持ちます（その仕様策定は終わっていないものの）。このフォーマットは人の手で読み書きできて、デバッグもできます。 -
- 安全である事 — WebAssembly は安全でサンドボックス化された実行環境上で動作するように設計されています。他のウェブ言語と同様に、ブラウザーに対して same-origin および権限ポリシーの確認を強制します。 -
- ウェブを破壊しない事 — WebAssembly は他のウェブ技術と協調し、後方互換性を維持するように設計されます。 -
-
-
-メモ: WebAssembly はまたウェブの領域外の JavaScript 環境での利用も行います (Non-web embeddings を参照)。
-WebAssembly はどのようにウェブプラットフォームに適合するのか
- -ウェブプラットフォームは 2 つの領域からなると考える事ができます:
- --
-
- ウェブアプリのコードを実行する仮想マシン (VM) 、例としてアプリを動作させる JavaScript コード。 -
- ウェブブラウザー / デバイスの機能をコントロールして物事を実現するためにウェブアプリが呼ぶことのできる Web API のセット (DOM、 CSSOM、 WebGL、 IndexedDB、 Web Audio API 等)。 -
歴史的に、仮想マシンは JavaScript を読み込む事しかできませんでした。 JavaScript が今日のウェブで人々が遭遇する多くの問題を解決する上で十分にパワフルであるため私達にとって仮想マシンはとても有効でした。しかしながら私達は JavaScript をもっと厳しい状況、3D ゲーム、VR に AR、コンピュータービジョン、画像/動画編集等ネイティブの性能が要求されるような多くの領域 (これら以外の利用アイディアに関しては WebAssembly use cases を参照) において用いる際にパフォーマンス上の問題に遭遇するようになっています。
- -加えて巨大な JavaScript アプリケーションのダウンロード、構造の解析とコンパイルのコストは異常に高いものになりえます。モバイルや他のリソースが限られたプラットフォームではこのようなパフォーマンスのボトルネックの影響をずっと強く受ける事になります。
- -WebAssembly は JavaScript と異なる言語ですが、その置き換えを意図していません。その代わり、JavaScript の足りない所を補填して併用し、ウェブ開発者に双方の以下のような利益を提供する事を狙いとしています:
- --
-
- JavaScript は高水準の言語であり、ウェブアプリケーションを作る上で十分な柔軟性と表現力を持っています。そして多くの利点 — 動的型付け言語である、コンパイルが必須でない、パワフルなフレームワーク、ライブラリやツールを提供する豊富な土壌等を持っています。 -
- WebAssembly はネイティブに近いパフォーマンスで動作して、C++ や Rust のような低水準のメモリー管理を行う言語がウェブ上で動作するようコンパイルされる対象となる、コンパクトなバイナリー形式を持つ低水準なアセンブリに似た言語です (WebAssembly は将来的にガベージコレクションによるメモリー管理を行う言語をサポートする 高レベルの目標 を持っている事に注意してください)。 -
ブラウザーにおいての WebAssembly の登場によって、私たちが先述したような仮想マシンはこれから 2 つの種類の言語をロードして実行することになります — JavaScript と WebAssembly です。
- -必要に応じてこの異なったコードは互いを呼び出し合う事ができます — WebAssembly JavaScript API はエクスポートした WebAssembly のコードを普遍的に呼び出せる JavaScript 関数でラップし、WebAssembly のコードは通常の JavaScript 関数をインポートして同期的に呼び出せます。実際、WebAssembly のコードの基本単位はモジュールと呼ばれ、 WebAssembly のモジュールは ES2015 のモジュールと多くの対になる概念を持っています。
- -WebAssembly のキーコンセプト
- -ブラウザー上で WebAssembly がどのように動作するかを理解するため必要となるキーコンセプトがいくつか存在します。これらのコンセプトはそれぞれが WebAssembly JavaScript API に一対一で対応しています。
- --
-
- Module (モジュール): ブラウザーによって実行可能な機械語にコンパイルされた WebAssembly のバイナリーに対応します。モジュールはステートレスであるため、Blob のように、明示的に IndexedDB にキャッシュ できたり window やウェブワーカーと (
postMessage()を経由して ) 共有する事ができます。モジュールは ES2015 のモジュールのように import と export の宣言を行います。
- - Memory (メモリー): WebAssembly の低水準なメモリーアクセス命令によって読み込みおよび書き込みが行われるバイト列を一次元の配列として保持している、リサイズ可能な ArrayBuffer です。 -
- Table (テーブル): メモリー内に (安全性およびポータブル性を維持するため) バイト列として保持することができなかった (関数等に対する) 参照を保持しているリサイズ可能な型付き配列です。 -
- Instance (インスタンス): メモリー、テーブル、インポートされた値を含む実行時に利用されるすべての状態と対となるモジュールです。インスタンスは特定の import によって特定のグローバル環境にロードされた ES2015 におけるモジュールのような物です。 -
JavaScript API はモジュール、メモリー、テーブルおよびインスタンスを作る機能を開発者に提供します。 WebAssembly のインスタンスが与えられれば、 JavaScript はその中で export されたオブジェクトを、一般的な JavaScript で渡せる状態にされた関数同様に、同期的に呼び出すことができます。また任意の JavaScript の関数はその関数を WebAssembly のインスタンスに import する事で WebAssembly のコードから同期的に呼び出されるようにする事もできます。
- -JavaScript は WebAssembly のコードがどのようにダウンロードされ、コンパイルされて実行されるかを完全に制御できるため、JavaScript 開発者は WebAssembly を単に効果的に高いパフォーマンスを発揮する JavaScript の機能のようにとらえることもできます。
- -将来的には、 WebAssembly モジュールは (<script type='module'> を利用して) ES2015 モジュールのようにロード可能 となり、これは JavaScript が WebAssembly モジュールを ES2015 モジュールと同じくらい簡単に取得、コンパイル、インポートできるようになる事を意味します。
WebAssembly をどのようにアプリで用いるか
- -ここまで私たちは WebAssembly がウェブプラットフォームに付加する基本的な原則について話しました。つまりコードのバイナリー形式とバイナリーコードを読み込み実行する API について。ここからは実際にこれらの原則をどのように活かすのかについて話します。
- -WebAssembly のエコシステムはまだ黎明期の状態にあります。もっと多くのツール群によってこの状況が進展するのは間違いありません。現時点では主に4つの入口があります。
- --
-
- Emscripten を用いて C/C++ 製アプリケーションをポーティングする。 -
- アセンブリ水準で WebAssembly を記述もしくは直接生成する。 -
- Rust アプリケーションを書き、 WebAssembly を出力ターゲットとする。 -
- TypeScript によく似た AssemblyScript を用いて、 WebAssembly バイナリーに出力する -
これらの選択肢について考えてみましょう。
- -C/C++ からのポーティング
- -WASM コードを作成するための多くのオプションのうちの 2 つは、オンラインの Wasm アセンブラまたは Emscripten です。 WASM のオンラインアセンブラには、次のようなものがあります。
- --
-
- WasmFiddle -
- WasmFiddle++ -
- WasmExplorer -
これらは、どこから始めるべきかを把握しようとしている人にとっては素晴らしいリソースですが、 Emscripten のツールと最適化には欠けています。
- -Emscripten ツールは C/C++ ソースコードを取得し、それを .wasm モジュール、加えてモジュールを読みだして実行するために必要な JavaScript に "glue" コードとコードの結果を表示するための HTML 文章にコンパイルおよび出力します。
- -
簡潔に言えば、このプロセスは以下のような物になります。
- --
-
- Emscripten は最初に C/C++ を Clang + LLVM — 完成度の高いオープンソースの C/C++ コンパイラ・ツールチェインであり、OSX の XCode の一部として提供される等の利用例が有る、に注入します。 -
- Emscripten が Clang + LLVM によるコンパイル結果を .wasm バイナリーに変換します。 -
- それ自体だけでは WebAssembly は現時点で DOM に直接アクセスできません; JavaScript を呼び出して、整数型もしくは浮動小数点型の基本データを渡せるだけです。そのため、ウェブ API にアクセスするためには、WebAssembly は JavaScript を呼び出す必要が有り、この時点でウェブ API の呼び出しが行われます。そのため Emscripten は結果を得るための HTML と JavaScript のグルーコードを生成します。 -
-
-
-メモ: 将来的に WebAssembly に直接ウェブ API を呼ばせる事を許容する 計画があります。
-JavaScript グルーコードは多くの人が想像するほど簡単な構造をしていません。はじめに、 Emscripten は SDL、 OpenGL、 OpenAL および POSIX の一部といった主な C/C++ ライブラリを組み込みます。これらのライブラリ群はウェブ API の観点から組み込まれ、各々が WebAssembly を既存のウェブ API に接続するためにいくつかの JavaScript グルーコードを必要とします。
- -そのためグルーコードの一部は C/C++ コードによって利用されるそれぞれのライブラリの機能を組み込みます。グルーコードはまた .wasm ファイルを取得、ロード、実行するため先述した WebAssembly JavaScript API を呼び出すロジックも含んでいます。
- -生成された HTML 文章は JavaScript グルーコードのファイルを読み込んで {{htmlelement("textarea")}} に標準出力を書き出します。もしアプリケーションが OpenGL を利用している場合、その HTML はまた出力先となる {{htmlelement("canvas")}} 要素を含みます。Emscripten の出力結果を修正して必要とするウェブアプリに変換するのは非常に簡単です。
- -Emscripten に関する完全なドキュメントは emscripten.org で参照でき、このツールチェインの組み込みと自身の C/C++ アプリを wasm へとコンパイルするガイドとしては C/C++ を WebAssembly にコンパイルする が参考になります。
- -直接 WebAssembly を記述する
- -独自のコンパイラ、ツール、あるいは WebAssembly を実行時に生成する JavaScript のライブラリを作りたいとお考えですか ?
- -実際のアセンブリ言語同様、 WebAssembly バイナリー形式はテキスト表現を持っています — これらは一対一で対応しています。なんらかの WebAssemby テキスト表現バイナリー変換ツール を用いることでテキスト表現を直接記述してバイナリー形式に変換することができます。
- -この手順に関しては、 WebAssembly テキスト表現を wasm 形式に変換する の項目を参照ください。
- -WebAssembly をターゲットとした Rust の記述
- -Rust WebAssembly ワーキンググループの不断の仕事のおかげで、Rust コードを書いて WebAssembly にコンパイルすることも可能です。必要なツールチェーンをインストールし、サンプル Rust プログラムを WebAssembly npm パッケージにコンパイルし、ウェブアプリケーションのサンプルを使用して、 Rust から WebAssembly へのコンパイルの記事を読むことができます。
- -AssemblyScript の使用
- -C や Rust を学ぶ必要なく WebAssembly を試してみたいウェブ開発者には、 AssemblyScript が最良の選択肢です。これは小さなバンドルを生成し、 C や Rust と比較するとやや遅い程度です。ドキュメントは https://assemblyscript.org/ でチェックすることができます。
- -まとめ
- -本項目では WebAssembly が何であるか、どういった利便性が有るか、どのようにしてウェブに適用するかとどのように活用するかについて説明しました。
- -関連情報
- --
-
- WebAssembly articles on Mozilla Hacks blog -
- WebAssembly on Mozilla Research -
- WebAssembly コードのロードと実行 — ウェブページでどのようにして自作の WebAssembly モジュールをロードするかについての理解が深まります。 -
- WebAssembly JavaScript API の使用 — WebAssembly JavaScript API のその他の利用法について理解が深まります。 -
{{WebAssemblySidebar}}
-
-エクスポートされた WebAssembly 関数は WebAssembly 関数が JavaScript でどのように表現されるのか、この記事では、もう少し詳しく説明します。
- -エクスポートされた...とは?
- -エクスポートされた WebAssembly 関数は WebAssembly 関数を表現する JavaScript ラッパーです。それらを呼び出したときにバックグラウンドでいくつかの動作を行います。引数を wasm で使える型に(例えば、JavaScript の数値を Int32 に)変換し、wasm モジュール内の関数に渡し、実行し、結果を変換して JavaScript 側に戻します。
- -エクスポートされた WebAssembly 関数は次の 2 つの方法で取得できます:
- --
-
- 既存のテーブルの
Table.prototype.get()を呼び出す。
- - wasm モジュールインスタンスの
Instance.exportsを通してエクスポートされた関数にアクセスする。
-
いずれにしても、同じ種類の内在する関数のラッパーを取得できます。JavaScript からみると、すべての wasm 関数は JavaScript 関数のようにみえます。しかし、これは wasm 関数オブジェクトインスタンスによってカプセル化されており、アクセスする方法は限られています。
- -例
- -物事を明らかにするために例を見ていきましょう(例は GitHub の table-set.html と 動作例、wasm の テキスト表現 を参照してください):
- -var 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)());
-});
-
-ここでは、{{jsxref("WebAssembly.Table")}} コンストラクタを使用して JavaScript からテーブル(otherTable)を作成し、{{jsxref("WebAssembly.instantiateStreaming()")}} ユーティリティ関数を使用して table.wasm をページに読み込みます。
そのあと、モジュールからエクスポートされた関数を取得し、関数の参照を tbl.get() を通して取り出し、それぞれを実行した結果をコンソールに出力します。次に、 set() を使用して、tbl テーブルと同じ関数への参照を otherTable テーブルに含まれるようにします。
確認するために、otherTable から参照を取得し直し、その結果もコンソールに出力します(同じ結果が得られます)。
それらは本当の関数です
- -前の例で、Table.prototype.get() のそれぞれの返り値はエクスポートされた WebAssembly 関数でした。まさに私達が話していたことです。
これらは WebAssembly 関数のラッパーであるのに加えて本当の JavaScript 関数 であることに注意してください。上の例を WebAssembly をサポートするブラウザーでロードして、コンソール上で実行すると:
- -var testFunc = otherTable.get(0); -typeof testFunc;- -
結果として関数が返されます。この関数は他の JavaScript の他の 関数 と同じように扱うことができます(call()、bind()、その他)。testFunc.toString() は興味深い結果を返します:
function 0() {
- [native code]
-}
-
-これはラッパー型の性質のアイデアの多くを提供します。
- -エクスポートされた WebAssembly 関数について他の注意事項は:
- --
-
- length プロパティは wasm 内の関数シグネチャで宣言されている引数の数です。 -
- name プロパティは
toString()の結果で見えている wasm モジュール内での関数のインデックスです。
- - i64 型の値を受け取る、または返すエクスポートされた wasm 関数を呼び出そうとすると、現在 JavaScript 上で i64 を表現する的確な方法がないためエラーをスローします。これは将来的に変わる可能性があります。新しい int64 型が将来の標準で検討されており、wasm によって使用される可能性があります。 -
{{WebAssemblySidebar}}
-
-WebAssembly はモダンなウェブブラウザーで実行できる新しいタイプのコードです。ネイティブに近いパフォーマンスで動作するコンパクトなバイナリー形式の低レベルなアセンブリ風言語です。さらに、 C/C++ や Rust のような言語のコンパイル対象となって、それらの言語をウェブ上で実行することができます。 WebAssembly は JavaScript と並行して動作するように設計されているため、両方を連携させることができます。
- -概要
- -WebAssembly はウェブプラットフォームに大きな影響を与えます — 以前ではできなかったようなウェブ上で動作するクライアントアプリケーションのために、複数の言語で記述されたコードをウェブ上でネイティブに近いスピードで実行する方法を提供します。
- -WebAssembly は JavaScript を補完、並行して動作するように設計されています — WebAssembly JavaScript API を使用して、 WebAssembly モジュールを JavaScript アプリケーションにロードし、2 つの間で機能を共有できます。これにより、WebAssembly コードの記述方法を知らなくても、 WebAssembly のパフォーマンスとパワー、JavaScript の表現力と柔軟性を同じアプリケーションで活用できます。
- -さらに、W3C WebAssembly Working Group と Community Group を介して、ウェブ標準として開発されており、主要なブラウザーベンダーも積極的に参加しています。
- -
-
-
-
-
-
-ガイド
- --
-
- WebAssembly のコンセプト -
- まずは WebAssembly の高レベルなコンセプト— WebAssembly とはなにか、有用性、ウェブプラットフォーム (またはそれ以上) にどのように適合するか、どのように使用するか — の理解から始めてください。 -
- C/C++ から WebAssembly にコンパイルする -
- C/C++ で書いたコードを Emscripten のようなツールを使って .wasm にコンパイルできます。どのように動作するか確認してみましょう。 -
- 既存の C モジュール から WebAssembly へのコンパイル -
- WebAssembly のコアユースケースは、既存のCライブラリのエコシステムを利用し、開発者が Web 上でそれらを使用できるようにすることです。 -
- Rust から WebAssembly へのコンパイル -
- Rust コードを書いていれば、WebAssembly にコンパイルすることができます！このチュートリアルでは、Rust プロジェクトをコンパイルして既存の Web アプリケーションで使用するために知っておく必要があるすべてのことを説明します。 -
- WebAssembly コードのロードと実行 -
- .wasm を手に入れたら、この記事では、Fetch または XHR API と WebAssembly JavaScript API を組み合わせて、フェッチコンパイル、インスタンス化する方法について説明します。 -
- WebAssembly JavaScript API の使用 -
- .wasm モジュールをロードしたら、それを使いたいでしょう。この記事では、WebAssembly JavaScript API を用いて WebAssembly を使用する方法を説明します。 -
- エクスポートされた WebAssembly 関数 -
- エクスポートされた WebAssembly 関数は、WebAssembly 関数の JavaScript リフレクションであり、JavaScript から WebAssembly コードを呼び出すことができます。 この記事では、それらが何なのか説明します。 -
- WebAssembly テキストフォーマットを理解する -
- この記事では wasm テキスト形式について説明します。これは .wasm モジュールの低レベルなテキスト表現で、デバッグ時にブラウザーの開発者ツールに表示されます。 -
- WebAssembly テキストフォーマットから wasm に変換する -
- この記事では、テキスト形式で書かれた WebAssembly モジュールを .wasm バイナリに変換する方法について説明します。 -
-
-API リファレンス
- --
-
- {{jsxref("Global_objects/WebAssembly", "WebAssembly")}} -
- このオブジェクトは、 WebAssembly に関連する全ての機能の名前空間として振る舞います。 -
- {{jsxref("Global_objects/WebAssembly/Global", "WebAssembly.Global()")}} -
WebAssembly.Globalオブジェクトは JavaScript と1つ以上の {{jsxref("WebAssembly.Module")}} インスタンス(のインポート/エクスポート可能な値)を横断してアクセスできるグローバル変数のインスタンスを表現します。これによって、複数モジュールでの動的リンクを実現できます。
- - {{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}} -
WebAssembly.Moduleオブジェクトにはブラウザーでコンパイルされたステートレスな WebAssembly コードが含まれており、効率的に Worker で共有したり、IndexedDB にキャッシュしたり、複数回インスタンス化したりすることができます。
- - {{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}} -
WebAssembly.Instanceオブジェクトはステートフルで、実行可能なModuleのインスタンスです。Instanceオブジェクトには JavaScript から WebAssembly コードを呼び出すことを許可されたエクスポートされた WebAssembly 関数が含まれます。
- - {{jsxref("Global_objects/WebAssembly/instantiateStreaming", "WebAssembly.instantiateStreaming()")}} -
WebAssembly.instantiate()関数は WebAssembly コードをコンパイル、インスタンス化するための主要な API で、Moduleと、その最初のInstanceを返します。
- - {{jsxref("Global_objects/WebAssembly/Memory", "WebAssembly.Memory()")}} -
WebAssembly.Memoryオブジェクトはリサイズ可能な {{jsxref("Global_objects/ArrayBuffer", "ArrayBuffer")}} で、Instanceからアクセスされる生のバイト列を保持します。
- - {{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}} -
WebAssembly.TableオブジェクトはInstanceからアクセスされる関数参照などの不透明値のリサイズ可能な型付き配列です。
- - {{jsxref("WebAssembly.CompileError()")}} -
- WebAssembly
CompileErrorオブジェクトを生成します。
- - {{jsxref("WebAssembly.LinkError()")}} -
- WebAssembly
LinkErrorオブジェクトを生成します。
- - {{jsxref("WebAssembly.RuntimeError()")}} -
- WebAssembly
RuntimeErrorオブジェクトを生成します。
-
例
- --
-
- WASMSobel -
- 他の多くの例については webassembly-examples レポジトリーを参照してください。 -
仕様書
- -| 仕様書 | -状態 | -備考 | -
|---|---|---|
| {{SpecName('WebAssembly JS')}} | -{{Spec2('WebAssembly JS')}} | -JavaScript API の初回ドラフト定義。 | -
ブラウザーの互換性
- -{{Compat("javascript.builtins.WebAssembly")}}
- -関連情報
- --
-
- WebAssembly on Mozilla Research -
- webassembly.org -
- WebAssembly articles on Mozilla Hacks blog -
- W3C WebAssembly Community Group -
- Large-Allocation HTTP header -
- Emscripting a C Library to Wasm -
{{WebAssemblySidebar}}
-
-JavaScript で WebAssembly を使用するには、まずコンパイル/インスタンス化の前にモジュールをメモリにプルする必要があります。この記事では、WebAssembly バイトコードをフェッチするために使用できるさまざまなメカニズムのリファレンスと、それをコンパイル/インスタンス化して実行する方法について説明します。
- -どんな方法があるの?
- -WebAssemblyは <script type='module'> または ES2015 の import 文とまだ統合されていないため、インポートを使用してブラウザでモジュールをフェッチする組み込みの方法はありません。
以前の {{jsxref("WebAssembly.compile")}}/{{jsxref("WebAssembly.instantiate")}} メソッドでは、生のバイトをフェッチした後 WebAssembly モジュールのバイナリを含む {{domxref("ArrayBuffer")}} を作成し、コンパイル/インスタンス化する必要があります。これは文字列(JavaScript ソースコード) をバイトの配列バッファ (WebAssembly ソースコード)で置き換えることを除いて、new Function(string) に似ています。
新しい {{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} メソッドは、より効率的です。ネットワークからの生のバイトストリームに対して直接アクションを実行し、 {{domxref("ArrayBuffer")}} ステップの必要性がなくなりました。
- -では、どのようにバイト列を配列バッファに読み込んでコンパイルするのでしょうか? 次の章で説明します。
- -Fetchを使用する
- -Fetch はネットワークリソースを取得するための便利でモダンな API です。
- -wasm モジュールをフェッチする最も簡単で効率的な方法は、新しい {{jsxref("WebAssembly.instantiateStreaming()")}} メソッドを使用することです。このメソッドは最初の引数として fetch() を呼び出すことができ、1つのステップでフェッチ、モジュールをインスタンス化し、サーバからストリームされる生のバイトコードにアクセスします。
WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
-.then(results => {
- // Do something with the results!
-});
-
-直接ストリームでは動作しない古い {{jsxref("WebAssembly.instantiate()")}} メソッドを使用した場合、フェッチされたバイトコードを {{domxref("ArrayBuffer")}} に変換する必要があります。次のようにです：
- -fetch('module.wasm').then(response =>
- response.arrayBuffer()
-).then(bytes =>
- WebAssembly.instantiate(bytes, importObject)
-).then(results => {
- // コンパイルされた結果(results)で何かする!
-});
-
-余談: instantiate() のオーバーロード
- -{{jsxref("WebAssembly.instantiate()")}} 関数は2つのオーバーロードを持ちます — 1つ目 (上の例を参照)はバイトコードを受け取ってプロミスを返します。解決されたプロミスでコンパイルされたモジュールと、それをインスタンス化したものを含むオブジェクトとして受け取ります。オブジェクトの構造は以下のようになります:
- -{
- module : Module // コンパイルされた WebAssembly.Module オブジェクト,
- instance : Instance // モジュールオブジェクトから生成された WebAssembly.Instance
-}
-
-
-
-
-注: 通常はインスタンスのみを気にしますが、キャッシュする場合や、postMessage() を使用して別のワーカーやウィンドウと共有する場合や、インスタンスをさらに作成したい場合に備えて、モジュールを用意すると便利です。
-
-
-注: 2番目のオーバーロードフォームは {{jsxref("WebAssembly.Module")}} オブジェクトを引数としてとり、結果としてインスタンスオブジェクトを直接含む Promise を返します。2番目のオーバーロードの例を参照してください。
-WebAssembly コードを実行する
- -JavaScript 内で WebAssembly インスタンスが 有効になったら {{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}} プロパティを通してエクスポートされた機能を使い始める事ができます。コードは以下のようになるでしょう:
- -WebAssembly.instantiateStreaming(fetch('myModule.wasm'), importObject)
-.then(obj => {
- // Call an exported function:
- obj.instance.exports.exported_func();
-
- // or access the buffer contents of an exported memory:
- var i32 = new Uint32Array(obj.instance.exports.memory.buffer);
-
- // or access the elements of an exported table:
- var table = obj.instance.exports.table;
- console.log(table.get(0)());
-})
-
-
-
-
-注: WebAssembly モジュールからのエクスポートの仕組みの詳細については WebAssembly JavaScript API の使用 と WebAssemblyテキストフォーマットを理解する を参照してください。
-XMLHttpRequest を使用する
- -XMLHttpRequest は Fetch よりやや古いですが、引き続き型付き配列を取得するために適切に使用することができます。繰り返しますが、モジュール名は simple.wasm とします:
-
-
- {{domxref("XMLHttpRequest()")}} インスタンスを生成して、{{domxref("XMLHttpRequest.open","open()")}} メソッドでリクエストをオープン、リクエストメソッドを
GETに設定し、フェッチするためのパスを宣言します。
- - キーは {{domxref("XMLHttpRequest.responseType","responseType")}} を使用してレスポンスタイプを
'arraybuffer'にすることです。
- - 次に {{domxref("XMLHttpRequest.send()")}} を使用してリクエストします。 -
- そのあと、ダウンロードが終了したときに {{domxref("XMLHttpRequest.onload", "onload")}} イベントハンドラから関数を実行します — この関数内で {{domxref("XMLHttpRequest.response", "response")}} プロパティから array buffer を取得し、Fetchで行ったように {{jsxref("WebAssembly.instantiate()")}} メソッドに渡します。 -
最終的なコードは以下のようになります:
- -request = new XMLHttpRequest();
-request.open('GET', 'simple.wasm');
-request.responseType = 'arraybuffer';
-request.send();
-
-request.onload = function() {
- var bytes = request.response;
- WebAssembly.instantiate(bytes, importObject).then(results => {
- results.instance.exports.exported_func();
- });
-};
-
-
-
diff --git a/files/ja/webassembly/loading_and_running/index.md b/files/ja/webassembly/loading_and_running/index.md
new file mode 100644
index 00000000000000..500df1cc2bed1b
--- /dev/null
+++ b/files/ja/webassembly/loading_and_running/index.md
@@ -0,0 +1,112 @@
+---
+title: WebAssemblyコードのロードと実行
+slug: WebAssembly/Loading_and_running
+tags:
+ - Fetch
+ - JavaScript
+ - WebAssembly
+ - XMLHttpRequest
+ - バイトコード
+translation_of: WebAssembly/Loading_and_running
+---
+{{WebAssemblySidebar}}
+
+JavaScript で WebAssembly を使用するには、まずコンパイル/インスタンス化の前にモジュールをメモリにプルする必要があります。この記事では、WebAssembly バイトコードをフェッチするために使用できるさまざまなメカニズムのリファレンスと、それをコンパイル/インスタンス化して実行する方法について説明します。
+
+## どんな方法があるの?
+
+WebAssembly は `
+ 注: 動作例は xhr-wasm.html を参照してください。
-