WebAssembly.compileStreaming() - WebAssembly

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

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 の使用


WebAssembly.compile() - WebAssembly

WebAssembly.compile()
=====================

**`WebAssembly.compile()`** 関数は WebAssembly バイナリーコードを `WebAssembly.Module` の形にコンパイルします。この関数は、モジュールをインスタンス化する前にコンパイルする必要がある場合に便利です (それ以外の場合は、 `WebAssembly.instantiate()` 関数を使用してください)。

構文
--

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

### 引数

*bufferSource*

コンパイルする .wasm モジュールのバイナリーコードを含む型付き配列または `ArrayBuffer` です。

### 返値

コンパイルされたモジュールを表す `WebAssembly.Module` オブジェクトに解決する `Promise` です。

### 例外

* `bufferSource` が型付き配列ではなかった場合、 `TypeError` が発生します。
* コンパイルに失敗した場合、プロミスは `WebAssembly.CompileError` で拒否されます。
例
-

### compile の使用

次の例では、読み込まれた simple.wasm バイトコードを、 `compile()` 関数を使用してコンパイルし、ワーカーに postMessage() を用いて送信します。

```js
var worker = new Worker("wasm\_worker.js");

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.compile(bytes))
  .then((mod) => worker.postMessage(mod));
```

**メモ:** おそらく多くの場合は `WebAssembly.compileStreaming()` を使用したほうが `compile()` よりも効率的なのでそちらの方がいいでしょう。

仕様書
---

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

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

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

関連情報
----

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


WebAssembly.instantiateStreaming() - WebAssembly

WebAssembly.instantiateStreaming()
==================================

**`WebAssembly.instantiateStreaming()`** 関数は、ソースのストリームから直接 WebAssembly モジュールをコンパイルしてインスタンス化します。これは、 wasm コードをロードするための最も効率的で最適な方法です。

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

構文
--

```js
WebAssembly.instantiateStreaming(source, importObject)
```

### 引数

`source`

`Response` オブジェクト、またはそれで解決するプロミスで、コンパイルしてインスタンス化する .wasm モジュールのソースを表します。

`importObject` 省略可

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

### 返値

`Promise` で、次の 2 つのフィールドを持つ `ResultObject` で解決します。

* `module`: コンパイルされた `WebAssembly.Module` オブジェクト。この `Module` は再度インスタンス化することや、postMessage() 経由で共有することができます。
* `instance`: `WebAssembly.Instance` オブジェクトで、すべてのエクスポートされた WebAssembly 関数を含みます。
### 例外

* いずれかの引数が正しい型または構造でない場合、`TypeError` が発生します。
* 失敗した場合、プロミスは失敗の原因に応じて `WebAssembly.CompileError`、`WebAssembly.LinkError`、`WebAssembly.RuntimeError` をもって拒否されます。
例
-

### ストリーミングのインスタンス化

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

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

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

最後に `ResultObject` が持つ instance メンバーにアクセスして、エクスポートされた関数を実行しています。

**メモ:** これを動作するようにするには、サーバが `.wasm` ファイルを `application/wasm` の MIME タイプで返す必要があります。

仕様書
---

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

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

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

関連情報
----

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


WebAssembly.instantiate() - WebAssembly

WebAssembly.instantiate()
=========================

**`WebAssembly.instantiate()`** 関数は WebAssembly コードをコンパイルおよびインスタンス化することができます。この関数は 2 つのオーバーロードを持ちます。

* 第一のオーバーロードは、 型付き配列 または `ArrayBuffer` で表現された WebAssembly バイナリコードを受け取り、そして、コンパイルとインスタンス化の両方を 1 ステップで行います。返された `Promise` は解決時にコンパイルされた `WebAssembly.Module` と最初の `WebAssembly.Instance` を渡します。
* 第二のオーバーロードは、すでにコンパイルされた `WebAssembly.Module` を受け取り、解決時にその `Module` の `Instance` を渡す `Promise` を返します。このオーバーロードは、すでに `Module` がコンパイル済みの場合に有用です。

**警告:** このメソッドは wasm モジュールの読み込みとインスタンス化に最も効率的な方法ではありません。可能であれば、代わりにもっと新しい `WebAssembly.instantiateStreaming()` メソッドを使用すれば、生のバイトコードから直接モジュールの読み込み、コンパイル、インスタンス化を 1 ステップで行うことができ、 `ArrayBuffer` へ変換する必要がありません。

構文
--

### 第一のオーバーロード — wasm バイナリコード
```

Promise<ResultObject> WebAssembly.instantiate(bufferSource, importObject);
```

#### 引数

*bufferSource*

コンパイルする .wasm モジュールを含む 型付き配列 または `ArrayBuffer`。

*importObject* 省略可

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

#### 返値

解決時に次の 2 つのフィールドを持つ `ResultObject` を渡す `Promise`。

* `module`: コンパイルされた `WebAssembly.Module` オブジェクト。この `Module` は再度インスタンス化することや、 `postMessage()` 経由で共有したり、 IndexedDB にキャッシュすることができます。
* `instance`: `WebAssembly.Instance` オブジェクトで、すべての エクスポートされた WebAssembly 関数 を含む。

#### 例外

* いずれかの引数が正しい型、または構造でない場合、 `TypeError` がスローされます。
* 失敗した場合、プロミスは失敗の原因に応じて `WebAssembly.CompileError`, `WebAssembly.LinkError`, `WebAssembly.RuntimeError` をもって棄却されます。
### 第二のオーバーロード — モジュールオブジェクトのインスタンスを取る
```

Promise<WebAssembly.Instance> WebAssembly.instantiate(module, importObject);
```

#### 引数

*module*

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

*importObject* 省略可

関数や `WebAssembly.Memory` オブジェクトなどの新しく生成される `Instance` にインポートされる値を含むオブジェクト。宣言されたモジュールのインポートごとに 1 つの一致するプロパティが存在する必要があります。そうでない場合、 `WebAssembly.LinkError` がスローされます。

#### 返値

解決時に `WebAssembly.Instance` オブジェクトを渡す `Promise` 。

#### 例外

* いずれかの引数が正しくない型や構造のオブジェクトの場合、 `TypeError` がスローされます。
* 失敗した場合、プロミスは失敗の原因に応じて `WebAssembly.CompileError`, `WebAssembly.LinkError`, `WebAssembly.RuntimeError` をもって棄却されます。
例
-

**注**: おそらく多くの場合は `WebAssembly.instantiateStreaming()` を使用したほうが、 `instantiate()` よりも効率的でしょう。

### 第一のオーバーロードの例

fetch を使用して WebAssembly バイトコードを読み込んだ後、 `WebAssembly.instantiate()` 関数を使用してモジュールをコンパイル、インスタンス化し、その処理中に JavaScript の関数を WebAssembly モジュールにインポートします。次に、 `Instance` によってエクスポートされたエクスポート済み WebAssembly 関数を呼び出します。

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

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes, importObject))
  .then((result) => result.instance.exports.exported\_func());
```

**メモ:** この例は Github 上の index.html でも見ることができます (動作例)。

### 第二のオーバーロードの例

次の例 (GitHub 上の index-compile.html デモを参照、 そして 動作例 も確認してください) では、読み込まれた simple.wasm バイトコードを `WebAssembly.compileStreaming()` メソッドを使用してコンパイルし、 `postMessage()` を使用してワーカーに送信しています。

```js
var worker = new Worker("wasm\_worker.js");

WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) =>
  worker.postMessage(mod),
);
```

ワーカーでは (`wasm_worker.jsを参照`) モジュールで使用するためのインポートオブジェクトを定義して、メインスレッドからモジュールを受け取るイベントハンドラーを設定し、 `WebAssembly.instantiate()` メソッドを使用してインスタンスを生成し、エクスポートされた関数を呼び出します。

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

onmessage = function (e) {
  console.log("module received from main thread");
  var mod = e.data;

  WebAssembly.instantiate(mod, importObject).then(function (instance) {
    instance.exports.exported\_func();
  });
};
```

仕様書
---

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

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

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

関連情報
----

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


WebAssembly.RuntimeError - WebAssembly

WebAssembly.RuntimeError
========================

**`WebAssembly.RuntimeError`** オブジェクトは、 WebAssembly がトラップを指定するたびに例外として発生するエラー型です。

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

`WebAssembly.RuntimeError()`

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

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

`WebAssembly.RuntimeError.prototype.message`

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

`WebAssembly.RuntimeError.prototype.name`

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

`WebAssembly.RuntimeError.prototype.fileName`

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

`WebAssembly.RuntimeError.prototype.lineNumber`

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

`WebAssembly.RuntimeError.prototype.columnNumber`

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

`WebAssembly.RuntimeError.prototype.stack`

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

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

`WebAssembly.RuntimeError.prototype.toSource()`

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

`WebAssembly.RuntimeError.prototype.toString()`

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

例
-

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

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

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

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # exceptiondef-runtimeerror |
| 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 の使用


WebAssembly.Instance - WebAssembly

WebAssembly.Instance
====================

**`WebAssembly.Instance`** オブジェクトは、ステートフルで実行可能な `WebAssembly.Module` のインスタンスです。 `Instance` オブジェクトには JavaScript から WebAssembly コードを呼び出すことができるすべてのエクスポートされた WebAssembly 関数が含まれます。

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

`WebAssembly.Instance()`

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

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

`Instance.prototype.exports`

メンバーとして WebAssembly モジュールのインスタンスからエクスポートされたすべての関数を含むオブジェクトを返します。 JavaScript からアクセスしたり使用したりすることができます。読み取り専用です。

例
-

### 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(),
);
```

また、これは `exports` プロパティを使ってエクスポートされた関数にアクセスする方法も紹介しています。

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # instances |

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

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

関連情報
----

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


WebAssembly.Module - WebAssembly

WebAssembly.Module
==================

**`WebAssembly.Module`** オブジェクトには、ブラウザーでコンパイルされたステートレスな WebAssembly コードが含まれています。これを効率的にワーカー間で共有したり、複数回インスタンス化したりすることができます。

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

`WebAssembly.Module()`

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

静的プロパティ
-------

`WebAssembly.Module.customSections()`

`Module` と文字列を指定すると、モジュール内の与えられた文字列を名前に持つすべてのカスタムセクションの内容を返します。

`WebAssembly.Module.exports()`

`Module` を指定すると、エクスポート宣言の情報を配列として返します。

`WebAssembly.Module.imports()`

`Module` を指定すると、インポート宣言の情報を配列として返します。

例
-

### コンパイル済みのモジュールをワーカーに送信

以下の例では (GitHub 上の index-compile.html および実行例も参照)、読み込まれた `simple.wasm` のバイトコードを `WebAssembly.compileStreaming()` メソッドでコンパイルし、結果の `Module` インスタンスをワーカーへ、 `postMessage()` を使用して送信します。

```js
var worker = new Worker("wasm\_worker.js");

WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) =>
  worker.postMessage(mod),
);
```

ワーカー内では (`wasm_worker.js` を参照)、モジュールを使用するための import オブジェクトを定義し、メインスレッドからモジュールを受け取るためのイベントハンドラーをセットアップします。モジュールを受け取ったら、 `WebAssembly.instantiate()` メソッドを使ってインスタンスを作成し、その中からエクスポートされた関数を呼び出します。

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

onmessage = function (e) {
  console.log("module received from main thread");
  var mod = e.data;

  WebAssembly.instantiate(mod, importObject).then(function (instance) {
    instance.exports.exported\_func();
  });
};
```

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # modules |

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

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

関連情報
----

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


WebAssembly.Global - WebAssembly

WebAssembly.Global
==================

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

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

`WebAssembly.Global()`

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

Global のインスタンス
--------------

すべての `Global` のインスタンスは `Global()` コンストラクターのプロパティオブジェクトを継承します。これによりすべての `Global` インスタンスを変更することができます。

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

`Global.prototype.constructor`

このオブジェクトのインスタンスを生成した関数を返します。既定では、これは `WebAssembly.Global()` コンストラクターです。

`Global.prototype[@@toStringTag]`

@@toStringTag プロパティの初期値で、文字列値 "WebAssembly.Global" です。

`Global.prototype.value`

グローバル変数の中に含まれている値です。これにより、グローバル値を直接設定および取得することができます。

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

`Global.prototype.valueOf()`

グローバル変数の中に含まれている値を返す古い形のメソッドです。

例
-

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

以下の例では新しいグローバルインスタンスは `WebAssembly.Global()` コンストラクターを用いて初期化され、初期値 0 の変更可能な `i32` 型として定義されます。

その後この値は、`Global.value` プロパティを使うことによって `42` に、`global.wasm` モジュールから公開された（どんな値が与えられても 1 を加算して、新しい値を返す）`incGlobal()` 関数を使うことによって `43` になります。

```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 # globals |

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

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.LinkError - WebAssembly

WebAssembly.LinkError
=====================

**`WebAssembly.RuntimeLinkError`** オブジェクトは、モジュールのインスタンス化の際に発生したエラーを示します (開始した関数でのトラップを除く)。

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

`WebAssembly.LinkError()`

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

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

`WebAssembly.LinkError.prototype.message`

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

`WebAssembly.LinkError.prototype.name`

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

`WebAssembly.LinkError.prototype.fileName`

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

`WebAssembly.LinkError.prototype.lineNumber`

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

`WebAssembly.LinkError.prototype.columnNumber`

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

`WebAssembly.LinkError.prototype.stack`

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

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

`WebAssembly.LinkError.prototype.toSource()`

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

`WebAssembly.LinkError.prototype.toString()`

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

例
-

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

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

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

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # exceptiondef-linkerror |
| 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 の使用


WebAssembly.Memory() - WebAssembly

WebAssembly.Memory()
====================

**`WebAssembly.Memory`** オブジェクトはサイズ変更可能な `ArrayBuffer` または `SharedArrayBuffer` であり、 WebAssembly `Instance` からアクセスする生のバイト列のメモリーを持ちます。

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

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

`WebAssembly.Memory()`

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

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

`Memory.prototype.buffer`

メモリーに格納されているバッファーを返すアクセサープロパティです。

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

`Memory.prototype.grow()`

指定した WebAssembly ページ (64KB で 1 単位) の数でメモリーのインスタンスのサイズを増やします。

例
-

### 新しい Memory オブジェクトの生成

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

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

次の例では (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.Memory オブジェクトを取得する 2 つ目の方法は、 WebAssembly モジュールによってエクスポートされることです。このメモリは WebAssembly インスタンスの `exports` プロパティで (メモリーが WebAssembly モジュール内でエクスポートされた後に) アクセスできます。次のスニペットは、 WebAssembly からエクスポートされたメモリを `memory`という名前でインポートし、メモリーの最初の要素を Uint32Array として解釈して表示しています。

```js
WebAssembly.instantiateStreaming(fetch("memory.wasm")).then((obj) => {
  var i32 = new Uint32Array(obj.instance.exports.memory.buffer);
  console.log(i32[0]);
});
```

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

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

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

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

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # memories |

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

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

関連情報
----

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


WebAssembly.LinkError() コンストラクター - WebAssembly

WebAssembly.LinkError() コンストラクター
================================

**`WebAssembly.LinkError()`** コンストラクターは、新しい WebAssembly `LinkError` オブジェクトを生成します。これは、 (関数開始後のトラップではなく) モジュールがインスタンス化される間に発生したエラーを発生します。

構文
--

```js
new WebAssembly.LinkError();
new WebAssembly.LinkError(message);
new WebAssembly.LinkError(message, fileName);
new WebAssembly.LinkError(message, fileName, lineNumber);
```

### 引数

`message` 省略可

人間が読めるエラーの説明です。

`fileName` 省略可

例外が発生したコードを含むファイル名です。

`lineNumber` 省略可

例外が発生したコードの行番号です。

例
-

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

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

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

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # exceptiondef-linkerror |
| ECMAScript Language Specification # sec-nativeerror-constructors |

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

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

関連情報
----

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


WebAssembly.CompileError() コンストラクター - WebAssembly

WebAssembly.CompileError() コンストラクター
===================================

**`WebAssembly.CompileError()`** コンストラクターは、新しい WebAssembly の `CompileError` オブジェクトを生成します。これは WebAssembly のデコードまたは検証中のエラーを示します。

構文
--

```js
new WebAssembly.CompileError();
new WebAssembly.CompileError(message);
new WebAssembly.CompileError(message, fileName);
new WebAssembly.CompileError(message, fileName, lineNumber);
```

### 引数

`message` 省略可

このエラーの人間が読める説明です。

`fileName` 省略可

例外が発生したコードを含むファイル名です。

`lineNumber` 省略可

例外が発生したコードの行番号です。

例
-

### 新しい 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-nativeerror-constructors |

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

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

関連情報
----

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


WebAssembly.RuntimeError() コンストラクター - WebAssembly

WebAssembly.RuntimeError() コンストラクター
===================================

**`WebAssembly.RuntimeError()`** コンストラクターは、新しい WebAssembly `RuntimeError` オブジェクトを生成します。これは、 WebAssembly がトラップを指定するたびに例外として発生する型です。

構文
--

```js
new WebAssembly.RuntimeError();
new WebAssembly.RuntimeError(message);
new WebAssembly.RuntimeError(message, fileName);
new WebAssembly.RuntimeError(message, fileName, lineNumber);
```

### 引数

`message` 省略可

人間が読めるエラーの説明です。

`fileName` 省略可

例外が発生したコードを含むファイル名です。

`lineNumber` 省略可

例外が発生したコードの行番号です。

例
-

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

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

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

仕様書
---

| Specification |
| --- |
| WebAssembly JavaScript Interface # exceptiondef-runtimeerror |
| ECMAScript Language Specification # sec-nativeerror-constructors |

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

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

関連情報
----

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


WebAssembly.Module.customSections() - WebAssembly

WebAssembly.Module.customSections()
===================================

**`WebAssembly.customSections()`** 関数はモジュールと文字列名を指定して、すべてのカスタムセクションのコンテンツのコピーを返します。

構文
--

```js
WebAssembly.Module.customSections(module, sectionName);
```

### 引数

*module*

カスタムセクションを考慮する `WebAssembly.Module` オブジェクト。

*sectionName*

目的のカスタムセクションの文字列名。

### 返値

`sectionName` に一致するすべてのカスタムセクションの `ArrayBuffer` コピーの配列 (空の場合もあります)。

### 例外

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

解説
--

wasm モジュールは一連の **セクション** で構成されています。これらのセクションのほとんどは wasm の仕様によって完全に指定、検証されますが、検証中に無視されスキップされる **カスタムセクション** をモジュールに含めることができます (通常のセクション ("既知のセクション") とカスタムセクションを区別するための情報は 高レベルの構造 を読んでください)。

これにより開発者は他の目的のために wasm モジュール内にカスタムデータを含めることができます。例えば、開発者がモジュール内の全ての関数とローカル変数に名前を付けられる (ネイティブビルドにおける "シンボル" のようなもの) ネームカスタムセクション のようなものがあります 。

なお、 WebAssembly テキストフォーマットには現在新しいカスタムセクションのための構文の仕様がありません。しかし、テキストフォーマットから .wasm に変換するときに wasm にネームセクションを追加することができます。 wabt tool の一部である wast2wasm コマンドで `--debug-names` オプションを指定することができ、これを指定することにより、ネームカスタムセクションを持つ .wasm に変換することができます。

```bash
wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names
```

例
-

### customSections の使用

次の例では (custom-section.html のソースと動作例をご確認ください) 、読み込んだ section.wasm バイトコードをコンパイルします。

それから、`WebAssembly.Module.customSections` を使用して `length` が 0 より大きいかチェックして、モジュールに "name" カスタムセクションが含まれているかどうかチェックします。この例では "name" カスタムセクションが存在するため、`ArrayBuffer` オブジェクトが返されます。

```js
WebAssembly.compileStreaming(fetch("simple-name-section.wasm")).then(
  function (mod) {
    var nameSections = WebAssembly.Module.customSections(mod, "name");
    if (nameSections.length != 0) {
      console.log("Module contains a name section");
      console.log(nameSections[0]);
    }
  },
);
```

仕様書
---

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

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

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

関連情報
----

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


WebAssembly.Module.exports() - WebAssembly

WebAssembly.Module.exports()
============================

**`WebAssembly.Module.exports()`** 関数は、指定された `Module` のエクスポート宣言の定義の配列を返します。

構文
--

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

### 引数

*module*

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

### 返値

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

### 例外

モジュールが `WebAssembly.Module` オブジェクトのインスタンスではない場合、`TypeError` が発生します。

例
-

### exports の使用

次の例 (Github のデモ index-compile.html と、動作例も参照) では、`WebAssembly.compileStreaming()` 関数を使用して読み込んだ simple.wasm のバイトコードをコンパイルして、ワーカーに postMessage() を使用して送信しています。

```js
var worker = new Worker("wasm\_worker.js");

WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) =>
  worker.postMessage(mod),
);
```

ワーカー (`wasm_worker.js` を参照) 内で、モジュールで使用するためにインポートオブジェクトを定義して、そのあとにメインスレッドからモジュールを受け取るためのイベントハンドラをセットアップします。モジュールを受け取ったとき、`WebAssembly.Instantiate()` メソッドを使用してインスタンスを生成し、その内部でエクスポートされた関数を実行します。そのあとに `WebAssembly.Module.exports` を使用してモジュール上の利用可能なエクスポートの情報を返す方法を示します。

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

onmessage = function (e) {
  console.log("module received from main thread");
  var mod = e.data;

  WebAssembly.instantiate(mod, importObject).then(function (instance) {
    instance.exports.exported\_func();
  });

  var exports = WebAssembly.Module.exports(mod);
  console.log(exports[0]);
};
```

`exports[0]` の出力はこのようになります。

```js
{ name: "exported\_func", kind: "function" }
```

仕様書
---

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

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

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

関連情報
----

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


WebAssembly.Module() コンストラクター - WebAssembly

WebAssembly.Module() コンストラクター
=============================

**`WebAssembly.Module()`** コンストラクターは、ステートレスな WebAssembly コードを含む新しい Module オブジェクトを生成します。これはブラウザーでコンパイルされ、Worker と効率的に共有することができ、複数回インスタンス化することができます。

`WebAssembly.Module()` コンストラクター関数は、与えられた WebAssembly バイナリーコードを同期的にコンパイルするために呼び出すことができます。しかし、`Module` を取得するには、
 `WebAssembly.compile()` のような非同期コンパイル関数を使用するほうが主流です。

構文
--

**警告:** 大きなモジュールのコンパイルにはコストがかかるため、開発者はどうしても同期コンパイルが必要な場合にのみ `Module()` コンストラクターを使用し、それ以外の場合には非同期の `WebAssembly.compileStreaming()` メソッドを使用してください。

```js
new WebAssembly.Module(bufferSource);
```

### 引数

*bufferSource*

型付き配列または ArrayBuffer で、コンパイルしたい .wasm モジュールのバイナリーコードです。

例
-

### WebAssembly モジュールの同期的なコンパイル

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

function createWasmModule(bytes) {
  return new WebAssembly.Module(bytes);
}

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => {
    let mod = createWasmModule(bytes);
    WebAssembly.instantiate(mod, importObject).then((result) =>
      result.exports.exported\_func(),
    );
  });
```

仕様書
---

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

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

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

関連情報
----

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


WebAssembly.Module.imports() - WebAssembly

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

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() - WebAssembly

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

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 - WebAssembly

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 - WebAssembly

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

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() - WebAssembly

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

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 - WebAssembly

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() - WebAssembly

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() - WebAssembly

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 学習を学びの旅の起点にすることが理想的です。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** です。このモジュールではその両方について知っておくべきことを教えます。

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

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


ウェブパフォーマンス - ウェブ開発を学ぶ

ウェブパフォーマンス
==========

ウェブサイトを構築するには、HTML、CSS、JavaScript が必要です。人々が使いたいと思うウェブサイトやアプリケーションを構築し、ユーザーを惹きつけ、維持するためには、優れた使い勝手を実現する必要があります。優れた使い勝手の一部は、コンテンツの読み込みが速く、ユーザーの操作に反応することです。これは**ウェブパフォーマンス**と呼ばれています。このモジュールでは、パフォーマンスの高いウェブサイトを作成するための基礎知識を学びます。

初心者向けの教材では、パフォーマンスやアクセシビリティなどのウェブのベストプラクティスをできるだけ忠実に再現するようにしていましたが、このようなテーマにも特に焦点を当てて、よく理解しておくとよいでしょう。

学習経路
----

多くのウェブパフォーマンスの改善提案を実施するためには、HTML、CSS、JavaScript の知識が必要ですが、ウェブパフォーマンスを理解し測定するためには、アプリケーションの構築方法を知っていることは必須条件ではありません。ただし、このモジュールに取り組む前に、少なくともウェブ入門モジュールを使ってウェブ開発の基本的な知識を身につけておくことをお勧めします。

また、以下のようなモジュールを使って、これらのトピックをもう少し深く掘り下げてみるのもよいでしょう。

* HTML 入門
* CSS の第一歩
* JavaScript の第一歩

このモジュールに取り組んだ後は、ウェブパフォーマンスについてもっと深く知りたくなるでしょう。パフォーマンス API の概要、テストと分析ツール、パフォーマンスのボトルネックの問題など、MDN のウェブパフォーマンスの章で多くの詳しい説明を見つけることができます。

ガイド
---

このトピックには、次のモジュールが含まれています。必ず最初のものから始めてください。

ウェブパフォーマンスの「なぜ」

この記事では、ウェブパフォーマンスがなぜアクセシビリティ、ユーザーエクスペリエンス、ビジネスの目的に重要であるかを解説します。

ウェブパフォーマンスとは

ウェブパフォーマンスが重要であることは分かりましたが、ウェブパフォーマンスとは何でしょうか？この記事では、ウェブページの読み込みとレンダリングから、コンテンツがどのようにユーザーのブラウザーに表示されるかを含め、パフォーマンスの構成要素を紹介します。

ユーザーはパフォーマンスをどう知覚するのか

ユーザーがサイトの速さをどのように知覚するかということは、ウェブサイトの速さをミリ秒単位で示すことよりも重要です。 この認識は、実際のページの読み込みロード時間、アイドリング、ユーザー操作への応答性、スクロールやその他のアニメーションのスムーズさに影響されます。この記事では、様々な読み込みの指標、アニメーション、応答性の指標と、実際の時間よりもユーザーの認識を改善するためのベストプラクティスについて説明します。

パフォーマンスの計測

パフォーマンス指標のいくつかを理解したところで、パフォーマンスツール、指標、API について深く掘り下げ、パフォーマンスをウェブ開発のワークフローの一部にする方法を考えてみます。

マルチメディア: 画像

ウェブパフォーマンスの中で最も身近な位置にあるのは、メディアの最適化です。ユーザーエージェントの能力、大きさ、ピクセル密度に応じて、異なるメディアファイルを提供することが可能です。この記事では、画像がパフォーマンスに与える影響と、画像ごとに送信されるバイト数を削減する方法について説明します。

マルチメディア: 動画

ウェブパフォーマンスの中で最も身近な位置にあるのは、メディアの最適化です。この記事では、動画コンテンツがパフォーマンスに与える影響について説明し、バックグラウンドの動画からオーディオトラックの削除など、パフォーマンスを向上させるためのヒントを紹介します。

JavaScript パフォーマンスのベストプラクティス

JavaScript は、適切に使用すれば、インタラクティブで没入感のあるウェブ体験を実現できますが、ダウンロード時間、レンダリング時間、アプリ内のパフォーマンス、バッテリー寿命、ユーザー体験を大きく損なう可能性があります。この記事では、複雑なコンテンツであっても可能な限りパフォーマンスを向上させるために考慮すべき、 JavaScript のベストプラクティスを紹介します。

HTML のパフォーマンス特性

マークアップの属性やソースの順序によっては、ウェブサイトのパフォーマンスに影響を与えることがあります。 DOM ノードの数を最小限に抑え、スタイル、スクリプト、メディア、サードパーティのスクリプトなどのコンテンツを最適な順序と属性を使用して含めることで、ユーザーエクスペリエンスを劇的に向上させることができます。この記事では、最大限のパフォーマンスを確保するために HTML をどのように使用すればよいかを詳しく見ていきます。

CSS パフォーマンス特性

CSS は、パフォーマンス向上のための最適化の焦点としてはあまり重要ではないかもしれませんが、パフォーマンスに影響を与える CSS の特性がいくつかあります。この記事では、パフォーマンスに影響を与えるいくつかの CSS プロパティと、パフォーマンスに悪影響を与えないためのスタイルの処理方法を提案します。

フォントとパフォーマンス

外部フォントを含める必要があるかどうか、含める場合には、サイトのパフォーマンスへの影響を最小限に抑えながら、デザインに必要なフォントを含める方法について説明します。

モバイルパフォーマンス

モバイル端末でのウェブアクセスはとても人気があり、すべてのモバイルプラットフォームには本格的なウェブブラウザーが搭載されていますが、帯域幅、CPU、バッテリーの寿命が限られている可能性があるため、これらのプラットフォームでのウェブコンテンツのパフォーマンスを考慮することが重要です。この記事では、モバイルに特化したパフォーマンスの考慮点について説明します。

ウェブパフォーマンスのためのビジネスケース

パフォーマンスを向上させるために開発者ができることは数多くありますが、どれくらいの速度があれば十分なのでしょうか。このような努力の重要性を権限を持った人に納得させるにはどうすればよいでしょうか。最適化した後、肥大化したパフォーマンスが戻らないようにするにはどうすればよいでしょうか。この記事では、経営陣の説得、パフォーマンス文化とパフォーマンス予算の策定、コードベースにリグレッションが潜り込まないようにする方法を紹介します。

関連情報
----

ウェブパフォーマンスのリソース

HTML、CSS、JavaScript、メディアファイルなどのフロントエンドの構成物に加えて、アプリケーションを遅くする機能と、主観的・客観的にアプリケーションを速くする機能があります。ウェブパフォーマンスに関連する API、開発者ツール、ベストプラクティス、バッドプラクティスは数多くあります。ここでは、これらの機能の多くを基本的なレベルで紹介し、それぞれのトピックについて、パフォーマンスを向上させるためのより深い考察へのリンクを提供します。

レスポンシブ画像

この記事では、画面サイズや解像度などが大きく異なる端末でも動作する画像、すなわちレスポンシブ画像の概念を学び、それを実現するために HTML が提供するツールを紹介します。これにより、異なる端末間でのパフォーマンスを向上させることができます。レスポンシブ画像は、レスポンシブデザインの一部であり、今後の CSS のテーマとなります。

MDN のウェブパフォーマンスの章

ウェブパフォーマンスの章 — ここでは、パフォーマンス API の概要、テストと分析ツール、パフォーマンスのボトルネックの問題など、ウェブパフォーマンスに関するより詳細な情報をご覧いただけます。


アクセシビリティ - ウェブ開発を学ぶ

アクセシビリティ
========

ウェブ開発者になりたい場合、HTML, CSS, JavaScript の学習は役立ちます。しかし知識は単に技術を使うよりも前に進める必要があります — それらを責任を持って使う必要があり、その結果ウェブサイトの聴衆を増やし、またそれを使わないことに縛らないことになります。これを達成するには、一般的な成功事例 (HTML, CSS, JavaScript のトピックに示されています) を積み上げ、クロスブラウザーテストを行って、最初からアクセシビリティを考慮しておきます。このモジュールでは後者を詳しく扱います。

前提知識
----

このモジュールの大半の理解には、少なくとも HTML, CSS, JavaScript の最初の 2 モジュールを通して読むのが良いでしょうし、 たぶんもっと良いのは、関連するテクノロジートピックを進めるにつれて、関連するアクセシビリティの部分を進めるのが良いでしょう。

**メモ:** 自分のファイルを作れない コンピューター/タブレット/その他の端末で作業する場合、コードの実例の大半を JSBin や Glitch などのオンラインコーディングプログラム内で試すことができます。

ガイド
---

アクセシビリティとは？

この記事では実際アクセシビリティとは何かについてよく観察するモジュールから開始します — これには考慮が必要な人のグループや、いろいろな人がウェブとやり取りするのになぜ、どんなツールを使うのかや、アクセシビリティをウェブ開発の作業フローに取り組む方法が含まれます。

HTML: アクセシビリティの基礎

ウェブコンテンツをアクセシビリティ高くすることの多くの部分は、どんなときも正しい HTML 要素を正しい目的で使うことです。 この記事ではアクセシビリティを最大化するためにどう HTML が使われるかの詳細を見ていきます。

CSS と JavaScript のアクセシビリティ成功事例

CSS と JavaScript も、適切に使うと、アクセシビリティの高いウェブ体験を可能にする力を持っていますが、誤用されると目立ってアクセシビリティを害することもあります。この記事では、複雑なコンテンツでもなるべくアクセシビリティ高める CSS と JavaScript のいくつかの成功事例をざっと見ます。

WAI-ARIA の基本

前の記事に続いて、複雑な UI に非セマンティックな HTML や動的な JavaScript-更新コンテンツを作ることは難しいかもしれません。WAI-ARIA は、そうした問題をブラウザーと補助技術が認識できるセマンティクスを追加することで補助し、ユーザーに何が起きているのかを知らせるのに使うテクノロジーです。ここではアクセシビリティを改善する基本レベルの使用方法を示します。

アクセシブルなマルチメディア

アクセシビリティの問題を起こす可能性がある他のカテゴリは、マルチメディアです。ビデオ、オーディオ、およびイメージのコンテンツには、補助技術とユーザーが理解できるような、適切な代替テキストを付与する必要があります。どのように表示されるべきか分かるように。

モバイルアクセシビリティ

モバイル端末でのウェブへのアクセスが増えるとともに、アクセシビリティのツールが本格的に提供されている iOS や Android のような一般的なプラットフォームが普及しています。これらのプラットフォームでのあなたのウェブコンテンツのアクセシビリティを考えることが重要です。モバイル特有のアクセシビリティについて検討しましょう。

評価
--

アクセシビリティのトラブルシューティング

このモジュールの評価では、分析と修正が必要な多くのアクセシビリティの問題があるシンプルなサイトを紹介します。

関連情報
----

* Start Building Accessible Web Applications Today — Marcy Sutton によるすばらしい動画チュートリアル
* Deque University resources — コードサンプルやスクリーンリーダーリファレンスやその他の役立つリソースを含む
* WebAIM resources — ガイド、チェックリスト、ツールなどを含む


HTML フォーム - ウェブ開発を学ぶ

HTML フォーム
=========

このモジュールは、ウェブフォームの基本をマスターするのに役立つ一連の記事を提供しています。ウェブフォームはユーザーと対話するためのとても強力なツールです。最も一般的には、ユーザーからデータを収集したり、ユーザーがユーザーインターフェイスを操作できるようにするために使用されます。しかし、歴史的・技術的な理由から、フォームを最大限に使用する方法は必ずしも明らかではありません。以下の一覧の記事では、 HTML 構造のマークアップ、フォーム操作のスタイル、フォームデータの検証、サーバーへのデータ送信など、ウェブフォームの本質的な部分をすべて取り上げます。

#### フロントエンドのウェブ開発者になりたいですか？

これは、あなたが目標に向かって作業するために必要なすべての必須情報を含んだコースを用意しました。

**始めましょう**

前提条件
----

このモジュールを始める前に、少なくとも HTML 入門を一通り読んでおくべきです。ここでは簡単に理解できる導入ガイドが見つかり、ネイティブフォームコントロールガイドも利用できます。

しかしそれ以外のモジュールは HTML 知識よりも少し高度です — ページにフォームウィジェットを置くのは簡単ですが、高度なフォームの機能や CSS や JavaScript を使わないと実際に活用できません。このため、その他の節を見る前にまずは CSS と JavaScript を学んでおくのをお勧めします。

上記のテキストは、ウェブフォームを HTML、CSS、JavaScript エリアに混ぜずに、独立したモジュールに置くことの良い指針です — フォーム要素は HTML 要素より複雑で、最大限利用するには、関連する CSS と JavaScript テクニックを最大限活用する。

**メモ:** 自分のファイルを作ることができないコンピューター/タブレット/その他の端末で作業している場合、（大半の）コード例を JSBin や Glitch といったオンラインコーディングプログラムで試すことができます。

導入ガイド
-----

初めてのウェブフォーム

このシリーズの最初の記事では ウェブフォーム作成のほんの最初を提供し、それには簡単なフォームのデザインや、適切な HTML 要素で実装することや、CSS で簡単なスタイルづけをすることや、データがサーバーに送られる方法などが含まれます。

HTML フォームの構築方法

基本的な話と共に、ここではフォームの色々な部分に構造と意味を与えるのに使う要素を詳しく見ていきます。

どんなフォームウィジェットが利用できますか？
----------------------

ネイティブフォームウィジェット

オリジナルの HTML `<input>`タイプの詳細や、色々なデータ型を集めるのにどんなオプションが使えるかを見ていきます。

HTML5 入力タイプ

ここでは `<input>` 要素を深く見ていき、HTML5 リリースにて追加された入力タイプや、さまざまな UI コントロールとデータコレクションの改良を見ます。さらには、`<output>` 要素も見ます。

その他のフォームコントロール

次には`<input>` 以外のフォームコントロールと関連するツール、例えば `<select>`、`<textarea>`、`<meter>`、`<progress>` を見ていきます。

フォームのスタイルガイド
------------

ウェブフォームをスタイリングする

この記事では基本的なスタイリング作業のために知るべき基本を含む、フォームを CSS でスタイリングするための入門を紹介します。

ウェブフォームの高度なスタイリング

ここでは、スタイルが難しい要素を扱うために必要な、さらに高度なフォームスタイリングテクニックを紹介します。

UI 擬似クラス

現在の状態に応じて制御される HTML フォームコントロールを可能とする、UI 擬似クラス の入門です。

フォームデータを検証して送信する
----------------

クライアント側のフォームデータ検証

データ送信だけで充分ではありません — ユーザーがフォームに記入したデータが、我々が処理に成功するような正しいフォーマットであり、アプリケーションが破綻しないかを確認する必要があります。またユーザーが正しくフォームを記入してアプリを使うのにイライラしないよう手助けしたいです。フォーム検証はこの目的を達成するのに役立ちます — この記事では知っておくべきことを教えます。

フォームデータの送信

この記事ではユーザーがフォームを送信するときに何が起こるのかを見ます — データがどこに行くのか、そしてそこでデータを受けたらどう扱うかなどです。また、フォームデータ送信に関連するセキュリティ上の懸念もその一部です。

高度なガイド
------

下記の記事は学習コースに必須ではないですが、上記のテクニックをマスターしてそれ以上知りたいときには、興味深く役立つものでしょう。

カスタムフォームコントロールの作成方法

場合によってはネイティブのフォームウィジェットが必要となるものを提供していないことがあるでしょう。例えばスタイリングや機能で。この場合、生の HTML から自分自身のフォームウィジェットを作る必要があります。この記事ではその方法と考慮すべき点を、実際のケーススタディと一緒に説明します。

JavaScript によるフォームの送信

この記事では、標準フォームの送信ではなく、カスタム JavaScript 内で HTTP リクエストを組み立てて送る方法を見ます。またそうしたい理由と、そうする意味も見ていきます(FormData オブジェクトの使用もご覧ください)。

フォームコントロール用の CSS プロパティ互換性テーブル

この最後の記事では、どの CSS プロパティがフォーム要素に互換性があるのかを引くことのできるハンディリファレンスを提供します。

関連情報
----

* HTML フォーム要素リファレンス
* HTML <input> タイプリファレンス
* HTML 属性リファレンス


JavaScript - ウェブ開発を学ぶ

JavaScript
==========

JavaScript はウェブページ上に複雑なものを実装することを可能にするプログラミング言語です。ウェブページが表示されるたびに静的な情報が表示されるだけでなく、タイムリーにコンテンツを更新したり、インタラクティブマップや 2D/3D グラフィックスのアニメーションを表示したり、またはビデオジュークボックスが流れたりします。ほかにもありますが、これらは 間違いなく JavaScript が関係しています。

#### フロントエンドの Web 開発者になりたいですか？

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

**始めましょう**

学習の道筋
-----

JavaScript は HTML や CSS などの関連技術よりもきっと学ぶのが難しいでしょう。JavaScript を習得する前に、まずこれらの 2 つの技術、そしておそらく他の技術を熟知しておくことを強くおすすめします。先ず次のモジュールを実施してください :

* ウェブ入門
* HTML 入門
* CSS 入門

以前の他の言語での経験は手助けになるでしょう。

JavaScript の基本をよく理解できたら、より高度なトピックについて学ぶことができることでしょう。高度なトピックは例えば次のものです：

* JavaScript ガイドで紹介した JavaScript 詳細
* Web APIs
モジュール
-----

このトピックでは次のモジュールが含まれます。これらは推奨順です。

JavaScript の第一歩

最初の JavaScript の項目では、まず JavaScript を書く初めての実践的な体験に進む前に、「 JavaScript とは何か」、「どのように見えるか」、「何ができるのか？」などの基本的な質問に答えます。その後、変数、文字列、数値、配列などの JavaScript の主要機能について詳しく説明します。

JavaScript の構成要素

このモジュールでは、条件文、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでにみたか、どこかで目にしたことでしょうが、ここではすべて明示的に説明を行います。

JavaScript オブジェクト入門

JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の上に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。 関連する関数や変数を効率的なパッケージにカプセル化して独自のオブジェクトを作成することもできます。 JavaScript のオブジェクト指向の性質は、言語に関する知識をさらに深め、より効率的なコードを書く場合に理解するために重要です。それゆえ、このモジュールを用意しました。 ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見て、JSON のデータとその使い方を説明します。

非同期 JavaScript

このモジュールでは、非同期の JavaScript を見ていき、これがなぜ重要であるかや、サーバーからのリソース取得といった、ブロッキングの可能性のある操作を効率的に扱う方法を見ていきます。

クライアントサイドの Web API

ウェブサイトやアプリケーション用のクライアントサイド JavaScript を記述するときは、API を使い始める前に、サイトが実行されているブラウザーやオペレーティングシステムのさまざまな側面、または他のウェブサイトやサービスのデータを操作するためのインターフェイスといったものがあるので、すぐには進みません。このモジュールでは、API が何であるか、開発作業で頻繁に出くわす最も一般的な API を使用する方法について説明します。

よくある JavaScript の問題を解決する
------------------------

よくある JavaScript の問題を解決する では、ウェブページの作成時に、とてもよくある問題を解決するために JavaScript を使用する方法を説明するコンテンツのセクションへのリンクを提供します。

関連情報
----

MDN の JavaScript

MDN の主要な JavaScript ドキュメントの主要なエントリポイントです。ここでは、JavaScript 言語のあらゆる側面に関する広範なリファレンスドキュメント、および経験豊富な JavaScripter を対象とした高度なチュートリアルがあります。

JavaScript の学習

ウェブ開発者になりたい人向けのすばらしいリソース — JavaScript をインタラクティブな環境と、短いレッスンやインタラクティブなテスト、自動化された評価つきで学ぶことができる。最初の 40 レッスンは無料で、完全なコースは少額の支払いで利用できる。

**JavaScript Fundamentals on EXLskills**

JS でアプリケーションを構築するために必要なすべてを紹介する EXLskills オープンソースコースで、無料で JavaScript を学んでください。

Coding math

Keith Peters による、有能なプログラマーを理解するのに必要な数学の優れたビデオチュートリアルのシリーズ。


CSS - ウェブ開発を学ぶ

CSS
===

Cascading Style Sheets — CSS — はHTML を学んだら、まず次に勉強すべき技術です。HTML はコンテンツの構造と意味論を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。

#### フロントエンドのウェブ開発者になりたいですか？

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

**始めましょう**

学習の道のり
------

CSS に挑戦する前に HTML の基礎を学習しておくべきです。まず、HTML 入門 に取り組むことを推奨します — その後に、以下のことについて学んでください:

* CSS 入門 から始まる CSS モジュール
* より高度な HTML モジュール
* JavaScript と、動的な機能をウェブページに追加する方法

HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。なぜなら、CSS を理解すると HTML を勉強するのが更に興味深くまたもっと楽しくなり、また HTML を知ることなくして CSS を学習することはできないからです。

またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 基本的なソフトウェアをインストールする に詳しく書かれているような基本的な環境を持っており、 ファイルの扱い に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集であるウェブ入門のなかに入っています。

このトピックに取り組む前に ウェブ入門 を読むと良いでしょう。ただ、このウェブ入門のなかのCSS basicsの記事で紹介されていることの多くは、CSS 入門 でもカバーされているのでこれは必須ではありません。

モジュール
-----

このトピックは、以下のモジュールで構成されており、取り組むべき順に記載していますので、上から始めていくとよいでしょう。

CSS の第一歩

CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは、CSS のはたらきから CSS の構文、そしてそれを使って HTML をどうデザインしていくのかといった CSS をマスターするための入門編を丁寧に解説します。

CSS の構成要素

このモジュールは CSS の第一歩から派生しています。CSS にちょっと慣れて簡単な経験も積んだところで、それをもう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線についてやデバッグの方法などを見ていきます。

ここでの目的は、テキストの装飾や CSS レイアウトなどのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。

テキストの装飾

CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で最もよく使うことの一つです。ここでは、フォント、太字、イタリック、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。

CSS レイアウト

ここまでで既に CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートを基準にしてボックスを適切な場所に配置する方法、および互いの配置方法を検討します。 必要な前提知識はカバーされているので、奥深い CSS レイアウトの世界に飛び込むことができます。さまざまな `display` の設定、flexbox のようなモダンなやり方から、CSS grid、positioning、そしてまだまだ知っておきたいと思うかもしれないレガシーなテクニックまでを概観していきます。

CSS でよくある問題を解決するには
------------------

CSS を使ってよくある問題を解決する には、ウェブページを作成する際よく発生する問題を CSS を使って解決する方法へのリンクがまとめられています。

最初から、HTML 要素とその背景に色を付けたり、要素の大きさや形や位置を変えたり、要素のボーダー（境界線）を定義することがもっとも多かったでしょう。 しかし CSS の基本をしっかり理解していれば、できないことはそれほど多くありません。 CSS 学習のなかで最も嬉しいことの 1 つは、一度基礎を理解してしまうと、やり方が実はまだよくわかっていなくても、できることとできないことに対して大抵はかなり良い感触が得られることです！

"CSS は奇妙です"
-----------

CSS は、ほとんどのプログラミング言語や設計ツールとは少し異なる動作をします。なぜ、それがそのように動作するのか？　次のビデオでは、CSS がそのように動作する理由と、そのように進化した理由について、Miriam Suzanne が役に立つ説明をしています。

関連情報
----

MDN での CSS

MDN での CSS ドキュメントの主な出発点です。 CSS 言語のすべての機能を詳しく説明したリファレンスドキュメントがあります。プロパティがとりうるすべての値を知りたいですか？ ここは良い場所です。


フロントエンドウェブ開発者 - ウェブ開発を学ぶ

フロントエンドウェブ開発者
=============

フロントエンドウェブ開発パスへようこそ！

このパスでは、フロントエンドウェブ開発者になるために理解すべき全ての事を体系的なコースとして提供しています。 それぞれのセクションに取り組み、どんどん新しいスキルを習得（または、既存のスキルをより磨いて）して下さい。それぞれのセクションには、練習とテストがあり理解を確かめてから次のセクションに進んで下さい。

扱っているトピック
---------

扱っているトピックとしては:

* 基礎的なセットアップと学習の仕方
* ウェブ標準とベストプラクティス（例えば、アクセシビリティやブラウザー間の互換性など）
* HTML：ウェブコンテンツに構造と意味を与える言語
* CSS：ウェブページをデザインする言語
* JavaScript：ウェブ上で動的な処理をするスクリプト言語
* モダンなフロントエンド開発がよりしやすくなるツール

それそれのセクションに順番どおり取り組んでも良いですが、 内容が独立しているため、もし HTML を既に知っているのであれば、1 つ飛ばして CSS のセクションに取り組んでも良いでしょう。

前提知識
----

このコースを始めるにあたり前提知識は必要ありません。必要なのはモダンなブラウザーが動作するコンピュータ、インターネット接続、学びたいという意欲だけです。

フロントエンドウェブ開発が自分に適しているかわからなく､易しい説明が必要な場合はこの時間がかかる完全なコースを始める前に､ウェブサイト学習の最初のステップを読んでください｡

学習につまずいたら
---------

私たちは、フロントエンドウェブ開発の学習が少しでもやさしくなるよう努力してきました。それでも、何か理解できないことあったり、コードが動かなかったりして、学習につまずくことがあるでしょう。

落ち着いて下さい。プロの開発者でも初心者でも、誰にだって学習でつまづくことはあります。学習とヘルプ（English） (en-US) では情報を検索する際のヒントなど一連の有益な情報を提供しています。依然として学習につまずいているなら Discourse forum で気軽に質問して見て下さい。

さあ、始めましょう。幸運を！

学習パス
----

### さあ、始めましょう

所要時間: 1–2 時間

#### 前提知識

基本的なコンピュータリテラシー以外に必要ありあせん。

#### 学習を進めるための条件

コースのこの部分には評価はありません。ただし、スキップしないように注意してください。コースの後半で演習を行う準備を整えておくことが重要です。

中心となるモジュール

* 基本的なソフトウェアのインストール — 基本的なツールのステップアップ (15 分で読めます)
* 標準的なウェブとウェブのバックグラウンド (45 分で読めます)
* 学習とヘルプ（English） (en-US) (45 分で読めます)
### HTML（意味付けと構造）

所要時間: 35–50 時間

#### 前提知識

基本的なコンピュータリテラシーと基本的なウェブ開発環境以外は何もありません。

#### 学習を進めるための条件

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです｡

#### 中心となるモジュール

* HTML の紹介 (15–20 時間の学習)
* 動的コンテンツ（映像や音楽）の埋め込み (15–20 時間の学習)
* HTML の表 (5–10 時間の学習)
### CSS（スタイルとレイアウト）

所要時間: 90–120 時間

#### 前提知識

CSS の学習を始める前に HTML の基本的な知識を身につけておくことを推奨します｡少なくとも HTML の紹介 は読んでおきましょう｡

#### 学習を進めるための条件

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです｡

#### 中心となるモジュール

* CSS の第一歩 (10–15 時間の学習)
* CSS の構成要素 (35–45 時間の学習)
* テキストの装飾 (15–20 時間の学習)
* CSS レイアウト (30–40 時間の学習)

#### 補助教材

* CSS レイアウト料理帳
### JavaScript（インタラクティビティ）

所要時間: 135–185 時間

#### 前提知識

JavaScript を学習し始める前に基本的な HTML の知識を身に付けておくことをお勧めします。少なくとも HTML 入門 は最初に読んでおくべきでしょう。

#### 学習を進めるための条件

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです｡

#### 中心となるモジュール

* JavaScript の第一歩 (30–40 時間の学習)
* JavaScript の構成要素 (25–35 時間の学習)
* クライアントサイド Web API (30–40 時間の学習)
* JavaScript オブジェクト入門 (25–35 時間の学習)
* 非同期 JavaScript (25–35 時間の学習)
### ウェブフォーム（ユーザーのデータを扱う）

所要時間: 40–50 時間

#### 前提知識

フォームを作るには HTML､CSS､JavaScript の知識が必要です｡フォームの操作は複雑であるため、これは専用のトピックです。

#### 学習を進めるための条件

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです｡

#### 中心となるモジュール

* ウェブフォーム (40–50 時間)
### すべての人のためにウェブを作る

所要時間: 60–75 時間

#### 前提知識

このセクションを実行する前に、HTML、CSS、および JavaScript を理解しておくことをお勧めします。テクニックと最善の慣行の多くは、複数のテクノロジーに触れています。

#### 学習を進めるための条件

それぞれのステップに関する知識をテストするように設計されています。テストを完了すると、次のステップに進む準備ができているということです｡

#### 中心となるモジュール

* Cross-browser testing (25–30 時間の学習)
* Accessibility (20–25 時間の学習)
### モダンなツール

所要時間: 55–90 時間

#### 前提知識

説明したツールはこれらのテクノロジーの多くと連携して機能するため、このセクションを実行する前に HTML、CSS、および JavaScript を理解しておくことをお勧めします。

#### 学習を進めるための条件

There are no specific assessment articles in this set of modules. The case study tutorials at the end of the second and third modules prepare you for grasping the essentials of modern tooling.

#### 中心となるモジュール

* Git and GitHub (5 時間の記事)
* Understanding client-side web development tools (20–25 時間の記事)
* Understanding client-side JavaScript frameworks (30-60 時間の学習)


ウェブ入門 - ウェブ開発を学ぶ

ウェブ入門
=====

*ウェブ入門*は、ウェブ開発の実用性を紹介する簡潔なシリーズです。簡単なウェブページを構築するために必要なツールをセットアップし、簡単なコードを書いたら、実際にウェブに公開します。

最初のウェブサイトの物語
------------

プロが作るようなウェブサイトを作るのはとても大変な作業です。ウェブ開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単なウェブサイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。

ガイド
---

以下の一覧の記事を通して作業することで、何もないところから、最初のウェブページをオンラインで公開できるようになります。さあ、旅を始めましょう。

基本的なソフトウェアのインストール

ウェブサイトを構築するためのツールは、実にさまざまなものからがあります。これから始める人は、コードエディター、フレームワーク、テストツールなど、さまざまな種類のツールに戸惑うかもしれません。この記事では、基本的なウェブ開発を始めるために必要なソフトウェアをインストールする方法を手順を追って紹介します。

ウェブサイトをどんな外見にするか

ウェブサイトのコードを書き始める前に、まずは計画を立てることが大切です。あなたのウェブサイトにはどんな情報を載せますか？フォントや色はどうしたいですか？ここでは、コンテンツやデザインを計画するのに役に立つ簡単な方法を紹介します。

ファイルの扱い

ウェブサイトを作るにはたくさんのファイルが必要です。テキストコンテンツ、コード、スタイルシート、メディアコンテンツなどファイルがあります。ウェブサイトを作るときは、これらのファイルをうまく配置して、ファイル同士がお互いにアクセスできることを確認する必要があります。この記事では、ウェブサイトのファイルを適切に配置する方法と、気をつけるべきことについて説明します。

HTML の基本

HyperText Markup Language (HTML、ハイパーテキストマークアップランゲージ) とは、ウェブコンテンツを構成し、その内容に意味や目的を持たせるために使用するコードのことです。例えば、私のコンテンツは段落の集合なのか、それともこの点のリストなのか？ページに挿入する画像はあるか？データ表はありますか？この記事では、HTMLに慣れるために必要な情報を提供します。

CSS の基本

Cascading Stylesheets (CSS: カスケーディング・スタイルシート) は、ウェブサイトの見た目を決めるために使うコードです。CSS を書くと、テキストの色を黒や赤にしたり、コンテンツを画面のどこに表示するかを決めたり、ページの背景に好きな色をつけたり画像を表示したりして、ウェブサイトを好きなように飾り付けることができます。この記事では、こうした飾り付けの方法について説明します。

JavaScript の基本

JavaScript は、ウェブサイトにインタラクティブな機能を追加するために使うプログラミング言語です。例えば、ゲーム、ボタンが押された時やフォームにデータが入力された時に起こること、動的なスタイルの効果、アニメーション、などなどです。この記事では、この楽しいプログラミング言語を使ってどんなことができるのか、そしてどうやって使い始めれば良いのかを紹介します。

サンプルコードの公開

ウェブサイトのコードを書き終えて、ウェブサイトに必要なファイルが用意できたら、作ったファイルをすべてオンラインにして、インターネット上の他の人からも見られるようにする必要があります。この記事では、簡単なサンプルコードを最小限の手間でオンラインに公開する方法を説明しています。

ウェブのしくみ

あなたがお気に入りのウェブサイトにアクセスする時、実は目に見えない所ではとても複雑なことが行われています。ここでは、あなたがパソコンでウェブページを開いた時に裏側でどんなことが行われているのか、その大まかなしくみを説明します。

関連情報
----

* Web Demystified: ウェブの基本を説明した素晴らしい動画のシリーズで、完全な初心者がウェブ開発できるようにするためのものです。 Jérémie Patonnier 作。
* ウェブとウェブ標準: この記事では、ウェブの役立つ背景 — どうやってできたのか、ウェブ標準技術とはなにか、どう連携させるか、「ウェブ開発者」がなぜ素晴らしいキャリアであるか、この過程を通じてどんなベストプラクティスが学習できるか — を提供します。


サーバサイド Web サイトプログラミング - ウェブ開発を学ぶ

サーバサイド Web サイトプログラミング
=====================

***Dynamic(動的な)Web サイト*** – サーバサイドプログラミング のトピックは、動的な Web サイト (HTTP リクエストに応じてカスタマイズされた情報を届ける Web サイト) の作り方を説明する一連のモジュールです。各モジュールは、一般的なサーバサイドプログラミングへの導入となる情報を提供するほか、特に初学者に向けて、Django (Python) や Express (Node.js/JavaScript) といった基礎的なアプリケーションを構築するための Web フレームワークの使用方法について説明しています。

ほとんどの有名な Web サイトでは、必要に応じてさまざまなデータを動的に表示するために、何らかのサーバサイドの技術を使用しています。例えば Amazon の場合を考えてみましょう。非常にたくさんの商品が扱われていますね。また Facebook にも大量の投稿があります。これら全てを表示するために別々の静的なページをいくつも作っていっても、絶対に非効率です。ですのでその代わりに、こういったサイトでは静的なテンプレート (HTML, CSS, JavaScript で構築します) を表示し、テンプレートの内部で必要に応じ、表示される情報を動的に更新しています。例えば、Amazon で今見ている商品とは違う商品を見ようとするときに、この更新がおこなわれています。

現代の Web 開発においては、サーバサイド開発を学ぶことが強く推奨されています。

学習の道筋
-----

サーバサイドプログラミングを始めるのは、一般的にいってクライアントサイドの開発を始めるよりも簡単です。なぜなら動的な Web サイトはどれも非常によく似た操作 (データベースからデータを読み出してそれをページに表示し、ユーザが入力したデータをヴァリデーションしてそれをデータベースに保存し、ユーザの権限をチェックした後にユーザをログインさせる、といったようなことです) を行うからです。また、動的な Web サイトはこういった一般的な Web サーバ側での操作を簡単にしてくれる Web・フレームワークを用いて作られているからです。

プログラミング概念の基本知識 (あるいは特定のプログラミング言語の知識) は役立ちますが、必要ではありません。つまり、クライアントサイドコーディングの熟達は必要ではなく、基本知識はクライアントサイドの Web「フロントエンド」の開発者とうまく共同作業するのに役立つでしょう。

「Web の動作原理」を理解する必要があります。最初に次のトピックを読むのをお勧めします:

* Web サーバとは
* Web サイトを作成するのにどんなソフトウェアが必要か？
* Web サーバにファイルをアップロードする方法は？

基本的な理解があれば、この節のモジュールに進む準備ができているでしょう。

モジュール
-----

このトピックは次のモジュールがあります。最初のモジュールから始めるべきで、次に続くモジュールのどれかに進んで、そこで Web フレームワークを使ってとても有名な 2 つのサーバサイド言語を使う方法が示されます。

サーバサイド Web サイトプログラミングの最初の一歩

このモジュールではサーバ技術の無知な人向けに、サーバサイド Web プログラミングについての情報を提供します。それにはサーバサイドプログラミングについての基本的な質問 — "それは何なのか", "クライアントサイドプログラミングと何が違うのか", "なぜ便利なのか" — や、サーバサイド Web フレームワークの概要や、あなたのサイトに最も合うものを選ぶ方法のガイドが含まれます。最後に Web サーバセキュリティの入門セクションがあります。

Django Web フレームワーク (Python)

Django は Python で書かれた、極めて人気のある、完全な機能のあるサーバサイドフレームワークです。このモジュールではなぜ Django がこうも良い Web サーバフレームワークであるのかや、開発環境のセットアップ方法や、これを使ってよくあるタスクを行う方法を説明します。

Express Web フレームワーク (Node.js/JavaScript)

Express は JavaScript で書かれて node.js の実行環境でホストされる、人気のある Web フレームワークです。このモジュールではこのフレームワークの主な利点や、開発環境のセットアップ方法や、よくある Web 開発・デプロイのタスクを行う方法を説明します。

あわせて参照
------

フレームワークなしの Node サーバ

この記事では、フレームワークを使用せずに、Node.js だけで構築された単純な静的ファイルサーバを紹介します。


クライアントサイドの JavaScript フレームワークを理解する - ウェブ開発を学ぶ

クライアントサイドの JavaScript フレームワークを理解する
==================================

JavaScript フレームワークは、最新のフロントエンドウェブ開発に欠かせないものであり、開発者にスケーラブルでインタラクティブなウェブアプリケーションを構築するための試行錯誤されたツールを提供しています。現代の多くの企業では、フレームワークをツールの標準的な一部として使用しているため、多くのフロントエンド開発の仕事でフレームワークの経験が必要とされています。

フロントエンド開発者を目指していると、フレームワークを学ぶ際にどこから始めればいいのか悩むことがあります。フレームワークは常に新しいものが登場するため、非常に多くの種類の中から選ぶことができます。これらはほとんど同じように動作しますが、いくつかの点において異なっています。そしてフレームワークを利用する上では、具体的に注意しなければならないこともあります。

この記事では、あなたがフレームワークを学び始めるための快適な出発点を提供することを目的としています。私たちは、React/ReactDOM や Vue、その他の特定のフレームワークについて知っておく必要があるすべてのことを網羅的に教えることを目指しているわけではありません。その代わりに、以下のようなより基本的な質問に答えたいと思います。

* なぜフレームワークを使うべきなのか？どんな問題を解決してくれるのか？
* フレームワークを選ぼうとするとき、どのような質問をすればいいか？フレームワークを使う必要があるのか？
* フレームワークにはどのような機能があるのか？フレームワークは一般的にどのように機能するのか、そしてその機能の実装はどのように異なるのか？
* これらは素の JavaScript や HTML とどのように関係しているのか？

その後、異なるフレームワークの選択の要点をカバーするチュートリアルをいくつか提供し、あなたが自分自身でより深く学び始めるのに十分なコンテキストと親しみやすさを提供します。アクセシビリティなどのウェブプラットフォームの基本的なベストプラクティスを忘れずに、実用的な方法でフレームワークについて学んでいただきたいと思います。

**これから「クライアントサイドフレームワーク入門」で始めよう**

前提知識
----

クライアントサイドのフレームワークを学習する前に、ウェブ開発で用いる主要な言語の基礎を学ぶ必要があります。それは HTML と CSS、そして特に JavaScript です。

ウェブプラットフォームの基本的な機能を理解すれば、その上で構築されているフレームワークのトラブルも自信を持って解決できるでしょう。そうすれば、あなたの書くコードはより豪華でプロフェッショナルなものになるはずです。

#### フロントエンドのウェブ開発者になりたい方へ

このコースの中には、目標に向かって作業するために必要な、すべての必須情報が記載されています。

**始めましょう**

入門ガイド
-----

1. クライアントサイドフレームワークの紹介

フレームワークの一般的な概要から始め、 JavaScript とフレームワークの簡単な歴史、フレームワークがなぜ存在し、何を与えてくれるのか、学習するフレームワークを選ぶにはどう考え始めるべきか、クライアント側のフレームワークにどんな選択肢があるのか、について見ていきます。

2. フレームワークの主な機能 (en-US)

主要な JavaScript フレームワークでは、 DOM の更新、ブラウザーイベントの処理、および楽しい開発体験を提供するために、それぞれ異なる手法が採用されています。この記事では、「4大フレームワーク」の主な機能を調べ、フレームワークがどのように動作する傾向があるのかを高いレベルから見ていき、フレームワーク間の違いについて見ていきます。

React のチュートリアル
--------------

**メモ:** この React のチュートリアルは React/ReactDOM 16.13.1 と create-react-app 3.4.1 で、2020 年 5 月に動作確認を行いました。

もし、コードとサンプルのバージョンとを確認する必要があれば、 todo-react リポジトリーで最新版を見ることができます。実行中のライブバージョンについては、 https://mdn.github.io/todo-react-build/ から確認ができます。

1. React を始める

この記事では React のはじめかたを説明します。React の背景と使い方について説明し、ローカル環境で基本的な React ツールチェーンを設定します。また、シンプルな基本アプリを作成して、React がどのようなプロセスで機能するのかを学んでいきます。

2. React ToDo リストをはじめる

例えば、React でアイディアを検証するためにアプリを試作してみることになったとします（いわゆる、Proof of Concept - 概念実証）。ユーザーが作業したいタスクを追加、編集、削除することができ、また、タスクを削除せずに完了とすることができるアプリです。この記事では、基本的な App コンポーネントの構造とスタイルを整え、後から追加する個々のコンポーネントの定義とインタラクティブな機能の準備を行っていきます。

3. React アプリのコンポーネント化

この時点では、アプリは一枚岩です。アプリに何かをさせる前に、管理しやすく、記述しやすいコンポーネントに分解する必要があります。React には、何がコンポーネントで何がコンポーネントでないかという難しいルールはありません。それはあなた次第なのです！この記事では、アプリをコンポーネントに分解するための賢明な方法を紹介します。

4. React での対話: イベントと状態 (en-US)

コンポーネント計画がうまくいったら、今度はアプリを完全に静的な UI から、実際に対話したり変更したりできるような UI に更新し始めましょう。この記事では、イベントと状態について調べながら、この作業を行います。

5. React の対話性: 編集、フィルタリング、条件付きレンダリング (en-US)

React の旅が終わりに近づくにつれて（少なくとも今は）、Todo リスト アプリの主要な機能領域に最後の仕上げを追加します。これには、既存のタスクを編集できるようにすることと、タスクのリストをすべて、完了、未完了の間でフィルタリングすることが含まれます。その過程で、条件付きUIレンダリングについても見ていきます。

6. React におけるアクセシビリティ (en-US)

最後のチュートリアル記事では、 React のフォーカス管理など、キーボードのみのユーザーとスクリーンリーダーユーザーの両方にとってユーザビリティを向上させ、混乱を軽減することができる（シャレた）アクセシビリティに焦点を当てます。

7. React のリソース

この記事の最終回では、さらに学習を進めるために使用できる React のリソースの一覧を提供しています。

Ember のチュートリアル
--------------

**メモ:** この Ember チュートリアルは Ember/Ember CLI version 3.18.0 で、2020 年 5 月に動作確認を行いました。

もし、コードとサンプルのバージョンとを確認する必要があれば、ember-todomvc-tutorial リポジトリー で最新版を見ることができます。実行中のライブバージョンについては https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ から確認ができます（ただしチュートリアルで取り扱っていない機能も含まれています）。

1. Ember を始める (en-US)

最初の Ember 記事では、Ember がどのように作業し、何のために有益なのかを見、Ember ツールチェーンをローカルにインストールし、サンプルアプリを作成し、そして開発に必要な初期設定を行います。

2. Ember アプリの構成とコンポーネント化 (en-US)

この記事では、TodoMVC Ember アプリの構造を計画し、そのための HTML を追加し、その HTML 構造をコンポーネントに分割することに、すぐに取りかかりましょう。

3. Ember の対話: イベント、クラス、状態 (en-US)

この点では、アプリに対話機能を追加し、新しい ToDo アイテムを追加して表示する機能を提供することを始めます。その過程で、Ember のイベントの使用、インタラクティブ機能を制御する JavaScript コードを含むコンポーネント クラスの作成、アプリのデータ状態を追跡するサービスの設定を見ていきます。

4. Ember の対話性: フッター機能、条件付きレンダリング (en-US)

これで、このアプリのフッター機能に取り組み始める時刻になりました。ここでは、まだ完了していない ToDo の数を正しく表示するために ToDo カウンターを取得し、完了した ToDo (チェックボックスがチェックされているもの) に正しくスタイルを適用します。また、「完了をクリアする」ボタンの配線も行います。その過程で、テンプレートで条件付きレンダリングを使用する方法について学びます。

5. Ember におけるルーティング (en-US)

この記事では、ルーティングまたは URL ベースのフィルタリングについて学びます。これを使用して、 3 つの Todo ビュー（"All"、"Active"、"Completed"）それぞれに固有の URL を提供することにします。

6. Ember のリソースとトラブルシューティング (en-US)

最後の Ember 記事では、学習をさらに進めるために使用できるリソースのリストと、有益なトラブルシューティングなどの情報を提供しています。

Vue のチュートリアル
------------

**メモ:** この Vue チュートリアルは Vue 2.6.11 で、2020 年 5 月に動作確認を行いました。

もし、コードとサンプルのバージョンとを確認する必要があれば、 todo-vue リポジトリーで最新版を見ることができます。実行中のライブバージョンについては https://mdn.github.io/todo-vue/dist/ から確認ができます。

1. Vue を始める (en-US)

これで、フレームワークの 3 つ目である Vue を紹介することができます。この記事では、 Vue の背景を少し見て、インストールと新しいプロジェクトの作成方法を学び、プロジェクト全体と個々のコンポーネントのハイレベルな構造を勉強し、プロジェクトをローカルで実行する方法を確認し、例の構築を始めるために取得します。

2. 最初の Vue コンポーネントの作成 (en-US)

これで、 Vue をより深く掘り下げ、自分自身でカスタムコンポーネントを作成する時が来ました。まず、 Todo リストの各項目を表すコンポーネントを作成するところから始めます。その過程で、他のコンポーネントの内部でコンポーネントを呼び出すこと、 props を介してデータを渡すこと、データの状態を保存することなど、いくつかの重要な概念について学びます。

3. Vueコンポーネントの一覧の表示 (en-US)

この点で、完全に動作するコンポーネントを保有することができました。これで、アプリに複数の `ToDoItem` コンポーネントを追加する準備が整いました。この記事では、 `App.vue` コンポーネントに Todo データの集合を追加し、それをループさせて `v-for` ディレクティブを使用して `ToDoItem` コンポーネント内に表示するところを見ていきます。

4. 新しい todo フォームの追加: Vue のイベント、メソッド、モデル (en-US)

これでサンプルデータを所有し、各データを受け取ってアプリの `ToDoItem` 内にレンダリングするループができました。次に本当に必要なのは、ユーザーが自分自身でアプリに ToDo 項目を入力できるようにする機能です。そのためには、テキスト `<input>` と、データが送信されたときに発行されるイベント、送信時にデータを追加してリストを再レンダリングするメソッド、データを制御するモデルが必要になります。この記事で扱うのは、このようなものです。

5. CSS による Vue コンポーネントのスタイル設定 (en-US)

いよいよ、アプリの見栄えを少しばかり良くする時刻が到来しました。この記事では、 Vue のコンポーネントを CSS でスタイル設定するための異なる形を探ります。

6. Vue の computed プロパティの使用 (en-US)

この記事では、 Vue の computed プロパティと呼ばれる機能を使用して、完了した Todo アイテムの数を表示するカウンターを追加します。この著作物はメソッドと似たような作業をしますが、依存関係の 1 つが動作したときだけ再実行されます。

7. Vue の条件付きレンダリング: 既存の TODO の編集 (en-US)

これで、まだ欠けている機能の主要な部分の一つである、既存のTodoアイテムを編集する機能を追加する時が来ました。この機能を実現するために、 Vue の条件付きレンダリング機能である `v-if` と `v-else` を利用して、既存の Todo アイテムビューと、 Todo アイテムのラベルを更新できる編集ビューを切り替えられるようにします。また、 Todo アイテムを削除する機能の追加も見ていきます。

8. Vue refs によるフォーカス管理 (en-US)

Vue の使用はほぼ終了しました。最後に見るべき機能は、フォーカス管理です。別の言い方をすれば、アプリのキーボードアクセシビリティをどのように向上させるか、ということです。この処理に Vue refs を使用することを見ていきます。この機能は、仮想 DOM の下にある基礎 DOM ノードに直接アクセスしたり、あるコンポーネントから子コンポーネントの内部 DOM 構造に直接アクセスしたりすることができる先進的な機能です。

9. Vue のリソース (en-US)

これで、 Vue の学習の締めくくりとして、さらに学習を進めるために使用できるリソースのリストと、他にも有益なヒントを提供します。

Svelte のチュートリアル
---------------

**メモ:** Svelte のチュートリアルは 2020 年 8 月に、 Svelte 3.24.1 でテストしました。

もし、コードとサンプルのバージョンとを確認する必要があれば、 mdn-svelte-tutorial リポジトリーで最新版を見ることができます。実行中のライブバージョンについては https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2 から確認ができます。

1. Svelte を始める

この記事では、 Svelte フレームワークの簡単な紹介をします。 Svelte がどのように動作するのか、そしてこれまで見てきた他のフレームワークやツールと何が違うのかを見ていきます。その後、開発環境を構築し、サンプルアプリを作成し、プロジェクトの構造を理解し、ローカルで実行し、本番用にビルドする方法を学びます。

2. Svelte Todo リストアプリを始める (en-US)

さて、 Svelte でこれらがどのように動作するのか基本的な理解ができたところで、例のアプリであるTodoリストの作成を始めてみましょう。この記事では、まずアプリに求められる機能を見ていきます。次に `Todos.svelte` コンポーネントを作成し、静的なマークアップとスタイルを所有し、 ToDo リストアプリの機能を開発し始めるための準備をすべて整えます（この後の記事で詳しく説明します）。

3. Svelte の動的な動作: 変数とプロップを一緒に作業する (en-US)

これでマークアップとスタイルが保有されたので、 Svelte の ToDo リストアプリに必要な機能の開発に取り掛かることができます。この記事では、変数と props を使用してアプリを動的にし、 ToDo を追加したり削除したり、完了マークをつけたり、ステータスでフィルタリングしたりできるようにします。

4. Svelte アプリのコンポーネント化 (en-US)

この記事の主な目的は、アプリを管理しやすいコンポーネントに分割し、それらのコンポーネント間で情報を共有する方法を見ることです。アプリをコンポーネント化し、さらにユーザーが既存のコンポーネントを更新できるように機能を追加していきます。

5. 高度な Svelte: リアクティブ、ライフサイクル、アクセシビリティ (en-US)

この記事では、アプリの最終的な機能を追加し、さらにアプリをコンポーネント化します。オブジェクトや配列の更新に関連するリアクティビティの問題に対処する方法について学びます。よくある落とし穴を避けるために、 Svelte のリアクティブシステムを少し深く掘り下げる必要があります。また、アクセシビリティのフォーカスに関する問題の解決や、その他の問題にも目を向けていきます。

6. Svelte のストアでの作業 (en-US)

この記事では、Svelteで状態管理を処理するもう一つの方法であるストアを示します。ストアは、値を格納するグローバルなデータリポジトリです。コンポーネントはストアに格納され、その値が変更されたときに通知を受け取ることができます。

7. TypeScript support in Svelte (en-US)

これで、 Svelte アプリケーションで TypeScript を使用する方法を学ぶことができます。まず、 TypeScript とは何か、そして TypeScript が私たちにもたらす好ましいこととは何かを学びます。次に、 TypeScript ファイルを使用して作業するために、プロジェクトをどのように設定するかを見ていきます。最後に、 TypeScript の機能を十分に活かすためにはどのような修正が必要なのか、アプリを確認します。

8. 展開と次の手順 (en-US)

この最終記事では、アプリケーションを展開してオンラインにする方法と、 Svelte の学習を継続するために取得すべきリソースをいくつか紹介します。

Angular のチュートリアル
----------------

**メモ:** この Angular のチュートリアルは 2022 年 5 月に、 Angular CLI (NG) 13.3.4 で動作確認を行いました。

1. Angular を始める

この記事では、Angular が提供するものを確認し、前提条件をインストールしてサンプルアプリを設定し、Angular の基本的なアーキテクチャを確認します。

2. Angular todo リストアプリの事始め

この時点で、Angular を使用して todo リストアプリケーションの作成を開始する準備が整いました。 完成したアプリケーションには、やることのリストが表示され、機能の編集、削除、追加が含まれます。 この記事では、アプリケーションの構造を理解し、やることの基本的なリストを表示するようになります。

3. Angular アプリのスタイリング

基本的なアプリケーション構造がセットアップされ、アプリケーションが表示されるようになったので、次の段階へ移って、Angular がアプリケーションのスタイリングをどのように処理するかを見てみましょう。

4. item コンポーネントの作成

コンポーネントは、アプリケーションを整理するための方法を提供されます。この記事では、リスト内の個々の項目を処理するコンポーネントを作成し、チェック、編集、削除の機能を追加する方法を説明します。 Angular のイベントモデルについて説明します。

5. To Do アイテムのフィルタリング

これで、ユーザーが ToDo 項目をフィルタリングして、アクティブ、完了、すべての項目を表示できるようにする機能を追加することにしましょう。

6. Angular アプリケーションのビルドとその他のリソース

この最後の Angular の記事は、プロダクションに適したアプリを構築する方法を取り上げ、学習の旅を続けるためのさらなるリソースを提供します。

どのフレームワークを選ぶべきか？
----------------

私たちは、 5 つのフレームワークに焦点を当てたガイド付きの記事の最初のセットを公開しています。そのうち4つのフレームワークは、 React/ReactDOM、Ember、Vue、Angular と非常に人気があり確立されたものですが、 Svelte は比較的新しいもので、多くのプロミスを示し、最近多くの人気を獲得しているものです。

これらを取り上げた理由は以下の通りです。

* どのようなソフトウェアツールでもそうですが、積極的に開発されているもので、来週には開発中止になっていないようなもの、また、就職活動で自分のスキルセットに加えるのに望ましいものを選ぶとよいでしょう。
* 強力なコミュニティと優れた文書化があります。特に始めたばかりの頃は、複雑なテーマを学習する際に助けを得られることがとても重要です。
* 私たちは現代のフレームワークをすべて網羅するためのリソースは持っていません。常に新しいものが現れるため、最新版を掲載するのはとても難しいでしょう。
* 初心者のうちは、利用できる膨大な数の選択肢の中から何に注目すべきかを選ぼうとするのは、とても難しい問題です。そのため、リストを短くすることが有効です。

前もって言っておきますが、取り上げたフレームワークは私たちがベストだと思うから選んだわけでは**ありません**。また推奨しているわけでもありません。ただ、上記の基準を満たしていると考えただけです。

初期の段階では、もっと多くのフレームワークを取り上げたいと考えていましたが、このコンテンツの公開を遅らせることよりも、後からフレームワークを追加する方が良いと考えました。もし、あなたのお気に入りのフレームワークがこのコンテンツに含まれておらず、それを変える手助けをしたいのであれば、私たちと気軽に意見を交わしましょう！Matrix や Discourse を通じて私たちと連絡を取るか、mdn-admins list にメールを送ってください。


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

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

 クライアントサイドツールには、なかなか難しいものもありますが、この記事シリーズでは、いくつかの一般的なクライアントサイドツールの種類について、その目的を示し、一緒に連携させることができるツール、パッケージマネージャを使ったインストール方法、
 コマンドラインでの制御を説明します。最後にツールチェーンの例を示して、生産性を高める方法を説明します。

**"クライアントサイドツールの概要"で今すぐ始めましょう**

前提条件
----

ここで紹介しているツールを使う前に、まずはコアのHTML、CSS、JavaScriptの基礎を学習することをお勧めします。

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

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

**始めましょう**

ガイド
---

1. クライアントサイドツールの概要

この記事では、最新のウェブツールの概要、どのような種類のツールがあるのか、どこでウェブアプリ開発のライフサイクルを見つけるのか、そして個々のツールのヘルプを見つける方法について説明します。

2. コマンドライン集中コース

開発プロセスにおいて、ターミナル (または"コマンドライン") で何らかのコマンドを実行する必要があることは間違いありません。この記事では、ターミナルの紹介、ターミナルに入力する基本的なコマンド、コマンドを連鎖させる方法、独自のコマンドライン・インターフェース (CLI) ツールを追加する方法について説明します。

3. パッケージ管理の基本

この記事では、プロジェクトツールの依存関係をインストールしたり、最新の状態に保つなど、自分のプロジェクトでどのようにパッケージマネージャを使用できるかを理解するために、パッケージマネージャーについて詳しく説明していきます。

4. ツールチェーンの紹介

このシリーズの最後の数回では、サンプルケーススタディのツールチェーンを構築するプロセスを通じて、ツールに関する知識を確実なものにします。開発環境を構築し、変換ツールを導入し、実際にアプリを Netlify にデプロイするプロセスを紹介します。

5. アプリのデプロイ

シリーズの最終回では、前回の記事で構築したツールチェーンの例を使い、サンプルアプリをデプロイできるようにしていきます。コードを GitHub にプッシュし、Netlify を使ってデプロイし、簡単なテストを組み込む方法も紹介します。


クロスブラウザーテスト - ウェブ開発を学ぶ

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

このモジュールでは、色々なウェブブラウザー間でウェブプロジェクトをテストすることに焦点を当てます。あなたのターゲット視聴者 (例 どのユーザー、ブラウザー、デバイスに一番関心があるのか?) の特定や、テストをどう動かすかや、主な問題としてさまざまな種類のコードと対面してそれらを緩和する方法や、テストを楽にして問題を解決するのに最も役立つツールが何かや、自動化を利用してテストをスピードアップする方法を見て行きます。

前提条件
----

ここで述べるツールを使ってみる前に、基本的な HTML、CSS、 JavaScript 言語をよく理解しておきます。

ガイド
---

はじめてのクロスブラウザーテスト

この記事ではクロスブラウザーテストの概観を提供し始めます。その過程で「ブラウザーテストとは何？」「どんな種類の問題によく出くわしますか？」「テストと、問題の特定・修正の主なアプローチは？」といった質問に答えたりします。

テスト実行戦略

次に、テスト実行について掘り下げ、ターゲット視聴者(例、どのブラウザー、デバイス、その他のセグメントでテストを確実にするのか)を特定し、ローファイテスト戦略(ある範囲のデバイスと仮装マシンにて必要ならアドホックテストを行う)、高度なテスト戦略(専用テストアプリを使った自動化)、ユーザーグループを使ったテストまで見て行きます。

よくある HTML や CSS の問題を扱う

シーンがセットされたら、HTML と CSS コードの中でよく出くわすクロスブラウザー問題と、問題を防いだり、問題発生を修正するのに使えるツールを詳しく見ていきます。これにはコードの lint や、CSS プレフィックスを手渡したり、問題を監視するブラウザーの開発ツールを使ったり、ブラウザーサポート追加に polyfill を使ったり、レスポンシブデザインの問題に取り組んだり、といった事が含まれます

よくある JavaScript の問題を扱う

今度はクロスブラウザー JavaScript の問題と、その修正方法を見て行きます。ここにはブラウザーの開発ツールを使って問題を突き止めて修正したり、問題を回避するのに pollyfill やライブラリーを使用したり、古いブラウザーの対応にモダン JavaScript の機能を掴んだり、といった事が含まれます。

よくあるアクセシビリティの問題を扱う

次にアクセシビリティに注意を向けて、良くある問題の情報、簡単なテスト実施の方法、アクセシビリティの問題を見つけるための監査/自動化ツールの利用方法を提供します。

機能検出の実装

機能検出はブラウザーがあるコードブロックをサポートしているか考えたり、サポートする/しないによって他のコードを実行したりして、いくつかのブラウザーでクラッシュ/エラー起こすことなく、常に動作の体験を提供できるようにすることです。この記事では簡単な機能検出を書く方法や、 `@supports` のようなネイティブ機能について詳しく記載します。

はじめての自動テスト (en-US)

いくつかのブラウザーと端末で、一日に何度もテストを手動実行するのはつまらないし時間をつぶします。これを効率良く扱うには、自動化ツールに詳しくなるべきです。この記事では何を入手できるかや、タスクランナーの使い方や、Sauce Labs と Browser Stack のような商用ブラウザーテスト自動化ツールの使い方の基本を見て行きます。

テスト自動化環境をセットアップする

この記事では、Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を教えます。またあなたのローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。


Git と GitHub - ウェブ開発を学ぶ

Git と GitHub
============

すべての開発者が、何らかの**バージョン管理システム** (**VCS**) を使用しています。これは、他の開発者との共同作業において、お互いの作業を上書きする危険がなく、また、後で問題が発見された場合には以前のバージョンのコードベースにロールバックすることができるツールです。 (少なくともウェブ開発者の間では) 最も人気のある VCS は **Git** であり、 **GitHub** はリポジトリのホスティングとそれを操作するためのいくつかのツールを提供するサイトです。このモジュールは、この 2 つについて知っておくべきことを紹介することを目的としています。

概要
--

VCS は本質的に、ソフトウェア開発のためのものです。

* 完全に自分一人でプロジェクトに取り組むことは稀で、他の人と一緒に作業を始めるとすぐに、二人が同時に同じコードを更新しようとする場合、互いの作業が衝突する危険性が出てきます。このような事態を回避するためには、何らかの仕組みを用意しておく必要があり、それが結果的に仕事のロスを避けるのに役立ちます。
* 一人で、あるいは他の人と一緒にプロジェクトを進める際には、コンピューターが壊れてもコードが失われないように、中央にバックアップできるようにしておきたいものです。
* また、後で問題が発見された場合には、以前のバージョンにロールバックできるようにしておきたいものです。同じファイルの異なるバージョン、例えば `myCode.js`, `myCode_v2.js`, `myCode_v3.js`, `myCode_final.js`, `myCode_really_really_final.js` のようなものを作成して、自分の仕事でこれを始めているかもしれませんが、これは実にエラーが起こりやすく、信頼性に欠けます。
* チームのメンバーは、それぞれ別のバージョンのコード (Git では**ブランチ**と呼びます) を作成し、そのバージョンで新機能の開発を行い、作業が終わったら制御された方法 (GitHub では**プルリクエストを使用します**) でマスターバージョンにマージしたいと考えるのが一般的です。

VCS は、上記のニーズを満たすツールを提供します。 Git は VCS の一例であり、 GitHub は Git サーバーに加えて、コードの問題点の報告、レビューツール、タスクの割り当てやタスクの状態管理などのプロジェクト管理機能など、個人やチームで git リポジトリを扱うための実に便利なツールを提供するウェブサイト＋インフラです。

**メモ:** Git は実際には*分散*バージョン管理システムです。つまり、コードベースを含むリポジトリの完全なコピーが、自分のコンピュータ (そして他の全員のコンピュータ) に作られます。自分のコピーに変更を加え、その変更をサーバーにプッシュします。サーバーでは、管理者があなたの変更をマスターコピーにマージするかどうかを決定します。

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

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

**始めましょう**

前提条件
----

Git と GitHub を使用するには、以下のものが必要です。

* Git がインストールされたデスクトップコンピューター (Git のダウンロードページを参照)。
* Git を使うためのツール。仕事のやり方によっては、 Git の GUI クライアント (GitHub Desktop、SourceTree、Git Kraken などがお勧めです) を使うこともできますし、端末ウィンドウを使うこともできます。実際、 GUI を使うにしても、 Git の端末コマンドの基本だけは覚えておいたほうが役立つでしょう。
* GitHub アカウント。まだお持ちでない場合は、このリンクからサインアップしてください。

前提知識としては、このモジュールを始めるにあたり、ウェブ開発、Git/GitHub、VCS について何も知らなくても構いません。しかし、適度なコンピューターリテラシーを持ち、リポジトリに保存するためのコードがあるように、いくらかのコーディングの知識を持つことをお勧めします。

また、ディレクトリー間の移動、ファイルの作成、システムの `PATH` の変更など、基本的な端末の知識があることが望ましいです。

**メモ:** GitHub が Git で使えるサイトやツールセットとして唯一のものではありません。 GitLab のような他のツールもありますし、自分で Git サーバーを立ち上げて GitHub の代わりに使うこともできます。このコースでは、 GitHub を使った方法だけを紹介しています。

ガイド
---

以下のリンクは、外部サイト (訳注: 多くは英語) のリソースに移動しますのでご注意ください。最終的には、 Git/GitHub に特化した独自のコースを設けることを目指していますが、現時点では、これらのサイトがこの主題を把握するのに役立つでしょう。

Hello, World (from GitHub) (英語)

始めるのによいところです。 — リポジトリやブランチの作成、コミットの作成、プルリクエストの作成とマージなど、 Git の基本を学びながら、 GitHub をすぐに使い始めることができる実用的なガイドとなっています。

Git Handbook (from GitHub) (英語)

この Git ハンドブックでは、 VCS とは何か、リポジトリとは何か、 GitHub の基本モデルはどうなっているのか、 Git コマンドとその例など、もう少し深く掘り下げて説明しています。

Forking Projects (from GitHub) (英語)

誰かのコードに協力したいときには、プロジェクトをフォークすることが不可欠です。このガイドでは、その方法を説明します。

プルリクエストについて (GitHub より)

提案されたコードの変更を、他の人のリポジトリに配信して検討してもらう方法であるプルリクエストを管理す津ための有益なガイドです。

Mastering issues (from GitHub) (英語)

課題 (issue) とは、 GitHub プロジェクトのフォーラムのようなものです。質問をしたり問題を報告したりすることができ、そこで更新を管理することができます (たとえば、問題を修正する人を割り当てたり、問題を明確にしたり、問題が修正されたことを人々に知らせたりすることができます)。この記事では、課題について知っておくべきことを説明します。

**メモ:** Git や GitHub でできることは**他にもたくさん**ありますが、以上のことは Git を効果的に使い始めるために最低限知っておくべきことだと思います。 Git の理解が深まるにつれ、より複雑なコマンドを使い始めると簡単に間違えてしまうことに気づくでしょう。心配しないでください。プロのウェブ開発者であっても、 Git が分かりにくいと感じることがあり、ウェブ上で解決策を探したり、 Flight rules for Git や Dangit, git! のようなサイトを参考にして問題を解決することがよくあります。

関連情報
----

* Understanding the GitHub flow
* Git command list
* Mastering markdown (the text format you write in on PR, issue comments, and `.md` files).
* Getting Started with GitHub Pages (デモやウェブサイトを GitHub で公開する方法).
* Learn Git branching
* Flight rules for Git (Git であることを実現するための方法や、間違えた場合の修正方法など、とても有用な概説が書かれています。).
* Dangit, git! (もう一つの有用な概説で、特に、間違ったときに物事を修正する方法です。).