recursal/MDN huggingface dataset:
FTP
===

**FTP** (File Transfer Protocol、ファイル転送プロトコル) は、あるホストから別のホストに、インターネットを介してファイルを転送するための長年の標準的なプロトコルでした。しかし、チームやホスティングアカウントは FTP を許可せず、代わりに Git などのバージョン管理システムに依存することが増えています。古いホスティングアカウントでも使用されていますが、もはや FTP はベストプラクティスとは見なされていないと言っても過言ではありません。

もっと学ぶ
-----

### 一般知識

* FTP を介してファイルをアップロードする初心者向けのガイド
* Wikipedia の FTP 記事
Exception (例外)
==============

**例外**とは、通常のコード実行を強制停止する条件です。 JavaScript 構文エラー は、とてもよくある例外の情報源です。

より詳しく知る
-------

### 一般知識

* Wikipedia での 例外処理
Baseline (互換性)
==============

**Baseline** （ベースライン）は、ブラウザー間で動作するウェブプラットフォームの機能を確認します。Baseline は、サイトの訪問者に互換性の問題を引き起こす可能性が低くなった時期を示すことで、その機能を使用するタイミングを決定するのに役立ちます。

API、一連の CSS プロパティ、JavaScript 構文などの Baseline 機能は、Chrome、Edge、Firefox、Safari など、デスクトップやモバイルで広く使われている有名なブラウザーで一貫して動作します。

Baseline 機能とは、現在の安定したブラウザーで新たに利用可能になったか、あるいは長期にわたる継続的なサポートにより広く利用可能になった機能のことを言います。

バッジ
---

![チェックマークが付いた緑色のウィジェット：Baseline: Widely available. 4 つのブラウザーのロゴ、すべてチェックマーク付き。](/ja/docs/Glossary/Baseline/Compatibility/high.png)

**Widely available** である Baseline バッジが表示されている場合、その機能は各 Baseline ブラウザーで一貫してサポートされてきた歴史があると信頼できます。*Widely available* である機能とは、何年も前から複数のブラウザーでサポートされている機能です。まだ最新のブラウザーリリースに対応していないものであっても、多くのブラウザーやデバイスで動作します。

![チェックマークが付いた青色のウィジェット：Baseline 2022: Newly available. 4 つのブラウザーのロゴ、すべてチェックマーク付き。](/ja/docs/Glossary/Baseline/Compatibility/limited.png)

**Newly available** である Baseline バッジが表示されている場合、その機能は少なくとも各 Baseline ブラウザーの最新の安定版で動作しており、多くの場合それ以上の動作が確認されています。*Newly available* である機能は、最新のブラウザーでは動作しますが、古いブラウザーやデバイスでは動作しない可能性があります。*Newly available* である機能を使用する前に、サイトの利用者をよく検討してください。

![バツマークが付いた灰色のウィジェット：Limited availability. 4 つのブラウザーのロゴ、2 つにチェックマーク、2 つにバツマーク。](/ja/docs/Glossary/Baseline/Compatibility/low.png)

**Limited availability** バッジが表示されている場合、その機能は Baseline ではありません。その機能に依存する前に、あなたのサイトのユーザーを対象とした調査とテストを行うか、Baseline になるのを待ちましょう。

ブラウザーセット
--------

Baseline は、以下のブラウザーでの可用性を追跡します。

* Apple Safari (iOS)
* Apple Safari (macOS)
* Google Chrome (Android)
* Google Chrome (desktop)
* Microsoft Edge (desktop)
* Mozilla Firefox (Android)
* Mozilla Firefox (desktop)
その他の注意事項
--------

Baseline はサポートの概要であり、すべての状況をカバーしているわけではありません。もしあなたのサイトが、古いデバイスやブラウザーのリリース、または Baseline でカバーされていないブラウザーで動作する必要がある場合、あなた自身で調査やテストを行う必要があるかもしれません。Baseline があなたの状況をカバーしていない場合は、その機能を採用する前に MDN にあるブラウザーの互換性テーブルを読んだり caniuse.com を参照することを検討してください。

貢献するには
------

Baseline は W3C WebDX Community Group のコミュニティ活動であり、MDN のオープンソースブラウザー互換性データに依存しています。質問やフィードバックがある場合、または Baseline のステータスレポートがカバーする機能の更新や拡張に協力したい場合は、web-platform-dx/web-features にアクセスして参加してください。

関連情報
----

* クロスブラウザーテスト
* web-platform-dx/web-features repository
* W3C WebDX Community Group
* mdn/browser-compat-data repository
Baseline (typography)
=====================

**ベースライン**とは、ヨーロッパおよび西アジアの書体で使用される用語で、フォントの文字がその上に載る概念上の線を意味します。

関連情報
----

* Baseline (Wikipedia)
* CSS ボックス配置 (MDN)
DSL (デジタル加入者線)
==============

**DSL (デジタル加入者線)** は、ブロードバンドインターネット接続の一種で、電話回線を使って有線データ通信を行うものです。

 ダウンロードとアップロードの速度は同じである必要はありません。このような場合、回線は *非対称* と言われ、 ADSL の略称が使用されます。
 ケーブル、光ファイバー、ダイヤルアップ接続とは対照的となります。

関連情報
----

* Wikipedia 上の デジタル加入者線
DSL (ドメイン固有言語)
==============

**DSL（ドメイン固有言語）** とは、あるアプリケーションドメイン内の特定の問題に対処するために設計された、範囲が限定されたコンピューター言語の一種です。

DSL は、ドメインにまたがる様々な問題に対応するように設計された *汎用言語（GPL）* とは対照的となります。

関連情報
----

* Wikipedia 上の ドメイン固有言語
* martinfowler.com 上の DSL Guide
Signature (署名 (セキュリティ) )
========================

**署名** もしくは*デジタル署名*とは、メッセージが正当であることを示す プロトコル です。

**署名プロセス**では最初に、与えられたメッセージのハッシュから、署名する主体にリンクされたデジタル署名を、主体の秘密鍵を用いて生成します。

メッセージを受信する際は、**認証プロセス**は

* *送信者の認証* - 送信者の公開鍵を使用して署名を復号し、送信者の秘密鍵によってのみ生成可能なハッシュを復元します。さらに、
* *メッセージの完全性をチェック* - 受信したドキュメントから新たに算出されたハッシュとの比較を行います (もしドキュメントが改竄されていれば、2 つのハッシュは異なるでしょう)。

このシステムは、秘密鍵が漏洩したり、受信者が不正に間違った公開鍵を受信した場合には機能しなくなります。

関連情報
----

* Wikipedia 上の デジタル署名
* ダイジェスト, 暗号化 を参照
Signature (functions) (シグネチャ (関数))
==================================

**関数シグネチャ** (もしくは型シグネチャ、メソッドシグネチャ) は関数やメソッドの入力と出力を定義します。

シグネチャは以下のものを含みます:

* パラメーター とその 型
* 返り値とその型
* スローされる可能性のある例外
* オブジェクト指向 プログラムにおける利用可能性の情報(`public`、`static`、`prototype` のようなキーワード)。
さらに詳しく
------

### JavaScript におけるシグネチャ

JavaScript は型付けの弱い動的言語です。なので先行して変数の型を宣言する必要がありません。プログラムが処理される間に自動的に型が決定します。JavaScript のシグネチャはそれでもやはりメソッドの情報を付与します:


```js
MyObject.prototype.myFunction(value);
```


* メソッドは `MyObject` という オブジェクト に追加される
* メソッドは静的メソッドになるのとは対照的に `MyObject` の `prototype` に追加される (したがってインスタンスメソッド (en-US)となる)。
* 関数名は `myFunction` である。
* メソッドは未定義の `value` という一つのパラメータを受け取る。
### Java におけるシグネチャ

Javaでは、シグネチャは仮想マシンコードレベルでメソッドやクラスを区別するために使用されます。 Java コードを実行できるように変数の型をコード中で宣言する必要があります。 Java は*強い型付け*がなされ、コンパイル中にすべてのパラメーターが正しいかどうかをチェックします。


```java
public static void main(String[] args)
```


* `public` キーワードはアクセス修飾子ですべてのオブジェクトからこのメソッドを呼び出すことができることを明示します。
* `static` キーワードはこのメソッドがインスタンスメソッドとは対照的にクラスメソッドであることを明示します。
* `void` キーワードはこのメソッドの返り値が無いことを明示します。
* メソッド名は `main` です。
* メソッドは `args` という `String` 配列型のパラメータを一つ受け取ります。
`さらに学ぶ`
-------

### `一般知識`

* Wikipedia の Java internal type signatures
Property (プロパティ) (CSS)
======================

**CSS のプロパティ**は、関連付けられた値によりブラウザーがどのように要素を表示するかを定義する特性です。

以下に CSS のルールの例を示します：


```css
/\* "div" はドキュメント中の全ての div 要素が \*/
/\* このルールによってスタイルを整えることを示すセレクタです。\*/
div {
  /\* 値 "black" を持つプロパティ "color" は、\*/
  /\* テキストの色が黒くなることを示します。\*/
  color: black;

  /\* 値 "white" を持つプロパティ "background-color" は、\*/
  /\* 要素の背景色が白くなることを示します。 \*/
  background-color: white;
}
```

詳細情報
----

### 一般知識

* Learn CSS
### 技術リファレンス

* MDN 上の CSS リファレンス
* CSS ワーキンググループの現在の成果
Property (プロパティ) (JavaScript)
=============================

**JavaScript プロパティ**は、多くの場合データ構造と関連付けられた属性を記述する、オブジェクトの特性です。

プロパティは 2 種類あります。

* *インスタンスプロパティ*は、特定のオブジェクトインスタンスに固有のデータを保持します。
* *静的プロパティ*は、すべてのオブジェクトインスタンス間で共有されるデータを保持します。

プロパティは名前 ( 文字列) と値 (プリミティブ、メソッド、オブジェクト参照) のいずれかを持ちます。「プロパティが値を保持する」というのは、「プロパティがオブジェクト*参照*を保持している」という意味です。プロパティの値を変更しても、元の参照オブジェクトは変更されないため、この区別は重要です。

関連項目
----

### 一般知識

* Wikipedia 上の記事「プロパティ」
* オブジェクト志向 JavaScript 入門
Safe (安全) (HTTP メソッド)
=====================

HTTP メソッドが**安全**であるとは、その HTTP メソッドがサーバーの状態を変更しないということです。言い換えれば、読み取り専用操作につながる場合、メソッドは安全です。一般的な HTTP メソッドのうちでは `GET`, `HEAD`, `OPTIONS` が安全です。安全な HTTP メソッドはすべてべき等でもあります。しかし、すべてのべき等なメソッドが安全とは限りません。例えば、 `PUT` や `DELETE` はべき等ですが、安全ではありません。

安全なメソッドは、意味の上では読み取り専用ですが、実際にはサーバーは状態を変更することもあります。例えば、サーバーはログを記録したり、統計情報を保存したりできます。ここで重要なことは、安全なメソッドを呼び出すことによって、クライアント自体はサーバー変更を要求していないため、サーバーに不必要な負荷や責務をかけないことです。ブラウザーは、サーバーに何らかの害を及ぼすことを心配することなく安全なメソッドを呼び出すことができます。これにより、リスクなしで先読みなどの操作を実行できます。また、ウェブクローラーも、安全なメソッドの呼び出しに依拠しています。

安全なメソッドは静的ファイルのみを提供ものである必要はありません。サーバーは、生成スクリプトが安全を保証する限り、すなわち、電子商取引ウェブサイトで注文を発生させるなどの外部効果を引き起こすのではないのであれば、安全なメソッドへの返答をその場で生成することができます。

安全なメソッドを意味通りに実装するのはサーバー上のアプリケーションの責任であり、 Apache, Nginx, IIS などのウェブサーバー自体は、そのことを強制できません。特に、アプリケーションは `GET` リクエストによってサーバーの状態を変更することを許可してはいけません。

サーバーの状態を変更しない、安全なメソッドの呼び出し:
```

GET /pageX.html HTTP/1.1
```


サーバーの状態を変更する可能性のある、安全でないメソッドの呼び出し:
```

POST /pageX.html HTTP/1.1
```


べき等ではあるが安全でないメソッドの呼び出し:
```

DELETE /idX/delete HTTP/1.1
```

関連情報
----

* HTTP 仕様書における safe の定義
* 一般的な安全なメソッドの説明: `GET`, `HEAD`, `OPTIONS`
* 一般的な安全でないメソッドの説明: `PUT`, `DELETE`, `POST`
Block (ブロック) (CSS)
==================

ウェブページにおいて **ブロック** (block) は、新しい行、つまり、横書きでは前の要素の下、次の要素の上に現れる HTML の要素です（よく*ブロックレベル要素*として知られています）。例えば、 `<p>` は既定ではブロックレベル要素であり、それに対して `<a>` は*インライン要素*です。 — HTML ソース内で複数のリンクを互いに隣に置くことができ、出力時には互いに同じ行に表示されます。

`display` プロパティを使用すると、要素がインラインで表示されるかブロックで表示されるか (他の多数のオプションの中で) 変更することができます。**ブロック**は配置方法や `position` の使用にも影響します。

関連情報
----

* 視覚整形モデル
Block (ブロック) (スクリプティング)
=======================

JavaScript では、ブロックは、中括弧 ("`{}`") で囲まれた関連する文の集合です。 たとえば、 `if (条件)` ブロックの後に文のブロックを置くことができます。これは、条件が真であればインタープリターがブロック内のコードを実行する必要があることを示し、条件が偽の場合はブロック全体をスキップします。

関連情報
----

* JavaScript のブロック文
Node (networking)
=================

ネットワークでは、 **node** はネットワーク内の接続ポイントです。物理ネットワークでは通常、コンピューターやルーターなどのデバイスです。

詳細情報
----

### 基礎知識

* Wikipedia 上の記事「Node」
Node (DOM)
==========

DOMとしての node は、node tree 内の 1 点を指しています。node はドキュメント自身であり、Element(要素)やテキスト、コメント等の色々なものがあります。

詳細
--

### テクニカルリファレンス

* WHATWG のnode tree仕様
Media (CSS)
===========

CSS (Cascading Style Sheets) の文脈において、***メディア***という用語はレンダリングエンジンによって描画される文書の出力先を参照します。これはふつうは端末の画面ですが、プリンターや読み上げ装置、点字ディスプレイ、あるいはそのほかの装置の可能性もあります。

CSS には、閲覧者の端末のメディアの**種類** (画面や印刷など) やメディアの**能力** (幅、解像度、その他の値など) に応じて、文書のスタイルを微調整したり、異なるスタイルを提供したりすることができる機能がいくつかあります。

関連項目
----

### 一般知識

* メディアクエリーの使用
### 技術リファレンス

メディアクエリー

メディアクエリの中括弧内で指定された CSS スタイルを適用する条件となる特性または引数のセットを定義します。例えば、768 ピクセル以下の端末のみに特定の CSS スタイルを適用する、などです。

`@media` アット規則

メディアクエリの結果に基づいて、スタイルシートの一部を条件付きで適用します。

`Window.matchMedia()`

表示装置に対するメディアクエリをテストします。
Boolean attribute (論理属性) (HTML)
===============================

HTML における **論理属性** (boolean attribute) とは、`true`（真） か `false`（偽）のどちらか一方の値をとる属性です。

論理属性の注目すべき特徴として、存在していれば `true` をとり、存在していなければ `false` をとる、という点があります。

こちらは HTML の論理属性 `checked` の例です。


```html
<!-- 次のチェックボックスは最初にレンダリングされた際、チェックされた状態でレンダリングされます -->
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="any value" />

<!-- 次のチェックボックスは最初にレンダリングされた際、チェックされていない状態でレンダリングされます -->
<input type="checkbox" />
```

関連情報
----

* 列挙型
Boolean attribute (論理属性) (ARIA)
===============================

ARIA における **論理属性** (boolean attribute) とは、列挙されたリストの中に `true` (真) または `false` (偽) の含む 列挙型 の属性のことです。

ARIA においては、論理型 (boolean) は文字列 `"true"` および `"false"` の形式でのみ利用されます。

関連情報
----

* 列挙型
Boolean (ブーリアン) (JavaScript)
============================

JavaScript において **Boolean** は プリミティブ値で `true` か `false` を表します。

`Boolean` オブジェクトはプリミティブ値の wrapper です。

関連情報
----

* Boolean
* JavaScript のデータ型とデータ構造
エクスポートされた WebAssembly 関数
========================

エクスポートされた 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 の テキスト表現 を参照してください）。


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

WebAssembly.instantiateStreaming(fetch("table.wasm")).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)());
});
```


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

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

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

それらは本物の関数です
-----------

前の例で、`Table.prototype.get()` のそれぞれの返値はエクスポートされた WebAssembly 関数でした。まさに私たちが話していたことです。

これらは WebAssembly 関数のラッパーであるのに加えて本物の JavaScript 関数であることに注意してください。上の例を WebAssembly に対応しているブラウザーで読み込み、以下の行をコンソールで実行してみてください。


```js
const 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 によって使用される可能性があります。
WebAssembly
===========

**`WebAssembly`** は JavaScript のオブジェクトで、 WebAssembly に関するすべての機能の名前空間の役割をします。

他のグローバルオブジェクトとは異なり、 `WebAssembly` はコンストラクターではありません (関数オブジェクトではありません) 。数学の定数や関数の名前空間である `Math` や 、国際化のコンストラクターやその他の言語を意識した関数ための `Intl` と同様のものです。

概要
--

`WebAssembly` オブジェクトの主な用途は次のとおりです。

* `WebAssembly.instantiate()` 関数を用いた WebAssembly コードの読み込み。
* `WebAssembly.Memory()`/`WebAssembly.Table()` コンストラクターによる新しいメモリーやテーブルインスタンスの生成。
* `WebAssembly.CompileError()`/`WebAssembly.LinkError()`/`WebAssembly.RuntimeError()` コンストラクターによる、WebAssembly で発生するエラーの処理する機能の提供。
コンストラクタープロパティ
-------------

`WebAssembly.CompileError()`

WebAssembly のデコードまたは検証中のエラーを示します。

`WebAssembly.Global()`

グローバル変数のインスタンスを表し、 JavaScript からアクセス可能で、 1 つ以上の `WebAssembly.Module` インスタンスの間でインポート/エクスポート可能です。これにより、複数のモジュールを動的リンクすることができます。

`WebAssembly.Instance()`

ステートフルで、実行可能な WebAssembly.Module のインスタンスです。

`WebAssembly.LinkError()`

(関数開始後のトラップではなく) モジュールの初期化時に発生したエラーを示します。

`WebAssembly.Memory()`

`buffer` プロパティが可変長の ArrayBuffer であり、これが WebAssembly の `Instance` からアクセス可能なメモリーのバイト列を保持しています。

`WebAssembly.Module()`

ステートレスの WebAssembly のコードであり、ブラウザーでコンパイルされ、効率的にワーカーと共有することができ、複数回インスタンス化することができます。

`WebAssembly.RuntimeError()`

WebAssembly がトラップを指定するたびに例外として発生するエラー型です。

`WebAssembly.Table()`

WebAssembly のテーブルを表す配列風の構造で、関数の参照を保持します。

静的メソッド
------

`WebAssembly.instantiate()`

WebAssembly コードをコンパイル、インスタンス化するための主要な API で、 `Module` と、その最初の `Instance` を返します。

`WebAssembly.instantiateStreaming()`

ソースのストリームから直接 WebAssembly モジュールをコンパイル、インスタンス化し、 `Module` と、その最初の `Instance` を返します。

`WebAssembly.compile()`

`WebAssembly.Module` を用いて WebAssembly バイナリコードからコンパイルします。インスタンス化は別ステップとして分離されます。

`WebAssembly.compileStreaming()`

ソースのストリームから直接 `WebAssembly.Module` にコンパイルします。インスタンス化は別ステップとして分離されます。

`WebAssembly.validate()`

WebAssembly バイナリコードの型付き配列を検証し、バイト列が有効な WebAssembly コードか (`true`) 否か (`false`) を返します。

例
-

.wasm モジュールを読み込み、コンパイルし、インスタンス化する
---------------------------------

次の例 (GitHub 上の instantiate-streaming.html のデモと、動作例も参照) は、基礎となるソースから .wasm モジュールを直接ストリーミングし、コンパイルしてインスタンス化し、 `ResultObject` で履行されるプロミスを返します。 `instantiateStreaming()` 関数は `Response` オブジェクトのプロミスを受け付けるので、 `fetch()` の呼び出し結果を直接渡すと、履行されたときにレスポンスを関数に渡すことができます。


```js
var importObject = { imports: { imported\_func: (arg) => console.log(arg) } };

WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
  (obj) => obj.instance.exports.exported\_func(),
);
```


それから `ResultObject` の instance メンバーにアクセスすると、呼び出し対象のエクスポートされた関数が入っています。

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # webassembly-namespace |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly テキスト形式から Wasm への変換
==============================

WebAssembly には S 式ベースのテキスト表現があります。これはテキストエディター、ブラウザーの開発者ツールなどで見せるために設計された中間表現です。この記事では、これがどのように動作するか、テキスト形式のファイルを Wasm 形式に変換するのに利用可能なツールの使用方法について少し説明します。

**メモ:** テキスト形式のファイルは、通常 `.wat` という拡張子で保存されます。過去には `.wast` という拡張子も使用されていましたが、現在は WebAssembly テストスイートで使用されるスクリプト言語のために使用されています。

初めてのテキスト形式
----------

簡単な例を見てみましょう。次のプログラムは `imported_func` という名前の関数を `imports` というモジュールからインポートし、 `exported_func` という名前の関数をエクスポートしています。


```wasm
(module
  (func $i (import "imports" "imported\_func") (param i32))
  (func (export "exported\_func")
    i32.const 42
    call $i
  )
)
```


WebAssembly 関数 `exported_func` は私たちの環境（WebAssembly モジュールを使用しているウェブアプリなど）で使用するためにエクスポートされます。この関数が呼び出されたとき、インポートされた JavaScript 関数 `imported_func` の引数として値 (42) を渡して実行されます。

テキストの .wat ファイルからバイナリーの .wasm ファイルへの変換
--------------------------------------

上の `.wat` テキスト表現の例を `.wasm` アセンブリー形式に変換してみましょう。

1. はじめに、上のコードをテキストファイルにコピーして `simple.wat` という名前のファイルを作成してください。
2. このテキスト表現をブラウザーが実際に読み込んで利用可能なアセンブリー言語にアセンブルする必要があります。このために wabt ツールを使用することができます。これは WebAssembly のテキスト表現から Wasm 変換する、または逆に変換するコンパイラー（加えてもう少し別のツール）が含まれます。https://github.com/webassembly/wabt に行って、そのページの説明に従ってツールの設定をしてください。
3. ツールをビルドしたら、 `/wabt/out/clang/Debug` ディレクトリーをシステムの `PATH` に追加します。
4. 次に、wat2wasm プログラムを実行します。入力ファイルパス、続いて `-o` 引数と、その後に出力ファイルパスを指定します。

```bash
wat2wasm simple.wat -o simple.wasm
```


これで `simple.wasm` という名前のファイルに Wasm が出力されます。これには `.wasm` アセンブリーのコードが含まれます。

**メモ:** wasm2wat を使用して wasm から テキスト表現に戻すことができます。例: `wasm2wat simple.wasm -o text.wat`.

アセンブリーの出力を見る
------------

出力されたファイルはアセンブリーベースなので通常のテキストエディターで表示することができません。ただし、wat2wasm ツールの `-v` オプションを使用して見ることができます。以下を試してみてください。


```bash
wat2wasm simple.wat -v
```


ターミナルには次のように出力されるでしょう。

![複数のバイナリー文字列の横に文字列の説明を表示しています。例：0000008: 01 ; セクションコード ](/ja/docs/WebAssembly/Text_format_to_Wasm/assembly-output.png)

関連情報
----

* WebAssembly テキスト形式を理解する — テキスト形式のシンタックスの詳細説明。
* C/C++ から WebAssembly にコンパイルする — Binaryen/Emscripten のようなツールはソースコードを Wasm にコンパイルし、 JavaScript のコンテキストでモジュールを実行するために必要な API コードを作成します。それらの使用方法の詳細はこちらから探してください。
* WebAssembly JavaScript API の使用 — WebAssembly API コードがどのように機能するかについて詳しく知りたい場合はこちらをお読みください。
* Text format — WebAssembly GitHub リポジトリーのテキスト形式の詳細説明。
* wast-loader — これをすべて処理してくれる webpack のローダーです。
WebAssembly.Table
=================

**`WebAssembly.Table()`** オブジェクトは JavaScript のラッパーオブジェクトであり、関数の参照を格納する WebAssembly Table を表す配列風の構造を持っています。 JavaScript や WebAssembly のコードで作成されたテーブルは、 JavaScript と WebAssembly の両方からアクセスでき、変更もできます。

**メモ:** 現在、テーブルには関数の参照のみが格納できますが、将来的に拡張される予定です。

コンストラクター
--------

`WebAssembly.Table()`

新しい `Table` オブジェクトを生成します。

インスタンスプロパティ
-----------

`Table.prototype.length`

テーブルの長さを返します。すなわち、要素数です。

インスタンスメソッド
----------

`Table.prototype.get()`

アクセサー関数です。指定した位置に格納された要素を取得します。

`Table.prototype.grow()`

Table インスタンスを指定した要素数だけ拡張します。

`Table.prototype.set()`

指定した位置に要素を格納します。

例
-

### 新しい WebAssembly Table インスタンスの生成

次の例では (table2.html と動作例を確認してください)、新しい WebAssembly Table メソッドを初期サイズ 2 要素で生成します。それからそのテーブルの長さと 2 つの位置の内容を (`Table.prototype.get()` を使用して受け取って) 表示し、長さが 2 で両方の要素が `null` であることを示します。


```js
var tbl = new WebAssembly.Table({ initial: 2, element: "anyfunc" });
console.log(tbl.length); // "2"
console.log(tbl.get(0)); // "null"
console.log(tbl.get(1)); // "null"
```


次に、テーブルを含むインポートオブジェクトを生成します。


```js
var importObj = {
  js: {
    tbl: tbl,
  },
};
```


最後に `WebAssembly.instantiateStreaming()` を使用して wasm モジュール (table2.wasm) をロード し、インスタンス化します。table2.wasm モジュールは2の関数を持っていて (1つは42を、もう1つは83を返す) 、インポートされたテーブルの0、1番目に両方の要素が格納されます (text representationを参照) 。そして、インスタンス化された後、テーブルの長さは2のままです。しかし、今はJSから呼び出し可能な エクスポートされたWebAssembly関数 が含まれています。


```js
WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
.then(function(obj) {
  console.log(tbl.length);
  console.log(tbl.get(0)());
  console.log(tbl.get(1)());
});
```

内部の値を表示するためには、参照された関数のアクセサの呼び出しの後に、2つ目の関数呼び出しを含める必要があることに注意して下さい (`get(0)` ではなく `get(0)()`)。

この例では、JavaScript からテーブルを作成してアクセスしていますが、wasm インスタンス内で同じテーブルを参照して呼び出すこともできます。

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # tables |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.validate()
======================

**`WebAssembly.validate()`** 関数は WebAssembly バイナリーコードの型付き配列を検証し、そのバイト列が有効な wasm モジュールか (`true`)、そうでないか (`false`) を返します。

構文
--


```js
WebAssembly.validate(bufferSource);
```

### 引数

`bufferSource`

検証する WebAssembly バイナリーコードを含む型付き配列または `ArrayBuffer`。

### 返値

有効な wasm モジュールであるか (`true`)、そうでないか (`false`) を示す論理値です。

### 例外

`bufferSource` が型付き配列または `ArrayBuffer` でない場合、`TypeError` が発生します。

例
-

### validate の使用

以下の例 (`validate.html` のソースコードと動作例 をご確認ください) は .wasm モジュールを読み取って型付き配列に変換します。次に、 `validate()` メソッドを使用してモジュールが有効かどうかをチェックします。


```js
fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then(function (bytes) {
    var valid = WebAssembly.validate(bytes);
    console.log(
      "The given bytes are " + (valid ? "" : "not ") + "a valid wasm module",
    );
  });
```

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-webassembly-validate |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.compileStreaming()
==============================

**`WebAssembly.compileStreaming()`** 関数は `WebAssembly.Module` を直接、基礎的なソースのストリームからコンパイルします。この関数はモジュールをインスタンス化する前にコンパイルする必要がある場合に役立ちます（そうでない場合は、`WebAssembly.instantiateStreaming()` 関数を使用してください）。

**メモ:** 厳格なコンテンツセキュリティポリシー (CSP) のあるウェブページでは、 WebAssembly のコンパイルやモジュールの実行がブロックされることがあります。
 WebAssembly のコンパイルと実行を許可することについての詳しい情報は、 CSP の script-src を参照してください。


構文
--


```js
WebAssembly.compileStreaming(source)
```

### 引数

`source`

ストリーム、コンパイルする .wasm モジュールのソースコードを表す `Response` オブジェクト、またはそれで履行されるプロミスです。

### 返値

`Promise` で、コンパイルされたモジュールを表す `WebAssembly.Module` に解決します。

### 例外

* `source` が `Response` でも `Response` に解決する `Promise` でもなかった場合、プロミスは `TypeError` で拒否されます。
* コンパイルに失敗した場合、プロミスは `WebAssembly.CompileError` で拒否されます。
* `source` の `Promise` が拒否された場合、プロミスはエラーで拒否されます。
* `source` の `Result` にエラーがあった場合（MIME タイプが不正であるなど）、プロミスはエラーで拒否されます。
例
-

### ストリーミングのコンパイル

次の例 (Github上のデモ compile-streaming.html と、動作例を参照してください) では、ソースから直接 .wasm モジュールをストリームして、 `WebAssembly.Module` オブジェクトにコンパイルしています。`compileStreaming()` 関数は `Response` オブジェクトを渡すプロミスを受け取るので、直接 `fetch()` の呼び出し結果を渡すことができます。


```js
const importObject = { imports: { imported\_func: (arg) => console.log(arg) } };

WebAssembly.compileStreaming(fetch("simple.wasm"))
  .then((module) => WebAssembly.instantiate(module, importObject))
  .then((instance) => instance.exports.exported\_func());
```


結果として受け取ったモジュールインスタンスはその後 `WebAssembly.instantiate()` を使用してインスタンス化され、エクスポートされた関数が実行されます。

仕様書
---

| Specification |
| --- |
| WebAssembly Web API # dom-webassembly-compilestreaming |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.CompileError
========================

**`WebAssembly.CompileError`** オブジェクトは、 WebAssembly のデコードや検証の間のエラーを示します。

コンストラクター
--------

`WebAssembly.CompileError()`

新しい `WebAssembly.CompileError` オブジェクトを生成します。

インスタンスプロパティ
-----------

`WebAssembly.CompileError.prototype.message`

エラーメッセージ。 `Error` から継承しています。

`WebAssembly.CompileError.prototype.name`

エラー名。 `Error` から継承しています。

`WebAssembly.CompileError.prototype.fileName`

このエラーを発生させたファイルのパス。 `Error` から継承しています。

`WebAssembly.CompileError.prototype.lineNumber`

このエラーを発生させたファイルの行番号。 `Error` から継承しています。

`WebAssembly.CompileError.prototype.columnNumber`

このエラーが発生した行の列番号。 `Error` から継承しています。

`WebAssembly.CompileError.prototype.stack`

スタックトレース。 `Error` から継承しています。

インスタンスメソッド
----------

`WebAssembly.CompileError.prototype.toSource()`

同じエラーを評価できるコードを返します。 `Error` から継承しています。

`WebAssembly.CompileError.prototype.toString()`

指定された `Error` オブジェクトを表す文字列を返します。`Error` から継承しています。

例
-

### 新しい CompileError のインスタンスの作成

以下のスニペットでは、新しい `CompileError` インスタンスを生成して、詳細をコンソールに記録します。


```js
try {
  throw new WebAssembly.CompileError("Hello", "someFile", 10);
} catch (e) {
  console.log(e instanceof CompileError); // true
  console.log(e.message); // "Hello"
  console.log(e.name); // "CompileError"
  console.log(e.fileName); // "someFile"
  console.log(e.lineNumber); // 10
  console.log(e.columnNumber); // 0
  console.log(e.stack); // コードが実行されていた位置を返す
}
```

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # exceptiondef-compileerror |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用