blob: bdf467dae48a6296144903ef5111f4653d3634f9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: WebAssembly
slug: WebAssembly
tags:
- Landing
- WebAssembly
- wasm
translation_of: WebAssembly
---
<div>{{WebAssemblySidebar}}</div>
<p class="summary" dir="ltr" id="docs-internal-guid-22bb55aa-d69e-e8ef-cbc6-aafea272f684">WebAssembly はモダンなウェブブラウザーで実行できる新しいタイプのコードです。ネイティブに近いパフォーマンスで動作するコンパクトなバイナリー形式の低レベルなアセンブリ風言語です。さらに、 C/C++ や Rust のような言語のコンパイル対象となって、それらの言語をウェブ上で実行することができます。 WebAssembly は JavaScript と並行して動作するように設計されているため、両方を連携させることができます。</p>
<h2 dir="ltr" id="In_a_Nutshell" name="In_a_Nutshell">概要</h2>
<p dir="ltr">WebAssembly はウェブプラットフォームに大きな影響を与えます — 以前ではできなかったようなウェブ上で動作するクライアントアプリケーションのために、複数の言語で記述されたコードをウェブ上でネイティブに近いスピードで実行する方法を提供します。</p>
<p dir="ltr">WebAssembly は JavaScript を補完、並行して動作するように設計されています — WebAssembly JavaScript API を使用して、 WebAssembly モジュールを JavaScript アプリケーションにロードし、2 つの間で機能を共有できます。これにより、WebAssembly コードの記述方法を知らなくても、 WebAssembly のパフォーマンスとパワー、JavaScript の表現力と柔軟性を同じアプリケーションで活用できます。</p>
<p dir="ltr">さらに、<a href="https://www.w3.org/wasm/">W3C WebAssembly Working Group</a> と <a href="https://www.w3.org/community/webassembly/">Community Group</a> を介して、ウェブ標準として開発されており、主要なブラウザーベンダーも積極的に参加しています。</p>
<div class="row topicpage-table">
<div class="section">
<h2 dir="ltr" id="Guides" name="Guides">ガイド</h2>
<dl>
<dt><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></dt>
<dd>まずは WebAssembly の高レベルなコンセプト— WebAssembly とはなにか、有用性、ウェブプラットフォーム (またはそれ以上) にどのように適合するか、どのように使用するか — の理解から始めてください。</dd>
<dt><a href="/ja/docs/WebAssembly/C_to_wasm">C/C++ から WebAssembly にコンパイルする</a></dt>
<dd>C/C++ で書いたコードを<a href="/ja/docs/Mozilla/Projects/Emscripten/"> Emscripten</a> のようなツールを使って .wasm にコンパイルできます。どのように動作するか確認してみましょう。</dd>
<dt><a href="/ja/docs/WebAssembly/existing_C_to_wasm">既存の C モジュール から WebAssembly へのコンパイル</a></dt>
<dd>WebAssembly のコアユースケースは、既存のCライブラリのエコシステムを利用し、開発者が Web 上でそれらを使用できるようにすることです。</dd>
<dt><a href="/ja/docs/WebAssembly/rust_to_wasm">Rust から WebAssembly へのコンパイル</a></dt>
<dd>Rust コードを書いていれば、WebAssembly にコンパイルすることができます！このチュートリアルでは、Rust プロジェクトをコンパイルして既存の Web アプリケーションで使用するために知っておく必要があるすべてのことを説明します。</dd>
<dt><a href="/ja/docs/WebAssembly/Loading_and_running">WebAssembly コードのロードと実行</a></dt>
<dd>.wasm を手に入れたら、この記事では、<a href="/ja/docs/Web/API/Fetch_API">Fetch</a> または <a href="/ja/docs/Web/API/XMLHttpRequest">XHR</a> API と <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript</a> API を組み合わせて、フェッチコンパイル、インスタンス化する方法について説明します。</dd>
<dt><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></dt>
<dd>.wasm モジュールをロードしたら、それを使いたいでしょう。この記事では、WebAssembly JavaScript API を用いて WebAssembly を使用する方法を説明します。</dd>
<dt><a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a></dt>
<dd>エクスポートされた WebAssembly 関数は、WebAssembly 関数の JavaScript リフレクションであり、JavaScript から WebAssembly コードを呼び出すことができます。 この記事では、それらが何なのか説明します。</dd>
<dt><a href="/ja/docs/WebAssembly/Understanding_the_text_format">WebAssembly テキストフォーマットを理解する</a></dt>
<dd>この記事では wasm テキスト形式について説明します。これは .wasm モジュールの低レベルなテキスト表現で、デバッグ時にブラウザーの開発者ツールに表示されます。</dd>
<dt><a href="/ja/docs/WebAssembly/Text_format_to_wasm">WebAssembly テキストフォーマットから wasm に変換する</a></dt>
<dd>この記事では、テキスト形式で書かれた WebAssembly モジュールを .wasm バイナリに変換する方法について説明します。</dd>
</dl>
</div>
<div class="section">
<h2 dir="ltr" id="API_reference" name="API_reference">API リファレンス</h2>
<dl>
<dt>{{jsxref("Global_objects/WebAssembly", "WebAssembly")}}</dt>
<dd>このオブジェクトは、 WebAssembly に関連する全ての機能の名前空間として振る舞います。</dd>
<dt>{{jsxref("Global_objects/WebAssembly/Global", "WebAssembly.Global()")}}</dt>
<dd><code>WebAssembly.Global</code> オブジェクトは JavaScript と1つ以上の {{jsxref("WebAssembly.Module")}} インスタンス(のインポート/エクスポート可能な値)を横断してアクセスできるグローバル変数のインスタンスを表現します。これによって、複数モジュールでの動的リンクを実現できます。</dd>
<dt>{{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}}</dt>
<dd><code>WebAssembly.Module</code> オブジェクトにはブラウザーでコンパイルされたステートレスな WebAssembly コードが含まれており、効率的に <a href="/ja/docs/Web/API/Worker/postMessage">Worker で共有</a>したり、<a href="/ja/docs/WebAssembly/Caching_modules">IndexedDB にキャッシュ</a>したり、複数回インスタンス化したりすることができます。</dd>
<dt>{{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}}</dt>
<dd><code>WebAssembly.Instance</code> オブジェクトはステートフルで、実行可能な <code>Module</code> のインスタンスです。<code>Instance</code> オブジェクトには JavaScript から WebAssembly コードを呼び出すことを許可された<a href="/ja/docs/WebAssembly/Exported_functions">エクスポートされた WebAssembly 関数</a>が含まれます。</dd>
<dt>{{jsxref("Global_objects/WebAssembly/instantiateStreaming", "WebAssembly.instantiateStreaming()")}}</dt>
<dd><code>WebAssembly.instantiate()</code> 関数は WebAssembly コードをコンパイル、インスタンス化するための主要な API で、<code>Module</code> と、その最初の <code>Instance</code> を返します。</dd>
<dt>{{jsxref("Global_objects/WebAssembly/Memory", "WebAssembly.Memory()")}}</dt>
<dd><code>WebAssembly.Memory</code> オブジェクトはリサイズ可能な {{jsxref("Global_objects/ArrayBuffer", "ArrayBuffer")}} で、 <code>Instance</code> からアクセスされる生のバイト列を保持します。</dd>
<dt>{{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}}</dt>
<dd><code>WebAssembly.Table</code> オブジェクトは <code>Instance</code> からアクセスされる関数参照などの不透明値のリサイズ可能な型付き配列です。</dd>
<dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
<dd>WebAssembly <code>CompileError</code> オブジェクトを生成します。</dd>
<dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
<dd>WebAssembly <code>LinkError</code> オブジェクトを生成します。</dd>
<dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
<dd>WebAssembly <code>RuntimeError</code> オブジェクトを生成します。</dd>
</dl>
</div>
</div>
<h2 dir="ltr" id="Examples" name="Examples">例</h2>
<ul dir="ltr">
<li><a href="https://github.com/JasonWeathersby/WASMSobel">WASMSobel</a></li>
<li>他の多くの例については <a href="https://github.com/mdn/webassembly-examples/">webassembly-examples</a> レポジトリーを参照してください。</li>
</ul>
<h2 id="Specifications" name="Specifications">仕様書</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')}}</td>
<td>{{Spec2('WebAssembly JS')}}</td>
<td>JavaScript API の初回ドラフト定義。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("javascript.builtins.WebAssembly")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul dir="ltr">
<li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li>
<li><a href="http://webassembly.org/">webassembly.org</a></li>
<li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li>
<li><a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a></li>
<li><a href="/ja/docs/Web/HTTP/Headers/Large-Allocation">Large-Allocation HTTP header</a></li>
<li><a href="https://developers.google.com/web/updates/2018/03/emscripting-a-c-library">Emscripting a C Library to Wasm</a></li>
</ul>
|
