recursal/MDN huggingface dataset:
WebAssembly.Module.imports()
============================

**`WebAssembly.imports()`** 関数は、指定された `Module` の全てのインポート宣言の定義を配列として返します。

構文
--


```js
WebAssembly.Module.imports(module);
```

### 引数

*module*

`WebAssembly.Module` オブジェクトです。

### 返値

指定されたモジュールのインポートされた関数を表現するオブジェクトの配列。

### 例外

module が `WebAssembly.Module` オブジェクトインスタンスでなかった場合は、 `TypeError` が発生します。

例
-

### imports の使用

次の例では (imports.html と動作例も参照)、読み込んだ simple.wasm モジュールをコンパイルします。このモジュールは imports から問い合わせされます。


```js
WebAssembly.compileStreaming(fetch("simple.wasm")).then(function (mod) {
  var imports = WebAssembly.Module.imports(mod);
  console.log(imports[0]);
});
```


出力はこのようになります。


```js
{ module: "imports", name: "imported\_func", kind: "function" }
```

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-module-imports |

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

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

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.Global() コンストラクター
=============================

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

構文
--


```js
new WebAssembly.Global(descriptor, value)
```

### 引数

`descriptor`

オブジェクトで、 2 つのプロパティを持ちます。

* `value`: 文字列で、そのグローバル変数のデータ型を表します。
 これは以下のいずれかです。
    + `i32`: 32 ビット整数。
    + `i64`: 64 ビット整数。（JavaScript では、これは `BigInt` として表される）
    + `f32`: 32 ビット浮動小数点数。
    + `f64`: 64 ビット浮動小数点数。
    + `v128`: 128 ビットベクトル。
    + `externref`: ホスト参照。
    + `anyfunc`: 関数参照。
* `mutable`: 論理値で、そのグローバル変数が変更可能であるかどうかを表します。既定では `false` です。

`value`

 変数が保持する値です。変数のデータ型に合う限り、どんな値でも取れます。
 もしも何の値も渡されないと、`descriptor.value` の値が `i32`、`i64`、`f32`、`f64` のいずれかである場合は型付きの 0 が使用され、`descriptor.value` が `externref` または `anyfunc` であれば、`null` が使用されます（`DefaultValue` アルゴリズムで定義されているとおりです）。


例
-

### 新しい Global インスタンスの生成

 以下の例は、`WebAssembly.Global()` コンストラクターを用いて生成された新しいグローバルインスタンスです。
 これは変更可能 (mutable) な `i32` 型で、値は 0 です。

その後、グローバルの値は、まず `Global.value` プロパティを使用して `42` に変更され、次に `global.wasm` モジュールからエクスポートされた `incGlobal()` 関数を使用して 43 に変更されます（これは、与えられた値に 1 を追加してから新しい値を返します）。


```js
const output = document.getElementById("output");

function assertEq(msg, got, expected) {
  const result =
    got === expected
      ? `SUCCESS! Got: ${got}<br>`
      : `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`;
  output.innerHTML += `Testing ${msg}: ${result}`;
}

assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");

const global = new WebAssembly.Global({ value: "i32", mutable: true }, 0);

WebAssembly.instantiateStreaming(fetch("global.wasm"), { js: { global } }).then(
  ({ instance }) => {
    assertEq(
      "getting initial value from wasm",
      instance.exports.getGlobal(),
      0,
    );
    global.value = 42;
    assertEq(
      "getting JS-updated value from wasm",
      instance.exports.getGlobal(),
      42,
    );
    instance.exports.incGlobal();
    assertEq("getting wasm-updated value from JS", global.value, 43);
  },
);
```


**メモ:** この例は GitHub 上の実行例で確認できます。また、ソースコードも参照してください。

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-global-global |

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

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

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概要
* WebAssembly JavaScript API の使用
* Import/Export mutable globals proposal
WebAssembly.Memory.prototype.grow()
===================================

**`grow()`** は `Memory` オブジェクトのプロトタイプメソッドで、指定した WebAssembly ページの数だけメモリーインスタンスの大きさを拡張します。

構文
--


```js
grow(number);
```

引数
--

*number*

メモリーを拡大する WebAssembly ページ数 (それぞれは 64KiB の大きさ)。

### 返値

以前のメモリーの大きさを、 WebAssembly ページ単位で返します。

例
-

### grow の使用

以下の例では、新しい WebAssembly メモリーインスタンスを初期サイズ 1 ページ (64KiB)、最大サイズ 10 ページ (640KiB) で作成します。


```js
var memory = new WebAssembly.Memory({ initial: 1, maximum: 10 });
```


それから、インスタンスを 1 ページ分拡張することができます。


```js
const bytesPerPage = 64 \* 1024;
console.log(memory.buffer.byteLength / bytesPerPage); // "1"
console.log(memory.grow(1)); // "1"
console.log(memory.buffer.byteLength / bytesPerPage); // "2"
```


なお、ここでの `grow()` の返値は直前の WebAssembly ページ数です。

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-memory-grow |

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

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

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.Memory() コンストラクター
=============================

**`WebAssembly.Memory()`** コンストラクターは新しい `Memory` オブジェクトを生成します。これは `buffer` プロパティがサイズ変更可能な `ArrayBuffer` または `SharedArrayBuffer` であり、 WebAssembly の `Instance` からアクセスする生のバイト列のメモリーであるものです。

JavaScript または WebAssembly コードから生成されたメモリーは JavaScript と WebAssembly のどちらからもアクセス、変更が可能になります。

構文
--


```js
new WebAssembly.Memory(memoryDescriptor);
```

### 引数

*memoryDescriptor*

以下のメンバーを含むことができるオブジェクトです。

*initial*

WebAssembly メモリーの初期サイズで、単位は WebAssembly ページ数です。

*maximum 省略可*

WebAssembly メモリーを拡張できる最大サイズで、単位は WebAssembly ページ数です。存在する場合、 `maximum` 引数はエンジンがメモリーを予約するヒントとして使用されます。ただし、エンジンはこの予約リクエストを無視したり固定したりすることがあります。一般的に、ほとんどの WebAssembly モジュールでは `maximum` を設定する必要はありません。

shared *省略可*

論理値で、このメモリーを共有メモリーにするかどうかを定義します。 `true` に設定すると、共有メモリーになります。既定値は `false` です。


**メモ:** WebAssembly ページは 65,536 バイト、すなわち 64KiB の固定長です。

### 例外

* `memoryDescriptor` がオブジェクトでない場合は、 `TypeError` が発生します。
* `maximum` が設定されており、かつ `initial` よりも小さい場合は、 `RangeError` が発生します。
例
-

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

`WebAssembly.Memory` オブジェクトを取得する方法は 2 つあります。 1 つ目は JavaScript から構築する方法です。次の例では、新しい WebAssembly Memory インスタンスを初期サイズが 10 ページ (640KiB) 、最大サイズが 100 ページ (6.4MiB) で生成しています。この `buffer` プロパティは `ArrayBuffer` を返します。


```js
var memory = new WebAssembly.Memory({ initial: 10, maximum: 100 });
```


2 つ目は WebAssembly モジュールからエクスポートされた `WebAssembly.Memory` オブジェクトを使用する方法です。次の例では (GitHub 上の memory.html および動作例も参照)、 memory.wasm バイトコードを `WebAssembly.instantiateStreaming()` メソッドで読み込みんでインスタンス化し、その上の行で生成されたメモリーにインポートします。それから、メモリーにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。


```js
WebAssembly.instantiateStreaming(fetch("memory.wasm"), {
  js: { mem: memory },
}).then((obj) => {
  var i32 = new Uint32Array(memory.buffer);
  for (var i = 0; i < 10; i++) {
    i32[i] = i;
  }
  var sum = obj.instance.exports.accumulate(0, 10);
  console.log(sum);
});
```

### 共有メモリーの作成

 既定では、 WebAssembly のメモリーは共有されていません。共有メモリーを作成するには、コンストラクター
 の初期化オブジェクトに `shared: true` を渡してください。


```js
let memory = new WebAssembly.Memory({
  initial: 10,
  maximum: 100,
  shared: true,
});
```


このメモリーの `buffer` プロパティは `SharedArrayBuffer` を返します。

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-memory-memory |

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

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

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.Memory.prototype.buffer
===================================

**`buffer`** は `WebAssembly.Memory` オブジェクトのプロトタイププロパティで、メモリーに含まれるバッファーを返します。

例
-

### buffer の使用

次の例 (GitHub 上の memory.html および動作例も参照) では、 memory.wasm バイトコードを `WebAssembly.instantiateStreaming()` メソッドを使用して読み込みんでインスタンス化し、その上の行で生成されたメモリーにインポートします。それから、メモリーにいくつかの値を格納し、関数をエクスポートして使用し、いくつかの値を合計します。


```js
WebAssembly.instantiateStreaming(fetch("memory.wasm"), {
  js: { mem: memory },
}).then((obj) => {
  var i32 = new Uint32Array(memory.buffer);
  for (var i = 0; i < 10; i++) {
    i32[i] = i;
  }
  var sum = obj.instance.exports.accumulate(0, 10);
  console.log(sum);
});
```

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-memory-buffer |

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

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

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.Instance.prototype.exports
======================================

**`exports`** は `WebAssembly.Instance` オブジェクトプロトタイプの読み取り専用プロパティで、 WebAssembly モジュールインスタンスからエクスポートされたすべての関数をメンバ－として持つオブジェクトを返します。これらは、 JavaScript からアクセスして使用することができます。


```js
instance.exports;
```

例
-

### exports の使用

fetch を使用して WebAssembly バイトコードを読み取った後、 `WebAssembly.instantiateStreaming()` 関数を使用してモジュールをコンパイルし、インスタンス化し、 JavaScript 関数をそのプロセスの WebAssembly モジュールにインポートします。その後、 `Instance` からエクスポートされたエクスポート済み WebAssembly 関数を呼び出します。


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

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


**メモ:** この例は GitHub 上の instantiate-streaming.html (実行例) で見ることができます。

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-instance-exports |

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

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

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.Instance() コンストラクター
===============================

**`WebAssembly.Instance()`** コンストラクターは、新しい `Instance` オブジェクトを生成します。これはステートフルで実行可能な `WebAssembly.Module` のインスタンスです。

構文
--

**警告:** 巨大なモジュールのインスタンス化は高コストになる可能性があるので、開発者が同期的な `Instance()` コンストラクターを使用するのは、絶対に必要な場合のみにするべきです。それ以外の場合はすべて、`WebAssembly.instantiateStreaming()` メソッドを使用してください。


```js
new WebAssembly.Instance(module, importObject);
```

### 引数

*module*

インスタンス化する `WebAssembly.Module` オブジェクト。

*importObject* 省略可

新しく生成される `Instance` にインポートされる値を持つオブジェクトで、例えば関数や `WebAssembly.Memory` オブジェクトなどです。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、 `WebAssembly.LinkError` が発生します。

例
-

### WebAssembly モジュールの同期的なインスタンス化

次のように `WebAssembly.Instance()` コンストラクター関数を呼び出して、渡した `WebAssembly.Module` オブジェクトを同期的にインスタンス化することができます。


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

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => {
    let mod = new WebAssembly.Module(bytes);
    let instance = new WebAssembly.Instance(mod, importObject);
    instance.exports.exported\_func();
  });
```


ただし、`Instance` を取得する方法としては、次のように、非同期の `WebAssembly.instantiateStreaming()` 関数を使用することをお勧めします。


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

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

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-instance-instance |

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

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

関連情報
----

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

**`grow()`** は `WebAssembly.Table` オブジェクトのプロトタイプメソッドで、 Table インスタンスの大きさを指定された要素数だけ拡張します。

構文
--


```js
grow(number);
```

### 引数

*number*

テーブルを拡張する要素数です。

### 返値

直前のテーブルの長さです。

### 例外

`grow()` の操作が何らかの理由で失敗した場合、 `RangeError` が発生します。

例
-

### grow の使用

以下の例では、新しい WebAssembly Table のインスタンスを初期サイズ 2、最大サイズ 10 で生成しています。


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


以下のようにして、テーブルを 1 だけ拡張することができます。


```js
console.log(table.length); // "2"
console.log(table.grow(1)); // "2"
console.log(table.length); // "3"
```

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-table-grow |

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

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

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.Table() コンストラクター
============================

**`WebAssembly.Table()`** コンストラクターは、大きさと要素の型を指定して新しい `Table` オブジェクトを生成します。

構文
--


```js
new WebAssembly.Table(tableDescriptor);
```

### 引数

*tableDescriptor*

以下のメンバーを含むことができるオブジェクトです。

*element*

文字列で、テーブルに格納される値の型を表します。現時点では、 `"anyfunc"` (関数) の値のみを取ることができます。

*initial*

WebAssembly テーブルの初期の要素数です。

*maximum 省略可*

WebAssembly テーブルが拡張することができる最大の要素数です。


### 例外

* `tableDescriptor` がオブジェクトでない場合は、 `TypeError` が発生します。
* `maximum` が設定されており、かつ `initial` よりも小さい場合は、 `RangeError` が発生します。
例
-

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

次の例では (table2.html のソースコードと実行例はこちら) 新しく WebAssembly テーブルのインスタンスを、初期の大きさを 2 要素して生成します。それからテーブルの長さと 2 つの要素の中身を (`Table.prototype.get()` で取得して) 表示し、長さは 2 で 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,
  },
};
```


最終的に、 wasm モジュール (table2.wasm) を `WebAssembly.instantiateStreaming()` メソッドを使用して読み込みインスタンス化します。 table2.wasm モジュールには 2 つの関数 (1 つは 42 を返し、もう 1 つは 83 を返す) が入っており、それぞれをインポートされたテーブルの要素 0 と 1 に格納します。 (テキスト表現をご覧ください)。インスタンス化した後で、テーブルは長さは 2 のままですが、要素には呼び出し可能なエクスポートされた WebAssembly 関数が入り、 JS から呼び出せるようになりました。


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


なお、関数呼び出し演算子がアクセサーの後に二重についており (例えば `get(0)()` を `get(0)` の代わりに使用)、実際に参照している関数を呼び出して、その中に格納された値をログ出力しています。

この例は JavaScript からテーブルを生成してアクセスする方法を示していますが、同じテーブルを wasm インスタンスの中から見ることができ、呼び出すこともできます。

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-table-table |

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

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

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
WebAssembly.Table.prototype.length
==================================

**`length`** は `WebAssembly.Table` オブジェクトのプロトタイププロパティで、このテーブルの長さ、すなわち、テーブルの要素の数を返します。

例
-

### length の使用

次の例では、新しい WebAssembly Table インスタンスを初期サイズ 2、最大サイズ 10 で作成します。


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


次のようにして、テーブルを 1 ずつ拡大することができます。


```js
console.log(table.length); // "2"
console.log(table.grow(1)); // "2"
console.log(table.length); // "3"
```

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-table-length |

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

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

関連情報
----

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

**`set()`** は `WebAssembly.Table` オブジェクトのプロトタイプメソッドで、指定された位置に格納されている参照を別な値に変更します。

構文
--


```js
set(index, value);
```

### 引数

*index*

変更する関数参照の位置。

*value*

変更する参照。これはエクスポートされた WebAssembly 関数、 wasm 関数を内在する JavaScript ラッパーである必要があります。

### 返値

なし。

### 例外

* *index* が `Table.prototype.length` 以上の場合、 `RangeError` が発生します。
* *value* がエクスポートされた WebAssembly 関数でも `null` でもない場合、`TypeError` が発生します。
例
-

### Table.set の使用

次の例 (table2.html のソースコードと動作例を確認してください) では、初期サイズが参照 2 つである WebAssembly Table インスタンスを生成しています。そして、テーブルの長さと 2 つの位置の内容 (`Table.prototype.get()` で取得) を出力して、長さが 2 であること、それぞれの位置には現在、関数の参照が含まれていないこと (現在は `null` を返すこと) を示しています。


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


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


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


最後に、 wasm モジュール (table2.wasm) を `WebAssembly.instantiateStreaming()` を使用して読み込みインスタンス化します。テーブルの長さを記録し、テーブルに格納された 2 つの関数参照を呼び出します (table2.wasm モジュール (テキスト表現) がテーブルに 2 つの関数の参照を追加し、どちらも単純な表示を表示します)。


```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 # dom-table-set |

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

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

関連情報
----

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

**`get()`** は `WebAssembly.Table` オブジェクトのプロトタイプメソッドで、指定された位置に格納されている関数参照を取得します。

構文
--


```js
get(index);
```

### 引数

*index*

取得する関数参照の位置です。

### 返値

関数参照を返します。これはエクスポートされた WebAssembly 関数、wasm 関数を内在する JavaScript ラッパーです。

### 例外

*index* が `Table.prototype.length` 以上であった場合、`RangeError` が発生します。

例
-

### get の使用

 次の例では (Github の table.html と動作例も確認してください)、 table.wasm バイトコードを
 `WebAssembly.instantiateStreaming()` メソッドを使用して読み取り、コンパイルしてインスタンス化しています。その後、エクスポートされたテーブルに格納された参照を取得します。


```js
WebAssembly.instantiateStreaming(fetch("table.wasm")).then(function (obj) {
  var tbl = obj.instance.exports.tbl;
  console.log(tbl.get(0)()); // 13
  console.log(tbl.get(1)()); // 42
});
```


参照に格納されている値を実際に取得するためには、アクセサーの最後に 2 つ目の関数呼び出し演算子を含める必要があります (`get(0)` ではなく `get(0)()`)。これは単純な値ではなく、関数です。

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-table-get |

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

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

関連情報
----

* WebAssembly 概要ページ
* WebAssembly の概念
* WebAssembly JavaScript API の使用
よくある質問
======

学習領域のこの章では、構造化された中心的な学習経路（例えば、HTML や CSS 学習記事）には必ずしも含まれない、よく出る質問に対する回答を提供するように設計されています。この記事は単独でこれだけを読んでも理解できるものになっています。

ウェブの仕組み
-------

このセクションでは、ウェブのメカニズムについてのウェブのエコシステムや動作に関係する質問に答えます。

インターネットはどのように動くのか？

**インターネット**は、ウェブの骨組みで、ウェブを可能としている技術的なインフラです。
 ごく簡単に言うと、インターネットとは、おたがいに通信しあうたくさんのコンピューターが繋がってできた巨大なネットワークです。この記事では、おおまなにインターネットがどのように動いているのかを説明します。


ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いは？

この記事では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなどの、ウェブに関係するいろいろな考えについて話します。これらの用語は、ウェブに馴染みのない人にとって、よく混同されたり間違って使われる元になっています。それぞれの意味を発見していきましょう！

ハイパーリンクとは？

この記事では、ハイパーリンクがどのようなもので、なぜ大切なのかを説明しています。

URL とは？

ハイパーテキストと HTTP と共に、URL とはインターネットの中心となる概念です。URL はブラウザーが利用する仕組みで、ウェブ上にあるあらゆるリソースを手に入れるために使われます。

ドメイン名とは？

ドメイン名は、インターネットのインフラにとって大切なパーツの一つです。インターネット上のウェブサーバーのために、人が読みやすいアドレスを使えるようにしてくれます。

ウェブサーバーとは？

「ウェブサーバー」という言葉は、ウェブ上でクライアントにウェブサイトを送信するハードウェアまたはソフトウェアを指します。ときにはその両方を指します。この記事では、ウェブサーバーがどのように動いていて、どうして大切なのかを説明しています。

ツールとセットアップ
----------

ウェブサイトを作るためのツールやソフトウェアに関係する質問です。

ウェブサイトを作るにはどんなソフトウェアが必要？

この記事では、ウェブサイトの編集、アップロード、閲覧に、それぞれどのようなソフトウェアコンポーネントが必要になるか説明します。

ウェブ上で何かをするためにどれくらいコストがかかる？

ウェブサイトを立ち上げる場合、いっさいお金をかけずにすむこともあれば、高額な費用がかかることもあります。この記事では、ウェブ開発で使用するツールやサービスにどれくらい費用がかかるか、お金をかけた場合、かけなかった場合に、それぞれどのようなことができるか、を説明します。

どんなテキストエディターが利用可能？

この記事では、ウェブ開発で使用するテキストエディターを選択、インストールするときに、考慮すべき点について取り上げます。

ブラウザーの開発者ツールとは何？

すべてのブラウザーには、HTML、CSS、その他のウェブ用コードをデバッグするための開発者ツールが用意されています。この記事では、お使いのブラウザーの開発者ツールの基本機能の使い方について説明します。

ウェブサイトが正しく動作することをどうやって確認する？

あなたが開発してオンラインに公開したウェブサイト、本当に意図したとおりに動作していますか？ この記事では、基本的なトラブルシューティングの手順について説明します。

ローカルにテスト用サーバーを用意するには？

この記事では、使用中のマシンにローカルテスト用のサーバーを準備し、使用する方法について説明します。

ウェブサーバーにファイルをアップロードするには？

ウェブサイトをオンラインで公開して、別のコンピューターからアクセスできるようにするには、FTP ツールがよく使用されます。この記事では、FTP ツールを使ってウェブサイトを公開する方法を説明します。

GitHub ページを使うには？

この記事では、GitHub の GitHub ページ (gh-pages) 機能を使ってコンテンツを公開する方法を説明します。

Google App Engine を使ってウェブサイトを公開するには？

作成したウェブサイトを配置する場所をお探しですか？ この記事では、Google App Engine を使ってウェブサイトを公開する (ホスティングする) 手順を説明します。

ウェブサイトのデバッグ／パフォーマンス向上に役立つツールにはどのようなものがある？（英語）

リンク先では、FireFox の開発者ツールを使って、ウェブサイトのデバッグ、パフォーマンス向上を行うための記事が一覧にまとめられています。これらの記事では、メモリーの使用状況、JavaScript の呼び出しツリー、レンダリングされた DOM ノードの数、その他について確認する方法などが紹介されています。

デザインとアクセシビリティ
-------------

このセクションでは、ページのデザイン、ページ構成、アクセシビリティについての質問などを取り上げています。

ウェブサイトのデザインは何から始めればよい？

この記事では、すべてのプロジェクトにおいてきわめて重要な第一歩、「そのプロジェクトで何を実現したいのか」を定義する方法を説明します。

一般的なウェブレイアウトには何が含まれているのか？

ウェブサイトを設計するとき、まずは一般的なレイアウトについて知っておくとよいでしょう。この記事では、よくあるウェブレイアウトについていくつか取り上げ、どのような要素で構成されているかを見ていきます。

アクセシビリティとは？

この記事では、ウェブアクセシビリティの基本的な概念について紹介します。

あらゆる種類のユーザーに対応できるデザインとは？

この記事では、どのようなユーザーでも利用できるウェブサイトを作成するための基本的なテクニックを説明します。これには、手軽にアクセシビリティを実現する方法や、その他の情報などが含まれます。

アクセシビリティを推進する HTML の機能とは？

この記事では、さまざまな障碍をもつユーザーがよりウェブサイトを利用しやすいよう使用される、各種の HTML の機能について説明します。

HTML、CSS、JavaScript の質問
-----------------------

HTML/CSS のよくある問題の解決方法については、次の記事を読んでみてください。

* HTML を使ってよくある問題を解決する
* CSS を使ってよくある問題を解決する
* JavaScript を使ってよくある問題を解決する
HTML の学習: ガイドとチュートリアル
=====================

ウェブサイトを構築するためには、ウェブページの構造を定義するための基本的な技術である HTML 言語を知っておくべきでしょう。 HTML はウェブコンテンツをどのよう解釈するべきかを特定するために使用します。段落、リスト、見出し、リンク、画像、マルチメディアプレーヤー、フォーム、又は他の数多くの要素の一つ、又はユーザーが定義した新しい要素などです。

学習経路
----

HTML 学習を学びの旅の起点にすることが理想的です。HTML 概論を読んでみましょう。さらに学びたいと思ったなら、次は以下のような内容に移ることになるでしょう。

* CSS、またそれを用いて、どうやって HTML の様式を整えるか。(例えば、文字の様式やサイズを適用したり、線で囲んだり、影をつけたり、ページをカラムでレイアウトしたり、アニメをつけたりすることができます。）
* JavaScript、またそれを用いて、ウェブページをいかにして動的な機能を付け加えるか。(例えば、地図上にあなたの位置をプロットしたり、UI エレメントをボタン操作で、現れるようにしたり、隠すようにしたり、コンピュータ上にユーザーのデータを保存したり、その他いろいろなことができます。）

このトピックを開始する前に、最低限コンピュータを利用することに慣れておくべきでしょう。また、ウェブを受け手の側から、利用すること（つまり、ただ見たり、コンテンツを消費したりすること）にも慣れておくべきでしょう。また基本的な作業環境のセットアップもしておくべきでしょう。細かい話は、 基本的なソフトウェアをインストールするや、 ファイルを扱うに書かれています。今あげた二つの内容は、Web 入門という初心者向けの章に含まれています。

今回のトピックに入る前に、 ウェブ入門を一読しておくことをお薦めします。けれども、絶対にそうしておく必要があるというわけではありません。 HTML の基礎の記事でカバーされている大体の内容は、 HTML 概論の記事でもカバーされています。ただこちらのほうが、より詳細な記事になっています。

モジュール
-----

このトピックは、以下の内容を含んでいます。そして、それらは、学んでいくのに好ましい順番で並んでいます。上から順番に学んでいくのが望ましいでしょう。

HTML 概論

この章では、土台作りをします。ここで、あなたは HTML の重要な概念や構文に慣れたり、HTML を文章に適用していくのを見たり、どうやってハイパーリンクができるのか、HTML がウェブページを作るためにどのように利用されるのかを学ぶことになります。

マルチメディアと埋め込み

この章では、 HTML を使ってどうやったら、あなたのウェブページにマルチメディアを導入できるかを学びます。画像を取り込むためのいくつかのやり方、ビデオや音声、さらに、ウェブページそのものを埋め込む方法もここで学びます。

HTML 表

ウェブページ上の表形式のデータを理解しやすくアクセスしやすい方法で表現することは難しいことです。このモジュールでは、基本的な表のマークアップと、キャプションやサマリーの実装などのより複雑な機能をカバーしています。

HTML フォーム

フォームはウェブのとても重要な部分です。これらはウェブサイトとのやりとりに必要な多くの機能を提供します。登録とログイン、フィードバックの送信、商品の購入などが含まれます。このモジュールでは、フォームのクライアント側部分の作成を始めます。

よくある HTML の問題の解決
----------------

共通の問題解決に HTML を使う 「基本的な問題を解決するために HTML を使う」では、ウェブページを作った時に出てくる一般的な問題をどうやって解決するかを説明するためのコンテンツのセクションへのリンクを提示します。タイトルの扱い方や、画像やビデオを加えたり、コンテンツを強調したり、基本的なフォームを作ったりします。

関連情報
----

MDN 上の HTML (HyperText Markup Language) .

MDN における HTML に関する文書の入口で、詳細な要素と属性のリファレンスがあります。例えば、要素が持っている属性は何か、属性の持つ値は何かなどを知りたかったら、これは最適な場所です。
ツールとテスト
=======

ウェブ技術のコア (HTML, CSS, JavaScript のような) での快適なプログラミングを開始して、経験を積んで、色んなリソースを読み、色んなコツや技を学習すると、JavaScript フレームワークからテスト自動化ツールやそれ以外まで、すべてのツールに出くわします。ウェブプロジェクトが大きく複雑になっていくと、こうしたツールを活用したり、コードの信頼できるテスト計画を考案したくなるでしょう。

さらに、クロスブラウザーのサポートを引き続き維持することを念頭に置き、ユーザーのウェブブラウジングに使用されているさまざまなブラウザーやデバイス間でプロジェクトを動作させるベストプラクティスに従う必要があります。そして障害を持つ人々が利用できるようにすることです。

あなたが使用すべきツールを考え出すことは難しい処理でありえるため、私たちは一連の記事を書いて、利用可能なツールの種類、あなたのためにできること、現在の業界のお気に入りを利用する方法をお伝えします。

**メモ:** このトピックでは多数のツールを参照していますが、必ずしもこれらのツールを最良または唯一の方法として推奨しているわけではなく、動作していてサポートしているためです。ほとんどの場合、他にも方法がありますが、古いものは時代遅れで、間違いなく新しいものが出てきます。

#### フロントエンドのウェブ開発者を目指している方へ

 ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。
 **始めましょう**

前提条件
----

ここで説明したツールを使用する前にまずベースとなる HTML、CSS、および JavaScript 言語の基本を最初に理解しておく必要があります。たとえば、複雑なウェブコードで問題をデバッグしたり、JavaScript フレームワークを効果的に使用したり、テストランナーなどを使用してコードをテストして実行したりする前に、これらの言語の基礎を知る必要があります。

それに加えて、このトピックの最初のモジュールから始めて、そこでエリア全体の便利な概観を得るべきでしょう。

モジュール
-----

クライアントサイドウェブ開発ツールの理解

クライアントサイドのツールには脅威を感じますが、この記事シリーズではいくつかの普遍的なクライアントサイドのツール種類ごとに目的を例示して、一緒に連携させるツールや、パッケージマネージャーを使ったインストール方法、コマンドラインでの制御を説明します。最後にツールチェーンの例と、どのように生産的になるのかを示します。

クライアント側 JavaScript フレームワークを理解する

JavaScript フレームワークは、現代のフロントエンドウェブ開発に欠かせないもので、スケーラブルでインタラクティブなウェブアプリケーションを構築するための試験済みのツールを開発者に提供しています。多くの企業がフレームワークをツールの標準的な部分として使用しているため、フロントエンド開発の仕事の多くはフレームワークの経験を必要としています。このモジュールでは、クライアント側のフレームワークがどのように機能し、ツールセットにどのように適合するかについての基本的な背景知識を学び、その後、現在最も人気のあるフレームワークのいくつかをカバーするチュートリアルシリーズに進みます。

Git と GitHub

開発者はいくつかの **バージョン管理システム** (**VCS**)を使い、このツールにてプロジェクトの他の開発者と、お互いの成果を上書きする危険なく、後に問題が見つかった場合前バージョンのコードベースにロールバックできます。最も人気のある VCS (少なくともウェブ開発では) は **Git** と、それで動作するリポジトリとツールをホストするサイトの **GitHub** です。このモジュールではその両方について知っておくべきことを教えます。

クロスブラウザーのテスト

このモジュールではさまざまなブラウザー間でウェブプロジェクトをテストする領域を具体的に示しています。ここでは、ターゲットとするユーザー層 (たとえばユーザー、ブラウザー、端末の中で最も心配する必要があるもの)、テストの方法、さまざまな種類のコードで直面する主な問題、問題をテストして解決するのに最も有用なツールと、テストをスピードアップするために自動化する方法について説明します。