` は `i` の値の増加を表示します。
+サーバサイド JavaScript では、その制限は存在しません。また、Node.js では [process.nextTick](https://nodejs.org/api/process.html) や [setImmediate](https://nodejs.org/api/timers.html) のような即時非同期ジョブをスケジュールする他の方法も存在します。従って、この概念はブラウザ固有のものです。
+````
## サマリ
- メソッド `setInterval(func, delay, ...args)` と `setTimeout(func, delay, ...args)` は、`delay` ミリ秒に `func` を定期的に/一度だけ実行することができます。
- 実行をキャンセルするためには、`setInterval/setTimeout` で返却された値と一緒に `clearInterval/clearTimeout` を呼ぶ必要があります。
- ネストされた `setTimeout` 呼び出しは、`setInterval` よりも柔軟です。また、それは実行 *間* の最小時間を保証することができます。
-- ゼロタイムアウトスケジューリング `setTimeout(...,0)` は "できるだけ早く、しかし現在のコードが終わった後に" 呼び出しをスケジュールするために使われます。
-
-`setTimeout(...,0)` のいくつかのユースケースです:
-- CPUを必要とするタスクを小さく分割するために、スクリプトが "ハングアップ" しないために。
-- 処理が進行している間にブラウザに何か他のことをさせるために（プログレスバーを描画するなど）。
+- `setTimeout(func, 0)` （`setTimeout(func` と同じ）での遅延ゼロのスケジューリングは "できるだけ早く、しかし現在のコードが終わった後に" 呼び出しをスケジュールするために使われます。
+- ブラウザは、5つ以上のネストされた `setTimeout` 呼び出し、または `setInterval`（５回目以降の呼び出し後）の最小遅延を4msに制限しています。それは歴史的な理由によるものです。
-すべてのスケジューリングメソッドは正確な遅延を *保証しない* ことに注意してください。スケジュールされたコードでは、それに頼るべきではありません。
+すべてのスケジューリングメソッドは正確な遅延を *保証しない* ことに注意してください。
例えば、ブラウザ内でのタイマーは、多くの理由で遅くなる可能性があります:
- CPUが過負荷になっている
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png
deleted file mode 100644
index 060b2c293b..0000000000
Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png and /dev/null differ
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg
new file mode 100644
index 0000000000..bce7d6a843
--- /dev/null
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png
deleted file mode 100644
index 4071849cd5..0000000000
Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png and /dev/null differ
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png
deleted file mode 100644
index 6c473a33cc..0000000000
Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png and /dev/null differ
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg
new file mode 100644
index 0000000000..d6d233b2ba
--- /dev/null
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png
deleted file mode 100644
index dd45e324f8..0000000000
Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png and /dev/null differ
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md
index f742440656..858a6f8315 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md
@@ -12,7 +12,7 @@ function delay(f, ms) {
ここで、アロー関数がどう使われているか注意してください。ご存知の通り、アロー関数は独自の `this` や `arguments` を持ちません。なので、`f.apply(this, arguments)` はラッパーから `this` と `arguments` を取ります。
-もし、通常の関数を渡す場合、`setTimeout` はそれを引数なしで、 `this=window` (ブラウザの場合) で呼び出します。なので、ラッパーからそれらをわすようにコードを書く必要があります。:
+もし、通常の関数を渡す場合、`setTimeout` はそれを引数なしで、 `this=window` (ブラウザの場合) で呼び出します。なので、ラッパーからそれらを渡すようにコードを書く必要があります。:
```js
function delay(f, ms) {
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
index 2412850998..424dc3fa64 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
@@ -1,15 +1,12 @@
# デコレータと転送, call/apply
-JavaScriptでは関数を扱う際、非常に柔軟性があります。関数は渡され、オブジェクトとして使われます。また、これらの間の呼び出しを *転送* したり、それらを *装飾(デコレータ)* することもできます。ここではそれらの方法を見ていきましょう。
-
-
-[cut]
+JavaScript は関数を処理する際、非常に高い柔軟性を提供します。関数は渡され、オブジェクトとして使われます。ここでは、これらの間の呼び出しを *転送* したり、*装飾(デコレータ)* する方法を説明します。
## 透過キャッシュ(Transparent caching)
-CPU負荷は高いが、その結果が不変である関数 `slow(x)` を持っているとします。言い換えると、同じ `x` の場合、常に同じ結果が返ってきます。
+CPU負荷は高いが、その結果が不変である関数 `slow(x)` があるとします。言い換えると、同じ `x` の場合、常に同じ結果が返ってきます。
-もし関数が頻繁に呼ばれた場合、再計算に余分な時間を費やすことを避けるために、異なる `x` の結果をキャッシュ（覚えておく）して欲しいかもしれません。
+もし関数が頻繁に呼ばれる場合、再計算に余分な時間を費やすことを避けるため、結果をキャッシュ（覚えておく）して欲しいかもしれません。
その機能を `slow()` に追加する代わりに、ラッパーを作りましょう。これから見ていくように、そうすることで多くのメリットがあります。
@@ -52,11 +49,9 @@ alert( "Again: " + slow(2) ); // 前の行と同じ
メインの関数コードからキャッシュ機能を分離することで、コードをシンプルに保つこともできます。
-さて、それがどのように動作するのか詳細を見ていきましょう:
-
`cachingDecorator(func)` の結果は "ラッパー" です: `func(x)` の呼び出しをキャッシュロジックに "ラップ" する `function(x)` です。:
-
+
上でわかるように、ラッパーは `func(x)` の結果を "そのまま" 返します。外部のコードからは、ラップされた `slow` 関数は、依然として同じことを行い、単にその振る舞いに追加されたキャッシュの側面をもちます。
@@ -66,7 +61,6 @@ alert( "Again: " + slow(2) ); // 前の行と同じ
- キャッシュロジックは分離されているので、`slow` 自身の複雑性は増加しません。
- 必要に応じて、複数のデコレータを組み合わせることができます（他のデコレータについては次に続きます）。
-
## コンテキストのために、"func.call" を利用する
上で言及されたキャッシュデコレータはオブジェクトメソッドで動作するのには適していません。
@@ -113,10 +107,9 @@ alert( worker.slow(2) ); // Whoops! Error: Cannot read property 'someMethod' of
行 `(*)` で、`this.someMethod` にアクセスしようとして失敗してエラーが起きます。なぜかわかりますか？
-理由は、ラッパーは行 `(**)` でオリジナル関数を `func(x)` として呼び出すためです。また、そのように呼び出した場合、関数は `this = undefined` となります。
-
+理由は、ラッパーは行 `(**)` でオリジナル関数を `func(x)` として呼び出すためです。また、このように呼び出した場合、関数は `this = undefined` となります。
-次のコードを実行しようとすると、同様の現象が観察されます:
+次のコードを実行しようとすると、同様の現象が見られます:
```js
let func = worker.slow;
@@ -176,7 +169,6 @@ say.call( user, "Hello" ); // John: Hello
我々のケースでは、オリジナルの関数にコンテキストを渡すため、ラッパーの中で `call` を使うことができます。:
-
```js run
let worker = {
someMethod() {
@@ -217,8 +209,7 @@ alert( worker.slow(2) ); // 動作します（キャッシュが使われます
2. なので、`worker.slow(2)` が実行されるとき、ラッパーは引数として `2` と、`this=worker` を取ります(これはドットの前のオブジェクトになります)。
3. ラッパーの中では、 結果がまだキャッシュされていないと仮定すると、`func.call(this, x)` はオリジナルのメソッドに現在の `this` (`=worker`) と、現在の引数 (`=2`)を渡します。
-
-## "func.apply" で複数の引数を使用する
+## 複数の引数
さて、`cachingDecorator` をより普遍的なものにしましょう。これまでは、単一引数の関数でのみ動作していました。
@@ -235,9 +226,7 @@ let worker = {
worker.slow = cachingDecorator(worker.slow);
```
-ここでは、それを解決するための2つのタスクがあります。
-
-最初は、`cache` マップのキーに、`min` と `max` 両方の引数を使う方法です。以前は、1つの引数 `x` に対し、単に `cache.set(x, result)` として結果を保存し、`cache.get(x)` でそれを取得していました。しかし、今回は *引数の組み合わせ* `(min,max)` で結果を覚える必要があります。ネイティブの `Map` は1つのキーに1つの値のみを取ります。
+以前は、1つの引数 `x` に対し、単に `cache.set(x, result)` として結果を保存し、`cache.get(x)` でそれを取得していました。しかし、今回は *引数の組み合わせ* `(min,max)` で結果を覚える必要があります。ネイティブの `Map` は1つのキーに1つの値のみを取ります。
可能な解決策はたくさんあります:
@@ -247,81 +236,9 @@ worker.slow = cachingDecorator(worker.slow);
実用的な多くのアプリケーションでは、第3の策で十分ですので、それで進めます。
-解決するための2つ目のタスクは、多くの引数を `func` に渡す方法です。現在ラッパー `function(x)` は１つの引数を想定しており、`func.call(this, x)` はそれを渡します。
-
-ここで、私たちは別の組み込みメソッド [func.apply](mdn:js/Function/apply) を使うことができます。
-
-構文は次の通りです:
-
-```js
-func.apply(context, args)
-```
-
-これは、`this=context` として設定し、引数のリストとして配列ライクなオブジェクト `args` を使って `func` を実行します。
-
-例えば、これら2つの呼び出しはほぼ同じです:
-
-```js
-func(1, 2, 3);
-func.apply(context, [1, 2, 3])
-```
-
-両方とも、引数 `1,2,3` が与えられた `func` を実行します。しかし、`apply` は `this=context` のセットもします。
-
-例えば、`this=user` と引数のリストとして `messageData` で `say` が呼ばれると次のようになります:
-
-```js run
-function say(time, phrase) {
- alert(`[${time}] ${this.name}: ${phrase}`);
-}
-
-let user = { name: "John" };
-
-let messageData = ['10:00', 'Hello']; // time と phrase になります
-
-*!*
-// user は this になり, messageData は引数のリストとして渡されます (time, phrase)
-say.apply(user, messageData); // [10:00] John: Hello (this=user)
-*/!*
-```
-
-`call` と `apply` の構文の唯一の違いは、`call` は引数のリストを期待し、`apply` はそれらの配列ライクなオブジェクトを期待している点です。
-
-私たちは既に、チャプター
で、引数のリストとして配列 (もしくは任意の頒布可能(iterable)) を渡すことのできるスプレッド演算子 `...` を知っています。`call` でそれを使う場合、`apply` とほぼ同じ結果になります。
-
-これら2つの呼び出しはほぼほぼ同等です:
-
-```js
-let args = [1, 2, 3];
-
-*!*
-func.call(context, ...args); // スプレッド演算子として配列を渡すことは
-func.apply(context, args); // apply を使うのと同じです
-*/!*
-```
-
-より詳しく見ると、 `call` と `apply` の使い方には若干の違いがあります。
-
-- スプレッド演算子 `...` は `call` へのリストとして *反復可能(iterable)* な `args` を渡すことができます。
-- `apply` は *配列ライク(array-like)* な `args` のみを許可します。
-
-したがって、これらの呼び出しはお互いを補完します。 反復可能(iterable) が期待されるところでは、 `call` が動作します。配列ライク(array-like)が期待される場合は `apply` が動作します。
-
-また、`args` が 反復可能であり配列ライクである場合は、本当の配列のように、技術的にはどちらを使うことも可能ですが、`apply` は恐らくより高速です。なぜなら、1つの操作だからです。ほとんどのJavaScriptエンジンの内部の最適化は、 `call + spread` のペアよりも良いものです。
-
-`apply` の最も重要な用途の1つは、次のように別の関数へ呼び出しを渡すことです。:
-
-```js
-let wrapper = function() {
- return anotherFunction.apply(this, arguments);
-};
-```
-
-これは *呼び出し転送(call forwarding)* と呼ばれます。 `wrapper` はコンテキスト `this` と `anotherFunction` への引数を取得し、その結果の戻り値を返します。
-
-このような `wrapper` を外部コードが呼び出すと、元の関数の呼び出しと区別できなくなります。
+また、`func.call` で `x` だけでなくすべての引数を渡す必要があります。`function()` の中で、 `arguments` として引数の疑似配列を取得できるので、`func.call(this,x)` を `func.call(this, ...arguments)` に置き換えます。
-今度はそれをもっと強力な `cachingDecorator` にしましょう。:
+これはより強力な `cachingDecorator` です:
```js run
let worker = {
@@ -342,7 +259,7 @@ function cachingDecorator(func, hash) {
}
*!*
- let result = func.apply(this, arguments); // (**)
+ let result = func.call(this, ...arguments); // (**)
*/!*
cache.set(key, result);
@@ -360,13 +277,54 @@ alert( worker.slow(3, 5) ); // works
alert( "Again " + worker.slow(3, 5) ); // same (cached)
```
-これで、ラッパー任意の数の引数で動作します。
+これで任意の数の引数でも動作します（ただし、ハッシュ関数も任意の数の引数を許可するように調整する必要があります。これを処理する興味深い方法については、以下で説明します）。
+
+2つの変更があります:
+
+- 行 `(*)` では、`hash` を呼び出し、`arguments` から単一のキーを生成しています。ここではシンプルな "結合" 関数を使用しています（引数 `(3, 5)` をキー `"3,5"` にする）。より複雑なケースでは他のハッシュ関数を必要とするかもしれません。
+- その後、`(**)` で`func.call(this, ...arguments)` を使用して、コンテキストとラッパーが取得したすべての引数をオリジナルの関数に渡しています。
+
+### func.apply
+
+`func.call(this, ...arguments)` の代わりに `func.apply(this, arguments)` を利用することができます。
+
+組み込みメソッド [func.apply](mdn:js/Function/apply) の構文は以下の通りです:
+
+```js
+func.apply(context, args)
+```
+
+これは、`this=context` として設定し、引数のリストとして配列ライクなオブジェクト `args` を使って `func` を実行します。
+
+`call` と `apply` の構文の唯一の違いは、`call` は引数のリストを期待し、`apply` はそれらの配列ライクなオブジェクトを期待している点です。
+
+そのため、これら2つの呼び出しはほぼ同等です:
+
+```js
+func.call(context, ...args);
+func.apply(context, args);
+```
+
+これらは与えられたコンテキストと引数で `func` 呼び出しを実行します。
+
+`apply` の使い方には若干の違いがあります。
+
+- スプレッド演算子 `...` は `call` へのリストとして *反復可能(iterable)* な `args` を渡すことができます。
+- `apply` は *配列ライク(array-like)* な `args` のみを許可します。
-2つの変更をしています:
+...また、実際の配列など、反復可能かつ配列ライクなオブジェクトの場合は、任意のいずれかを使用できますが、多くの JavaScript エンジンで内部の最適化がされるため、`apply` の方が恐らく高速です。
-- 行 `(*)` では、`arguments` から1つのキーを作成するために `hash` を呼び出しています。ここでは、引数 `(3, 5)` をキー `"3,5"` に変換する単純な "結合" 関数を使います。より複雑なケースでは他のハッシュ関数が必要になる場合もあります。
-- 次に `(**)` でラッパーが取得したコンテキストとすべての引数(どれだけ多くても問題ありません)を元の関数に渡すために `func.apply` を使っています。
+コンテキストと一緒にすべての引数を別の関数にわたすことは、*call forwarding（呼び出しの転送）* と言われます。
+最もシンプルな形は以下です：
+
+```js
+let wrapper = function() {
+ return func.apply(this, arguments);
+};
+```
+
+外部のコードがこのような `wrapper` は呼び出すと、元の関数 `func` の呼び出しと見分けはつきません。
## メソッドの借用(Borrowing a method)
@@ -434,12 +392,20 @@ hash(1, 2);
従って、技術的には `this` を取り、`this[0]`, `this[1]` ... などを一緒に結合します。これは意図的に任意の配列ライク(array-like) の `this` を許容する方法で書かれています(多くのメソッドがこの慣習に従っています)。そういうわけで `this=arguments` でも動きます。
+## デコレータと関数プロパティ
+
+一般的に、1つの小さい点を除けば、デコレートされている関数やメソッドを置き換えるのは安全です。もしオリジナルの関数に `func.calledCount` といったようなプロパティが含まれている場合、デコレートされた関数はラッパーであるためそれらは提供しません。したがって、それらを利用する際には注意が必要です。
+
+E.g. 上記の例では、`slow` 関数にあるプロパティが含まれている場合、`cachingDecorator(slow)` はそれを持たないラッパーです。
+
+一部のデコレータは独自のプロパティを提供することがあります。E.g. 関数が何回実行されたか、どれだけ時間がかかったかをカウントし、ラッパープロパティを介してこの情報を公開する、といったケースです。
+
+関数のプロパティへのアクセスを維持するデコレータを作成する方法はありますが、これには、関数をラップするために特別な `Proxy` オブジェクトを使用する必要があります。これについては、後ほど で説明します。
+
## サマリ
*デコレータ* は関数の振る舞いを変更するラッパーです。メインの仕事は引き続き元の関数により行われます。
-小さい点を除けば、デコレートされた関数またはメソッドへの置き換えは安全です。もし `func.calledCount` のように元の関数がプロパティを持っている場合、デコレートされた関数はそれらを提供しません。なぜなら、それはラッパーだからです。従って、使用する場合は注意する必要があります。 一部のデコレータは独自のプロパティを提供します。
-
デコレータは、関数に追加できる「機能」または「特徴」として見ることができます。 1つを追加したり、より多く追加することができます。 そして、これらすべてコードを変更することなく行うことができます！
`cachingDecorator` を実装するために、次のメソッドを学びました:
@@ -455,6 +421,6 @@ let wrapper = function() {
}
```
-また、私たちはオブジェクトからメソッドを取得し、別のオブジェクトのコンテキストでそのメソッドを `呼び出す` と言う、 *メソッドの借用* の例も見ました。配列のメソッドを取り、それらを引数に適用するのはよくあることです。代替としては、本当の配列である残りのパラメータオブジェクトを使うこと、があります。
+また、私たちはオブジェクトからメソッドを取得し、別のオブジェクトのコンテキストでそのメソッドを呼び出すと言う、 *メソッドの借用* の例も見ました。配列のメソッドを取り、それらを引数 `arguments` に適用するのはよくあることです。代替としては、本当の配列である残りのパラメータオブジェクトを使うこと、があります。
多くのデコレータが世の中に出回っています。このチャプターのタスクを解決することで、いかにデコレータが良いものかを確認してください。
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png
deleted file mode 100644
index 171e27910d..0000000000
Binary files a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png and /dev/null differ
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg
new file mode 100644
index 0000000000..9b63cb982b
--- /dev/null
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png
deleted file mode 100644
index 8d3b5434c2..0000000000
Binary files a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png and /dev/null differ
diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md
index 36380222f3..d8b17ef2a9 100644
--- a/1-js/06-advanced-functions/10-bind/article.md
+++ b/1-js/06-advanced-functions/10-bind/article.md
@@ -5,12 +5,10 @@ libs:
# 関数バインディング
-オブジェクトメソッドで `setTimeout` 使ったり、オブジェクトメソッドを渡すような場合、"`this` を失う" という既知の問題があります。
+オブジェクトメソッドで `setTimeout` を使ったり、オブジェクトメソッドを渡すような場合、"`this` を失う" という既知の問題があります。
突然、`this` が正しく動作するのをやめます。この状況は初心者の開発者には典型的ですが、経験者でも同様に起こりえます。
-[cut]
-
## "this" を失う
私たちはすでに、JavaScriptでは `this` を失うことが容易であることを知っています。 あるメソッドがオブジェクトから別の場所に渡されると、`this` は失われます。
@@ -39,7 +37,7 @@ let f = user.sayHi;
setTimeout(f, 1000); // user コンテキストを失います
```
-ブラウザにおいて、メソッド `setTimeout` は少し特別です: 関数呼び出しでは `this=window` を設定します(Node.JS では、`this` はタイマーオブジェクトになりますが、ここではほとんど関係ありません)。従って、`this.firstName` は、存在しない `window.firstName` を取得しようとします。他の同様のケースでは、通常 `this` は `undefined` になります。
+ブラウザにおいて、メソッド `setTimeout` は少し特別です: 関数呼び出しでは `this=window` を設定します(Node.js では、`this` はタイマーオブジェクトになりますが、ここではほとんど関係ありません)。従って、`this.firstName` は、存在しない `window.firstName` を取得しようとします。他の同様のケースでは、通常 `this` は `undefined` になります。
このタスクは非常に典型的です -- オブジェクトメソッドをどこか別の場所（ここではスケジューラに渡して）から呼び出したい場合です。それが適切なコンテキストで呼び出されることはどのように確認すればよいでしょう？
@@ -86,7 +84,9 @@ let user = {
setTimeout(() => user.sayHi(), 1000);
// ...1秒以内に次が行われると
-user = { sayHi() { alert("Another user in setTimeout!"); } };
+user = {
+ sayHi() { alert("Another user in setTimeout!"); }
+};
// Another user in setTimeout?!?
```
@@ -102,7 +102,7 @@ user = { sayHi() { alert("Another user in setTimeout!"); } };
```js
// より複雑な構文はもう少し後で
let boundFunc = func.bind(context);
-````
+```
`func.bind(context)` の結果は特別な関数ライクな "エキゾチックオブジェクト(exotic object)" です。これは関数として呼ぶことができ、`func` に `this=context` を透過的に渡します。
@@ -161,9 +161,16 @@ let user = {
let sayHi = user.sayHi.bind(user); // (*)
*/!*
+// オブジェクトなしで実行可能
sayHi(); // Hello, John!
setTimeout(sayHi, 1000); // Hello, John!
+
+// 1秒以内に user の値が変わったとしても
+// sayHi は古い user オブジェクトを参照しているバインド前の値を使用します
+user = {
+ sayHi() { alert("Another user in setTimeout!"); }
+};
```
`(*)` の行で、メソッド `user.sayHi` を `user` にバインドしています。`sayHi` は "束縛(バインド)された" 関数であり、単独もしくは `setTimeout` に渡して呼び出すことができます。
@@ -195,11 +202,127 @@ for (let key in user) {
}
```
-JavaScriptライブラリはまた、便利な大量バインディングのための機能も提供しています。e.g. [_.bindAll(obj)](http://lodash.com/docs#bindAll) in lodash.
+JavaScriptライブラリは、便利な多数のバインドを行うための機能も提供しています。e.g. [_.bindAll(obj)](http://lodash.com/docs#bindAll) in lodash.
````
+## 部分関数
+
+これまでは、`this` のバインドについてのみ説明してきました。次のステップにいきましょう。
+
+`this` だけでなく、引数もバインドすることが可能です。これはめったにされませんが、便利な場合があります。
+
+`bind` の完全な構文は次の通りです:
+
+```js
+let bound = func.bind(context, [arg1], [arg2], ...);
+```
+
+context を `this` とし、関数の開始引数をバインドすることができます。
+
+例えば、乗算関数 `mul(a, b)` があるとします:
+
+```js
+function mul(a, b) {
+ return a * b;
+}
+```
+
+これをベースに、`bind` を使用して、`double` 関数を作成しましょう。:
+
+```js run
+function mul(a, b) {
+ return a * b;
+}
+
+*!*
+let double = mul.bind(null, 2);
+*/!*
+
+alert( double(3) ); // = mul(2, 3) = 6
+alert( double(4) ); // = mul(2, 4) = 8
+alert( double(5) ); // = mul(2, 5) = 10
+```
+
+`mul.bind(null, 2)` の呼び出しで新しい関数 `double` を作成し、これはコンテキストを `null`、最初の引数を `2` で固定した `mul` を呼び出します。それ以降の引数は "そのまま" 渡されます。
+
+これは [部分関数アプリケーション](https://en.wikipedia.org/wiki/Partial_application) と呼ばれ、既存のパラメータのいくつかを固定にすることで新しい関数を作成します。
+
+実際にはここでは `this` は使用しないことに留意してください。ですが、`bind` で指定が必要なので `null` など何かしらを置く必要があります。
+
+以下のコードの関数 `triple` は値を3倍します。:
+
+```js run
+function mul(a, b) {
+ return a * b;
+}
+
+*!*
+let triple = mul.bind(null, 3);
+*/!*
+
+alert( triple(3) ); // = mul(3, 3) = 9
+alert( triple(4) ); // = mul(3, 4) = 12
+alert( triple(5) ); // = mul(3, 5) = 15
+```
+
+なぜ部分関数を作るのでしょうか？
+
+メリットは、読みやすい名前（`double`, `triple`）で独立した関数を作ることができることです。`bind` で固定されているため、毎回最初の引数を指定する必要がありません。
+
+他のケースでは、非常に一般的な関数がある状態で、便利さのために特定用途のパターンが欲しい場合に部分関数は役立ちます。
+
+例えば、関数 `send(from, to, text)` があるとします。`user` オブジェクトの中で、その部分パターンを使用したい場合、現在のユーザから送信をする関数 `sendTo(to, text)` 。
+
+## Going partial without context
+
+仮に引数のいくつかを固定したいが、コンテキスト `this` は固定したくない場合はどうしますか？例えば、オブジェクトメソッドです。
+
+ネイティブの `bind` はそれは許可しません。コンテキストを省略して引数だけ指定することはできません。
+
+幸いなことに、引数だけをバインドするための関数 `partial` は簡単に実装できます。
+
+次のようになります:
+
+```js run
+*!*
+function partial(func, ...argsBound) {
+ return function(...args) { // (*)
+ return func.call(this, ...argsBound, ...args);
+ }
+}
+*/!*
+
+// Usage:
+let user = {
+ firstName: "John",
+ say(time, phrase) {
+ alert(`[${time}] ${this.firstName}: ${phrase}!`);
+ }
+};
+
+// 固定時間で部分メソッドを追加
+user.sayNow = partial(user.say, new Date().getHours() + ':' + new Date().getMinutes());
+
+user.sayNow("Hello");
+// Something like:
+// [10:00] John: Hello!
+```
+
+`partial(func[, arg1, arg2...])`呼び出しの結果は以下をもつ `func` を呼び出すラッパー `(*)`です。
+- 取得したものと同じ `this`（`user.sayNow` 呼び出しの場合、`user`）
+- 次に `...argsBound` を指定します。`partial` 呼び出しからの引数 (`"10:00"`)
+- 次に `...args`。ラッパーに与えられた引数(`"Hello"`)
+
+なので、スプレッド構文で簡単に行うことができます。
+
+また、lodash ライブラリでは、[_.partial](https://lodash.com/docs#partial) 実装が用意されています。
+
## サマリ
メソッド `func.bind(context, ...args)` はコンテキスト `this` を固定した関数 `func` の "束縛されたバリアント" を返します。
-通常は、オブジェクトメソッドで `this` を固定するために `bind` を適用し、どこかに渡すことができるようにします。たとえば、`setTimeout` に。 近代的な開発で "束縛する" 理由はまだまだありますが、私たちは後でそれらを知るでしょう。
+通常は、オブジェクトメソッドで `this` を固定するために `bind` を適用し、どこか (たとえば `setTimeout`) に渡すことができるようにします。
+
+既存の関数において、引数のいくつかを固定した汎用性の低い関数は、部分関数と呼ばれます。
+
+部分関数は同じ引数を何度も繰り返したくないときに便利です。例えば、`send(from, to)` という関数があって、`from`はどのタスクでも常に同じになるはずなら、部分関数を利用してそれを処理できます。
diff --git a/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md b/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md
deleted file mode 100644
index 8149792ef1..0000000000
--- a/1-js/06-advanced-functions/11-currying-partials/1-ask-currying/task.md
+++ /dev/null
@@ -1,34 +0,0 @@
-importance: 5
-
----
-
-# ログイン用の部分的なアプリケーション
-
-このタスクは 少しより複雑なバリアントです。
-
-`user` オブジェクトが修正されました。今、2つの関数 `loginOk/loginFail` の代わりに、単一の関数 `user.login(true/false)` があります。
-
-下のコードでは、何を渡すと `ok` として `user.login(true)` を、`fail` として `user.login(fail)` を呼ぶでしょうか？
-
-```js
-function askPassword(ok, fail) {
- let password = prompt("Password?", '');
- if (password == "rockstar") ok();
- else fail();
-}
-
-let user = {
- name: 'John',
-
- login(result) {
- alert( this.name + (result ? ' logged in' : ' failed to log in') );
- }
-};
-
-*!*
-askPassword(?, ?); // ?
-*/!*
-```
-
-変更はハイライトされた箇所の修正だけにしてください。
-
diff --git a/1-js/06-advanced-functions/11-currying-partials/article.md b/1-js/06-advanced-functions/11-currying-partials/article.md
deleted file mode 100644
index ca3fec89c6..0000000000
--- a/1-js/06-advanced-functions/11-currying-partials/article.md
+++ /dev/null
@@ -1,299 +0,0 @@
-libs:
- - lodash
-
----
-
-# カリー化と部分適用
-
-今まで、`this` をバインドすることについて話していました。 さあ、もう一歩を進めましょう。
-
-私たちは、`this` だけでなく、引数もバインドすることができます。それはめったにされませんが、便利なときがあります。
-
-[cut]
-
-`bind` の完全な構文です:
-
-```js
-let bound = func.bind(context, arg1, arg2, ...);
-```
-
-これは、コンテキスト( `this` として)と、関数の開始引数をバインドすることができます。
-
-例えば、乗算関数 `mul(a, b)` を考えます:
-
-```js
-function mul(a, b) {
- return a * b;
-}
-```
-
-これをベースとした関数 `double` を作るために、`bind` を使ってみましょう。:
-
-```js run
-*!*
-let double = mul.bind(null, 2);
-*/!*
-
-alert( double(3) ); // = mul(2, 3) = 6
-alert( double(4) ); // = mul(2, 4) = 8
-alert( double(5) ); // = mul(2, 5) = 10
-```
-
-`mul.bind(null, 2)` を呼び出すと、`mul` を呼び出す新しい関数 `double` が作成されます。それは、`null` がコンテキストとして、`2` が最初の引数として固定されます。さらに、その他の引数は "そのまま" 渡されます。
-
-これは [関数への部分的な適用(partial function application)](https://en.wikipedia.org/wiki/Partial_application)と呼ばれます -- 既存の関数の一部のパラメータを変更することで新しい関数を作ります。
-
-ここで、例では実際には `this` を使っていないことに注意してください。しかし `bind` はそれを必要とするため、`null` のような何かを指定する必要があります。
-
-下のコードの関数 `triple` は値を3倍にします:
-
-```js run
-*!*
-let triple = mul.bind(null, 3);
-*/!*
-
-alert( triple(3) ); // = mul(3, 3) = 9
-alert( triple(4) ); // = mul(3, 4) = 12
-alert( triple(5) ); // = mul(3, 5) = 15
-```
-
-なぜ、通常部分的な関数を作るのでしょうか？
-
-ここでの我々のメリットは、分かりやすい名前(`double`, `triple`)で独立した関数を作れたことです。私たちはそれを使うことができ、毎回最初の引数を書く必要がありません。なぜなら、`bind` で固定されているからです。
-
-別のケースでは、非常に汎用的な関数を持っており、利便性のために汎用性を減らしたい時に部分適用は役立ちます。
-
-例えば、関数 `send(from, to, text)` を考えます。次に、`user` オブジェクトの内側で、その部分的なバリアントを使いたいかもしれません。: 現在のユーザから送信を行う `sendTo(to, text)` 関数など。
-
-
-## コンテキストなしの部分適用
-
-仮に、いくつかの引数を修正したいが、`this` をバインドしない場合はどうなるでしょう？
-
-ネイティブの `bind` ではそれは許可されていません。単にコンテキストを省略し引数にジャンプすることは出来ません。
-
-ただ、幸いにも引数だけをバインドする `partial` 関数は簡単に実装することが出来ます。
-
-このようになります:
-
-```js run
-*!*
-function partial(func, ...argsBound) {
- return function(...args) { // (*)
- return func.call(this, ...argsBound, ...args);
- }
-}
-*/!*
-
-// 使い方:
-let user = {
- firstName: "John",
- say(time, phrase) {
- alert(`[${time}] ${this.firstName}: ${phrase}!`);
- }
-};
-
-// 最初の引数を固定して何かを表示する部分的なメソッドを追加する
-user.sayNow = partial(user.say, new Date().getHours() + ':' + new Date().getMinutes());
-
-user.sayNow("Hello");
-// このようになります:
-// [10:00] Hello, John!
-```
-
-`partial(func[, arg1, arg2...])` の呼び出しの結果は次のように `func` を呼び出すラッパー `(*)` です。:
-- `this` はそれが取得したものと同じです（`user.sayNow` の場合 `user` です）。
-- 次に、`...argsBound` を与えます -- `partial` 呼び出しからの引数(`"10:00"`)です。
-- 次に、`...args` です -- ラッパーへ与えられた引数(`"Hello"`) です。
-
-なのでスプレッド演算子を使えば簡単ですね。
-
-また、lodashライブラリの [_.partial](https://lodash.com/docs#partial) 実装も用意されています。
-
-## カリー化(Currying)
-
-"カリー化" と呼ばれる別のものと、上で言及された関数の部分適用を混同する人もいます。それらはここで言及しておくべき関数を扱う別の興味深いテクニックです。
-
-[Currying](https://en.wikipedia.org/wiki/Currying) は `f(a, b, c)` と呼び出し可能なものを `f(a)(b)(c)` として呼び出しできるように変換します。
-
-２変数関数に対するカリー化を行う関数 `curry` を作ってみましょう。つまり、`f(a, b)` を `f(a)(b)` に変換します。:
-
-```js run
-*!*
-function curry(func) {
- return function(a) {
- return function(b) {
- return func(a, b);
- };
- };
-}
-*/!*
-
-// 使い方
-function sum(a, b) {
- return a + b;
-}
-
-let carriedSum = curry(sum);
-
-alert( carriedSum(1)(2) ); // 3
-```
-
-上でわかるように、実装はラッパーの連続です。
-
-- `curry(func)` の結果はラッパー `function(a)` です。
-- `sum(1)` のように呼ばれるとき、引数はレキシカル環境に保存され、新しいラッパー `function(b)` が返却されます。
-- そして、最終的に `sum(1)(2)` は `2` で `function(b)` を呼び、それは元の複数引数を取る `sum` を呼びます。
-
-lodash の [_.curry](https://lodash.com/docs#curry) のようなカリー化のより高度な実装は、より洗練された処理を行います。それらの関数は全ての引数が提供された場合には関数が正常に呼び出されるようなラッパーを返し、*そうでない場合* には、部分適用を返します。
-
-```js
-function curry(f) {
- return function(..args) {
- // もし args.length == f.length の場合(f と同じ引数がある場合),
- // 呼び出しを f へ渡す
- // それ以外は argsを最初の引数として固定する部分関数を返す
- };
-}
-```
-
-## カリー化? 何のために?
-
-高度なカリー化を使用すると、簡単に関数を通常呼び出し可能にしつつ、部分適用をすることができます。このメリットを理解するために、価値のある実例を見る必要があります。
-
-例えば、情報を整形して出力するロギング関数 `log(date, importance, message)` を持っているとします。実際のプロジェクトでは、このような関数には、ネットワーク経由での送信やフィルタリングなど、他にも多くの便利な機能があります。
-
-```js
-function log(date, importance, message) {
- alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`);
-}
-```
-
-では、カリー化してみましょう!
-
-```js
-log = _.curry(log);
-```
-
-この処理の後でも `log` は通常の方法で動きます:
-
-```js
-log(new Date(), "DEBUG", "some debug");
-```
-
-...しかしカリー化された形式でも呼び出すことができます:
-
-```js
-log(new Date())("DEBUG")("some debug"); // log(a)(b)(c)
-```
-
-今日のログのための便利な関数を取得してみましょう:
-
-```js
-// todayLog は最初の引数が固定された log の一部になります
-let todayLog = log(new Date());
-
-// 使ってみます
-todayLog("INFO", "message"); // [HH:mm] INFO message
-```
-
-また、これで今日のデバッグメッセージのための便利関数ができます:
-
-```js
-let todayDebug = todayLog("DEBUG");
-
-todayDebug("message"); // [HH:mm] DEBUG message
-```
-
-なので:
-1. カリー化をしても何も失いませんでした。: `log` は以前のように呼び出し可能です。
-2. 色んなケースに応じて便利な部分適用した関数を生成する事ができました。
-
-
-## 高度なカリー実装
-
-ここでは、上記で使用できる "高度な" カリー実装を示します。
-
-```js run
-function curry(func) {
-
- return function curried(...args) {
- if (args.length >= func.length) {
- return func.apply(this, args);
- } else {
- return function(...args2) {
- return curried.apply(this, args.concat(args2));
- }
- }
- };
-
-}
-
-function sum(a, b, c) {
- return a + b + c;
-}
-
-let curriedSum = curry(sum);
-
-// 通常通り呼ぶことも出来ます
-alert( curriedSum(1, 2, 3) ); // 6
-
-// curried(1)で部分を取得し、他の2つの引数で呼び出す
-alert( curriedSum(1)(2,3) ); // 6
-
-// 完全にカリー化された呼び出し
-alert( curriedSum(1)(2)(3) ); // 6
-```
-
-新しい `curry` は複雑に見えますが、実際には理解するのはとても簡単です。
-
-`curry(func)` の結果は、このように `curried` のラッパーです。:
-
-```js
-// func is the function to transform
-function curried(...args) {
- if (args.length >= func.length) { // (1)
- return func.apply(this, args);
- } else {
- return function pass(...args2) { // (2)
- return curried.apply(this, args.concat(args2));
- }
- }
-};
-```
-
-これを実行すると、2つの分岐があります。:
-
-1. 渡された `args` の数と、元の関数で定義されている引数の数が同じ (`func.length`) かより多い場合、単にそれを呼び出し `func` に渡します。
-2. 部分適用を得る: そうでない場合は、`func` はまだ呼ばれません。代わりに別のラッパー `pass` が返却されます。これは `curried` を再度適用して新しい引数と一緒に前の引数を提供します。その後、新しい呼び出しでは、新しい部分適用（引数が不十分な場合）か、最終的に結果が得られます。
-
-例えば、`sum(a, b, c)` のケースで何が起きるのかを見てみましょう。3つの引数があるので、`sum.length = 3` です。
-
-`curried(1)(2)(3)` に対しては次のようになります:
-
-1. 最初の呼び出し `curried(1)` はそのレキシカル環境に `1` を覚え、ラッパー `pass` を返します。
-2. ラッパー `pass` は `(2)` で呼び出されます: それは前の引数（`1`)を取り、渡された `(2)` と連結し `curried(1, 2)` を呼び出します。引数の数としては、以前 3 より少ないので、`curry` は `pass` を返します。
-3. ラッパー `pass` は再び `(3)` で呼ばれ、次は `pass(3)` が以前の引数 (`1`, `2`) を取り、`3` を追加して `curried(1, 2, 3)` を呼び出します。 -- ついに引数が `3` となったので、それらは元の関数に渡されます。
-
-もしまだ不明瞭であれば、心の中、あるいは紙に呼び出しシーケンスをトレースしてみると良いです。
-
-```smart header="固定長の関数のみ"
-カリー化では、関数が固定数の引数を持つ必要があります。
-```
-
-```smart header="カリー化よりもさらに"
-定義上、カリー化は `sum(a, b, c)` を `sum(a)(b)(c)` に変換するべきです。
-
-しかし、JavaScriptでのカリー化のほとんどの実装は説明されているように高度であり、複数引数のバリアントでも関数が呼び出し可能となっています。
-```
-
-## サマリ
-
-- 私たちが既存の関数のいくつかの引数を修正するとき、結果となる(汎用さは減る)関数は、*部分適用* と呼ばれます。部分適用を得るために `bind` を使うことができますが、他の方法でも可能です。
-
- 同じ引数を何度も繰り返し指定したくないとき、部分適用は便利です。それは、私たちが `send(from, to)` 関数を持っていて,
- `from` が常に同じになるような場合です。部分適用を得て処理を続けることができます。
-
-- *カリー化* は `f(a,b,c)` を `f(a)(b)(c)` として呼び出し可能に変換します。JavaScriptの実装は、通常の形で呼び出し可能な関数を維持し、かつ引数が不足している場合には部分適用を返します。
-
- 簡単な部分適用がほしいときにカリー化は素晴らしいです。ロギングの例で見てきたように、カリー化後の汎用的な関数 `log(date, importance, message)` は、1つの引数 `log(date)` または2つの引数 `log(date, importance)` で呼び出された時には部分適用を返します。
diff --git a/1-js/06-advanced-functions/12-arrow-functions/article.md b/1-js/06-advanced-functions/12-arrow-functions/article.md
index 2d8e620366..a60999592f 100644
--- a/1-js/06-advanced-functions/12-arrow-functions/article.md
+++ b/1-js/06-advanced-functions/12-arrow-functions/article.md
@@ -2,9 +2,7 @@
アロー関数について改めて考えてみましょう。
-[cut]
-
-アロー関数は小さなものを書くための単なる "簡略化" ではありません。
+アロー関数は小さなものを書くための単なる "簡略化" ではありません。役立つ特徴がいくつかあります。
JavaScriptは、小さな関数を書く必要がある状況に満ちており、それはいろんな場所で実行されます。
@@ -16,7 +14,7 @@ JavaScriptは、小さな関数を書く必要がある状況に満ちており
関数を作成してどこかに渡すのは、JavaScriptの真髄です。
-そして、このような関数では、私たちは通常現在のコンテキストから離れたくありません。
+そして、このような関数では、私たちは通常現在のコンテキストから離れたくありません。アロー関数はこのようなとき便利です。
## アロー関数は "this" を持っていません
diff --git a/1-js/07-object-oriented-programming/01-property-descriptors/article.md b/1-js/07-object-oriented-programming/01-property-descriptors/article.md
deleted file mode 100644
index bddf688fca..0000000000
--- a/1-js/07-object-oriented-programming/01-property-descriptors/article.md
+++ /dev/null
@@ -1,320 +0,0 @@
-
-# プロパティフラグとディスクリプタ
-
-ご存知の通り、オブジェクトはプロパティを格納することができます。
-
-今まで、プロパティは単純な "key-value" ペアでしたが、実際にはオブジェクトプロパティはより複雑で調整可能なものです。
-
-[cut]
-
-## プロパティフラグ
-
-オブジェクトプロパティは **`value`** に加えて、3つの特別な属性を持っています(いわゆる "フラグ" と呼ばれています)。
-
-- **`writable`** -- `true` の場合は変更可能です。それ以外の場合は読み取り専用です。
-- **`enumerable`** -- `true` だとループで列挙されます。それ以外の場合は列挙されません。
-- **`configurable`** -- `true` の場合、プロパティを削除したり、これらの属性を変更することができます。
-
-私たちは、まだこれらを見ていませんでした。なぜなら、一般的にはこれらは表示されないからです。"通常の方法" でプロパティを作成するとき、これらはすべて `true` です。が、いつでもそれを変更することができます。
-
-まず、それらのフラグを取得する方法を見てみましょう。
-
-メソッド [Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor) で、プロパティの *完全な* 情報を照会することができます。
-
-構文は次の通りです:
-```js
-let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
-```
-
-`obj`
-: 情報を取得するオブジェクトです。
-
-`propertyName`
-: プロパティ名です。
-
-返却値はいわゆる "プロパティディスクリプタ" オブジェクトと呼ばれます。: それは値とすべてのフラグを含んでいます。
-
-例:
-
-```js run
-let user = {
- name: "John"
-};
-
-let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
-
-alert( JSON.stringify(descriptor, null, 2 ) );
-/* プロパティディスクリプタ:
-{
- "value": "John",
- "writable": true,
- "enumerable": true,
- "configurable": true
-}
-*/
-```
-
-[Object.defineProperty](mdn:js/Object/defineProperty) を使うことでフラグを変更することができます。
-
-構文:
-
-```js
-Object.defineProperty(obj, propertyName, descriptor)
-```
-
-`obj`, `propertyName`
-: 処理するオブジェクトとプロパティです。
-
-`descriptor`
-: 適用するプロパティディスクリプタです。
-
-もし、プロパティが存在する場合、`defineProperty` はそのフラグを更新します。そうでなければ、与えられた値とフラグでプロパティを作ります。その場合に、もしフラグが指定されていなければ `false` とみなされます。
-
-例えば、ここではプロパティ `name` はすべて偽のフラグで作られます。:
-
-```js run
-let user = {};
-
-*!*
-Object.defineProperty(user, "name", {
- value: "John"
-});
-*/!*
-
-let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
-
-alert( JSON.stringify(descriptor, null, 2 ) );
-/*
-{
- "value": "John",
-*!*
- "writable": false,
- "enumerable": false,
- "configurable": false
-*/!*
-}
- */
-```
-
-上で "通常の方法で" 作成された `user.name` と比較してください: 今やすべてのフラグは false です。もしそのようにしたくなければ、`descriptor` で `true` をセットするのがよいでしょう。
-
-では、例を使ってフラグの影響を見てみましょう。
-
-## 読み取り専用(Read-only)
-
-`writable` フラグを変更して `user.name` を読み取り専用にしてみましょう:
-
-```js run
-let user = {
- name: "John"
-};
-
-Object.defineProperty(user, "name", {
-*!*
- writable: false
-*/!*
-});
-
-*!*
-user.name = "Pete"; // Error: Cannot assign to read only property 'name'...
-*/!*
-```
-
-これで、`defineProperty` で上書きをしない限りは、誰も私たちの user.name を変えることはできません。
-
-これは先程と同じ操作ですが、プロパティが存在しない場合です:
-
-```js run
-let user = { };
-
-Object.defineProperty(user, "name", {
-*!*
- value: "Pete",
- // 新しいプロパティに対して、true のものは明示的に列挙する必要があります
- enumerable: true,
- configurable: true
-*/!*
-});
-
-alert(user.name); // Pete
-user.name = "Alice"; // Error
-```
-
-
-## 列挙可能でない(Non-enumerable)
-
-今、カスタムの `toString` を `user` に追加しましょう。
-
-通常、オブジェクトが持つ組み込みの `toString` は列挙可能ではありません。それは `for..in` では表示されません。しかし私たちが自身の `toString` を追加した場合、デフォルトではこのように `for..in` で表示されます。:
-
-```js run
-let user = {
- name: "John",
- toString() {
- return this.name;
- }
-};
-
-// デフォルトでは、両方のプロパティは列挙されます:
-for (let key in user) alert(key); // name, toString
-```
-
-もしもそれが好きじゃない場合には、`enumerable:false` をセットすることができます。そうすると、組み込みのものと同じように、`for..in` ループで表示されなくなります。:
-
-```js run
-let user = {
- name: "John",
- toString() {
- return this.name;
- }
-};
-
-Object.defineProperty(user, "toString", {
-*!*
- enumerable: false
-*/!*
-});
-
-*!*
-// これで toString は消えました:
-*/!*
-for (let key in user) alert(key); // name
-```
-
-列挙可能でないプロパティは `Object.keys` からも除外されます。:
-
-```js
-alert(Object.keys(user)); // name
-```
-
-## 変更できない(Non-configurable)
-
-組み込みオブジェクトやプロパティに対しては、変更不能フラグ（`configurable:false`）がプリセットされることがあります。
-
-変更できないプロパティは `defineProperty` で削除したり変更することができません。
-
-例えば、`Math.PI` は読み取り専用で、列挙不可であり、変更不能です。:
-
-```js run
-let descriptor = Object.getOwnPropertyDescriptor(Math, 'PI');
-
-alert( JSON.stringify(descriptor, null, 2 ) );
-/*
-{
- "value": 3.141592653589793,
- "writable": false,
- "enumerable": false,
- "configurable": false
-}
-*/
-```
-したがって、プログラマーは `Math.PI` の値を変えることも上書きすることもできません。
-
-```js run
-Math.PI = 3; // Error
-
-// delete Math.PI もまた動作しません
-```
-
-変更不能なプロパティを作ることは一方通行です。それを戻すことはできません。なぜなら `defineProperty` は変更不能なプロパティでは動作しないためです。
-
-ここでは、 `user.name` を "永遠に密封された" 定数にしています:
-
-```js run
-let user = { };
-
-Object.defineProperty(user, "name", {
- value: "John",
- writable: false,
- configurable: false
-});
-
-*!*
-// user.name またはそのフラグを変更することはできません
-// これらすべて動作しません:
-// user.name = "Pete"
-// delete user.name
-// defineProperty(user, "name", ...)
-Object.defineProperty(user, "name", {writable: true}); // Error
-*/!*
-```
-
-```smart header="use strict の場合にのみエラーとなります"
-非 strict mode では、読み取り専用プロパティなどに書き込むときにエラーは発生しません。 しかし、操作は成功しません。フラグ違反の操作は、非 strict では無視されます。
-```
-
-## Object.defineProperties
-
-一度に多くのプロパティが定義できるメソッド [Object.defineProperties(obj, descriptors)](mdn:js/Object/defineProperties)もあります。
-
-構文は次の通りです:
-
-```js
-Object.defineProperties(obj, {
- prop1: descriptor1,
- prop2: descriptor2
- // ...
-});
-```
-
-例えば:
-
-```js
-Object.defineProperties(user, {
- name: { value: "John", writable: false },
- surname: { value: "Smith", writable: false },
- // ...
-});
-```
-
-なので、一度に多くのプロパティをセットできます。
-
-## Object.getOwnPropertyDescriptors
-
-一度にすべてのプロパティのディスクリプタを取得するには、[Object.getOwnPropertyDescriptors(obj)](mdn:js/Object/getOwnPropertyDescriptors) を使うことができます。
-
-`Object.defineProperties` と合わせて、オブジェクトをクローンする "フラグを意識した" 方法として使うことができます。:
-
-```js
-let clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));
-```
-
-通常、私たちがオブジェクトをクローンするとき、次のようにプロパティをコピーするために代入を使います。:
-
-```js
-for (let key in user) {
- clone[key] = user[key]
-}
-```
-
-...ですが、これはフラグはコピーしません。なので、"より良い" クローンを望むなら、 `Object.defineProperties` が優先されます。
-
-もう１つの違いは、`for..in` はシンボルプロパティを無視しますが、`Object.getOwnPropertyDescriptors` はシンボリックなものを含む *すべての* プロパティディスクリプタを返します。
-
-## グローバルにオブジェクトを隠す
-
-プロパティディスクリプタは個々のプロパティのレベルで動作します。
-
-そこには、オブジェクト *全体* へのアクセスを制限するメソッドもあります。:
-
-[Object.preventExtensions(obj)](mdn:js/Object/preventExtensions)
-: オブジェクトにプロパティを追加するのを禁止します。
-
-[Object.seal(obj)](mdn:js/Object/seal)
-: プロパティの追加、削除を禁止し、既存のすべてのプロパティに `configurable: false` をセットします。
-
-[Object.freeze(obj)](mdn:js/Object/freeze)
-: プロパティの追加、削除、変更を禁止し、既存のすべてのプロパティに `configurable: false, writable: false` をセットします。
-
-また、それらを確認する方法もあります:
-
-[Object.isExtensible(obj)](mdn:js/Object/isExtensible)
-: プロパティの追加が禁止されている場合に `false` を返します。それ以外は `true` です。
-
-[Object.isSealed(obj)](mdn:js/Object/isSealed)
-: プロパティの追加、削除が禁止されており、すべての既存のプロパティが `configurable: false` を持っている場合に `true` を返します。
-
-[Object.isFrozen(obj)](mdn:js/Object/isFrozen)
-: プロパティの追加、削除、変更が禁止されており、すべての現在のプロパティが `configurable: false, writable: false` の場合に `true` を返します。
-
-これらのメソッドは実際にはめったに使われません。
diff --git a/1-js/07-object-oriented-programming/02-property-accessors/article.md b/1-js/07-object-oriented-programming/02-property-accessors/article.md
deleted file mode 100644
index ccca0dc7f4..0000000000
--- a/1-js/07-object-oriented-programming/02-property-accessors/article.md
+++ /dev/null
@@ -1,240 +0,0 @@
-
-# プロパティの getters と setters
-
-プロパティには2種類あります。
-
-最初の種類は *データプロパティ* です。私たちはすでにそれがどうやって動作するのかを知っています。実際、これまで使ってきたすべてのプロパティはデータプロパティでした。
-
-2つ目のプロパティの種類は新しいものです。それは *アクセサプロパティ* です。それらは基本的には値の取得やセットをする関数ですが、外部コードからは通常のプロパティのように見えます。
-
-[cut]
-
-## Getters と setters
-
-アクセサプロパティは "getter" と "setter" メソッドで表現されます。オブジェクトリテラルでは、それらは `get` と `set` で表されますｊ．:
-
-```js
-let obj = {
- *!*get propName()*/!* {
- // getter, obj.propName を取得するときにコードが実行されます
- },
-
- *!*set propName(value)*/!* {
- // setter, obj.propName = value 時にコードが実行されます
- }
-};
-```
-
-`obj.propName` が読まれたときに getter は動作し、setter は割り当てられたときです。
-
-例えば、`name` と `surname` を持つ `user` オブジェクトを持っているとします。:
-
-```js run
-let user = {
- name: "John",
- surname: "Smith"
-};
-```
-
-今、私たちは "John Smith" という値となる "fullName" プロパティを追加したいとします。もちろん、既存の情報のコピーペーストはしたくありません。ここで、アクセサとしてそれを実装することができます。:
-
-```js run
-let user = {
- name: "John",
- surname: "Smith",
-
-*!*
- get fullName() {
- return `${this.name} ${this.surname}`;
- }
-*/!*
-};
-
-*!*
-alert(user.fullName); // John Smith
-*/!*
-```
-
-外部からは、アクセサプロパティは通常の変数に見えます。それがアクセサプロパティの考え方です。私たちは、関数として `user.fullName` を *呼び出すのではなく*、それを通常通り *読み込みます*。: getter は背後で実行されます。
-
-今のところ、 `fullName` は getter しか持っていません。 `user.fullName =` を指定しようとすると、エラーが発生します。
-
-`user.fullName` の setter を追加してそれを修正しましょう。:
-
-```js run
-let user = {
- name: "John",
- surname: "Smith",
-
- get fullName() {
- return `${this.name} ${this.surname}`;
- },
-
-*!*
- set fullName(value) {
- [this.name, this.surname] = value.split(" ");
- }
-*/!*
-};
-
-// set fullName は指定された値で実行されます
-user.fullName = "Alice Cooper";
-
-alert(user.name); // Alice
-alert(user.surname); // Cooper
-```
-
-今 "仮想" プロパティを持っています。 読み書き可能ですが、実際には存在しません。
-
-```smart header="アクセサプロパティは get/set でのみアクセス可能です"
-プロパティは、 "データプロパティ" か "アクセサプロパティ" のいずれかになりますが、両方にはなりません。
-
-プロパティが `get prop()` または `set prop()` で定義されると、それはアクセサプロパティです。 なので、getter で読まなければなりません。それに値を割り当てたいならば、setter を使わなければなりません。
-
-setter または getter だけがある場合もあります。この場合は、プロパティの読み込みまたは書き込みはできません。
-
-```
-
-
-## アクセサディスクリプタ
-
-アクセサプロパティのためのディスクリプタは、データプロパティと比べて異なります。
-
-アクセサプロパティでは、`value` と `writable` がありませんが、代わりに、`get` と `set` 関数があります。
-
-したがって、アクセサディスクリプタには次のものがあります:
-
-- **`get`** -- 引数なしの関数で、プロパティが読まれたときに動作します。
-- **`set`** -- 1つの引数をもつ巻数で、プロパティがセットされたときに呼ばれます。
-- **`enumerable`** -- データプロパティと同じです。
-- **`configurable`** -- データプロパティと同じです。
-
-例えば、アクセサ `fullName` を `defineProperty` で作るとき、`get` と `set` をディスクリプタに渡すことができます。:
-
-```js run
-let user = {
- name: "John",
- surname: "Smith"
-};
-
-*!*
-Object.defineProperty(user, 'fullName', {
- get() {
- return `${this.name} ${this.surname}`;
- },
-
- set(value) {
- [this.name, this.surname] = value.split(" ");
- }
-*/!*
-});
-
-alert(user.fullName); // John Smith
-
-for(let key in user) alert(key);
-```
-
-プロパティはアクセサかデータプロパティのいずれかになれますが、両方に離れないことに再度注意してください。
-
-もしも `get` と `value` を同じディスクリプタで指定しようとすると、エラーになります。:
-
-```js run
-*!*
-// Error: Invalid property descriptor.
-*/!*
-Object.defineProperty({}, 'prop', {
- get() {
- return 1
- },
-
- value: 2
-});
-```
-
-## スマートな getters/setters
-
-Getter/setter は、実際のプロパティ値をラッパーとして使用して、より多くのコントロールを得ることができます。
-
-例えば、`user` で短すぎる名前を禁止したい場合、`name` を特別なプロパティ `_name` に格納することができます。そして、setter で割り当てをフィルタします。:
-
-```js run
-let user = {
- get name() {
- return this._name;
- },
-
- set name(value) {
- if (value.length < 4) {
- alert("Name is too short, need at least 4 characters");
- return;
- }
- this._name = value;
- }
-};
-
-user.name = "Pete";
-alert(user.name); // Pete
-
-user.name = ""; // Name is too short...
-```
-
-技術的には、外部コードは `user._name` を使うことで、直接 name にアクセスできるかもしれません。しかし、アンダースコア `"_"` で始まるプロパティは内部のもので、外部のオブジェクトから触るべきではないということは広く知られています。
-
-
-## 互換性のために使用する
-
-getter と setter の裏にある素晴らしいアイデアの1つは -- それらは "通常の" データプロパティを制御し、それをいつでも調整することができます。
-
-例えば、データプロパティ `name` と `age` を使って user オブジェクトを実装し始めました。:
-
-```js
-function User(name, age) {
- this.name = name;
- this.age = age;
-}
-
-let john = new User("John", 25);
-
-alert( john.age ); // 25
-```
-
-...しかし、遅かれ早かれ、それを変更するかもしれません。より正確で便利のため、`age` の代わりに `birthday` を格納することに決めるかもしれません。:
-
-```js
-function User(name, birthday) {
- this.name = name;
- this.birthday = birthday;
-}
-
-let john = new User("John", new Date(1992, 6, 1));
-```
-
-さて、まだ `age` プロパティを使っている古いコードはどうすればよいでしょうか？
-
-そのような箇所をすべて見つけて直していくこともできますが、時間がかかったり別の人が書いているコードであれば直すのが難しいかもしれません。その上、`age` は `user` が持っていても良いものですよね？場所によってはそれを必要とするかもしれません。
-
-`age` の getter を追加すると、問題が緩和されます:
-
-```js run no-beautify
-function User(name, birthday) {
- this.name = name;
- this.birthday = birthday;
-
-*!*
- // age は現在の日付と誕生日から計算されます
- Object.defineProperty(this, "age", {
- get() {
- let todayYear = new Date().getFullYear();
- return todayYear - this.birthday.getFullYear();
- }
- });
-*/!*
-}
-
-let john = new User("John", new Date(1992, 6, 1));
-
-alert( john.birthday ); // birthday は利用可能です
-alert( john.age ); // ...age も同様です
-```
-
-これで古いコードも機能します。
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/task.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/task.md
deleted file mode 100644
index b6291aef30..0000000000
--- a/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/task.md
+++ /dev/null
@@ -1,35 +0,0 @@
-importance: 5
-
----
-
-# なぜ2匹のハムスターがお腹一杯？
-
-私たちは2匹のハムスターを持っています: `speedy` と `lazy` は一般的な `hamster` オブジェクトを継承しています。
-
-そのうちの1匹に餌をやるとき、もう1匹もお腹一杯になります。なぜでしょう？どのような直しますか？
-
-```js run
-let hamster = {
- stomach: [],
-
- eat(food) {
- this.stomach.push(food);
- }
-};
-
-let speedy = {
- __proto__: hamster
-};
-
-let lazy = {
- __proto__: hamster
-};
-
-// 一方が食べ物を見つけました
-speedy.eat("apple");
-alert( speedy.stomach ); // apple
-
-// もう一方も持っています。なぜでしょう？直してください。
-alert( lazy.stomach ); // apple
-```
-
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md
deleted file mode 100644
index 6cbc549344..0000000000
--- a/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md
+++ /dev/null
@@ -1,254 +0,0 @@
-# プロトタイプ継承
-
-プログラミングでは、何かを取ってそれを拡張することがしばしばあります。
-
-例えば、プロパティとメソッドをもつ `user` オブジェクトを持っているとします。そして、そのいくつかを僅かに変更した `admin` や `guest` を作りたいとします。コピーや再実装ではなく、単にその上に新しいオブジェクトを作成することで、`user` が持っているものを再利用したいです。
-
-*プロトタイプ継承* はそれを助ける言語の機能です。
-
-[cut]
-
-## プロトタイプ [[Prototype]]
-
-JavaScriptでは、オブジェクトは特別な隠しプロパティ `[[Prototype]]` を持っており、それは `null` または別のオブジェクトを参照します。そのオブジェクトは "プロトタイプ" と呼ばれます。
-
-
-
-`[[Prototype]]` は "魔法のような" 意味を持っています。私たちが `object` からプロパティを読みたいときで、それがない場合、JavaScriptは自動的に、プロトタイプからそれを取得します。プログラミングではこのようなことを "プロトタイプ継承" と呼びます。多くのクールな言語機能やプログラミングテクニックは、これがベースになっています。
-
-プロパティ `[[Prototype]]` は内部であり隠されていますが、セットする多くの方法があります。
-
-それらの１つは、次のように `__proto__` を使う方法です:
-
-```js run
-let animal = {
- eats: true
-};
-let rabbit = {
- jumps: true
-};
-
-*!*
-rabbit.__proto__ = animal;
-*/!*
-```
-
-`__proto__` は `[[Prototype]]` と *同一ではない* ことに注意してください。これはそのための getter/setter です。あとでセットする別の方法について話しますが、今のところ `__proto__` の理解はそれで問題ありません。
-
-もしも `rabbit` の中のプロパティを探し、それがない場合、JavaScriptは自動で `animal` からそれを取ります。
-
-例:
-
-```js run
-let animal = {
- eats: true
-};
-let rabbit = {
- jumps: true
-};
-
-*!*
-rabbit.__proto__ = animal; // (*)
-*/!*
-
-// 今、rabbit で両方のプロパティを見つけることができます:
-*!*
-alert( rabbit.eats ); // true (**)
-*/!*
-alert( rabbit.jumps ); // true
-```
-
-ここで、行 `(*)` は `rabbit` のプロトタイプに `animal` をセットしています。
-
-次に、`alert` がプロパティ `rabbit.eats` `(**)` を読もうとしたとき、それは `rabbit` にはないので、JavaScriptは `[[Prototype]]` 参照に従って、`animal` の中でそれを見つけます(下から上に向かいます)。
-
-
-
-ここでは、私たちは "`animal` は `rabbit` のプロトタイプ" または "`rabbit` がプロトタイプ的に `animal` を継承している" という事ができます。"
-
-したがって、もし `animal` が多くの役立つプロパティやメソッドを持っている場合、それらは自動的に `rabbit` でも利用可能になります。
-このようなプロパティは "継承" と呼ばれます。
-
-もし `animal` がメソッドを持っている場合、`rabbit` でもそれを呼ぶことができます:
-
-```js run
-let animal = {
- eats: true,
-*!*
- walk() {
- alert("Animal walk");
- }
-*/!*
-};
-
-let rabbit = {
- jumps: true,
- __proto__: animal
-};
-
-// walk は prototype から取られました
-*!*
-rabbit.walk(); // Animal walk
-*/!*
-```
-
-メソッドは次のように自動的にプロトタイプから取られます。:
-
-
-
-プロトタイプチェーンは長くても問題ありません。:
-
-
-```js run
-let animal = {
- eats: true,
- walk() {
- alert("Animal walk");
- }
-};
-
-let rabbit = {
- jumps: true,
- __proto__: animal
-};
-
-let longEar = {
- earLength: 10,
- __proto__: rabbit
-}
-
-// walk は prototype チェーンから取られました
-longEar.walk(); // Animal walk
-alert(longEar.jumps); // true (rabbit から)
-```
-
-
-
-実際には、2つの制限があります。:
-
-1. 参照を循環させることはできません。JavaScriptは、循環するように `__proto__` を割り当てようとするとエラーを投げます。
-2. `__proto__` の値はオブジェクトまたは `null` になります。プリミティブのような、それ以外のすべての値は無視されます。
-
-また、それは明らかかもしれませんが、1つの `[[Prototype]]` しか存在しません。 オブジェクトは2つの他のものから継承することはできません。
-
-## 読み書きのルール
-
-プロトタイプは、プロパティを読むためだけに使われます。
-
-データプロパティ(getter/setter ではない)の場合、書き込み/削除操作はオブジェクトで直接動作します。
-
-下の例では、自身の `walk` メソッドを `rabbit` に割り当てています。:
-
-```js run
-let animal = {
- eats: true,
- walk() {
- /* このメソッドは rabbit では使われません */
- }
-};
-
-let rabbit = {
- __proto__: animal
-}
-
-*!*
-rabbit.walk = function() {
- alert("Rabbit! Bounce-bounce!");
-};
-*/!*
-
-rabbit.walk(); // Rabbit! Bounce-bounce!
-```
-
-これ以降、`rabbit.walk()` 呼び出しは、プロトタイプを使うことなく、オブジェクトの中にすぐにメソッドを見つけ、それを実行します。
-
-
-
-getter/setter の場合 -- もしプロパティの読み書きをすると、プロトタイプで参照されて呼び出されます。
-
-例えば、以下のコードで `admin.fullName` プロパティをチェックしてください:
-
-```js run
-let user = {
- name: "John",
- surname: "Smith",
-
- set fullName(value) {
- [this.name, this.surname] = value.split(" ");
- },
-
- get fullName() {
- return `${this.name} ${this.surname}`;
- }
-};
-
-let admin = {
- __proto__: user,
- isAdmin: true
-};
-
-alert(admin.fullName); // John Smith (*)
-
-// setter がトリガします!
-admin.fullName = "Alice Cooper"; // (**)
-```
-
-ここで、行 `(*)` では、プロパティ `admin.fullName` はプロトタイプ `user` が getter を持っているので、それが呼ばれます。また、行 `(**)` では、プロパティはプロトタイプに setter を持っているので、それが呼ばれます。
-
-## "this" の値
-
-上の例で、興味深い質問が起きるかもしれません。: `set fullName(value)` の内側での `this` の値はなんでしょうか？
-プロパティ `this.name` と `this.surname` が書かれているのはどこでしょうか？ `user` または `admin` ?
-
-答えはシンプルです: `this` はプロトタイプによる影響を持ったく受けません。
-
-**メソッドがどこにあるかは関係ありません：オブジェクトの中でも、そのプロトタイプ内でも。メソッド呼び出しでは、`this` は常にドットの前のオブジェクトです。**
-
-したがって、setter は実際に `this` として `admin` を使い、`user` ではありません。
-
-それは、実際には非常に重要なことです。なぜなら、多くのメソッドを持つ大きなオブジェクトを持ち、それを継承する可能性があるからです。次に、継承されたオブジェクトの上でそれらのメソッドを実行し、大きなオブジェクトではなく、継承したオブジェクトの状態を変更します。
-
-例えば、ここでは `animal` は "メソッド格納域" を表現しており、`rabbit` はそれを使います。
-
-呼び出し `rabbit.sleep()` は `rabbit` オブジェクトに `this.isSleeping` をセットします。:
-
-```js run
-// animal がメソッドを持っています
-let animal = {
- walk() {
- if (!this.isSleeping) {
- alert(`I walk`);
- }
- },
- sleep() {
- this.isSleeping = true;
- }
-};
-
-let rabbit = {
- name: "White Rabbit",
- __proto__: animal
-};
-
-// rabbit.isSleeping を変更する
-rabbit.sleep();
-
-alert(rabbit.isSleeping); // true
-alert(animal.isSleeping); // undefined (prototype にそのようなプロパティはありません)
-```
-
-結果の図は次のようになります:
-
-
-
-もしも私たちが `bird`, `snake` など `animal` から継承された他のオブジェクトを持っていた場合、それらもまた `animal` のメソッドへのアクセスを得ます。しかし各メソッドでの `this` は対応するオブジェクトであり、`animal` ではなく、呼び出し時に（前のドット）で評価されます。 だから私たちが `this` にデータを書き込むとき、それはこれらのオブジェクトに格納されます。
-
-結果として、メソッドは共有されますが、オブジェクトの状態は共有されません。
-
-## サマリ
-
-- JavaScriptでは、すべてのオブジェクトは隠れた `[[Prototype]]` プロパティを持っており、それは別のオブジェクトまたは `null` です。
-- それにアクセスするために `obj.__proto__` を使うことができます(他の方法もあります。それらは後ほど学びます)。
-- `[[Prototype]]` によるオブジェクトの参照は "プロトタイプ" と呼ばれます。
-- もしも `obj` のプロパティを読みたい、またはメソッドを呼び出したいが存在しない場合、JavaScriptはそれをプロトタイプの中で見つけようとします。書き込み/削除操作はオブジェクトに対して直接動作し、プロトタイプを使いません(プロパティが setter でない限り)。
-- もしも `obj.method()` を呼び出し、`method` がプロトタイプから取られた場合も、`this` は依然として `obj` を参照します。したがって、メソッドはたとえ継承されていたとしても、常に現在のオブジェクトで動作します。
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty.png
deleted file mode 100644
index 1d228b5c8a..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty@2x.png
deleted file mode 100644
index a4c195ad69..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/object-prototype-empty@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain.png
deleted file mode 100644
index a302343e2d..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain@2x.png
deleted file mode 100644
index 4d3311998e..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-chain@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2.png
deleted file mode 100644
index 19c1881a2f..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png
deleted file mode 100644
index cd38624ab0..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3.png
deleted file mode 100644
index 0ea869d3c5..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png
deleted file mode 100644
index 194db77edd..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk.png
deleted file mode 100644
index 5bd2111474..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk@2x.png
deleted file mode 100644
index 1e4ef6efbd..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit-walk@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit.png
deleted file mode 100644
index c18e020525..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit@2x.png
deleted file mode 100644
index 4d9e8ec094..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-animal-rabbit@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin.png
deleted file mode 100644
index aed69c59e0..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin@2x.png b/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin@2x.png
deleted file mode 100644
index 2b11b2568b..0000000000
Binary files a/1-js/07-object-oriented-programming/03-prototype-inheritance/proto-user-admin@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/article.md b/1-js/07-object-oriented-programming/04-function-prototype/article.md
deleted file mode 100644
index 87c1dc4959..0000000000
--- a/1-js/07-object-oriented-programming/04-function-prototype/article.md
+++ /dev/null
@@ -1,176 +0,0 @@
-# F.prototype
-
-最新のJavaScriptでは、前の記事で説明したとおり、`__proto__` を使ってプロトタイプをセットすることができます。しかし、それはいつでもそうではありませんでした。
-
-[cut]
-
-JavaScriptは最初からプロトタイプの継承を持っています。 それは言語の中心的な特徴の1つでした。
-
-しかし、以前は別(であり唯一)の方法がありました。: コンストラクタ関数の `"prototype"` プロパティを使うことです。そして、それを使っているスクリプトはまだたくさんあります。
-
-## "prototype" プロパティ
-
-すでにご存知の通り、`new F()` は新しいオブジェクトを作ります。
-
-`new F()` で新しいオブジェクトが作られるとき、オブジェクトの `[[Prototype]]` は `F.prototype` にセットされます。
-
-言い換えると、もし `F` がオブジェクト型の値をもつ `prototype` プロパティを持っている場合、`new` 演算子は新しいオブジェクトに対してそれを `[[Prototype]]` にセットします。
-
-ここで `F.prototype` は `F` 上の `"prototype"` と名付けられた通常のプロパティを意味していることに注意してください。用語 "プロトタイプ" と似ていますが、ここでは本当にその名前をもつ通常のプロパティを意味しています。
-
-
-ここではその例です:
-
-```js run
-let animal = {
- eats: true
-};
-
-function Rabbit(name) {
- this.name = name;
-}
-
-*!*
-Rabbit.prototype = animal;
-*/!*
-
-let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal
-
-alert( rabbit.eats ); // true
-```
-
-`Rabbit.prototype = animal` の設定は、文字通り次のことを述べています。: "`new Rabbit` が生成される時、その `[[Prototype]]` へ `animal` を割り当てます。"
-
-これが結果のイメージです:
-
-
-
-イメージ上で、`"prototype"` は水平矢印で、それは通常のプロパティです。`[[Prototype]]` は縦矢印で、`animal` から `rabbit` の継承を意味しています。
-
-
-## デフォルトの F.prototype, constructor プロパティ
-
-すべての関数は、たとえ明示的に提供されていなくても `"prototype"` プロパティを持っています。
-
-デフォルトの `"prototype"` は `constructor` というプロパティだけを持つオブジェクトで、それは関数自体を指します。
-
-こんな感じです:
-
-```js
-function Rabbit() {}
-
-/* デフォルト prototype
-Rabbit.prototype = { constructor: Rabbit };
-*/
-```
-
-
-
-コードでそれを確認できます:
-
-```js run
-function Rabbit() {}
-// デフォルトでは:
-// Rabbit.prototype = { constructor: Rabbit }
-
-alert( Rabbit.prototype.constructor == Rabbit ); // true
-```
-
-当然、何もしない場合、 `constructor` プロパティは `[[Prototype]]` を通じてすべての rabbit が利用できます。:
-
-```js run
-function Rabbit() {}
-// デフォルトでは:
-// Rabbit.prototype = { constructor: Rabbit }
-
-let rabbit = new Rabbit(); // {constructor: Rabbit} の継承
-
-alert(rabbit.constructor == Rabbit); // true (prototype から)
-```
-
-
-
-`constructor` プロパティを使って既存のものと同じコンストラクタを使って新しいオブジェクトを作成することができます。
-
-このように:
-
-```js run
-function Rabbit(name) {
- this.name = name;
- alert(name);
-}
-
-let rabbit = new Rabbit("White Rabbit");
-
-*!*
-let rabbit2 = new rabbit.constructor("Black Rabbit");
-*/!*
-```
-
-これは、オブジェクトを持っているが、どのコンストラクタが使われたか分からない場合(例えば3rdパーティライブラリが使われているなど)で、同じ種類のものを使って別のオブジェクトを作る必要がある場合に便利です。
-
-しかし、おそらく `"constructor"` に関する最も重要なことは...
-
-**...JavaScript 自体は正しい `"constructor"` 値を保証しません。**
-
-はい、関数のためのデフォルトの `"prototype"` は存在しますが、それがすべてです。その後どうなるかは私たち次第です。
-
-特に、もしデフォルトプロトタイプ全体を置き換えると、その中に `"constructor"` はなくなります。
-
-例:
-
-```js run
-function Rabbit() {}
-Rabbit.prototype = {
- jumps: true
-};
-
-let rabbit = new Rabbit();
-*!*
-alert(rabbit.constructor === Rabbit); // false
-*/!*
-```
-
-したがって、正しい `"constructor"` を維持するためには、全体を上書きする代わりに、デフォルト `"prototype"` に対して追加/削除を行います。:
-
-```js
-function Rabbit() {}
-
-// 完全に Rabbit.prototype を上書きはしません
-// 単に追加するだけです
-Rabbit.prototype.jumps = true
-// デフォルト Rabbit.prototype.constructor は保持されます
-```
-
-もしくは、代替として手動で `constructor` プロパティを再び作ります。:
-
-```js
-Rabbit.prototype = {
- jumps: true,
-*!*
- constructor: Rabbit
-*/!*
-};
-
-// 追加したので、これで constructor も正しいです
-```
-
-## サマリ
-
-このチャプターでは、constructor 関数を通して作成されたオブジェクトのための `[[Prototype]]` を設定方法について簡単に説明しました。後で、それに依存するより高度なプログラミングパターンを見ていきます。
-
-すべてが非常にシンプルで、物事を明確にするための留意事項はほんの少しです。:
-
-- `F.prototype` プロパティは `[[Prototype]]` と同じではありません。`F.prototype` がする唯一のことは: `new F()` が呼ばれたときに新しいオブジェクトの `[[Prototype]]` をセットすることです。
-- `F.prototype` の値はオブジェクトまたは null でなければなりません。: 他の値では動作しません。
-- `"prototype"` プロパティはコンストラクタ関数に設定され、`new` で呼び出されたときにのみ、特別な効果があります。
-
-通常のオブジェクトでは、`prototype` は特別なものではありません。:
-```js
-let user = {
- name: "John",
- prototype: "Bla-bla" // no magic at all
-};
-```
-
-デフォルトでは、すべての関数は `F.prototype = { constructor: F }` を持っているので、その `"constructor"` プロパティへアクセスすることで、オブジェクトの constructor を取得することができます。
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor.png b/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor.png
deleted file mode 100644
index 0dbc7b8fc4..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor@2x.png
deleted file mode 100644
index e38cb85bd9..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/function-prototype-constructor@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring.png
deleted file mode 100644
index 83258d0614..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring@2x.png
deleted file mode 100644
index d77cc8f4ec..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-array-tostring@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes.png
deleted file mode 100644
index fa6a2943f6..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes@2x.png
deleted file mode 100644
index 9368d7e502..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/native-prototypes-classes@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1.png
deleted file mode 100644
index e7c6bdb212..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1@2x.png
deleted file mode 100644
index 34c256bbfd..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype-1@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype.png
deleted file mode 100644
index d97d87d2c3..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/object-prototype@2x.png
deleted file mode 100644
index 76ce4c9ac5..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/object-prototype@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit.png b/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit.png
deleted file mode 100644
index 3eec740fbb..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit@2x.png
deleted file mode 100644
index ed28a388a0..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/proto-constructor-animal-rabbit@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object.png
deleted file mode 100644
index 3254270f38..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object@2x.png
deleted file mode 100644
index f794d7b84a..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-animal-object@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor.png
deleted file mode 100644
index d3ef344852..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor@2x.png
deleted file mode 100644
index 45cbb6baab..0000000000
Binary files a/1-js/07-object-oriented-programming/04-function-prototype/rabbit-prototype-constructor@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/article.md b/1-js/07-object-oriented-programming/05-native-prototypes/article.md
deleted file mode 100644
index 42fa808aa0..0000000000
--- a/1-js/07-object-oriented-programming/05-native-prototypes/article.md
+++ /dev/null
@@ -1,179 +0,0 @@
-# ネイティブのプロトタイプ
-
-`"prototype"` プロパティはJavaScript自身のコア部分で広く使われています。すべての組み込みのコンストラクタ関数はそれを使っています。
-
-最初に単純なオブジェクトの場合を、次により複雑なオブジェクトの場合にどのようになるかを見ていきましょう。
-
-## Object.prototype
-
-空のオブジェクトを出力してみましょう。:
-
-```js run
-let obj = {};
-alert( obj ); // "[object Object]" ?
-```
-
-文字列 `"[object Object]"` を生成するコードはどこにあるのでしょう？ それは組み込みの `toString` メソッドですが、どこにあるのでしょう？ `obj` は空です!
-
-...しかし、短い記法 `obj = {}` は `obj = new Object()` と同じで、その `Object` は -- 組み込みのオブジェクトコンストラクタ関数です。その関数は `toString` や他の関数を持つ巨大なオブジェクトを参照する `Object.prototype` を持っています。
-
-このようになります(すべて組み込みです):
-
-
-
-`new Object()` が呼ばれた(もしくはリテラルオブジェクト `{...}` が作られた)とき、その `[[Prototype]]` は前のチャプターで私たちが話してきたルールによって、 `Object.prototype` にセットされます。:
-
-
-
-その後、`obj.toString()` が呼ばれると -- `Object.prototype` からメソッドが取り出されます。
-
-このようにして、それを確認することができます:
-
-```js run
-let obj = {};
-
-alert(obj.__proto__ === Object.prototype); // true
-// obj.toString === obj.__proto__.toString == Object.prototype.toString
-```
-
-上の `Object.prototype` のチェーンで、追加の `[[Prototype]]` がないことに注意してください。:
-
-```js run
-alert(Object.prototype.__proto__); // null
-```
-
-## 他の組み込みのプロトタイプ
-
-`Array`, `Date`, `Function` のような、他の組み込みのプロトタイプもまたプロトタイプにメソッドを保持しています。
-
-例えば、配列 `[1, 2, 3]` を作るとき、デフォルトの `new Array()` コンストラクタが内部で使われます。なので、配列データは新しいオブジェクトに書き込まれ、`Array.prototype` はそのプロトタイプとなり、メソッドを提供します。これは非常にメモリ効率が良いです。
-
-仕様では、すべての組み込みのプロトタイプは先頭に `Object.prototype` を持っています。なので、"すべてはオブジェクトを継承している" という人もいます。
-
-全体図は次のとおりです（3つの組み込みについて書いています）:
-
-
-
-プロトタイプを手動でチェックしてみましょう。:
-
-```js run
-let arr = [1, 2, 3];
-
-// Array.prototype から継承している?
-alert( arr.__proto__ === Array.prototype ); // true
-
-// 次に Object.prototype からは継承している?
-alert( arr.__proto__.__proto__ === Object.prototype ); // true
-
-// そしてトップの null
-alert( arr.__proto__.__proto__.__proto__ ); // null
-```
-
-プロトタイプのメソッドのいくつかは重複する可能性があります。例えば、`Array.prototype` はカンマ区切りで要素を表示する自身の `toString` を持っています。:
-
-```js run
-let arr = [1, 2, 3]
-alert(arr); // 1,2,3 <-- Array.prototype.toString の結果
-```
-
-以前見たように、`Object.prototype` も同様に `toString` を持っていますが、`Array.prototype` はチェーンでより近いので、配列のバリアントが使われます。
-
-
-
-
-Chrome developer console のようなブラウザ内のツールでも継承を表示できます(組み込みオブジェクトのために `console.fir` を使う必要があるかもしれません)。
-
-
-
-他の組み込みオブジェクトも同じように動作します。関数でさえも。それらは組み込みの `Function` コンストラクタのオブジェクトであり、メソッドです: `call/apply` など、`Function.prototype` から取り出されたものです。関数には独自の `toString`もあります。
-
-```js run
-function f() {}
-
-alert(f.__proto__ == Function.prototype); // true
-alert(f.__proto__.__proto__ == Object.prototype); // true, object からの継承
-```
-
-## プリミティブ(Primitives)
-
-最も複雑なことは、文字列、数値、ブール値で起こります。
-
-覚えている通り、それらはオブジェクトではありません。しかし、それらのプロパティへアクセスをしようとした場合、組み込みのコンストラクタ `String`, `Number`, `Boolean` を使った一時的なラッパーオブジェクトが作られます。それらはメソッドを提供し、消えます。
-
-それらのオブジェクトは我々には見えない形で作られ、ほとんどのエンジンはそれらを最適化しますが、仕様ではこのように正確に説明されています。それらのオブジェクトのメソッドもまた `String.prototype`, `Number.prototype` や `Boolean.prototype` として利用可能なものとしてプロトタイプに存在します。
-
-```warn header="値 `null` と `undefined` はオブジェクトラッパーを持っていません"
-特別な値 `null` や `undefined` は別です。それらはオブジェクトラッパーを持ちません。そのため、利用可能なメソッドやプロパティはありません。また、それらに対応するプロトタイプもありません。
-```
-
-## ネイティブプロトタイプの変更
-
-ネイティブプロトタイプは変更することができます。例えば、もしあるメソッドを `String.prototype` に追加した場合、それはすべての文字列で利用可能になります。:
-
-```js run
-String.prototype.show = function() {
- alert(this);
-};
-
-"BOOM!".show(); // BOOM!
-```
-
-開発の過程で、私たちは新しい組み込みメソッドを持っていたいと考えているかもしれません。そして、それをネイティブプロトタイプに加えたいという、若干の誘惑があるかもしれません。 しかし、それは一般的には悪い考えです。
-
-プロトタイプはグローバルです。なので、コンフリクトを起こしやすいです。もし２つのライブラリがメソッド `String.prototype.show` を追加している場合、片方はもう一方に上書きされます。
-
-現代のプログラミングでは、ネイティブプロトタイプの変更が認められたケースが１つだけあります。それはポリフィルです。言い換えると、もし我々のJavaScriptエンジン(または我々がサポートしたいもの)がまだサポートしていないJavaScript仕様上のメソッドがある場合、それを手動で実装し、組み込みのプロトタイプにそれを取り込むことができます。
-
-例:
-
-```js run
-if (!String.prototype.repeat) { // もしこのようなメソッドがない場合
- // prototype に追加します
-
- String.prototype.repeat = function(n) {
- // 文字列を n 回繰り返す
-
- // 実際、このコードはこれより複雑になります
- // "n" の負の値に対するエラーのスロー
- // 完全なアルゴリズムは仕様にあります
- return new Array(n + 1).join(this);
- };
-}
-
-alert( "La".repeat(3) ); // LaLaLa
-```
-
-## プロトタイプからの借用
-
-チャプター で私たちはメソッドの借用について話しました。:
-
-```js run
-function showArgs() {
-*!*
- // 配列から join を借り、引数コンテキストでそれを呼び出す
- alert( [].join.call(arguments, " - ") );
-*/!*
-}
-
-showArgs("John", "Pete", "Alice"); // John - Pete - Alice
-```
-
-`join` は `Array.prototype` にあるため、そこから直接呼び出すことができ、次のように書き直すことができます:
-
-```js
-function showArgs() {
-*!*
- alert( Array.prototype.join.call(arguments, " - ") );
-*/!*
-}
-```
-
-これは、余分な配列オブジェクト `[]` の作成を避けることができるので、より効率的です。一方で記述は長いですが。
-
-## サマリ
-
-- すべての組み込みオブジェクトは同じパターンに従います。:
- - メソッドはプロトタイプに保持されています(`Array.prototype`, `Object.prototype`, `Date.prototype` など)。
- - オブジェクト自身はデータのみを保持します(配列アイテム、オブジェクトプロパティ、日付)。
-- プリミティブもまたラッパーオブジェクトのプロトタイプにメソッドを保持します。: `Number.prototype`, `String.prototype`, `Boolean.prototype` 。`undefined` と `null` にだけはラッパーオブジェクトはありません。
-- 組み込みのプロトタイプを変更したり、新しいメソッドを実装することができます。 しかし、それを変更することはお勧めしません。 おそらく唯一許可されるケースは、新しい標準を追加したがまだエンジンのJavaScriptメソッドではサポートされていないときだけです。
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor.png b/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor.png
deleted file mode 100644
index 0dbc7b8fc4..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor@2x.png
deleted file mode 100644
index e38cb85bd9..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/function-prototype-constructor@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring.png
deleted file mode 100644
index 83258d0614..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring@2x.png
deleted file mode 100644
index d77cc8f4ec..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-array-tostring@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes.png
deleted file mode 100644
index fa6a2943f6..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes@2x.png
deleted file mode 100644
index 9368d7e502..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/native-prototypes-classes@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1.png
deleted file mode 100644
index e7c6bdb212..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1@2x.png
deleted file mode 100644
index 34c256bbfd..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-1@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null.png
deleted file mode 100644
index 7c2e3f9c78..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null@2x.png
deleted file mode 100644
index fec1facb0b..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype-null@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype.png
deleted file mode 100644
index d97d87d2c3..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype@2x.png
deleted file mode 100644
index 76ce4c9ac5..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/object-prototype@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit.png b/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit.png
deleted file mode 100644
index 3eec740fbb..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit@2x.png
deleted file mode 100644
index ed28a388a0..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/proto-constructor-animal-rabbit@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor.png b/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor.png
deleted file mode 100644
index d3ef344852..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor@2x.png b/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor@2x.png
deleted file mode 100644
index 45cbb6baab..0000000000
Binary files a/1-js/07-object-oriented-programming/05-native-prototypes/rabbit-prototype-constructor@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/article.md b/1-js/07-object-oriented-programming/06-prototype-methods/article.md
deleted file mode 100644
index a70843e777..0000000000
--- a/1-js/07-object-oriented-programming/06-prototype-methods/article.md
+++ /dev/null
@@ -1,259 +0,0 @@
-
-# プロトタイプのためのメソッド
-
-このチャプターでは、プロトタイプを操作する追加のメソッドを説明します。
-
-私たちがすでに知っている方法以外にも、プロトタイプを get/set する方法があります。
-
-- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- 与えられた `proto` を `[[Prototype]]` として、また任意のプロパティディスクリプタで空のオブジェクトを作ります。
-- [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- `obj` の `[[Prototype]]` を返します。
-- [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- `obj` の `[[Prototype]]` に `proto` をセットします。
-
-[cut]
-
-例:
-
-```js run
-let animal = {
- eats: true
-};
-
-// animal をプロトタイプとして新しいオブジェクトを作成する
-*!*
-let rabbit = Object.create(animal);
-*/!*
-
-alert(rabbit.eats); // true
-*!*
-alert(Object.getPrototypeOf(rabbit) === animal); // rabbit のプロトタイプを取得
-*/!*
-
-*!*
-Object.setPrototypeOf(rabbit, {}); // rabbit のプロトタイプを {} に変更
-*/!*
-```
-
-`Object.create` は任意の2つ目の引数を持っています: プロパティディスクリプタです。私たちはこのように、新しいオブジェクトに追加のプロパティを提供することができます。:
-
-```js run
-let animal = {
- eats: true
-};
-
-let rabbit = Object.create(animal, {
- jumps: {
- value: true
- }
-});
-
-alert(rabbit.jumps); // true
-```
-
-ディスクリプタはチャプター で説明したのと同じフォーマットです。
-
-`for..in` でプロパティをコピーするよりも、よりパワフルにオブジェクトをクローンするために `Object.create` を使うことができます。:
-
-
-```js
-// 完全に同一の obj の浅いクローン
-let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
-```
-
-この呼び出しはすべてのプロパティを含む `obj` の本当の正確なコピーを作ります。: 列挙型、非列挙型、データプロパティ、setter/getter -- すべてと、正確な `[[Prototype]]` です。
-
-## 略史
-
-もし `[[Prototype]]` を管理するすべての方法を数えると、たくさんあります! 同じことをするたくさんの方法があります!
-
-なぜでしょう？
-
-それは歴史的な理由のためです。
-
-- コンストラクタ関数の `"prototype"` プロパティは非常に古代から機能しています。
-- 2012年後半: `Object.create` が標準に登場しました。それは与えられたプロトタイプでオブジェクトを作りますが、それを取得/設定することはできませんでした。なのでブラウザはいつでもプロトタイプの取得/設定ができる非標準の `__proto__` アクセサを実装しました。
-- 2015年後半: `Object.setPrototypeOf` と `Object.getPrototypeOf` が標準に追加されました。`__proto__` はどこでも実行されているデファクトだったので、標準の付録Bに追加されています。これはブラウザ以外の環境ではオプションです。
-
-今のところ、私たちはすべての方法を自由に使い分けています。
-
-技術的には、いつでも `[[Prototype]]` の取得/設定が可能です。しかし、通常はオブジェクト作成時に一度だけ設定を行い、変更はしません。: `rabbit` は `animal` から継承しており、それは変更しません。また、JavaScriptエンジンは高度に最適化されています。`Object.setPrototypeOf` または `obj.__proto__=` で "その場で" プロトタイプを変更することは、可能ですがとても遅い操作になります。
-
-
-## "非常にシンプルな" オブジェクト
-
-ご存知の通り、オブジェクトはキー/値ペアを格納するための連想配列として使うことができます。
-
-...しかし、もしその中で *ユーザから提供された* キーを格納しようとした場合(例えばユーザが入力した辞書)、興味深い問題が起こります。: すべてのキーは `"__proto__"` を除いてうまく動作します。
-
-例を確認してみましょう:
-
-```js run
-let obj = {};
-
-let key = prompt("What's the key?", "__proto__");
-obj[key] = "some value";
-
-alert(obj[key]); // [object Object], "some value" ではありません!
-```
-
-もしユーザが `__proto__` を入力した場合、その代入は無視されます!
-
-それは驚くことではありません。`__proto__` プロパティは特別です: それはオブジェクトまたは `null` であり、文字列はプロトタイプにはなれません。
-
-しかし、このような振る舞いを実装するつもりはありませんでした。私たちはキー/値ペアを格納したいですが、キー名が `"__proto__"` の場合は正しく保存されませんでした。なので、これはバグです。ここでの結果はひどくはありませんが、他のケースでは、プロトタイプは実際に変更される可能性があるため、処理が予期しない方向で間違ってしまう可能性があります。
-
-最悪なのは -- 通常開発者はこのような可能性について全く考えません。これにより、このようなバグに気付きにくくなり、特にJavaScriptがサーバー側で使用されている場合には、それらを脆弱性に変えることさえあります。
-
-このようなことは `__proto__` の場合にのみ起こります。すべての他のプロパティは通常 "代入可能" です。
-
-どうやってこの問題を回避しましょう？
-
-最初に、`Map` を使うよう切り替えることができます。それですべて問題ありません。
-
-しかし、 言語の作成者がその問題をずっと前から考えていたため、`Object` もまたここでは上手くいきます。
-
-`__proto__` はオブジェクトのプロパティではなく、`Object.prototype` のアクセサプロパティです。:
-
-
-
-なので、もし `obj.__proto__` が読み込まれたり代入された場合、該当の getter/setter がそのプロトタイプから呼ばれ、それは `[[Prototype]]` の取得/設定をします。
-
-最初に言ったとおり、`__proto__` は `[[Prototype]]` にアクセスする方法であり、`[[Prototype]]` 自身ではありません。
-
-今、もし連想配列としてオブジェクトを使いたい場合、リテラルのトリックを使ってそれを行う事ができます。:
-
-```js run
-*!*
-let obj = Object.create(null);
-*/!*
-
-let key = prompt("What's the key?", "__proto__");
-obj[key] = "some value";
-
-alert(obj[key]); // "some value"
-```
-
-`Object.create(null)` はプロトタイプなし(`[[Prototype]]` が `null`)の空オブジェクトを作ります。:
-
-
-
-したがって、`__proto__` のための継承された getter/setter はありません。今や通常のデータプロパティとして処理されますので、上の例は正しく動作します。
-
-このようなオブジェクトを "非常にシンプルな" または "純粋な辞書オブジェクト" と呼びます。なぜなら、それらは通常のオブジェクト `{...}` よりもシンプルなためです。
-
-欠点は、そのようなオブジェクトには組み込みのオブジェクトメソッドがないことです。 `toString`:
-
-```js run
-*!*
-let obj = Object.create(null);
-*/!*
-
-alert(obj); // Error (no toString)
-```
-
-...しかし、連想配列ではそれは通常問題ありません。
-
-ほとんどのオブジェクトに関連したメソッドは `Object.keys(obj)` のように `Object.something(...)` であることに注意してください。 -- それらはプロトタイプにはないので、このようなオブジェクトで機能し続けます。:
-
-
-```js run
-let chineseDictionary = Object.create(null);
-chineseDictionary.hello = "ni hao";
-chineseDictionary.bye = "zai jian";
-
-alert(Object.keys(chineseDictionary)); // hello,bye
-```
-
-## すべてのプロパティを取得する
-
-オブジェクトから キー/値 を取得する多くの方法があります。
-
-それらの１つはすでに知っています。:
-
-- [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- 列挙可能な自身の文字列プロパティ名/値/キー値ペアの配列を返します。それらのメソッドは *列挙可能な* プロパティで、*キーとして文字列を持つ* ものだけをリストします。
-
-もしもシンボリックプロパティがほしい場合は:
-
-- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- すべての自身のシンボリックプロパティ名の配列を返します。
-
-非列挙型のプロパティが欲しい場合は:
-
-- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- すべての自身の文字列プロパティ名を返します。
-
-*すべて* のプロパティが欲しい場合は:
-
-- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- すべての自身のプロパティ名の配列を返します。
-
-
-これらのメソッドは、どのプロパティが返されるかについて少し異なりますが、すべてがそのオブジェクト自身で動作します。プロトタイプからのプロパティはリストされません。
-
-`for..in` ループは異なります。: それは継承されたプロパティもループします。
-
-例:
-
-```js run
-let animal = {
- eats: true
-};
-
-let rabbit = {
- jumps: true,
- __proto__: animal
-};
-
-*!*
-// 自身のキーのみ
-alert(Object.keys(rabbit)); // jumps
-*/!*
-
-*!*
-// 継承されたキーも
-for(let prop in rabbit) alert(prop); // jumps, eats
-*/!*
-```
-
-もし継承されたプロパティを区別したい場合、組み込みのメソッド [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty) があります。: それは `obj` 自身が `key` という名前のプロパティをもつ(継承でない) 場合に `true` を返します。
-
-だから、継承されたプロパティをフィルタリングすることができます。:
-
-```js run
-let animal = {
- eats: true
-};
-
-let rabbit = {
- jumps: true,
- __proto__: animal
-};
-
-for(let prop in rabbit) {
- let isOwn = rabbit.hasOwnProperty(prop);
- alert(`${prop}: ${isOwn}`); // jumps:true, then eats:false
-}
-```
-ここでは、私たちは次の継承のチェーンを持っています。: `rabbit`, 次に `animal` そして `Object.prototype` (`animal` はリテラルオブジェクト `{...}` なので、これはデフォルトです)、その上に `null` があります。:
-
-
-
-面白いことが1つあります。メソッド `rabbit.hasOwnProperty` はどこからきたでしょう？チェーンを見ると、`Object.prototype.hasOwnProperty` によってメソッドが提供されていることがわかります。言い換えると、それは継承されています。
-
-
-...しかしなぜ `hasOwnProperty` は `for..in` ループで現れないのでしょうか？答えはシンプルです。それは列挙可能ではありません。 `Object.prototype`の他のすべてのプロパティと同様です。だからこそそれらはリストに載っていません。
-
-## サマリ
-
-このチャプターで説明したメソッドの簡単なリストを要約として示します。:
-
-- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- 与えられた `proto` を `[[Prototype]]` (`null` もOK)として、また任意のプロパティディスクリプタで空のオブジェクトを作ります。
-- [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- `obj` の `[[Prototype]]` を返します( `__proto__` の getter と同じです)。
-- [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- `obj` の `[[Prototype]]` に `proto` をセットします( `__proto__` の setter と同じです)。
-- [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- 列挙可能な自身の文字列プロパティ名/値/キー値ペアの配列を返します。
-- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- すべての自身のシンボリックプロパティ名の配列を返します。
-- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- すべての自身の文字列プロパティ名を返します。
-- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- すべての自身のプロパティ名の配列を返します。
-- [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): それは `obj` 自身が `key` という名前のプロパティをもつ(継承でない) 場合に `true` を返します。
-
-私たちは `__proto__` は `[[Prototype]]` の getter/setterであり、他のメソッドと同様に `Object.prototype` に存在することも明らかにしました。
-
-私たちは、`Object.create(null)` によってプロトタイプなしのオブジェクトを作ることができます。このようなオブジェクトは "純粋な辞書" として使われ、キーとして `"__proto__"` の問題はありません。
-
-オブジェクトプロパティ(`Object.keys` など)を返すすべてのメソッドは -- "自身の" プロパティを返します。もし継承されたものが欲しい場合は、`for..in` を使います。
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2.png
deleted file mode 100644
index ee42f6b98c..0000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2@2x.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2@2x.png
deleted file mode 100644
index 1917c6631d..0000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-2@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null.png
deleted file mode 100644
index 7c2e3f9c78..0000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null@2x.png b/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null@2x.png
deleted file mode 100644
index fec1facb0b..0000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/object-prototype-null@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object.png b/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object.png
deleted file mode 100644
index 3254270f38..0000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object@2x.png b/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object@2x.png
deleted file mode 100644
index f794d7b84a..0000000000
Binary files a/1-js/07-object-oriented-programming/06-prototype-methods/rabbit-animal-object@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/solution.md b/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/solution.md
deleted file mode 100644
index 18d3ed969f..0000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/solution.md
+++ /dev/null
@@ -1,46 +0,0 @@
-エラーとなる行はここです:
-
-```js
-Rabbit.prototype = Animal.prototype;
-```
-
-ここで、`Rabbit.prototype` と `Animal.prototype` は同じオブジェクトになります。なので、両方のクラスのメソッドがそのオブジェクトに混在します。
-
-結果として、`Rabbit.prototyp.walk` は `Animal.prototype.walk` を上書きするので、すべての animals は跳ね始めます(bounce)。:
-
-```js run
-function Animal(name) {
- this.name = name;
-}
-
-Animal.prototype.walk = function() {
- alert(this.name + ' walks');
-};
-
-function Rabbit(name) {
- this.name = name;
-}
-
-*!*
-Rabbit.prototype = Animal.prototype;
-*/!*
-
-Rabbit.prototype.walk = function() {
- alert(this.name + " bounces!");
-};
-
-*!*
-let animal = new Animal("pig");
-animal.walk(); // pig bounces!
-*/!*
-```
-
-正しいバリアントは次の通りです:
-
-```js
-Rabbit.prototype.__proto__ = Animal.prototype;
-// もしくはこのような形です:
-Rabbit.prototype = Object.create(Animal.prototype);
-```
-
-これによりプロトタイプは分離され、それぞれ対応するクラスのメソッドを格納します。が、`Rabbit.prototype` は `Animal.prototype` を継承します。
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/task.md b/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/task.md
deleted file mode 100644
index 7a2020125b..0000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/1-inheritance-error-assign/task.md
+++ /dev/null
@@ -1,29 +0,0 @@
-importance: 5
-
----
-
-# 継承でのエラー
-
-下のプロトタイプ継承でのエラーを見つけてください。
-
-何が間違っていますか？どのような結果になるでしょうか？
-
-```js
-function Animal(name) {
- this.name = name;
-}
-
-Animal.prototype.walk = function() {
- alert(this.name + ' walks');
-};
-
-function Rabbit(name) {
- this.name = name;
-}
-
-Rabbit.prototype = Animal.prototype;
-
-Rabbit.prototype.walk = function() {
- alert(this.name + " bounces!");
-};
-```
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.md b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.md
deleted file mode 100644
index bf38842656..0000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.md
+++ /dev/null
@@ -1,2 +0,0 @@
-関数型での内部のプロパティ(`template`, `timer`) と内部メソッド `render` はアンダースコア `_` でプライベートとしてマークされていることに注意してください。
-
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/clock.js b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/clock.js
deleted file mode 100644
index 7a193b79d0..0000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/clock.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function Clock({ template }) {
- this._template = template;
-}
-
-Clock.prototype._render = function() {
- let date = new Date();
-
- let hours = date.getHours();
- if (hours < 10) hours = '0' + hours;
-
- let mins = date.getMinutes();
- if (mins < 10) min = '0' + mins;
-
- let secs = date.getSeconds();
- if (secs < 10) secs = '0' + secs;
-
- let output = this._template
- .replace('h', hours)
- .replace('m', mins)
- .replace('s', secs);
-
- console.log(output);
-};
-
-Clock.prototype.stop = function() {
- clearInterval(this._timer);
-};
-
-Clock.prototype.start = function() {
- this._render();
- this._timer = setInterval(() => this._render(), 1000);
-};
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/clock.js b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/clock.js
deleted file mode 100644
index 26081a35a1..0000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/clock.js
+++ /dev/null
@@ -1,34 +0,0 @@
-function Clock({ template }) {
-
- let timer;
-
- function render() {
- let date = new Date();
-
- let hours = date.getHours();
- if (hours < 10) hours = '0' + hours;
-
- let mins = date.getMinutes();
- if (mins < 10) min = '0' + mins;
-
- let secs = date.getSeconds();
- if (secs < 10) secs = '0' + secs;
-
- let output = template
- .replace('h', hours)
- .replace('m', mins)
- .replace('s', secs);
-
- console.log(output);
- }
-
- this.stop = function() {
- clearInterval(timer);
- };
-
- this.start = function() {
- render();
- timer = setInterval(render, 1000);
- };
-
-}
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/task.md b/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/task.md
deleted file mode 100644
index 09159d39b9..0000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/task.md
+++ /dev/null
@@ -1,9 +0,0 @@
-importance: 5
-
----
-
-# プロトタイプに書き直す
-
-`Clock` クラスは関数スタイルで書かれています。プロトタイプを使って書き直してください。
-
-P.S. 時計はコンソールで動きます、開いて見てください。
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/article.md b/1-js/07-object-oriented-programming/08-class-patterns/article.md
deleted file mode 100644
index d4380d6da5..0000000000
--- a/1-js/07-object-oriented-programming/08-class-patterns/article.md
+++ /dev/null
@@ -1,243 +0,0 @@
-
-# Class パターン
-
-```quote author="Wikipedia"
-オブジェクト指向プログラミングでは、*クラス* はオブジェクト生成、状態(メンバ変数)の初期値の提供や振る舞いの実装(メンバ関数またはメソッド)のための拡張可能なプログラムコードテンプレートです。
-```
-
-JavaScriptには特別な構文構文とキーワード `class` があります。しかしそれを学ぶ前に、 "クラス" という言葉はオブジェクト指向プログラミングの理論に由来すると考えるべきでしょう。定義は上記で引用されている通り、言語に依存しません。。
-
-JavaScriptでは、`class` キーワードを使わずにクラスを作成する、いくつかのよく知られたプログラミングパターンがあります。そしてここでは最初にそれについて話しましょう。
-
-`class` の構造は次のチャプターで説明しますが、JavaScriptでは、それは "シンタックスシュガー" であり、ここで学ぶパターンの1つの拡張です。
-
-[cut]
-
-
-## 関数クラスパターン
-
-下のコンストラクタ関数は定義に従って、"クラス" と考えることができます。:
-
-```js run
-function User(name) {
- this.sayHi = function() {
- alert(name);
- };
-}
-
-let user = new User("John");
-user.sayHi(); // John
-```
-
-それは定義のすべての部分に従います:
-
-1. オブジェクトを作成する (`new` で呼び出し可能) ための "プログラムコードテンプレート" である。
-2. 状態 (パラメータから `name`) の初期値を提供する。
-3. メソッド (`sayHi`) を提供する。
-
-これは、*関数的なクラスパターン(functional class pattern)* と呼ばれます。
-
-関数的なクラスパターンでは、`this` に割り当てられていない `User` の中のローカル変数とネストされた関数は内側からは見えますが、外のコードからはアクセスできません。
-
-なので、私たちは簡単に内部関数や変数を追加することができます。次の `calcAge()` のように:
-
-```js run
-function User(name, birthday) {
-
-*!*
- // User 内の他のメソッドからのみ見えます
- function calcAge() {
- return new Date().getFullYear() - birthday.getFullYear();
- }
-*/!*
-
- this.sayHi = function() {
- alert(name + ', age:' + calcAge());
- };
-}
-
-let user = new User("John", new Date(2000,0,1));
-user.sayHi(); // John
-```
-
-このコードでは、変数 `name`, `birthday` と関数 `calcAge()` はオブジェクトに対しては内部、*private* です。それはその内側からのみ見えます。
-
-一方、`sayHi` は外部、*public* メソッドです。`user` を作成する外部コードはそれにアクセスできます。
-
-このようにして、内部実装の詳細とヘルパーメソッドを外部コードから隠すことができます。 `this`に割り当てられたものだけが外側に見えるようになります。
-
-## ファクトリークラスパターン
-
-私たちは、`new` を全く使わずにクラスを生成することができます。
-
-このようになります:
-
-```js run
-function User(name, birthday) {
- // User 内の他のメソッドからのみ見えます
- function calcAge() {
- return new Date().getFullYear() - birthday.getFullYear();
- }
-
- return {
- sayHi() {
- alert(name + ', age:' + calcAge());
- }
- };
-}
-
-*!*
-let user = User("John", new Date(2000,0,1));
-*/!*
-user.sayHi(); // John
-```
-
-ご覧の通り、関数 `User` はパブリックなプロパティとメソッドを持つオブジェクトを返します。このメソッドの唯一のメリットは、`new` を省略できることです。: `let user = new User(...)` の代わりに `let user = User(...)` と書きます。別の側面では、ほとんど関数的なパターンと同じです。
-
-## プロトタイプベースのクラス
-
-プロトタイプベースのクラスは最も重要で一般的にベストです。 実際には、関数的なクラスパターンとファクトリクラスパターンはほとんど使用されません。
-
-後ほどなぜかをお見せします。
-
-ここでは、プロトタイプを使って同じクラスを再度書いています。:
-
-```js run
-function User(name, birthday) {
-*!*
- this._name = name;
- this._birthday = birthday;
-*/!*
-}
-
-*!*
-User.prototype._calcAge = function() {
-*/!*
- return new Date().getFullYear() - this._birthday.getFullYear();
-};
-
-User.prototype.sayHi = function() {
- alert(this._name + ', age:' + this._calcAge());
-};
-
-let user = new User("John", new Date(2000,0,1));
-user.sayHi(); // John
-```
-
-コード構造:
-
-- コンストラクタ `User` は現在のオブジェクトの状態のみを初期化します。
-- メソッドは `User.prototype` に追加されています。
-
-ご覧の通り、メソッドは字句的に `function User` の中にはなく、共通のレキシカル環境を共有しません。もし `function User` の内側で変数を宣言した場合、それらはメソッドには見えません。
-
-従って、内部プロパティとメソッドはアンダースコア `"_"` が先頭に追加されているという、広く知られている合意があります。`_name` または `_calcAge()` のように。技術的にはそれは単なる合意であり、外部コードは依然としてそれらにアクセスすることはできます。しかし、ほとんどの開発者は `"_"` の意味を理解しており、外部コードの中でプロフィックスのついたプロパティやメソッドを触らないようにしています。
-
-関数的なパターンと比較した時の利点は次の通りです。:
-
-- 関数的なパターンでは、各オブジェクトにはすべてのメソッドの独自のコピーがあります。 コンストラクタで `this.sayHi = function（）{...}` と他のメソッドの別のコピーを割り当てます。
-- プロトタイプ的なパターンでは、すべてのメソッドはすべての user オブジェクトで共有される `User.prototype` にあります。オブジェクト自身はデータだけを保持しています。
-
-従って、プロトタイプパターンはよりメモリ効率が良いです。
-
-...しかし、それだけではありません。プロトタイプを使うと継承を効率的にセットアップすることができます。すべての組み込みのJavaScriptオブジェクトはプロトタイプを使っています。また特別な構文構造があります: "class" は、見た目の良い構文を提供します。 そしてもっと多くのことがありますので、それらと一緒に進んでみましょう。
-
-## クラスのためのプロトタイプベースの継承
-
-2つのプロトタイプベースのクラスを持っているとしましょう。
-
-`Rabbit`:
-
-```js
-function Rabbit(name) {
- this.name = name;
-}
-
-Rabbit.prototype.jump = function() {
- alert(this.name + ' jumps!');
-};
-
-let rabbit = new Rabbit("My rabbit");
-```
-
-
-
-...そして `Animal`:
-
-```js
-function Animal(name) {
- this.name = name;
-}
-
-Animal.prototype.eat = function() {
- alert(this.name + ' eats.');
-};
-
-let animal = new Animal("My animal");
-```
-
-
-
-今はそれらは完全に独立しています。
-
-しかし、私たちは `Rabbit` は `Animal` を拡張させたものにしたいです。言い換えると、rabbits は animals をベースとし、`Animal` のメソッドへのアクセスを持ち、自身のメソッドでそれを拡張する必要があります。
-
-プロトタイプの言語ではどういう意味でしょうか？
-
-今、`rabbit` オブジェクトのメソッドは `Rabbit.prototype` にあります。`Rabbit.prototype` にメソッドが見つからない場合, `rabbit` に "フォールバック" として `Animal.prototype` を使ってほしいです。
-
-なので、プロトタイプチェーンは `rabbit` -> `Rabbit.prototype` -> `Animal.prototype` である必要があります。
-
-このように:
-
-
-
-それを実装するコードは次の通りです:
-
-```js run
-// 以前と同じ Animal
-function Animal(name) {
- this.name = name;
-}
-
-// すべての animals 食べることができますよね?
-Animal.prototype.eat = function() {
- alert(this.name + ' eats.');
-};
-
-// 以前と同じ Rabbit
-function Rabbit(name) {
- this.name = name;
-}
-
-Rabbit.prototype.jump = function() {
- alert(this.name + ' jumps!');
-};
-
-*!*
-// 継承チェーンを設定します
-Rabbit.prototype.__proto__ = Animal.prototype; // (*)
-*/!*
-
-let rabbit = new Rabbit("White Rabbit");
-*!*
-rabbit.eat(); // rabbits も食べることができる
-*/!*
-rabbit.jump();
-```
-
-行 `{*}` はプロトタイプチェーンを設定します。つまり、`rabbit` はまず `Rabbit.prototype` のメソッドを検索し、次に `Animal.prototype` を検索します。そして、完全性のために、もしメソッドが `Animal.prototype` に存在しない場合、`Object.prototype` で検索を継続します。`Animal.prototype` は通常のオブジェクトなので、それを継承しています。
-
-ここはその完全なイメージです。:
-
-
-
-## サマリ
-
-"クラス" の言葉はオブジェクト指向プログラミングからきています。JavaScriptでは、それは通常関数クラスパターンまたはプロトタイプパターンを意味します。プロトタイプパターンはより協力でメモリ効率がよいので、それを使うことを推奨します。
-
-プロトタイプのパターンによれば：
-1. メソッドは `Class.prototype` に格納されます。
-2. プロトタイプはお互いから継承します。
-
-次のチャプターでは、`class` キーワードと構造について学びます。プロトタイプクラスを短く書くことができ、いくつかの追加の利点があります。
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2.png
deleted file mode 100644
index ad4a409322..0000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2@2x.png
deleted file mode 100644
index 199ed3ee60..0000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal-2@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal.png
deleted file mode 100644
index 70708c2848..0000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal@2x.png
deleted file mode 100644
index 0db1301815..0000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/class-inheritance-rabbit-animal@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png
deleted file mode 100644
index e63d7d7844..0000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1@2x.png
deleted file mode 100644
index 3d1be9ccef..0000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-1@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2.png
deleted file mode 100644
index 435ec5f89f..0000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2@2x.png b/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2@2x.png
deleted file mode 100644
index 5731da73a8..0000000000
Binary files a/1-js/07-object-oriented-programming/08-class-patterns/rabbit-animal-independent-2@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/index.html b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/index.html
deleted file mode 100644
index fdee13d01b..0000000000
--- a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
- Console clock
-
-
-
-
-
-
-
-
-
-
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/index.html b/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/index.html
deleted file mode 100644
index fdee13d01b..0000000000
--- a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
- Console clock
-
-
-
-
-
-
-
-
-
-
diff --git a/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends.png b/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends.png
deleted file mode 100644
index 2db88f3663..0000000000
Binary files a/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends@2x.png b/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends@2x.png
deleted file mode 100644
index 9539fe9ec6..0000000000
Binary files a/1-js/07-object-oriented-programming/09-class/animal-rabbit-extends@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/09-class/article.md b/1-js/07-object-oriented-programming/09-class/article.md
deleted file mode 100644
index 62abb782e3..0000000000
--- a/1-js/07-object-oriented-programming/09-class/article.md
+++ /dev/null
@@ -1,356 +0,0 @@
-
-# クラス
-
-"class" 構造は、綺麗で見やすい構文でプロトタイプベースのクラスを定義することができます。
-
-[cut]
-
-## "class" 構文
-
-`class` 構文は汎用性があり、最初にシンプルな例から始めます。
-
-これはプロトタイプベースのクラス `User` です:
-
-```js run
-function User(name) {
- this.name = name;
-}
-
-User.prototype.sayHi = function() {
- alert(this.name);
-}
-
-let user = new User("John");
-user.sayHi();
-```
-
-...そしてこれは `class` 構文を使った場合です:
-
-```js run
-class User {
-
- constructor(name) {
- this.name = name;
- }
-
- sayHi() {
- alert(this.name);
- }
-
-}
-
-let user = new User("John");
-user.sayHi();
-```
-
-2つの例が似ていることは容易に分かると思います。クラス内のメソッドはそれらの間にカンマを持たないことに注意してください。新米の開発者はときどきそれを忘れて、クラスメソッドの間にカンマをおいてしまい動作しなくなります。これはリテラルオブジェクトではなく、クラス構文です。
-
-では、`class` は正確になにをするでしょう？ それが新しい言語レベルの実態を定義していると思うかもしれませんが、それは間違っています。
-
-ここで `class User {...}` は実際には2つのことをしています。:
-
-1. `"constructor"` という名前の関数を参照する変数 `User` を宣言します。
-2. その定義の中にリストされているメソッドを `User.prototype` の中に置きます。ここでは、`sayHi` と `constructor` です。
-
-次のコードでクラスを掘り下げてみましょう。:
-
-```js run
-class User {
- constructor(name) { this.name = name; }
- sayHi() { alert(this.name); }
-}
-
-*!*
-// 証明: User は "constructor" 関数である
-*/!*
-alert(User == User.prototype.constructor); // true
-
-*!*
-// 証明: その "prototype" には 2つのメソッドがある
-*/!*
-alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
-```
-
-これは `class User` が生成するものの図です。:
-
-
-
-
-従って、`class` はコンストラクタとプロトタイプメソッドを一緒に定義する特別な構文です。
-
-...しかしそれだけではありません。小さな微調整があちこちにあります。:
-
-コンストラクタは `new` を必要とします
-: 通常の関数とは異なり、クラス `constructor` は `new` なしで呼ぶことはできません。:
-
-```js run
-class User {
- constructor() {}
-}
-
-alert(typeof User); // function
-User(); // Error: Class コンストラクタ User は `new` なしで呼べません
-```
-
-異なる文字列出力
-: もし `alert(User)` のように出力すると、エンジンによって `"class User..."` や `"function User..."` と表示されます。
-
-混乱しないでください: 文字列の表現は様々ですが、それは依然として関数であり、JavaScript言語で別の "class" エンティティはありません。
-
-クラスメソッドは非列挙型
-: クラス定義は、`"prototype"` の中のすべてのメソッドに対して `enumerable` フラグを `false` にセットします。オブジェクトを `for..in` したとき、通常クラスメソッドは出てきてほしくないので、これは良いことです。
-
-クラスはデフォルトの `constructor() {}` を持っています
-: `class` 構造の中に `constructor` がない場合、空の関数が生成され `constructor() {}` と書いたのと同じように動作します。
-
-クラスは常に `use strict` です
-: クラス構造の内側のすべてのコードは自動的に strict モードです。
-
-### Getters/setters
-
-クラスは getter/setter も含みます。以下はそれらを使って実装した `user.name` の例です。:
-
-```js run
-class User {
-
- constructor(name) {
- // setter を呼び出す
- this.name = name;
- }
-
-*!*
- get name() {
-*/!*
- return this._name;
- }
-
-*!*
- set name(value) {
-*/!*
- if (value.length < 4) {
- alert("Name too short.");
- return;
- }
- this._name = value;
- }
-
-}
-
-let user = new User("John");
-alert(user.name); // John
-
-user = new User(""); // Name too short.
-```
-
-内部的に、getter と setter もまた次のように `User` プロトタイプ上に作られます。:
-
-```js
-Object.defineProperty(User.prototype, {
- name: {
- get() {
- return this._name
- },
- set(name) {
- // ...
- }
- }
-});
-```
-
-### メソッドのみ
-
-オブジェクトリテラルとは異なり、`class` の中で `property:value` 割り当ては許可していません。メソッドとgetter/setterのみです。その制限を緩和するために、仕様で進行中のものがいくつかありますが、それはまだありません。
-
-もしプロトタイプに非関数の値を置く必要が本当にある場合、`prototype` を手動で修正することができます。以下を見てください:
-
-```js run
-class User { }
-
-User.prototype.test = 5;
-
-alert( new User().test ); // 5
-```
-
-従って、技術的にはそれは可能です。が、なぜそうしているかを知るべきです。このようなプロパティはクラスのすべてのオブジェクトの間で共有されます。
-
-"クラス内" の代替は getter を使うことです。:
-
-```js run
-class User {
- get test() {
- return 5;
- }
-}
-
-alert( new User().test ); // 5
-```
-
-外部コードからの使い方は同じですが、getter バリアントは少し遅いです。
-
-## クラス表現
-
-関数と同様に、クラスは別の式の中で定義され、渡され、返されます。
-
-これは、クラスを返す関数("クラスファクトリー")です。:
-
-```js run
-function makeClass(phrase) {
-*!*
- // class を宣言しそれを返します
- return class {
- sayHi() {
- alert(phrase);
- };
- };
-*/!*
-}
-
-let User = makeClass("Hello");
-
-new User().sayHi(); // Hello
-```
-
-`class` はプロトタイプ付き関数の特別な形式であることを思い出すと、これはとても普通です。
-
-また、名前付けされた関数表現のように、このようなクラスもまた名前を保つ場合があります。それはクラスの中でのみ見えます。:
-
-```js run
-// "名前付けされたクラス式" (そのような言葉はありませんが)
-let User = class *!*MyClass*/!* {
- sayHi() {
- alert(MyClass); // MyClass は class の内側でだけ見えます
- }
-};
-
-new User().sayHi(); // 動作します, MyClass の定義を表示します
-
-alert(MyClass); // error, MyClass は class の外からは見えません
-```
-
-## 静的メソッド(Static method)
-
-私たちは、その `"prototype"` ではなく、クラス関数へメソッドを割り当てることもできます。このようなメソッドは *static* と呼ばれます。
-
-例:
-
-```js run
-class User {
-*!*
- static staticMethod() {
-*/!*
- alert(this == User);
- }
-}
-
-User.staticMethod(); // true
-```
-
-これは実際には、関数プロパティとして代入するのと同じです。:
-
-```js
-function User() { }
-
-User.staticMethod = function() {
- alert(this == User);
-};
-```
-
-`User.staticMethod()` の中での `this` の値はクラスコンストラクタ `User` 自身です("ドットの前のオブジェクト" ルールです)。
-
-通常、静的メソッドは特定のオブジェクトに依存せず、クラスに属する関数を実装するときに使われます。
-
-例えば、私たちは `Article` オブジェクトを持っており、それらを比較する関数が必要とします。自然な選択だと、このように `Article.compare` になるでしょう。:
-
-```js run
-class Article {
- constructor(title, date) {
- this.title = title;
- this.date = date;
- }
-
-*!*
- static compare(articleA, articleB) {
- return articleA.date - articleB.date;
- }
-*/!*
-}
-
-// 使い方
-let articles = [
- new Article("Mind", new Date(2016, 1, 1)),
- new Article("Body", new Date(2016, 0, 1)),
- new Article("JavaScript", new Date(2016, 11, 1))
-];
-
-*!*
-articles.sort(Article.compare);
-*/!*
-
-alert( articles[0].title ); // Body
-```
-
-ここで、`Article.compare` は記事を比較するための手段として記事の "上に" 立っています。それは記事のメソッドではなく、クラス全体のメソッドです。
-
-別の例は、いわゆる "ファクトリー" メソッドです。イメージしてください、記事を作成する方法はほとんどありません。:
-
-1. 与えられたパラメータ(`title`, `date` など)による作成
-2. 今日の日付の空の記事の作成
-3. ...
-
-最初の方法はコンストラクタで実装することができます。また2つ目の方法としてクラスの静的メソッドを作ることができます。
-
-ここでの `Article.createTodays()` のように:
-
-```js run
-class Article {
- constructor(title, date) {
- this.title = title;
- this.date = date;
- }
-
-*!*
- static createTodays() {
- // 思い出してください, this = Article
- return new this("Todays digest", new Date());
- }
-*/!*
-}
-
-let article = Article.createTodays();
-
-alert( article.title ); // 今日のダイジェスト
-```
-
-これで今日のダイジェストを作成する必要があるたびに、`Article.createTodays()` を呼ぶことができます。もう一度、これは記事のメソッドではなく、クラス全体のメソッドです。
-
-静的メソッドは、次のように、データベース関連のクラスでデータベースの検索/保存/削除のためにも使用されます。:
-
-```js
-// Article は記事を管理するための特別なクラスと仮定します
-// 記事を削除するための static メソッド:
-Article.remove({id: 12345});
-```
-
-## サマリ
-
-基本のクラス構文はこのようになります。:
-
-```js
-class MyClass {
- constructor(...) {
- // ...
- }
- method1(...) {}
- method2(...) {}
- get something(...) {}
- set something(...) {}
- static staticMethod(..) {}
- // ...
-}
-```
-
-`MyClass` の値は `constructor` として提供された関数です。もし `constructor` がなければ、空の関数です。
-
-いずれにしても、クラス宣言に列挙されたメソッドは `prototype`のメンバーになりますが、静的メソッドは関数自身に書き込まれ、`MyClass.staticMethod()` として呼び出すことができます。 静的メソッドは、クラスに結びつく関数が必要なときに使用されますが、そのクラスのオブジェクトに結びつく場合には使用されません。
-
-次のチャプターでは、継承を含め、よりクラスについて学びます。
diff --git a/1-js/07-object-oriented-programming/09-class/class-user.png b/1-js/07-object-oriented-programming/09-class/class-user.png
deleted file mode 100644
index 5579e6bbdf..0000000000
Binary files a/1-js/07-object-oriented-programming/09-class/class-user.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/09-class/class-user@2x.png b/1-js/07-object-oriented-programming/09-class/class-user@2x.png
deleted file mode 100644
index 5a85e6589d..0000000000
Binary files a/1-js/07-object-oriented-programming/09-class/class-user@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/clock.js b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/clock.js
deleted file mode 100644
index c710b9da9b..0000000000
--- a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/clock.js
+++ /dev/null
@@ -1,34 +0,0 @@
-class Clock {
- constructor({ template }) {
- this._template = template;
- }
-
- _render() {
- let date = new Date();
-
- let hours = date.getHours();
- if (hours < 10) hours = '0' + hours;
-
- let mins = date.getMinutes();
- if (mins < 10) min = '0' + mins;
-
- let secs = date.getSeconds();
- if (secs < 10) secs = '0' + secs;
-
- let output = this._template
- .replace('h', hours)
- .replace('m', mins)
- .replace('s', secs);
-
- console.log(output);
- }
-
- stop() {
- clearInterval(this._timer);
- }
-
- start() {
- this._render();
- this._timer = setInterval(() => this._render(), 1000);
- }
-}
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/clock.js b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/clock.js
deleted file mode 100644
index c710b9da9b..0000000000
--- a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/clock.js
+++ /dev/null
@@ -1,34 +0,0 @@
-class Clock {
- constructor({ template }) {
- this._template = template;
- }
-
- _render() {
- let date = new Date();
-
- let hours = date.getHours();
- if (hours < 10) hours = '0' + hours;
-
- let mins = date.getMinutes();
- if (mins < 10) min = '0' + mins;
-
- let secs = date.getSeconds();
- if (secs < 10) secs = '0' + secs;
-
- let output = this._template
- .replace('h', hours)
- .replace('m', mins)
- .replace('s', secs);
-
- console.log(output);
- }
-
- stop() {
- clearInterval(this._timer);
- }
-
- start() {
- this._render();
- this._timer = setInterval(() => this._render(), 1000);
- }
-}
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/task.md b/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/task.md
deleted file mode 100644
index 9423c2cb01..0000000000
--- a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/task.md
+++ /dev/null
@@ -1,12 +0,0 @@
-importance: 5
-
----
-
-# 拡張された時計
-
-私たちは `Clock` クラスを持っています。今のところ、毎秒時間を表示します。
-
-`Clock` を継承した新たなクラス `ExtendedClock` を作成し、`precision` パラメータを追加してください -- "時計のカチカチ" の間の `ms` の数値です。デフォルtおでは `1000` (1秒) です。
-
-- あなたのコードはファイル `extended-clock.js` にしてください。
-- オジリナルの `clock.js` は変更しないでください。それを拡張してください。
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object.png b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object.png
deleted file mode 100644
index d4ff37e561..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png
deleted file mode 100644
index a54a9d2f86..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/solution.md b/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/solution.md
deleted file mode 100644
index 8012027592..0000000000
--- a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/solution.md
+++ /dev/null
@@ -1,87 +0,0 @@
-解答は2つパートがあります。
-
-最初に、簡単な方は、継承しているクラスはコンストラクタで `super()` を呼ぶ必要があるということです。そうでなければ `"this"` が "定義済み" になりません。
-
-なので、次のように直します:
-
-```js run
-class Rabbit extends Object {
- constructor(name) {
-*!*
- super(); // 継承しているとき、親コンストラクタを呼ぶ必要があります
-*/!*
- this.name = name;
- }
-}
-
-let rabbit = new Rabbit("Rab");
-
-alert( rabbit.hasOwnProperty('name') ); // true
-```
-
-しかし、これですべてではありません。
-
-修正した後でさえ、`"class Rabbit extends Object"` 対 `class Rabbit` では依然として重要な違いがあります。
-
-知っている通り、 "extends" 構文は2つのプロトタイプを設定します。:
-
-1. コンストラクタ関数の `"prototype"` 間(メソッド用)
-2. コンストラクタ関数自身の間(静的メソッド用)
-
-我々のケースでは、`class Rabbit extends Object` では次を意味します:
-
-```js run
-class Rabbit extends Object {}
-
-alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
-alert( Rabbit.__proto__ === Object ); // (2) true
-```
-
-従って、このように `Rabbit` 経由で `Object` の静的メソッドにアクセスすることができます。:
-
-```js run
-class Rabbit extends Object {}
-
-*!*
-// 通常は Object.getOwnPropertyNames と呼びます
-alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b
-*/!*
-```
-
-また、`extends` を使わない場合 `class Rabbit` は2つ目の参照を持ちません。
-
-比較してみてください:
-
-```js run
-class Rabbit {}
-
-alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
-alert( Rabbit.__proto__ === Object ); // (2) false (!)
-
-*!*
-// エラー、Rabbit にこのような関数はありません
-alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error
-*/!*
-```
-
-シンプルな `class Rabbit` では `Rabbit` 関数は同じプロトタイプを持っています。
-
-```js run
-class Rabbit {}
-
-// (2) の代わりに、これは正しいです:
-alert( Rabbit.__proto__ === Function.prototype );
-```
-
-ところで、`Function.prototype` は "一般的な" 関数メソッドを持っています。例えば `call`, `bind` などです。それらは究極的には両方のケースで利用可能です。なぜなら、組み込みの `Object` コンストラクタに対して、`Object.__proto__ === Function.prototype` だからです。
-
-これはその図です:
-
-
-
-従って、まとめると2つの違いがあります。:
-
-| class Rabbit | class Rabbit extends Object |
-|--------------|------------------------------|
-| -- | コンストラクタで `super()` を呼ぶ必要がある |
-| `Rabbit.__proto__ === Function.prototype` | `Rabbit.__proto__ === Object` |
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static.png b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static.png
deleted file mode 100644
index 998c823300..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static@2x.png
deleted file mode 100644
index 98a80d38fa..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/animal-rabbit-static@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/article.md b/1-js/07-object-oriented-programming/10-class-inheritance/article.md
deleted file mode 100644
index 87a77e63d5..0000000000
--- a/1-js/07-object-oriented-programming/10-class-inheritance/article.md
+++ /dev/null
@@ -1,578 +0,0 @@
-
-# クラスの継承, super
-
-クラスは別のクラスに拡張することができます。 技術的には、プロトタイプの継承に基づいた素晴らしい構文があります。
-
-別のクラスから継承するためには、`"extends"` と括弧 `{..}` の前に親クラスを指定する必要があります。
-
-[cut]
-
-ここでは、`Rabbit` は `Animal` から継承しています:
-
-```js run
-class Animal {
-
- constructor(name) {
- this.speed = 0;
- this.name = name;
- }
-
- run(speed) {
- this.speed += speed;
- alert(`${this.name} runs with speed ${this.speed}.`);
- }
-
- stop() {
- this.speed = 0;
- alert(`${this.name} stopped.`);
- }
-
-}
-
-*!*
-// Animal から継承
-class Rabbit extends Animal {
- hide() {
- alert(`${this.name} hides!`);
- }
-}
-*/!*
-
-let rabbit = new Rabbit("White Rabbit");
-
-rabbit.run(5); // White Rabbit runs with speed 5.
-rabbit.hide(); // White Rabbit hides!
-```
-
-`extends` キーワードは、実際には `Rabbit.prototype` から `Animal.prototype` へ `[[Prototype]]` 参照を追加します。
-
-
-
-なので、現在 `rabbit` は自身のメソッドと `Animal` のメソッド両方へのアクセスを持ちます。
-
-````smart header="`extends` の後では任意の式が指定できます"
-クラス構文では単にクラスではなく、`extends` の後に任意の式を指定することができます。
-
-例えば、親クラスを生成する関数呼び出します:
-
-```js run
-function f(phrase) {
- return class {
- sayHi() { alert(phrase) }
- }
-}
-
-*!*
-class User extends f("Hello") {}
-*/!*
-
-new User().sayHi(); // Hello
-```
-ここでは、 `class User` は `f("Hello")` の結果を継承しています。
-
-多くの条件に依存したクラスを生成するための関数を使用し、それらから継承できるような高度なプログラミングパターンに対して、これは役立つ場合があります。
-````
-
-## メソッドのオーバーライド
-
-では、前に進めてメソッドをオーバライドをしてみましょう。今のところ、`Rabbit` は `Animal` から `this.speed = 0` をセットする `stop` メソッドを継承しています。
-
-もし `Rabbit` で自身の `stop` を指定すると、代わりにそれが使われるようになります。:
-
-```js
-class Rabbit extends Animal {
- stop() {
- // ...これは rabbit.stop() のために使われる
- }
-}
-```
-
-
-...しかし、通常は親メソッドを完全に置き換えるのではなく、その上に組み立てて、その機能の微調整または拡張を行うことを望んできます。私たちはメソッド内で何かをしますが、その前後またはその処理の中で親メソッドを呼び出します。
-
-クラスはそのために `"super"` キーワードを提供しています。
-
-- `super.method(...)` は親メソッドを呼び出します。
-- `super(...)` は親のコンストラクタを呼び出します(我々のコンスタクタの内側でのみ)。
-
-例えば、私たちのうさぎが止まったとき自動的に隠れさせましょう。:
-
-```js run
-class Animal {
-
- constructor(name) {
- this.speed = 0;
- this.name = name;
- }
-
- run(speed) {
- this.speed += speed;
- alert(`${this.name} runs with speed ${this.speed}.`);
- }
-
- stop() {
- this.speed = 0;
- alert(`${this.name} stopped.`);
- }
-
-}
-
-class Rabbit extends Animal {
- hide() {
- alert(`${this.name} hides!`);
- }
-
-*!*
- stop() {
- super.stop(); // 親の stop 呼び出し
- this.hide(); // その後隠す
- }
-*/!*
-}
-
-let rabbit = new Rabbit("White Rabbit");
-
-rabbit.run(5); // White Rabbit runs with speed 5.
-rabbit.stop(); // White Rabbit stopped. White rabbit hides!
-```
-
-これで `Rabbit` は処理の中で親 `super.stop()` を呼び出す `stop` メソッドを持っています。
-
-````smart header="アロー関数は `super` を持っていません"
-チャプター で述べた通り、アロー関数には `super` がありません。
-
-もしアクセスすると、外部の関数から取得されます。例えば:
-```js
-class Rabbit extends Animal {
- stop() {
- setTimeout(() => super.stop(), 1000); // 1秒後親の stop 実行
- }
-}
-```
-
-アロー関数での `super` は `stop()` での `super` と同じです。なので、意図通りに動きます。ここのように "通常の" 関数を指定すると、エラーになります。:
-
-```js
-// Unexpected super
-setTimeout(function() { super.stop() }, 1000);
-```
-````
-
-
-## コンストラクタのオーバライド
-
-コンストラクタに対しては、少し用心が必要です。
-
-今まで、`Rabbit` は自身の `constructor` を持っていませんでした。
-
-
-[仕様(specification)](https://tc39.github.io/ecma262/#sec-runtime-semantics-classdefinitionevaluation)によると、クラスが別のクラスを拡張し、`constructor` を持たない場合、次のような `constructor` が生成されます。
-
-```js
-class Rabbit extends Animal {
- // 独自のコンストラクタを持たないクラスを拡張するために生成されます
-*!*
- constructor(...args) {
- super(...args);
- }
-*/!*
-}
-```
-
-ご覧の通り、基本的にはすべての引数を渡して親の `constructor` を呼び出します。それは自身のコンストラクタを書いていない場合に起こります。
-では、カスタムのコンストラクタを `Rabbit` に追加してみましょう。それは `name` に加えて `earLength` を指定します。:
-
-```js run
-class Animal {
- constructor(name) {
- this.speed = 0;
- this.name = name;
- }
- // ...
-}
-
-class Rabbit extends Animal {
-
-*!*
- constructor(name, earLength) {
- this.speed = 0;
- this.name = name;
- this.earLength = earLength;
- }
-*/!*
-
- // ...
-}
-
-*!*
-// 動作しません!
-let rabbit = new Rabbit("White Rabbit", 10); // Error: this は定義されていません
-*/!*
-```
-
-おっと! エラーになりました。これではうさぎを作ることができません。何が間違っていたのでしょう？
-
-簡単な回答: 継承したクラスのコンストラクタは `super(...)` を呼び出し、(!) `this` を使う前にそれを行わなければなりません。
-
-...しかしなぜ？ ここで何が起きているのでしょう？ 確かにこの要件は奇妙に見えます。
-
-もちろん、それへの説明があります。詳細を見てみましょう。それであなたは何が起こっているのかを本当に理解するでしょう。
-
-JavaScriptでは、"継承しているクラスのコンストラクタ関数" とその他すべてで区別があります。継承しているクラスでは、該当するコンストラクタ関数は特別な内部プロパティ `[[ConstructorKind]]:"derived"` が付けられます。
-
-違いは:
-
-- 通常のコンストラクタを実行するとき、`this` として空のオブジェクトを作り、それを続けます。
-- しかし、派生したコンストラクタが実行されると、そうは実行されません。親のコンストラクタがこのジョブを実行することを期待しています。
-
-なので、もし独自のコンスタクタを作っている場合には、`super` を呼ばないといけません。なぜなら、そうしないとそれを参照する `this` を持つオブジェクトは生成されないからです。 結果、エラーになるでしょう。
-
-`Rabbit` を動作させるために、`this` を使う前に `super()` を呼ぶ必要があります。:
-
-```js run
-class Animal {
-
- constructor(name) {
- this.speed = 0;
- this.name = name;
- }
-
- // ...
-}
-
-class Rabbit extends Animal {
-
- constructor(name, earLength) {
-*!*
- super(name);
-*/!*
- this.earLength = earLength;
- }
-
- // ...
-}
-
-*!*
-// 今は問題ありませんｎ
-let rabbit = new Rabbit("White Rabbit", 10);
-alert(rabbit.name); // White Rabbit
-alert(rabbit.earLength); // 10
-*/!*
-```
-
-
-## Super: internals, [[HomeObject]]
-
-`super` の内部をもう少し深く見てみましょう。ここで面白いことがいくつか見られます。
-
-まず最初に、今まで私たちが学んだすべてのことだけでは、 `super` が動作するのは不可能です。
-
-たしかに技術的にどのように動くのでしょうか？オブジェクトメソッドが実行されるとき、`this` として現在のオブジェクトを取ります。もし `super.method()` を呼び出す場合、どうやって `method` を取得するでしょう？当然ながら、我々は現在のオブジェクトのプロトタイプから `method` を取る必要があります。技術的に我々(またはJavaScriptエンジンは)どうやってそれをするのでしょうか？
-
-恐らく、`this.__proto__.method` とすることで `this` の `[[Prototype]]` からメソッドを取得できる？残念ながらそれは動作しません。
-
-それにトライしてみましょう。簡単にするために、クラスなしで単純なオブジェクトを使用します。
-
-ここでは、`rabbit.eat()` は親オブジェクトの `animal.eat()` メソッドを呼び出す必要があります。:
-
-```js run
-let animal = {
- name: "Animal",
- eat() {
- alert(this.name + " eats.");
- }
-};
-
-let rabbit = {
- __proto__: animal,
- name: "Rabbit",
- eat() {
-*!*
- // これがおそらく super.eat() が動作する方法です
- this.__proto__.eat.call(this); // (*)
-*/!*
- }
-};
-
-rabbit.eat(); // Rabbit eats.
-```
-
-行 `(*)` でプロトタイプ(`animal`) から `eat` を取り、現在のオブジェクトコンテキストでそれを呼び出します。
-`.call(this)` はここでは重要であることに注意してください。なぜなら、シンプルな `this.__proto__.eat()` は現在のオブジェクトではなくプロトタイプのコンテキストで親の `eat` を実行するためです。
-
-また、上のコードは実際に期待通り動作します: 正しい `alert` になります。
-
-今度はもう1つのオブジェクトをチェーンに追加しましょう。 私たちは物事がどのように壊れるかを見ていきます:
-
-```js run
-let animal = {
- name: "Animal",
- eat() {
- alert(this.name + " eats.");
- }
-};
-
-let rabbit = {
- __proto__: animal,
- eat() {
- // ...bounce around rabbit-style
- // 親 (animal) メソッドを呼び出す
- this.__proto__.eat.call(this); // (*)
- }
-};
-
-let longEar = {
- __proto__: rabbit,
- eat() {
- // ...do something with long ears
- // 親 (rabbit) メソッドを呼び出す
- this.__proto__.eat.call(this); // (**)
- }
-};
-
-*!*
-longEar.eat(); // Error: 最大呼び出しスタックサイズを超えました
-*/!*
-```
-
-コードはこれ以上動作しません! `longEar.ear()` を呼び出そうとするとエラーになります。
-
-これは明白ではないかもしれませんが、もし `longEar.eat()` 呼び出しのトレースをすると、それがなぜかがわかります。行 `(*)` と `(**)` は共に、`this` の値は現在のオブジェクト (`longEar`) です。それが肝心です: すべてのオブジェクトメソッドはプロトタイプなどではなく、現在のオブジェクトを `this` として取得します。
-
-したがって、行 `(*)` と `(**)` は共に、`this.__proto__` の値は全く同じで、`rabbit` です。それらは両方とも、無限ループで `rabbit.eat` を呼んでいます。
-
-これは何が起きているかを示す図です。:
-
-
-
-1. `longEar.eat()` の中で、行 `(**)` は `this=longEar` となる `rabbit.eat` を呼び出します。
- ```js
- // longEar.eat() の中では this = longEar です
- this.__proto__.eat.call(this) // (**)
- // なので次のようになります
- longEar.__proto__.eat.call(this)
- // つまり呼ばれるのは
- rabbit.eat.call(this);
- ```
-2. 次に `rabbit.eat` の 行 `(*)` で、チェーンの中でより高次へ呼び出しを渡したいですが、`this=longEar` なので、 `this=__prto__.eat` は再び `rabbit.eat` です!
- ```js
- // rabbit.eat() の中でも this = longEar です
- this.__proto__.eat.call(this) // (*)
- // なので次のようになります
- longEar.__proto__.eat.call(this)
- // なので (再び)
- rabbit.eat.call(this);
- ```
-
-3. ...したがって、それ以上高次へ登ることができないので、`rabbit.eat` はエンドレスで自身を呼び出します。
-
-`this` だけを使ってこの問題を解くことはできません。
-
-### `[[HomeObject]]`
-
-その解決策を提供するため、JavaScriptはもう１つ関数のための特別な内部プロパティを追加しています: `[[HomeObject]]` です。
-
-**関数がクラスまたはオブジェクトメソッドとして指定されたとき、その `[[HomeObject]]` プロパティはそのオブジェクトになります。**
-
-メソッドはそれらのオブジェクトを覚えているため、これは実際には "バインドされていない" 関数の考え方に反しています。また、`[[HomeObject]]` は変更することはできないため、このバインドは永遠です。なので、これは言語上の非常に重要な変更です。
-
-しかし、この変更は安全です。`[[HomeObject]]` は プロトタイプを解決するために、`super` の中で親メソッドを呼び出すためだけに使われます。従って、互換性を損ねることはありません。
-
-`super` がどのように動くのか見てみましょう -- 平易なオブジェクトを使って再び。:
-
-```js run
-let animal = {
- name: "Animal",
- eat() { // [[HomeObject]] == animal
- alert(this.name + " eats.");
- }
-};
-
-let rabbit = {
- __proto__: animal,
- name: "Rabbit",
- eat() { // [[HomeObject]] == rabbit
- super.eat();
- }
-};
-
-let longEar = {
- __proto__: rabbit,
- name: "Long Ear",
- eat() { // [[HomeObject]] == longEar
- super.eat();
- }
-};
-
-*!*
-longEar.eat(); // Long Ear eats.
-*/!*
-```
-
-すべてのメソッドは内部の `[[HomeObject]]` プロパティで、そのオブジェクトを覚えています。そして `super` は親のプロトタイプの解決のために `[[HomeObject]]` を使います。
-
-`[[HomeObject]]` はクラスと単純なオブジェクト両方で定義されたメソッドのために定義されています。しかし、オブジェクトの場合、メソッドは指定された方法で正確に指定されなければなりません。: `"method: function()"` ではなく `method()` として指定する必要があります。
-
-下の例では、上の例との比較のために非メソッド構文を使っています。`[[HomeObject]]` プロパティはセットされず、継承は動作しません。:
-
-```js run
-let animal = {
- eat: function() { // 短縮構文: eat() {...} にする必要があります
- // ...
- }
-};
-
-let rabbit = {
- __proto__: animal,
- eat: function() {
- super.eat();
- }
-};
-
-*!*
-rabbit.eat(); // super 呼び出しエラー([[HomeObject]] が無いため)
-*/!*
-```
-
-## 静的メソッドと継承
-
-`class` 構文は静的なプロパティに対しても継承をサポートしています。
-
-例:
-
-```js run
-class Animal {
-
- constructor(name, speed) {
- this.speed = speed;
- this.name = name;
- }
-
- run(speed = 0) {
- this.speed += speed;
- alert(`${this.name} runs with speed ${this.speed}.`);
- }
-
- static compare(animalA, animalB) {
- return animalA.speed - animalB.speed;
- }
-
-}
-
-// Animal から継承
-class Rabbit extends Animal {
- hide() {
- alert(`${this.name} hides!`);
- }
-}
-
-let rabbits = [
- new Rabbit("White Rabbit", 10),
- new Rabbit("Black Rabbit", 5)
-];
-
-rabbits.sort(Rabbit.compare);
-
-rabbits[0].run(); // Black Rabbit runs with speed 5.
-```
-
-これで、継承された `Animal.compare` が呼び出されると想定される `Rabbit.compare` を呼ぶことができます。
-
-どのように動くのでしょう？繰り返しますが、プロトタイプを使用します。 すでに推測したように、`extends` は `Rabbit` に `Animal` への `[[Prototype]]` 参照を与えます。
-
-
-
-従って、`Rabbit` 関数は `Animal` 関数から継承します。そして `Animal` 関数は通常 `Function.prototype` を参照する `[[Prototype]]` を持っています。なぜならそれは何も `extend` していないからです。
-
-ここで、それを確認してみましょう。:
-
-```js run
-class Animal {}
-class Rabbit extends Animal {}
-
-// 静的プロパティとメソッドの場合
-alert(Rabbit.__proto__ == Animal); // true
-
-// 次のステップは Function.prototype です
-alert(Animal.__proto__ == Function.prototype); // true
-
-// オブジェクトメソッドの "通常の" プロトタイプチェーンに加えて
-alert(Rabbit.prototype.__proto__ === Animal.prototype); // true
-```
-
-このように `Rabbit` は `Animal` のすべての静的メソッドへアクセスです。
-
-### 組み込みで、静的継承はありません
-
-組み込みのクラスはこのような静的な `[[Prototype]]` 参照は持っていないことに注意してください。例えば、`Object` は `Object.defineProperty`, `Object.keys` やその他を持っていますが、`Array` や `Date` などはそれらを継承しません。
-
-これは `Date` や `Object` の構造を示す図です。:
-
-
-
-`Date` と `Object` の間のリンクはないことに注意してください。`Object` と `Date` は独立して存在します。`Date.prototype` は `Object.prototype` から継承しますが、それだけです。
-
-このような差異は歴史的な理由で存在します。: JavaScript言語の幕開けにクラス構文と静的メソッドを継承することは考えられませんでした。
-
-## ネイティブは拡張可能です
-
-Array, Map やその他のような組み込みのクラスもまた拡張可能です。
-
-例えば、ここでは `PowerArray` はネイティブの `Array` から継承しています。:
-
-```js run
-// メソッドを追加する(もっと追加することもできます)
-class PowerArray extends Array {
- isEmpty() {
- return this.length == 0;
- }
-}
-
-let arr = new PowerArray(1, 2, 5, 10, 50);
-alert(arr.isEmpty()); // false
-
-let filteredArr = arr.filter(item => item >= 10);
-alert(filteredArr); // 10, 50
-alert(filteredArr.isEmpty()); // false
-```
-
-1つとても興味深いことに留意してください。`filter`, `map` やその他組み込みのメソッドは -- 正確に継承された型の新しいオブジェクトを返します。 それらはそうするために `constructor`プロパティに依存しています。
-
-上の例です,
-```js
-arr.constructor === PowerArray
-```
-
-なので、`arr.filter()` が呼ばれた時、それは内部で `new PowerArray` と同じ結果の新しい配列が作成されます。 そして、呼び出しのチェーンの下でさらに使い続けることができます。
-
-さらにその振る舞いをカスタマイズすることもできます。静的な getter `Symbol.species` が存在する場合、そのようなケースで使うためにコンストラクタを返します。
-
-例えば、ここでは `Symbol.species` によって、`map`, `filter` のような組み込みメソッドは "通常の" 配列を返します。:
-
-```js run
-class PowerArray extends Array {
- isEmpty() {
- return this.length == 0;
- }
-
-*!*
- // 組み込みのメソッドはこれをコンストラクタとして使います
- static get [Symbol.species]() {
- return Array;
- }
-*/!*
-}
-
-let arr = new PowerArray(1, 2, 5, 10, 50);
-alert(arr.isEmpty()); // false
-
-// fileter はコンストラクタとして arr.constructor[Symbol.species] を使って新しい配列を作ります。
-let filteredArr = arr.filter(item => item >= 10);
-
-*!*
-// filteredArr は PowerArray ではなく Array です
-*/!*
-alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty は関数ではありません
-```
-
-より高度な手段として使用し、不要な場合には結果の値から拡張機能を取り除くことができます。 あるいは、さらに拡張することもできます。
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object.png
deleted file mode 100644
index c5d712632f..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object@2x.png
deleted file mode 100644
index edc4e841ec..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-array-object@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal.png
deleted file mode 100644
index 70708c2848..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal@2x.png
deleted file mode 100644
index 0db1301815..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-animal@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal.png
deleted file mode 100644
index 387975a9c7..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal@2x.png
deleted file mode 100644
index ca73135933..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/class-inheritance-rabbit-run-animal@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance.png b/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance.png
deleted file mode 100644
index 542a0c9fa9..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance@2x.png
deleted file mode 100644
index 21485062a8..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/object-date-inheritance@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png
deleted file mode 100644
index 637d179398..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png b/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png
deleted file mode 100644
index af7b443bcb..0000000000
Binary files a/1-js/07-object-oriented-programming/10-class-inheritance/this-super-loop@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/11-instanceof/article.md b/1-js/07-object-oriented-programming/11-instanceof/article.md
deleted file mode 100644
index 99e7a7a490..0000000000
--- a/1-js/07-object-oriented-programming/11-instanceof/article.md
+++ /dev/null
@@ -1,213 +0,0 @@
-# クラスのチェック: "instanceof"
-
-`instanceof` 演算子でオブジェクトが特定のクラスに属しているのかを確認することができます。また、継承も考慮に入れます。
-
-このようなチェックが必要なケースは多々あるかもしれません。ここでは、その型に応じて引数を別々に扱う *多形(ポリモーフィック)* 関数を構築するために使用します。
-
-[cut]
-
-## instanceof 演算子
-
-構文は次の通りです:
-```js
-obj instanceof Class
-```
-
-それは `obj` が `Class` (または、それを継承しているクラス)に属している場合に `true` を返します。
-
-例:
-
-```js run
-class Rabbit {}
-let rabbit = new Rabbit();
-
-// Rabbit クラスのオブジェクト？
-*!*
-alert( rabbit instanceof Rabbit ); // true
-*/!*
-```
-
-それはコンストラクタ関数でも動作します。:
-
-```js run
-*!*
-// class の代わり
-function Rabbit() {}
-*/!*
-
-alert( new Rabbit() instanceof Rabbit ); // true
-```
-
-...また `Array` のような組み込みクラスでも動作します。:
-
-```js run
-let arr = [1, 2, 3];
-alert( arr instanceof Array ); // true
-alert( arr instanceof Object ); // true
-```
-
-`arr` は `Object` クラスにも属していることに留意してください。`Array` はプロトタイプ的に `Object` を継承しているためです。
-
-`instanceof` 演算子は確認のためにプロトタイプチェーンを検査し、それは静的メソッド `Symbo.hasInstance` を使って微調整することが可能です。
-
-`obj instanceof Class` のアルゴリズムはおおまかに次のように動作します。:
-
-1. もし静的メソッド `Symbol.hasInstance` があれば、それを使います。このようになります。:
-
- ```js run
- // canEat は animal と仮定
- class Animal {
- static [Symbol.hasInstance](obj) {
- if (obj.canEat) return true;
- }
- }
-
- let obj = { canEat: true };
- alert(obj instanceof Animal); // true: Animal[Symbol.hasInstance](obj)が呼ばれます
- ```
-
-2. ほとんどのクラスは `Symbol.hasInstance` を持っていません。このケースでは、`Class.prototype` が `obj` のプロトタイプチェーンうちの1つと等しいかをチェックします。
-
- 言い換えると、以下のような比較を行います:
- ```js
- obj.__proto__ == Class.prototype
- obj.__proto__.__proto__ == Class.prototype
- obj.__proto__.__proto__.__proto__ == Class.prototype
- ...
- ```
-
- 上の例では、`Rabbit.prototype == rabbit.__proto__` なので、すぐに回答が得られます。
-
- 継承のケースでは、`rabbit` も同様に親クラスのインスタンスです。:
-
- ```js run
- class Animal {}
- class Rabbit extends Animal {}
-
- let rabbit = new Rabbit();
- *!*
- alert(rabbit instanceof Animal); // true
- */!*
- // rabbit.__proto__ == Rabbit.prototype
- // rabbit.__proto__.__proto__ == Animal.prototype (match!)
- ```
-
-これは、`rabbit instanceof Animal` と `Animal.prototype` を比較したものです。:
-
-
-
-ところで、[objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf) というメソッドもあります。それは `objA` が `objB` のプロトタイプチェーンのどこかにあれば `true` を返します。なので、`obj instanceof Class` のテストは `Class.prototype.isPrototypeOf(obj)` と言い換えることができます。
-
-面白いことに、`Class` コンストラクタ自身はチェックには参加しません! プロトタイプと `Class.prototype`のチェーンだけです。
-
-これは `prototype` が変更されたときに興味深い結果につながります。
-
-このように:
-
-```js run
-function Rabbit() {}
-let rabbit = new Rabbit();
-
-// prototype を変更します
-Rabbit.prototype = {};
-
-// ...もう rabbit ではありません
-*!*
-alert( rabbit instanceof Rabbit ); // false
-*/!*
-```
-
-これが `prototype` の変更を避ける理由の1つです。安全を保つためです。
-
-## おまけ: 型のための Object toString
-
-私たちは通常の文字列は `[object Object]` という文字列に変換されることをすでに知っています。:
-
-```js run
-let obj = {};
-
-alert(obj); // [object Object]
-alert(obj.toString()); // 同じ
-```
-
-これが `toString` の実装です。しかし、実際にはそれよりもはるかに強力な `toString` を作る隠れた機能があります。それを拡張させて `typeof` または `instanceof` の代替として利用することができます。
-
-奇妙に聞こえますか？たしかに。分かりやすく説明しましょう。
-
-[仕様(specification)](https://tc39.github.io/ecma262/#sec-object.prototype.tostring)によって、組み込みの `toString` はオブジェクトから抽出し、任意の値のコンテキストで実行することができます。そして、その結果はその値に依存します。
-
-- 数値の場合、それは `[object Number]` になります。
-- 真偽値の場合、`[object Boolean]` になります。
-- `null` の場合: `[object Null]`
-- `undefined` の場合: `[object Undefined]`
-- 配列の場合: `[object Array]`
-- ...など (カスタマイズ可能).
-
-デモを見てみましょう:
-
-```js run
-// 使いやすくするために toString メソッドを変数にコピー
-let objectToString = Object.prototype.toString;
-
-// これの型はなに?
-let arr = [];
-
-alert( objectToString.call(arr) ); // [object Array]
-```
-
-ここでは、コンテキスト `this=arr` で関数 `objectToString` を実行するため、チャプター [デコレータと転送, call/apply](info:call-apply-decorators) で説明した [call](mdn:js/function/call) を使いました。
-
-内部的には、`toString` アルゴリズムは `this` を検査し、対応する結果を返します。ほかの例です。:
-
-```js run
-let s = Object.prototype.toString;
-
-alert( s.call(123) ); // [object Number]
-alert( s.call(null) ); // [object Null]
-alert( s.call(alert) ); // [object Function]
-```
-
-### Symbol.toStringTag
-
-Object `toString` の振る舞いは特別なオブジェクトプロパテ `Symbol.toStringTag` を使ってカスタマイズすることができます。
-
-例:
-
-```js run
-let user = {
- [Symbol.toStringTag]: 'User'
-};
-
-alert( {}.toString.call(user) ); // [object User]
-```
-
-ほとんどの環境固有のオブジェクトには、そのようなプロパティがあります。 ブラウザ固有の例はほとんどありません。:
-
-```js run
-// 環境固有のオブジェクトとクラスのtoStringTag:
-alert( window[Symbol.toStringTag]); // window
-alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest
-
-alert( {}.toString.call(window) ); // [object Window]
-alert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest]
-```
-
-ご覧の通り、結果は正確に `Symbol.toStringTag` (存在する場合)で、`[object ...]` の中にラップされています。
-
-最終的には、プリミティブなデータ型だけでなく、組み込みオブジェクトのためにも機能し、カスタマイズすることもできる "強化された typeof" があります。
-
-これは、型を文字列として取得するだけでなく、チェックするために、組み込みオブジェクトに対して `instanceof` の代わりに使用できます。
-
-## サマリ
-
-私たちが知っている型チェックメソッドについて再確認しましょう:
-
-| | 対象 | 戻り値 |
-|---------------|-------------|---------------|
-| `typeof` | プリミティブ | 文字列 |
-| `{}.toString` | プリミティブ, 組み込みオブジェクト, `Symbol.toStringTag` をもつオブジェクト | 文字列 |
-| `instanceof` | オブジェクト | true/false |
-
-ご覧のように、`{}.toString` は技術的には "より高度な" `typeof` です。
-
-そして、`instanceof` 演算子は、クラス階層を扱っていて継承を考慮したクラスのチェックをしたい場合に本当に輝きます。
diff --git a/1-js/07-object-oriented-programming/11-instanceof/instanceof.png b/1-js/07-object-oriented-programming/11-instanceof/instanceof.png
deleted file mode 100644
index 85aa9a55f3..0000000000
Binary files a/1-js/07-object-oriented-programming/11-instanceof/instanceof.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/11-instanceof/instanceof@2x.png b/1-js/07-object-oriented-programming/11-instanceof/instanceof@2x.png
deleted file mode 100644
index fba7712207..0000000000
Binary files a/1-js/07-object-oriented-programming/11-instanceof/instanceof@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/13-mixins/article.md b/1-js/07-object-oriented-programming/13-mixins/article.md
deleted file mode 100644
index d6dc647a63..0000000000
--- a/1-js/07-object-oriented-programming/13-mixins/article.md
+++ /dev/null
@@ -1,205 +0,0 @@
-# ミックスイン
-
-JavaScriptでは、単一のオブジェクトからのみ継承できます。オブジェクトの `[[Prototype]]` は1つしかありません。そしてクラスは1つの他のクラスだけを拡張することができます。
-
-しかし、それを制限と感じる場合があります。例えば、`StreetSweeper` と `Bycicle`c というクラスを持っていて、`StreetSweepingBycicle` を作りたい場合などです。
-
-あるいは `Renderer` クラスとイベントハンドラを実装する `EventEmitter` クラスを持っていて、テンプレートとイベントの発火を利用できるページを作るために、`Page` クラスで一緒にそれらの機能性をマージしたい場合があります。
-
-ここでは、それを助ける "mixins(ミックスイン)" と呼ばれるコンセプトがあります。
-
-Wikipedis の定義によると、[mixin](https://en.wikipedia.org/wiki/Mixin) は他のクラスの親クラスでないが、他のクラスで使用するためのメソッドを含むクラスです。
-
-つまり、*mixin* は特定の振る舞いを実装したメソッドを提供しますが、単独では使わず、別のクラスの振る舞いを追加するために使います。
-
-
-## mixin のサンプル
-
-JavaScriptで mixin を作る最もシンプルな方法は、役立つメソッドをもつオブジェクトを作ることです。そのすることで、それらを簡単にどのクラスのプロトタイプにもマージすることができます。
-
-例えば、ここでは mixin `sayHiMixin` は `User` のためのいくつかの "スピーチ" を追加するために使われます。:
-
-```js run
-*!*
-// mixin
-*/!*
-let sayHiMixin = {
- sayHi() {
- alert("Hello " + this.name);
- },
- sayBye() {
- alert("Bye " + this.name);
- }
-};
-
-*!*
-// 使い方:
-*/!*
-class User {
- constructor(name) {
- this.name = name;
- }
-}
-
-// メソッドをコピー
-Object.assign(User.prototype, sayHiMixin);
-
-// これで User は sayHi できます
-new User("Dude").sayHi(); // Hi Dude!
-```
-
-これは継承ではなく、単純なメソッドのコピーです。従って、`User` は他のクラスを拡張することができ、さらに以下のように追加のメソッドをミックスインするとして含めることができます:
-
-```js
-class User extends Person {
- // ...
-}
-
-Object.assign(User.prototype, sayHiMixin);
-```
-
-ミックスインは自身の内部で継承を活用することもできます。。
-
-例えば、ここでは `sayHiMixin` は `sayMixin` を継承しています。:
-
-```js run
-let sayMixin = {
- say(phrase) {
- alert(phrase);
- }
-};
-
-let sayHiMixin = {
- __proto__: sayMixin, // (またはここで prototype を設定するのに Object.create が使えます)
-
- sayHi() {
- *!*
- // 親のメソッド呼び出し
- */!*
- super.say("Hello " + this.name);
- },
- sayBye() {
- super.say("Bye " + this.name);
- }
-};
-
-class User {
- constructor(name) {
- this.name = name;
- }
-}
-
-// メソッドをコピー
-Object.assign(User.prototype, sayHiMixin);
-
-// これで User は sayHi できます
-new User("Dude").sayHi(); // Hello Dude!
-```
-
-`sayHiMixin` からの親メソッド `super.say()` の呼び出しは、クラスではなくそのミックスインのプロトタイプの中のメソッドを探すことに注意してください。
-
-
-
-これは `sayHiMixin` のメソッドに `[[HomeObject]]` がセットされているからです。そのため、`super` は実際には `sayHiMixin.__proto__`を意味し、`User.__proto__`を意味しません。
-
-## イベントMixin
-
-さて、実践のためのミックスインを作ってみましょう。
-
-多くのオブジェクトの重要な特徴はイベントを扱うことです。
-
-つまり: オブジェクトには、何か重要な事が起きたときに "イベントを生成する" メソッドが必要であり、他のオブジェクトはこのようなイベントを "リッスン" できる必要があります。
-
-イベントには名前が必要であり、必要に応じて追加データをバンドルする必要があります。
-
-例えば、オブジェクト `user` は訪問者がログインするときに `"login"` というイベントを生成することができます。そして、別オブジェクト `calendar` はログインした人のカレンダーをロードするために、このようなイベントを受けりたいかもしれません。
-
-あるいは、`menu` はメニューアイテムが選択されたときに `"select"` イベントを生成することができ、他のオブジェクトはその情報を取得したりイベントに反応したいかもしれません。
-
-イベントは、それを望む人と "情報を共有する" 方法です。 それらはどのクラスでも役に立ちますので、そのためのミックスインを作ってみましょう:
-
-```js run
-let eventMixin = {
- /**
- * イベントの購読, 使い方:
- * menu.on('select', function(item) { ... }
- */
- on(eventName, handler) {
- if (!this._eventHandlers) this._eventHandlers = {};
- if (!this._eventHandlers[eventName]) {
- this._eventHandlers[eventName] = [];
- }
- this._eventHandlers[eventName].push(handler);
- },
-
- /**
- * 購読のキャンセル 使い方:
- * menu.off('select', handler)
- */
- off(eventName, handler) {
- let handlers = this._eventHandlers && this._eventHandlers[eventName];
- if (!handlers) return;
- for(let i = 0; i < handlers.length; i++) {
- if (handlers[i] == handler) {
- handlers.splice(i--, 1);
- }
- }
- },
-
- /**
- * イベントを生成してデータをアタッチ
- * this.trigger('select', data1, data2);
- */
- trigger(eventName, ...args) {
- if (!this._eventHandlers || !this._eventHandlers[eventName]) {
- return; // イベントに対応するハンドラがない場合
- }
-
- // ハンドラ呼び出し
- this._eventHandlers[eventName].forEach(handler => handler.apply(this, args));
- }
-};
-```
-
-ここでは3つのメソッドがあります:
-
-1. `.on(eventName, handler)` -- その名前のイベントが発生した時に実行するための関数 `handler` を割り当てます。ハンドラは `_eventHandlers` プロパティの中に格納されます。
-2. `.off(eventName, handler)` -- ハンドラリストから関数を削除します。
-3. `.trigger(eventName, ...args)` -- イベントを生成します: すべての割り当てられたハンドラが呼び出され、`args` がそれらの引数として渡されます。
-
-使い方:
-
-```js run
-// クラスを作成
-class Menu {
- choose(value) {
- this.trigger("select", value);
- }
-}
-// mixin を追加
-Object.assign(Menu.prototype, eventMixin);
-
-let menu = new Menu();
-
-// 選択時にハンドラを呼び出し
-*!*
-menu.on("select", value => alert("Value selected: " + value));
-*/!*
-
-// イベントのトリガ => Value selected: 123 を表示
-menu.choose("123"); // 選択された値
-```
-
-これで、もしユーザ選択に反応するためのコードがある場合、`menu.on(...)` でバインドすることができます。
-
-そして、`eventMixin` は継承のチェーンを邪魔することなく、我々が望むだけのクラスに対してこのような振る舞いを追加することができます。
-
-## サマリ
-
-*Mixin(ミックスイン)* -- は一般的なオブジェクト指向プログラミングの言葉です: 他のクラスのためのメソッドを含むクラスです。
-
-python のようないくつかの他の言語は、多重継承を使いミックスインを作成することができます。JavaScriptでは多重継承をサポートしていませんが、プロトタイプにそれらをコピーすることでミックスインを実装することができます。
-
-上で見てきたように、イベントハンドリングのような複数の振る舞いによってクラスを拡張する方法としてミックスインが利用できます。
-
-時折、ミックスインがネイティブのクラスメソッドを上書きすると、矛盾する点になることがあります。なので、一般的にはこのような可能性を最小化するために、ミックスインの名付けについてよく考える必要があります。
diff --git a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance.png b/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance.png
deleted file mode 100644
index 7cc655036f..0000000000
Binary files a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance@2x.png b/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance@2x.png
deleted file mode 100644
index f53ecf68fd..0000000000
Binary files a/1-js/07-object-oriented-programming/13-mixins/mixin-inheritance@2x.png and /dev/null differ
diff --git a/1-js/07-object-oriented-programming/index.md b/1-js/07-object-oriented-programming/index.md
deleted file mode 100644
index c6d08b0936..0000000000
--- a/1-js/07-object-oriented-programming/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# オブジェクト、クラス、継承
-
-このセクションでは、オブジェクトに戻りさらに深く学びます。
diff --git a/1-js/07-object-properties/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md
new file mode 100644
index 0000000000..9647d82679
--- /dev/null
+++ b/1-js/07-object-properties/01-property-descriptors/article.md
@@ -0,0 +1,349 @@
+
+# プロパティフラグとディスクリプタ
+
+ご存知の通り、オブジェクトはプロパティを格納できます。
+
+これまで、プロパティは単純な "key-value" ペアでしたが、実際にはオブジェクトプロパティはより柔軟で強力なものです。
+
+この章では、追加の設定オプションについて説明し、次の章では、それらを見えない形、getter/setter 関数にする方法について見ていきます。
+
+## プロパティフラグ
+
+オブジェクトプロパティには、 **`value`** の他に、3つの特別な属性があります("フラグ" と呼ばれています)。
+
+- **`writable`** -- `true` の場合、変更可能です。それ以外の場合は読み取り専用です。
+- **`enumerable`** -- `true` の場合、ループで列挙されます。それ以外の場合は列挙されません。
+- **`configurable`** -- `true` の場合、プロパティを削除したり属性の変更ができます。
+
+一般的にこれらは姿を見せることがないため、まだ見ていませんでした。"通常の方法" でプロパティを作成するとき、これらはすべて `true` です。が、いつでもそれを変更することができます。
+
+まず、フラグを取得する方法を見てみましょう。
+
+メソッド [Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor) で、プロパティの *完全な* 情報を参照することができます。
+
+構文は次の通りです:
+```js
+let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
+```
+
+`obj`
+: 情報を取得するオブジェクトです。
+
+`propertyName`
+: プロパティ名です。
+
+返却値はいわゆる "プロパティディスクリプタ" オブジェクトと呼ばれます。: それは値とすべてのフラグを含んでいます。
+
+例:
+
+```js run
+let user = {
+ name: "John"
+};
+
+let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
+
+alert( JSON.stringify(descriptor, null, 2 ) );
+/* プロパティディスクリプタ:
+{
+ "value": "John",
+ "writable": true,
+ "enumerable": true,
+ "configurable": true
+}
+*/
+```
+
+[Object.defineProperty](mdn:js/Object/defineProperty) でフラグの変更ができます。
+
+構文:
+
+```js
+Object.defineProperty(obj, propertyName, descriptor)
+```
+
+`obj`, `propertyName`
+: 処理するオブジェクトとプロパティです。
+
+`descriptor`
+: 適用するプロパティディスクリプタです。
+
+プロパティが存在する場合、`defineProperty` はそのフラグを更新します。存在しない場合は指定された値とフラグでプロパティを作ります。その場合に、もしフラグが指定されていなければ `false` とみなされます。
+
+例えば、ここではプロパティ `name` はすべて `false` のフラグで作られます。:
+
+```js run
+let user = {};
+
+*!*
+Object.defineProperty(user, "name", {
+ value: "John"
+});
+*/!*
+
+let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
+
+alert( JSON.stringify(descriptor, null, 2 ) );
+/*
+{
+ "value": "John",
+*!*
+ "writable": false,
+ "enumerable": false,
+ "configurable": false
+*/!*
+}
+ */
+```
+
+"通常の方法で" 作成された `user.name` と上記を比較してください。今すべてのフラグは `false` です。このようにしたくなければ、`descriptor` で `true` をセットするのがよいでしょう。
+
+では、例を使ってフラグの影響を見てみましょう。
+
+## 書き込み不可(Non-writable)
+
+`writable` フラグを変更して `user.name` を書き込み不可（再代入不可）にしてみましょう:
+
+```js run
+let user = {
+ name: "John"
+};
+
+Object.defineProperty(user, "name", {
+*!*
+ writable: false
+*/!*
+});
+
+*!*
+user.name = "Pete"; // Error: Cannot assign to read only property 'name'...
+*/!*
+```
+
+これで、`defineProperty` で上書きをしない限りは、誰も user.name を変えることはできません。
+
+```smart header="strict mode の場合のみエラーが表示されます"
+非 strict mode の場合、書き込み不可プロパティへの書き込みをしてもエラーは発生しません。ですが、操作は依然として成功はしません。非 strict 下では、フラグ違反の操作は単に無視されます。
+```
+
+これは先程と同じ例ですが、スクラッチでプロパティを作成します:
+
+```js run
+let user = { };
+
+Object.defineProperty(user, "name", {
+*!*
+ value: "Pete",
+ // 新しいプロパティに対して、true のものは明示的に列挙する必要があります
+ enumerable: true,
+ configurable: true
+*/!*
+});
+
+alert(user.name); // Pete
+user.name = "Alice"; // Error
+```
+
+## 列挙可能でない(Non-enumerable)
+
+カスタムの `toString` を `user` に追加しましょう。
+
+通常、オブジェクトが持つ組み込みの `toString` は列挙可能ではありません。それは `for..in` では表示されません。しかし私たちが自身の `toString` を追加した場合、デフォルトではこのように `for..in` で表示されます。:
+
+```js run
+let user = {
+ name: "John",
+ toString() {
+ return this.name;
+ }
+};
+
+// デフォルトでは、両方のプロパティは列挙されます:
+for (let key in user) alert(key); // name, toString
+```
+
+列挙されたくなければ、`enumerable:false` をセットします。すると、組み込みの関数同様、`for..in` ループで列挙されなくなります。:
+
+```js run
+let user = {
+ name: "John",
+ toString() {
+ return this.name;
+ }
+};
+
+Object.defineProperty(user, "toString", {
+*!*
+ enumerable: false
+*/!*
+});
+
+*!*
+// これで toString は消えました:
+*/!*
+for (let key in user) alert(key); // name
+```
+
+列挙可能でないプロパティは `Object.keys` からも除外されます。:
+
+```js
+alert(Object.keys(user)); // name
+```
+
+## 変更できない(Non-configurable)
+
+組み込みオブジェクトやプロパティに対しては、変更不可フラグ（`configurable:false`）がプリセットされることがあります。
+
+変更できないプロパティは削除したり変更することができません。
+
+例えば、`Math.PI` は書き込み不可で、列挙不可であり、変更不可です:
+
+```js run
+let descriptor = Object.getOwnPropertyDescriptor(Math, 'PI');
+
+alert( JSON.stringify(descriptor, null, 2 ) );
+/*
+{
+ "value": 3.141592653589793,
+ "writable": false,
+ "enumerable": false,
+ "configurable": false
+}
+*/
+```
+したがって、プログラマは `Math.PI` の値を変えることも上書きすることもできません。
+
+```js run
+Math.PI = 3; // Error
+
+// delete Math.PI もまた動作しません
+```
+
+`Math.PI` を再度 `writable` にすることもできません。:
+
+```js run
+// Error, configurable: false なので
+Object.defineProperty(Math, "PI", { writable: true });
+```
+
+`Math.PI` についてはは何もできません。
+
+変更不可なプロパティの作成は一方通行であり、それを `defineProperty` 戻すことはできません。
+
+**注意: `configurable: false` はプロパティフラグの変更や削除を禁止しますが、値を変更することは可能です**
+
+ここでは、 `user.name` は変更不可ですが、依然として変更はできます（書き込み可なので）:
+
+```js run
+let user = {
+ name: "John"
+};
+
+Object.defineProperty(user, "name", {
+ configurable: false
+});
+
+user.name = "Pete"; // 動作します
+delete user.name; // Error
+```
+
+また、以下は組み込みの`Math.PI` のように `user.name` を "永遠に封印された定数" にしています。
+
+```js run
+let user = {
+ name: "John"
+};
+
+Object.defineProperty(user, "name", {
+ writable: false,
+ configurable: false
+});
+
+// user.name とフラグは変更できません
+// これらはすべて動作しません:
+user.name = "Pete";
+delete user.name;
+Object.defineProperty(user, "name", { value: "Pete" });
+```
+
+```smart header="唯一可能な属性変更: writable true -> false"
+フラグ変更に関する小さな例外があります。
+
+変更不可プロパティに対して、`writable: true` を `false` に変更し、値の変更を防ぐことができます。しかし、その逆はできません。
+```
+
+## Object.defineProperties
+
+一度に多くのプロパティが定義できるメソッド [Object.defineProperties(obj, descriptors)](mdn:js/Object/defineProperties)もあります。
+
+構文は次の通りです:
+
+```js
+Object.defineProperties(obj, {
+ prop1: descriptor1,
+ prop2: descriptor2
+ // ...
+});
+```
+
+例えば:
+
+```js
+Object.defineProperties(user, {
+ name: { value: "John", writable: false },
+ surname: { value: "Smith", writable: false },
+ // ...
+});
+```
+
+なので、一度に多くのプロパティをセットできます。
+
+## Object.getOwnPropertyDescriptors
+
+一度にすべてのプロパティのディスクリプタを取得するには、[Object.getOwnPropertyDescriptors(obj)](mdn:js/Object/getOwnPropertyDescriptors) が使用できます。
+
+`Object.defineProperties` と合わせて、"フラグを意識して" オブジェクトをクローンする方法として使うことができます。:
+
+```js
+let clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));
+```
+
+通常、オブジェクトをクローンするとき、次のようにプロパティをコピーするために代入を使います。:
+
+```js
+for (let key in user) {
+ clone[key] = user[key]
+}
+```
+
+...ですが、これはフラグはコピーしません。そのため、"より良い" クローンを望むなら、 `Object.defineProperties` が好まれます。
+
+もう１つの違いは、`for..in` はシンボルプロパティを無視しますが、`Object.getOwnPropertyDescriptors` はシンボリックなものを含む *すべての* プロパティディスクリプタを返します。
+
+## グローバルにオブジェクトを隠す
+
+プロパティディスクリプタは個々のプロパティのレベルで動作します。
+
+そこには、オブジェクト *全体* へのアクセスを制限するメソッドもあります。:
+
+[Object.preventExtensions(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions)
+: オブジェクトにプロパティを追加するのを禁止します。
+
+[Object.seal(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal)
+: プロパティの追加、削除を禁止し、既存のすべてのプロパティに `configurable: false` をセットします。
+
+[Object.freeze(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)
+: プロパティの追加、削除、変更を禁止し、既存のすべてのプロパティに `configurable: false, writable: false` をセットします。
+
+また、それらを確認する方法もあります:
+
+[Object.isExtensible(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible)
+: プロパティの追加が禁止されている場合に `false` を返します。それ以外は `true` です。
+
+[Object.isSealed(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed)
+: プロパティの追加、削除が禁止されており、すべての既存のプロパティが `configurable: false` を持っている場合に `true` を返します。
+
+[Object.isFrozen(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen)
+: プロパティの追加、削除、変更が禁止されており、すべての現在のプロパティが `configurable: false, writable: false` の場合に `true` を返します。
+
+これらのメソッドは実際にはめったに使われません。
diff --git a/1-js/07-object-properties/02-property-accessors/article.md b/1-js/07-object-properties/02-property-accessors/article.md
new file mode 100644
index 0000000000..7d83b91544
--- /dev/null
+++ b/1-js/07-object-properties/02-property-accessors/article.md
@@ -0,0 +1,244 @@
+
+# プロパティ getters と setters
+
+オブジェクトプロパティには2種類あります。
+
+１つ目は *データプロパティ* です。我々は既にそれがどのように動作するのか知っています。実際、これまで使ってきたすべてのプロパティはデータプロパティでした。
+
+2つ目のプロパティの種類は新しいものです。それは *アクセサプロパティ* です。これらは基本的には値の取得やセットをする関数ですが、外部コードからは通常のプロパティのように見えます。
+
+## Getters と setters
+
+アクセサプロパティは "getter" と "setter" メソッドで表現されます。オブジェクトリテラルでは、`get` と `set` で表されます:
+
+```js
+let obj = {
+ *!*get propName()*/!* {
+ // getter, obj.propName を取得するときにコードが実行されます
+ },
+
+ *!*set propName(value)*/!* {
+ // setter, obj.propName = value 時にコードが実行されます
+ }
+};
+```
+
+`obj.propName` が読まれたときに getter は動作し、setter は割り当てられたときに動作します。
+
+例えば、`name` と `surname` を持つ `user` オブジェクトがあります。:
+
+```js run
+let user = {
+ name: "John",
+ surname: "Smith"
+};
+```
+
+今、"John Smith" という値を持つ "fullName" プロパティを追加したいとします。もちろん、既存の情報のコピーペーストはしたくありません。ここで、アクセサを使用して実装することができます。:
+
+```js run
+let user = {
+ name: "John",
+ surname: "Smith",
+
+*!*
+ get fullName() {
+ return `${this.name} ${this.surname}`;
+ }
+*/!*
+};
+
+*!*
+alert(user.fullName); // John Smith
+*/!*
+```
+
+外部からは、アクセサプロパティは通常の変数に見えます。それがアクセサプロパティの考え方です。関数として `user.fullName` を *呼び出すのではなく*、通常通り *読み込みます*。: getter は背後で実行されます。
+
+今のところ、`fullName` は getter しか持っていません。`user.fullName =` を指定しようとすると、エラーになります。
+
+```js run
+let user = {
+ get fullName() {
+ return `...`;
+ }
+};
+
+*!*
+user.fullName = "Test"; // Error (property has only a getter)
+*/!*
+```
+
+`user.fullName` の setter を追加して修正しましょう。:
+
+```js run
+let user = {
+ name: "John",
+ surname: "Smith",
+
+ get fullName() {
+ return `${this.name} ${this.surname}`;
+ },
+
+*!*
+ set fullName(value) {
+ [this.name, this.surname] = value.split(" ");
+ }
+*/!*
+};
+
+// set fullName は指定された値で実行されます
+user.fullName = "Alice Cooper";
+
+alert(user.name); // Alice
+alert(user.surname); // Cooper
+```
+
+結果、"仮想" プロパティ `fullName` を持っており、これは読み書き可能です。
+
+## アクセサディスクリプタ
+
+アクセサプロパティのディスクリプタは、データプロパティと比べて異なります。
+
+アクセサプロパティには、`value` も `writable` もありませんが、代わりに、`get` と `set` があります。
+
+したがって、アクセサディスクリプタには次のものがあります:
+
+- **`get`** -- 引数なしの関数で、プロパティが読まれたときに動作します。
+- **`set`** -- 1つの引数をもつ関数で、プロパティがセットされたときに呼ばれます。
+- **`enumerable`** -- データプロパティと同じです。
+- **`configurable`** -- データプロパティと同じです。
+
+例えば、アクセサ `fullName` を `defineProperty` で作るとき、`get` と `set` をディスクリプタに渡すことができます。:
+
+```js run
+let user = {
+ name: "John",
+ surname: "Smith"
+};
+
+*!*
+Object.defineProperty(user, 'fullName', {
+ get() {
+ return `${this.name} ${this.surname}`;
+ },
+
+ set(value) {
+ [this.name, this.surname] = value.split(" ");
+ }
+*/!*
+});
+
+alert(user.fullName); // John Smith
+
+for(let key in user) alert(key); // name, surname
+```
+
+プロパティはアクセサ（`get/set` メソッドを持つ）かデータプロパティ（`value`を持つ）のいずれかになれますが、両方にはなれないことに注意してください。
+
+`get` と `value` を同じディスクリプタで指定すると、エラーになります。:
+
+```js run
+*!*
+// Error: Invalid property descriptor.
+*/!*
+Object.defineProperty({}, 'prop', {
+ get() {
+ return 1
+ },
+
+ value: 2
+});
+```
+
+## スマートな getters/setters
+
+Getter/setter は、"実際の" プロパティ値のラッパーとして使用することで、それらをより詳細に制御することができます。
+
+例えば、`user` で短すぎる名前を禁止したい場合、`name` を特別なプロパティ `_name` に格納することができます。そして、setter で値をフィルタします。:
+
+```js run
+let user = {
+ get name() {
+ return this._name;
+ },
+
+ set name(value) {
+ if (value.length < 4) {
+ alert("Name is too short, need at least 4 characters");
+ return;
+ }
+ this._name = value;
+ }
+};
+
+user.name = "Pete";
+alert(user.name); // Pete
+
+user.name = ""; // Name is too short...
+```
+
+そのため、 名前は `_name` プロパティに格納され、アクセスは getter/setter と通して行われます。
+
+技術的には、外部コードは `user._name` を使うことで、直接 name にアクセスできるかもしれません。しかし、アンダースコア `"_"` で始まるプロパティは内部のもので、外部のオブジェクトから触るべきではないということは広く知られています。
+
+
+## 互換性のために使用する
+
+getter と setter の裏にある素晴らしいアイデアの1つは、それらは "通常の" データプロパティを制御し、それをいつでも調整することができることです。
+
+例えば、データプロパティ `name` と `age` を使って user オブジェクトを実装し始めました。:
+
+```js
+function User(name, age) {
+ this.name = name;
+ this.age = age;
+}
+
+let john = new User("John", 25);
+
+alert( john.age ); // 25
+```
+
+...しかし、遅かれ早かれそれを変更するかもしれません。より正確にするために、`age` の代わりに `birthday` を格納することに決めるかもしれません。:
+
+```js
+function User(name, birthday) {
+ this.name = name;
+ this.birthday = birthday;
+}
+
+let john = new User("John", new Date(1992, 6, 1));
+```
+
+さて、まだ `age` プロパティを使っている古いコードはどうすればよいでしょうか？
+
+そのような箇所をすべて見つけて直していくこともできますが、時間がかかったり別の人が書いているコードであれば直すのが難しいかもしれません。その上、`age` は `user` が持っていても良いものですよね？
+
+そのままにしておきましょう。
+
+`age` の getter を追加することで問題が解消できます:
+
+```js run no-beautify
+function User(name, birthday) {
+ this.name = name;
+ this.birthday = birthday;
+
+*!*
+ // age は現在の日付と誕生日から計算されます
+ Object.defineProperty(this, "age", {
+ get() {
+ let todayYear = new Date().getFullYear();
+ return todayYear - this.birthday.getFullYear();
+ }
+ });
+*/!*
+}
+
+let john = new User("John", new Date(1992, 6, 1));
+
+alert( john.birthday ); // birthday は利用可能です
+alert( john.age ); // ...age も同様です
+```
+
+これで古いコードも機能しつつ、追加のプロパティも追加できました。
diff --git a/1-js/07-object-properties/index.md b/1-js/07-object-properties/index.md
new file mode 100644
index 0000000000..4af7d08742
--- /dev/null
+++ b/1-js/07-object-properties/index.md
@@ -0,0 +1,4 @@
+# オブジェクトプロパティの設定
+
+このセクションでは、オブジェクトに戻り、そのプロパティについて、より深く学んでいきます。
+
diff --git a/1-js/08-error-handling/1-try-catch/article.md b/1-js/08-error-handling/1-try-catch/article.md
deleted file mode 100644
index 3edf60400b..0000000000
--- a/1-js/08-error-handling/1-try-catch/article.md
+++ /dev/null
@@ -1,662 +0,0 @@
-# エラーハンドリング, "try..catch"
-
-どんなに我々のプログラミングが素晴らしくても、スクリプトがエラーになることはあります。それはミス、予期しないユーザ入力、間違ったサーバレスポンスやその他多くの理由により発生する可能性があります。
-
-通常、エラーケースではスクリプトは "死" (即時に停止) に、それをコンソールに出力します。
-
-しかし、エラーを "キャッチ" し、死ぬ代わりにより意味のあることをする構文構造 `try..catch` があります。
-
-[cut]
-
-## "try..catch" 構文
-
-`try..catch` 構造は2つのメインブロックを持っています: `try` と `catch` です。:
-
-```js
-try {
-
- // code...
-
-} catch (err) {
-
- // error handling
-
-}
-```
-
-それは次のように動作します:
-
-1. まず、`try {...}` のコードが実行されます。
-2. エラーがなければ、`catch(err)` は無視されます: 実行が `try` の最後に到達した後、`catch` を飛び越えます。
-3. エラーが発生した場合、`try` の実行が停止し、コントロールフローは `catch(err)` の先頭になります。`err` 変数(任意の名前が使えます)は発生した事象に関する詳細をもつエラーオブジェクトを含んでいます。
-
-
-
-従って、`try {…}` ブロックの内側のエラーはスクリプトを殺しません: `catch` の中でそれを扱う機会が持てます。
-
-より多くの例を見てみましょう。
-
-- エラーなしの例: `alert` `(1)` と `(2)` を表示します:
-
- ```js run
- try {
-
- alert('Start of try runs'); // *!*(1) <--*/!*
-
- // ...ここではエラーはありません
-
- alert('End of try runs'); // *!*(2) <--*/!*
-
- } catch(err) {
-
- alert('Catch is ignored, because there are no errors'); // (3)
-
- }
-
- alert("...Then the execution continues");
- ```
-- エラーの例: `(1)` と `(3)` を表示します:
-
- ```js run
- try {
-
- alert('Start of try runs'); // *!*(1) <--*/!*
-
- *!*
- lalala; // エラー, 変数は宣言されていません!
- */!*
-
- alert('End of try (never reached)'); // (2)
-
- } catch(err) {
-
- alert(`Error has occured!`); // *!*(3) <--*/!*
-
- }
-
- alert("...Then the execution continues");
- ```
-
-
-````warn header="`try..catch` は実行時エラーにのみ作用します"
-`try..catch` を動作させるために、コードは実行可能でなければなりません。つまり、有効なJavaScriptである必要があります。
-
-もしコードが構文的に誤っている場合には動作しません。例えば次は角括弧の不一致です:
-
-```js run
-try {
- {{{{{{{{{{{{
-} catch(e) {
- alert("The engine can't understand this code, it's invalid");
-}
-```
-
-JavaScriptエンジンは最初にコードを読み、次にそれを実行します。読み込みのフェーズで発生したエラーは "解析時間(parse-time)" エラーと呼ばれ、回復不能です(コードの内部からは)。なぜなら、エンジンはそのコードを理解することができないからです。
-
-そのため、`try..catch` は有効なコードの中で起きたエラーのみを扱うことができます。このようなエラーは "ランタイムエラー" または "例外" と呼ばれます。
-````
-
-
-````warn header="`try..catch` は同期的に動作します"
-もし `setTimeout` の中のような "スケジュールされた" コードで例外が発生した場合、`try..catch` はそれをキャッチしません。:
-
-```js run
-try {
- setTimeout(function() {
- noSuchVariable; // スクリプトはここで死にます
- }, 1000);
-} catch (e) {
- alert( "won't work" );
-}
-```
-
-`try..catch` は実際には関数をスケジュールする `setTimeout` 呼び出しをラップするためです。しかし関数自身は後で実行され、その時エンジンはすでに `try..catch` 構造を抜けています。
-
-スケジュールされた関数の内側の例外をキャッチするためには、その関数の中に `try..catch` が必要です。:
-```js run
-setTimeout(function() {
- try {
- noSuchVariable; // try..catch がエラーをハンドリングします!
- } catch (e) {
- alert( "error is caught here!" );
- }
-}, 1000);
-```
-````
-
-## エラーオブジェクト
-
-エラーが発生したとき、JavaScript はその詳細を含めたオブジェクトを生成します。そして `catch` の引数として渡されます。:
-
-```js
-try {
- // ...
-} catch(err) { // <-- "エラーオブジェクト", err の代わりに別の名前を使うこともできます
- // ...
-}
-```
-
-すべての組み込みのエラーに対して、`catch` ブロック内のエラーオブジェクトは2つの主なプロパティを持っています。:
-
-`name`
-: エラー名です。未定義変数の場合、それは `"ReferenceError"` です。
-
-`message`
-: エラー詳細に関するテキストメッセージです。
-
-ほとんどの環境では、その他非標準のプロパティが利用可能です。最も広く使われ、サポートされているのは以下です:
-
-`stack`
-: 現在のコールスタックです: エラーに繋がったネスト呼び出しのシーケンスに関する情報を持つ文字列です。デバッグ目的で使われます。
-
-例:
-
-```js run untrusted
-try {
-*!*
- lalala; // エラー, 変数が宣言されていません!
-*/!*
-} catch(err) {
- alert(err.name); // ReferenceError
- alert(err.message); // lalala is not defined
- alert(err.stack); // ReferenceError: lalala is not defined at ...
-
- // 全体としてエラーを表示する事もできます
- // エラーは "name: message" として文字列に変換されます
- alert(err); // ReferenceError: lalala is not defined
-}
-```
-
-
-## "try..catch" の利用
-
-`try..catch` の実際のユースケースについて探索してみましょう。
-
-既にご存知の通り、JavaScriptは JSONエンコードされた値を読むためのメソッド [JSON.parse(str)](mdn:js/JSON/parse) がサポートされています。
-
-通常、それはネットワーク経由でサーバまたは別のソースから受信したデータをデコードするために使われます。
-
-今、次のようにデータを受信し、`JSON.parse` を呼び出します。:
-
-```js run
-let json = '{"name":"John", "age": 30}'; // サーバからのデータ
-
-*!*
-let user = JSON.parse(json); // テキスト表現をJSオブジェクトに変換
-*/!*
-
-// 今、 user 文字列からプロパティを持つオブジェクトです
-alert( user.name ); // John
-alert( user.age ); // 30
-```
-
-JSON に関する詳細な情報は、チャプター を参照してください。
-
-**`json` が不正な形式の場合、`JSON.parse` はエラーになるのでスクリプトは "死にます"。**
-
-それで満足しますか？もちろん満足しません!
-
-この方法だと、もしデータが何か間違っている場合、訪問者はそれを知ることができません(開発者コンソールを開かない限り)。また、人々は、エラーメッセージなしで何かが "単に死んでいる" ことを本当に本当に嫌います。
-
-エラーを扱うために `try..catch` を使いましょう。:
-
-```js run
-let json = "{ bad json }";
-
-try {
-
-*!*
- let user = JSON.parse(json); // <-- エラーが起きたとき...
-*/!*
- alert( user.name ); // 動作しません
-
-} catch (e) {
-*!*
- // ...実行はここに飛びます
- alert( "Our apologies, the data has errors, we'll try to request it one more time." );
- alert( e.name );
- alert( e.message );
-*/!*
-}
-```
-
-ここでは、メッセージを表示するためのだけに `catch` ブロックを使っていますが、より多くのことをすることができます。: 新たなネットワーク要求、訪問者への代替手段の提案、ロギング機構へエラーに関する情報の送信... すべて、単に死ぬよりははるかに良いです。
-
-## 我々独自のエラーをスローする
-
-仮に `json` が構文的に正しいが、必須の `"name"` プロパティを持っていない場合どうなるでしょう？
-
-このように:
-
-```js run
-let json = '{ "age": 30 }'; // 不完全なデータ
-
-try {
-
- let user = JSON.parse(json); // <-- エラーなし
-*!*
- alert( user.name ); // name はありません!
-*/!*
-
-} catch (e) {
- alert( "doesn't execute" );
-}
-```
-
-ここで、`JSON.parse` は通常どおり実行しますが、`"name"` の欠落は実際には我々にとってはエラーです。
-
-エラー処理を統一するために、`throw` 演算子を使います。
-
-### "Throw" 演算子
-
-`throw` 演算子はエラーを生成します。
-
-構文は次の通りです:
-
-```js
-throw
-```
-
-技術的には、エラーオブジェクトとしてなんでも使うことができます。たとえ、数値や文字列のようなプリミティブでもOKです。しかし、`name` と `message` プロパティを持つオブジェクトを使うのがベターです(組み込みのエラーと互換性をいくらか保つために)。
-
-JavaScriptは標準エラーのための多くの組み込みのコンストラクタを持っています: `Error`, `SyntaxError`, `ReferenceError`, `TypeError` などです。私たちは同じようにエラーオブジェクトを作るのにそれらが使えます。
-
-構文は次の通りです:
-
-```js
-let error = new Error(message);
-// or
-let error = new SyntaxError(message);
-let error = new ReferenceError(message);
-// ...
-```
-
-組み込みのエラー(任意のオブジェクトではなく、エラーのみ)では、`name` プロパティはコンストラクタの名前と全く同じになります。そして `message` は引数から取られます。
-
-例:
-
-```js run
-let error = new Error("Things happen o_O");
-
-alert(error.name); // Error
-alert(error.message); // Things happen o_O
-```
-
-`JSON.parse` が生成するエラーの種類を見てみましょう:
-
-```js run
-try {
- JSON.parse("{ bad json o_O }");
-} catch(e) {
-*!*
- alert(e.name); // SyntaxError
-*/!*
- alert(e.message); // Unexpected token o in JSON at position 0
-}
-```
-
-ご覧の通り、それは `SyntaxError` です。
-
-...そして、我々のケースでは、ユーザは必ず `"name"` を持っていると仮定するので、`name` の欠落もまた構文エラーとして扱います。
-
-なので、それをスローするようにしましょう:
-
-```js run
-let json = '{ "age": 30 }'; // 不完全なデータ
-
-try {
-
- let user = JSON.parse(json); // <-- エラーなし
-
- if (!user.name) {
-*!*
- throw new SyntaxError("Incomplete data: no name"); // (*)
-*/!*
- }
-
- alert( user.name );
-
-} catch(e) {
- alert( "JSON Error: " + e.message ); // JSON Error: Incomplete data: no name
-}
-```
-
-行 `(*)` で、`throw` 演算子が与えられた `message` で `SyntaxError` を生成します。それは JavaScript が生成するのと同じ方法です。`try` の実行はすぐに停止し、制御フローは `catch` に移ります。
-
-今や、`catch` はすべてのエラーハンドリングのための1つの場所になりました。: `JSON.parse` と他のケース。
-
-## 再スロー
-
-上の例で、私たちは不正なデータを処理するために `try..catch` を使っています。しかし、`try {...}` ブロックの中で *別の予期しないエラー* が発生する可能性はあるでしょうか？ 変数が未定義、またはその他、単に "不正なデータ" ではない何か。
-
-このように:
-
-```js run
-let json = '{ "age": 30 }'; // 不完全なデータ
-
-try {
- user = JSON.parse(json); // <-- user の前に "let" をつけ忘れた
-
- // ...
-} catch(err) {
- alert("JSON Error: " + err); // JSON Error: ReferenceError: user is not defined
- // (実際にはJSONのエラーではありません)
-}
-```
-
-もちろん、すべての可能性があります! プログラマはミスをするものです。何十年も何百万人もの人が使っているオープンソースのユーティリティであっても、突然酷いバグが発見され、ひどいハッキングにつながることがあります（ `ssh` ツールで起こったようなものです）。
-
-私たちのケースでは、`try..catch` は "不正なデータ" エラーをキャッチすることを意図しています。しかし、その性質上、`catch` は `try` からの *すべての* エラーを取得します。ここでは予期しないエラーが発生しますが、同じ `"JSON Error"` メッセージが表示されます。それは誤りでコードのでバッグをより難しくします。
-
-幸いにも、どのエラーを取得したかを知ることができます。例えば、`name` から:
-
-```js run
-try {
- user = { /*...*/ };
-} catch(e) {
-*!*
- alert(e.name); // 未定義変数へのアクセスに対する "ReferenceError"
-*/!*
-}
-```
-
-ルールはシンプルです。:
-
-**キャッチはそれが知っているエラーだけを処理し、すべてのオブジェクトを "再スロー" するべきです**
-
-"再スロー" テクニックの詳細は次のように説明できます:
-
-1. すべてのエラーをキャッチします。
-2. `catch(err) {...}` ブロックで、エラーオブジェクト `err` を解析します。
-3. どう処理すればいいか分からなければ、`throw err` をします。
-
-下のコードでは、`catch` が `SyntaxError` だけを処理するよう再スローを使っています。:
-
-```js run
-let json = '{ "age": 30 }'; // 不完全なデータ
-try {
-
- let user = JSON.parse(json);
-
- if (!user.name) {
- throw new SyntaxError("Incomplete data: no name");
- }
-
-*!*
- blabla(); // 予期しないエラー
-*/!*
-
- alert( user.name );
-
-} catch(e) {
-
-*!*
- if (e.name == "SyntaxError") {
- alert( "JSON Error: " + e.message );
- } else {
- throw e; // 再スロー (*)
- }
-*/!*
-
-}
-```
-
-行 `(*)` での、`catch` ブロック内部からのエラーのスローは `try..catch` を "抜けて" 外部の `try..catch` 構造(存在する場合)でキャッチされる、またはスクリプトをキルします。
-
-従って、`catch` ブロックは実際に扱い方を知っているエラーだけを処理しその他すべてを "スキップ" します。
-
-下の例は、このようなエラーが1つ上のレベルの `try..catch` で捕捉されるデモです:
-
-```js run
-function readData() {
- let json = '{ "age": 30 }';
-
- try {
- // ...
-*!*
- blabla(); // error!
-*/!*
- } catch (e) {
- // ...
- if (e.name != 'SyntaxError') {
-*!*
- throw e; // 再スロー (今のエラーの扱い方を知らない)
-*/!*
- }
- }
-}
-
-try {
- readData();
-} catch (e) {
-*!*
- alert( "External catch got: " + e ); // caught it!
-*/!*
-}
-```
-
-ここでは、`readData` は `SyntaxError` の処理の仕方だけ知っており、外部の `try..catch` はすべての処理の方法を知っています。
-
-## try..catch..finally
-
-待ってください、それですべてではありません。
-
-`try..catch` 構造はもう1つのコード句: `finally` を持つ場合があります。
-
-もし存在する場合、それはすべてのケースで実行します。:
-
-- エラーが無かった場合は、`try` の後で。
-- エラーがあった場合には `catch` の後で。
-
-拡張された構文はこのように見えます。:
-
-```js
-*!*try*/!* {
- ... コードを実行しようとします ...
-} *!*catch*/!*(e) {
- ... エラーを処理します ...
-} *!*finally*/!* {
- ... 常に実行します ...
-}
-```
-
-このコードを実行してみましょう。:
-
-```js run
-try {
- alert( 'try' );
- if (confirm('Make an error?')) BAD_CODE();
-} catch (e) {
- alert( 'catch' );
-} finally {
- alert( 'finally' );
-}
-```
-
-このコードは2つの実行方法があります。:
-
-1. もし "Make an error" に "Yes" と答えると、`try -> catch -> finally` となります。
-2. もし "No" と言えば、`try -> finally` となります。
-
-`finally` 句は `try..catch` の前に何かを開始して、どのような結果であれファイナライズをしたいときに頻繁に使われます。
-
-例えば、フィボナッチ数関数 `fib(n)` にかかる時間を計測したいとします。当然ながら、それを実行する前に計測を開始して、実行後に終了させることができます。しかし、仮に関数呼び出しの間でエラーが起きたらどうなるでしょう？特に下のコードの `fib(n)` の実装では、負の値または非整数値だとエラーを返します。
-
-`finally` 句は何があっても計測を完了させるのに良い場所です。
-
-ここで、`finally` は両方のシチュエーション -- `fib` の実行が成功するケースと失敗するケース -- で時間が正しく計測されることを保証します。:
-
-```js run
-let num = +prompt("Enter a positive integer number?", 35)
-
-let diff, result;
-
-function fib(n) {
- if (n < 0 || Math.trunc(n) != n) {
- throw new Error("Must not be negative, and also an integer.");
- }
- return n <= 1 ? n : fib(n - 1) + fib(n - 2);
-}
-
-let start = Date.now();
-
-try {
- result = fib(num);
-} catch (e) {
- result = 0;
-*!*
-} finally {
- diff = Date.now() - start;
-}
-*/!*
-
-alert(result || "error occured");
-
-alert( `execution took ${diff}ms` );
-```
-
-コードを実行して `prompt` に `35` を入力することで確認できます -- 通常 `try` の後に `finally` を実行します。そして `-1` を入れると -- すぐにエラーになり、その実行は `0ms` となります。両方の計測は正しく行われています。
-
-つまり、関数を終了するには方法が2つあります: `return` または `throw` です。 `finally` 句はそれら両方とも処理します。
-
-```smart header="変数は `try..catch..finally` の内部でローカルです"
-上のコードで `result` と `diff` 変数は `try..catch` の *前* で宣言されていることに注意してください。
-
-そうでなく、`let` が `{...}` ブロックの中で作られている場合、その中でしか見えません。
-```
-
-````smart header="`finally` と `return`"
-Finally 句は `try..catch` からの *任意の* 終了に対して機能します。それは明白な `return` も含みます。
-
-下の例では、`try` の中で `return` があります。この場合、`finally` は制御が外部コードに戻る前に実行されます。
-
-```js run
-function func() {
-
- try {
-*!*
- return 1;
-*/!*
-
- } catch (e) {
- /* ... */
- } finally {
-*!*
- alert( 'finally' );
-*/!*
- }
-}
-
-alert( func() ); // 最初に finally の alert が動作し、次にこれが動作します
-```
-````
-
-````smart header="`try..finally`"
-
-`catch` 句がない `try..catch` 構造も役立ちます。私たちはここでエラーを正しく処理したくないが、開始した処理が完了したことを確認したいときに使います。
-
-```js
-function func() {
- // (計測など)完了させる必要のあるなにかを開始する
- try {
- // ...
- } finally {
- // すべてが死んでいても完了させる
- }
-}
-```
-上のコードでは、`try` の内側のエラーは常に抜けます。なぜなら `catch` がないからです。しかし `finally` は実行フローが外部に移る前に機能します。
-````
-
-## グローバルな catch
-
-```warn header="環境特有"
-このセクションの情報はコアなJavaScriptの一部ではありません。
-```
-
-`try..catch` の外側で致命的なエラーが起きてスクリプトが死んだことをイメージしてください。プログラミングエラーやその他何か酷いものによって。
-
-そのような出来事に反応する方法はありますか？ エラーをログに記録したり、ユーザーに何かを見せたり（通常はエラーメッセージが表示されません）。
-
-仕様ではそのようなものはありませんが、通常、環境がそれを提供しています。なぜなら本当に有用だからです。例えば、Node.JS はそのために [process.on('uncaughtException')](https://nodejs.org/api/process.html#process_event_uncaughtexception)を持っています。
-また、ブラウザでは関数を特別な [window.onerror](mdn:api/GlobalEventHandlers/onerror) プロパティに代入することができます。それはキャッチしていないエラーの場合に実行されます。
-
-構文:
-
-```js
-window.onerror = function(message, url, line, col, error) {
- // ...
-};
-```
-
-`message`
-: エラーメッセージ
-
-`url`
-: エラーが起きたスクリプトのURL
-
-`line`, `col`
-: エラーが起きた行と列番号
-
-`error`
-: エラーオブジェクト
-
-例:
-
-```html run untrusted refresh height=1
-
-```
-
-グローバルハンドラー `window.onerror` の役割は、通常スクリプトの実行の回復ではありません -- プログラミングエラーの場合、恐らくそれは不可能なので開発者にエラーメッセージを送ります。
-
-このようなケースでエラーログを提供する web サービスもあります。https://errorception.com> や 。
-
-それらは次のように動きます:
-
-1. 私たちはサービスに登録し、ページにそうにゅうするためのJSのピース(またはスクリプトのURL)をそれらから得ます。
-2. そのJSスクリプトはカスタムの `window.onerror` 関数を持っています。
-3. エラーが起きた時、そのサービスへネットワークリクエストを送ります。
-4. 私たちはサービスのWebインタフェースにログインしてエラーを見ることができます。
-
-## サマリ
-
-`try..catch` 構造はランタイムエラーを処理することができます。文字通りコードを実行しようと試みて、その中で起こるエラーをキャッチします。
-
-構文は次の通りです:
-
-```js
-try {
- // コードを実行
-} catch(err) {
- // エラーが起きた場合、ここにジャンプ
- // err はエラーオブジェクト
-} finally {
- // すべてのケースで try/catch 後に実行する
-}
-```
-
-`catch` セクションがない、または `finally` がない場合があります。なので `try..catch` と `try..finally` もまた有効です。
-
-エラーオブジェクトは次のプロパティを持っています。:
-
-- `message` -- 人が読めるエラーメッセージです。
-- `name` -- エラー名を指す文字列です(エラーコンストラクタ名)
-- `stack` (非標準) -- エラー生成時のスタックです。
-
-また、`throw` 演算子を使って独自のエラーを生成することもできます。技術的には、`throw` の引数は何でもよいですが、通常は組み込みの `Error` クラスを継承しているエラーオブジェクトです。次のチャプターでエラーを拡張する方法について詳しく説明します。
-
-再スローはエラーハンドリングの基本パターンです。: `catch` ブロックは通常、特定のエラータイプを処理する方法を予期し、知っています。したがって、知らないエラーは再スローすべきです。
-
-たとえ `try..catch` を持っていない場合でも、ほとんどの環境では "抜け出た" エラーをキャッチするために "グローバル" なエラーハンドラを設定することができます。ブラウザでは、それは `window.onerror` です。
diff --git a/1-js/08-error-handling/1-try-catch/try-catch-flow.png b/1-js/08-error-handling/1-try-catch/try-catch-flow.png
deleted file mode 100644
index 6a91b63295..0000000000
Binary files a/1-js/08-error-handling/1-try-catch/try-catch-flow.png and /dev/null differ
diff --git a/1-js/08-error-handling/1-try-catch/try-catch-flow@2x.png b/1-js/08-error-handling/1-try-catch/try-catch-flow@2x.png
deleted file mode 100644
index 8bf9680fd6..0000000000
Binary files a/1-js/08-error-handling/1-try-catch/try-catch-flow@2x.png and /dev/null differ
diff --git a/1-js/08-error-handling/2-custom-errors/article.md b/1-js/08-error-handling/2-custom-errors/article.md
deleted file mode 100644
index 27a8813f11..0000000000
--- a/1-js/08-error-handling/2-custom-errors/article.md
+++ /dev/null
@@ -1,310 +0,0 @@
-# カスタムエラー, Error の拡張
-
-何かを開発するとき、我々のタスクで間違っているかもしれない特定の内容をエラー内容に反映するために、独自のエラークラスが必要になることがよくあります。
-ネットワーク操作のエラーについては、 `HttpError`、データベース操作 `DbError`、検索操作 `NotFoundError` などが必要な場合があります。
-
-エラーは `message`, `name` 、望ましくは `stack` のような基本のエラープロパティをサポートするべきです。しかし、他にも独自のプロパティを持つかもしれません。例えば `HttpError` オブジェクトであれば、 `404`, `403` もしくは `500` といった値をとる `statusCode` プロパティを持つかもしれません。
-
-JavaScript は任意の引数で `throw` できるので、技術的にはカスタムのエラークラスは `Error` から継承する必要はありません。しかし、継承しているとエラーオブジェクトを識別する `obj instanceof Error` を使えるようになります。そのため、継承しておくほうのがベターです。
-
-アプリケーションを開発するにつれ、独自のエラーが自然に階層を形成します。たとえば、 `HttpTimeoutError` は `HttpError` を継承する、といったように。
-
-## Error を拡張する
-
-例として、ユーザデータをもつ JSON を読む関数 `readUser(json)` を考えてみましょう。
-
-ここでは、有効な `json` がどのように見えるかの例を示します。:
-```js
-let json = `{ "name": "John", "age": 30 }`;
-```
-
-内部的には、`JSON.parse` を使います。もし不正な `json` を受け取った場合、それは `SyntaxError` をスローします。
-
-しかし、たとえ `json` が構文的に正しくても、それが正しいユーザとは限りません。 それには必要なデータが不足しているかもしれません。例えば、我々のケースだと、ユーザに必要不可欠な `name` や `age` プロパティを持っていない場合です。
-
-私たちの関数 `readUser(json)` はJSONを読むだけでなく、データのチェック(バリデート)をします。もし必須のフィールドがなかったり、フォーマットが間違っている場合、エラーです。そしてそれは `SyntaxError` ではありません。なぜならデータは構文的には正しく、別の種類のエラーだからです。したがって、それを `ValidationError` と呼び、そのためのクラスを作りましょう。このようなエラーは、問題のあるフィールドに関する情報も保持する必要があります。
-
-我々の `ValidationError` クラスは組み込みの `Error` クラスから継承します。
-
-そのクラスは組み込みですが、そのクラスのおおよそのコードを書いて、私たちが何を拡張しているのかを理解する必要があります。
-
-これです:
-
-```js
-// JavaScript自体で定義された組み込みのErrorクラスの「擬似コード」
-class Error {
- constructor(message) {
- this.message = message;
- this.name = "Error"; // (組み込みのエラークラスごとに異なる名前)
- this.stack = ; // non-standard, but most environments support it
- }
-}
-```
-
-では、話を戻して `ValidationError` をそれから継承させましょう。:
-
-```js run untrusted
-*!*
-class ValidationError extends Error {
-*/!*
- constructor(message) {
- super(message); // (1)
- this.name = "ValidationError"; // (2)
- }
-}
-
-function test() {
- throw new ValidationError("Whoops!");
-}
-
-try {
- test();
-} catch(err) {
- alert(err.message); // Whoops!
- alert(err.name); // ValidationError
- alert(err.stack); // それぞれの行番号を持つネストされたコールのリスト
-}
-```
-
-コンストラクタを見てください:
-
-1. 行 `(1)` で、親のコンストラクタを読んでいます。JavaScriptは子のコンストラクタ内での `super` の呼び出しは必須なので、それは義務です。親のコンストラクタは `message` プロパティをセットします。
-2. 親のコンストラクタは `name` プロパティも `"Error"` へセットしますので、行 `(2)` で正しい値にリセットしています。
-
-`readUser(json)` で使ってみましょう:
-
-```js run
-class ValidationError extends Error {
- constructor(message) {
- super(message);
- this.name = "ValidationError";
- }
-}
-
-// Usage
-function readUser(json) {
- let user = JSON.parse(json);
-
- if (!user.age) {
- throw new ValidationError("No field: age");
- }
- if (!user.name) {
- throw new ValidationError("No field: name");
- }
-
- return user;
-}
-
-// try..catch での動作例
-
-try {
- let user = readUser('{ "age": 25 }');
-} catch (err) {
- if (err instanceof ValidationError) {
-*!*
- alert("Invalid data: " + err.message); // Invalid data: No field: name
-*/!*
- } else if (err instanceof SyntaxError) { // (*)
- alert("JSON Syntax Error: " + err.message);
- } else {
- throw err; // 知らないエラーなので、再スロー
- }
-}
-```
-
-上のコードの `try.catch` ブロックは `ValidationError` と `JSON.parse` からの組み込みの `SyntaxError` 両方を処理します。
-
-行 `(*)` で特定のエラータイプのチェックをするために、どのように `instanceof` を使っているか見てください。
-
-このようにして `err.name` を見ることもできます。:
-
-```js
-// ...
-// (err instanceof SyntaxError) の代わり
-} else if (err.name == "SyntaxError") { // (*)
-// ...
-```
-
-`instanceof` の方がよりベターです。なぜなら、将来 `ValidationError` を拡張し、`PropertyRequiredError` のようなサブタイプを作るからです。そして `instanceof` チェックは新しい継承したクラスでもうまく機能し続けます。それは将来を保証します。
-
-また、`catch` が未知のエラーに遭遇したとき、行 `(**)` でそれを再度スローすることも重要です。 `catch` はバリデーションと構文エラーの処理の仕方だけを知っています。他の種類(コード中のタイポやその他)の場合は失敗します。
-
-## さらなる継承
-
-`ValidationError` クラスはとても汎用的です。色んな種類の間違いがあるかもしれません -- プロパティが存在しなかったり、誤ったフォーマット(`age` が文字列値のような)であるかもしれません。厳密に存在しないプロパティに対して、より具体的なクラス `PropertyRequiredError` を作りましょう。欠落しているプロパティについての追加の情報を保持します。
-
-
-```js run
-class ValidationError extends Error {
- constructor(message) {
- super(message);
- this.name = "ValidationError";
- }
-}
-
-*!*
-class PropertyRequiredError extends ValidationError {
- constructor(property) {
- super("No property: " + property);
- this.name = "PropertyRequiredError";
- this.property = property;
- }
-}
-*/!*
-
-// 使用法
-function readUser(json) {
- let user = JSON.parse(json);
-
- if (!user.age) {
- throw new PropertyRequiredError("age");
- }
- if (!user.name) {
- throw new PropertyRequiredError("name");
- }
-
- return user;
-}
-
-// try..catch での動作例
-
-try {
- let user = readUser('{ "age": 25 }');
-} catch (err) {
- if (err instanceof ValidationError) {
-*!*
- alert("Invalid data: " + err.message); // Invalid data: No property: name
- alert(err.name); // PropertyRequiredError
- alert(err.property); // name
-*/!*
- } else if (err instanceof SyntaxError) {
- alert("JSON Syntax Error: " + err.message);
- } else {
- throw err; // 知らないエラーなので、それを再スロー
- }
-}
-```
-
-新しいクラス `PropertyRequiredError` は簡単に使うことができます: プロパティ名を渡すだけです。: `new PropertyRequiredError(property)`。人が読める `message` はコンストラクタで作られます。
-
-`PropertyRequiredError` コンストラクタでの `this.name` は再度手動で割り当てられることに注意してください。それは少しうんざりするかもしれません -- カスタムのエラーを作る度に `this.name = ` と代入することに。しかし方法があります。コンストラクタの中で `this.name` に対して `this.constructor.name` を使うことで、我々の肩の荷をとってくれる独自の "基本エラー" クラスを作ることができます。そしてそれを継承します。
-
-それは `MyError` と呼びましょう。
-
-ここでは、単純化した `MyError` のコードと他のカスタムエラークラスを示します。:
-
-```js run
-class MyError extends Error {
- constructor(message) {
- super(message);
-*!*
- this.name = this.constructor.name;
-*/!*
- }
-}
-
-class ValidationError extends MyError { }
-
-class PropertyRequiredError extends ValidationError {
- constructor(property) {
- super("No property: " + property);
- this.property = property;
- }
-}
-
-// name is correct
-alert( new PropertyRequiredError("field").name ); // PropertyRequiredError
-```
-
-これで、カスタムエラーははるかに短くなりました。特に `ValidationError` はコンストラクタの `"this.name = ..."` の行を除いたので。
-
-## 例外のラッピング
-
-上のコードの関数 `readUser` の目的は "ユーザデータを読むこと" ですよね？ この処理では異なる種類のエラーが起こる可能性があります。今は `SyntaxError` と `ValidationError` を持っていますが、将来 `readUser` 関数が成長するかもしれません: 新たなコードが別の種類のエラーを生み出すかもしれません。
-
-`readUser` を呼び出すコードは、これらのエラーを処理する必要があります。今は `catch` ブロックの中で、異なるエラータイプのチェックと未知のエラーを再スローするために、複数の `if` を使っています。しかし、もし `readUser` 関数が複数の種類のエラーを生成する場合 -- `readUser` 呼び出しをするすべてのコードで、本当にすべてのエラータイプを1つずつチェックしたいですか？
-
-答えは、"いいえ" です。: 外側のコードは "それらすべての1つ上のレベル" でありたいです。つまり "データ読み込みエラー" でいくつかの種類を持ちたいです。正確になぜそれが起きたのか -- はしばしば重要ではありません(エラーメッセージがそれを説明します)。もしくは、必要な場合にのみ、エラーの詳細を取得方法があると更にベターです。
-
-従って、このようなエラーを表現するための新しいクラス `ReadError` を作りましょう。`readUser` の中でエラーが起きると、それをキャッチし、`ReadError` を生成します。その `cause` プロパティで、元のエラーへの参照を持っておきます。そして外部のコードは `ReadError` に対してのみチェックを行います。
-
-これは、`ReadError` を定義し、`readUser` と `try..catch` でそれを利用するデモです。:
-
-```js run
-class ReadError extends Error {
- constructor(message, cause) {
- super(message);
- this.cause = cause;
- this.name = 'ReadError';
- }
-}
-
-class ValidationError extends Error { /*...*/ }
-class PropertyRequiredError extends ValidationError { /* ... */ }
-
-function validateUser(user) {
- if (!user.age) {
- throw new PropertyRequiredError("age");
- }
-
- if (!user.name) {
- throw new PropertyRequiredError("name");
- }
-}
-
-function readUser(json) {
- let user;
-
- try {
- user = JSON.parse(json);
- } catch (err) {
-*!*
- if (err instanceof SyntaxError) {
- throw new ReadError("Syntax Error", err);
- } else {
- throw err;
- }
-*/!*
- }
-
- try {
- validateUser(user);
- } catch (err) {
-*!*
- if (err instanceof ValidationError) {
- throw new ReadError("Validation Error", err);
- } else {
- throw err;
- }
-*/!*
- }
-
-}
-
-try {
- readUser('{bad json}');
-} catch (e) {
- if (e instanceof ReadError) {
-*!*
- alert(e);
- // Original error: SyntaxError: Unexpected token b in JSON at position 1
- alert("Original error: " + e.cause);
-*/!*
- } else {
- throw e;
- }
-}
-```
-
-上のコードで、`readUser` は説明されている通りに正確に動作します -- 構文とバリデーションエラーをキャッチし、`ReadError` エラーを代わりにスローします(未知のエラーは通常通り再スローします)。
-
-なので、外部のコードは `instanceof ReadError` をチェックするだけです。可能性のあるすべてのエラータイプをリストする必要はありません。
-
-このアプローチは、"低レベルの例外" を取り除き、呼び出しコードで使用するより抽象的で便利な "ReadError" に "ラップ" するため、"例外のラッピング" と呼ばれます。 オブジェクト指向プログラミングで広く使用されています。
-
-## サマリ
-
-- 私たちは、`Error` や他の組み込みのエラークラスから継承することができます。そのときは、`name` プロパティに手を入れることと、`super`
-の呼び出しを忘れないでください。
-- ほとんどの場合、特定のエラーをチエックするために `instanceof` を使うべきです。それは継承している場合にも有効です。しかし、ときにはサードパーティのライブラリから来たエラーオブジェクトを持っていて、簡単にそのクラスを取得する方法がないことがあります。このようなチェックの場合には `name` プロパティを使うことができます。
-- 例外のラッピングは、関数が低レベルの例外を処理し、そのエラーを報告するために高レベルのオブジェクトを作る時のテクニックとして広く知られています。低レベルの例外は、上の例の `err.cause` のようにオブジェクトのプロパティになることがありますが、厳密には必須ではありません。
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/solution.md b/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/solution.md
rename to 1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/solution.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/task.md b/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/1-property-after-delete/task.md
rename to 1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/solution.md b/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/solution.md
rename to 1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/solution.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/task.md b/1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/2-search-algorithm/task.md
rename to 1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/solution.md b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/solution.md
rename to 1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/task.md b/1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/3-proto-and-this/task.md
rename to 1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md
diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/solution.md b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/03-prototype-inheritance/4-hamster-proto/solution.md
rename to 1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md
diff --git a/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md
new file mode 100644
index 0000000000..2346b2df68
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md
@@ -0,0 +1,35 @@
+importance: 5
+
+---
+
+# なぜ2匹のハムスターがお腹一杯？
+
+私たちは2匹のハムスターを持っています: `speedy` と `lazy` は一般的な `hamster` オブジェクトを継承しています。
+
+そのうちの1匹に餌をやるとき、もう1匹もお腹一杯になります。なぜでしょう？どのように修正しますか？
+
+```js run
+let hamster = {
+ stomach: [],
+
+ eat(food) {
+ this.stomach.push(food);
+ }
+};
+
+let speedy = {
+ __proto__: hamster
+};
+
+let lazy = {
+ __proto__: hamster
+};
+
+// 一方が食べ物を見つけました
+speedy.eat("apple");
+alert( speedy.stomach ); // apple
+
+// もう一方も持っています。なぜでしょう？修正してください。
+alert( lazy.stomach ); // apple
+```
+
diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md
new file mode 100644
index 0000000000..94c960f4ad
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/article.md
@@ -0,0 +1,339 @@
+# プロトタイプ継承
+
+プログラミングでは、何かを取得しそれを拡張することがしばしばあります。
+
+例えば、プロパティとメソッドをもつ `user` オブジェクトがあるとします。そして、そのいくつかを僅かに変更した `admin` や `guest` を作りたいとします。メソッドのコピーや再実装ではなく、単にその上に新しいオブジェクトを作成することで、`user` が持っているものを再利用したいです。
+
+*プロトタイプ継承* はそれを助ける言語の機能です。
+
+## プロトタイプ [[Prototype]]
+
+JavaScriptでは、オブジェクトは特別な隠しプロパティ `[[Prototype]]` （スペックにて命名されています）を持っており、それは `null` または別のオブジェクトを参照します。そのオブジェクトは "プロトタイプ" と呼ばれます。
+
+
+
+`object` からプロパティを読んだときに存在しない場合、JavaScriptは自動的にプロトタイプからそれを取得します。プログラミングではこのようなことを "プロトタイプ継承" と呼びます。多くのクールな言語機能やプログラミングテクニックは、これがベースになっています。
+
+プロパティ `[[Prototype]]` は内部であり隠されていますが、セットする多くの方法があります。
+
+それらの１つは、次のように `__proto__` を使う方法です:
+
+```js run
+let animal = {
+ eats: true
+};
+let rabbit = {
+ jumps: true
+};
+
+*!*
+rabbit.__proto__ = animal; // rabbit.[[Prototype]] = animal をセット
+*/!*
+```
+
+`rabbit` のプロパティを読むときにそれがない場合、JavaScriptは自動で `animal` から取得します。
+
+例:
+
+```js run
+let animal = {
+ eats: true
+};
+let rabbit = {
+ jumps: true
+};
+
+*!*
+rabbit.__proto__ = animal; // (*)
+*/!*
+
+// 今、rabbit で両方のプロパティを見つけることができます:
+*!*
+alert( rabbit.eats ); // true (**)
+*/!*
+alert( rabbit.jumps ); // true
+```
+
+ここで、行 `(*)` は `rabbit` のプロトタイプに `animal` をセットしています。
+
+次に、`alert` がプロパティ `rabbit.eats` `(**)` を読もうとしたとき、それは `rabbit` にはないので、JavaScriptは `[[Prototype]]` 参照に従って、`animal` の中でそれを見つけます(下から上に向かいます)。
+
+
+
+ここでは、私たちは "`animal` は `rabbit` のプロトタイプ" または "`rabbit` がプロトタイプ的に `animal` を継承している" という事ができます。"
+
+したがって、もし `animal` が多くの役立つプロパティやメソッドを持っている場合、それらは自動的に `rabbit` でも利用可能になります。このようなプロパティは "継承" と呼ばれます。
+
+もし `animal` がメソッドを持っている場合、`rabbit` でもそれを呼ぶことができます:
+
+```js run
+let animal = {
+ eats: true,
+*!*
+ walk() {
+ alert("Animal walk");
+ }
+*/!*
+};
+
+let rabbit = {
+ jumps: true,
+ __proto__: animal
+};
+
+// walk は prototype から得られました
+*!*
+rabbit.walk(); // Animal walk
+*/!*
+```
+
+メソッドは次のように自動的にプロトタイプから取られます。:
+
+
+
+プロトタイプチェーンは長くても問題ありません。:
+
+```js run
+let animal = {
+ eats: true,
+ walk() {
+ alert("Animal walk");
+ }
+};
+
+let rabbit = {
+ jumps: true,
+*!*
+ __proto__: animal
+*/!*
+};
+
+let longEar = {
+ earLength: 10,
+*!*
+ __proto__: rabbit
+*/!*
+};
+
+// walk は prototype チェーンから取られました
+longEar.walk(); // Animal walk
+alert(longEar.jumps); // true (rabbit から)
+```
+
+
+
+ここで `longEar` から何かしらを読み取ろうとして、それが見つからなかった場合、JavaScript はまず `rabbit`、次に `animal` の順に探しに行きます。
+
+実際には、2つの制限があります。:
+
+1. 参照を循環させることはできません。JavaScriptは、循環するように `__proto__` を割り当てようとするとエラーになります。
+2. `__proto__` の値はオブジェクトまたは `null` になります。プリミティブのような、それ以外のすべての値は無視されます。
+
+また、明白かもしれませんが、1つの `[[Prototype]]` しか存在しません。 オブジェクトは2つの他のものから継承することはできません。
+
+
+```smart header="`__proto__` は `[[Prototype]]` のための歴史的な getter/setter です。"
+この2つの違いを知らないのは、初心者の開発者にありがちなミスです。
+
+`__proto__` は内部の `[[Prototype]]` プロパティとは *同じではない* ことに注意してください。これは、`[[Prototype]]` のgetter/setter です。後でそれが重要な場面をみていきますが、今は JavaScript 言語を理解するために、このプロパティについて心に留めておいてください。
+
+`__proto__` プロパティは少し時代遅れです。これは歴史的な理由から存在しており、モダンな JavaScript では、プロトタイプの get/set の代わりに、 `Object.getPrototypeOf/Object.setPrototypeOf` 関数を使用することが推奨されています。これらの関数についても、後ほど説明していきます。
+
+スペックでは、`__proto__` はブラウザでのみサポートされなければなりません。ですが、実際にはサーバサイドを含むすべての環境で`__proto__` がサポートされています。ので、安全に使用することができます。
+
+`__proto__` 記法は直感的でわかりやすいので、例ではこの記法を使います。
+```
+
+## 書き込みはプロトタイプを使用しません
+
+プロトタイプは、プロパティを読むためだけに使われます。
+
+書き込み/削除操作はオブジェクトで直接動作します。
+
+下の例では、自身の `walk` メソッドを `rabbit` に割り当てています。:
+
+```js run
+let animal = {
+ eats: true,
+ walk() {
+ /* このメソッドは rabbit では使われません */
+ }
+};
+
+let rabbit = {
+ __proto__: animal
+}
+
+*!*
+rabbit.walk = function() {
+ alert("Rabbit! Bounce-bounce!");
+};
+*/!*
+
+rabbit.walk(); // Rabbit! Bounce-bounce!
+```
+
+これ以降、`rabbit.walk()` 呼び出しは、プロトタイプを使うことなく、オブジェクトの中にすぐにメソッドを見つけ、それを実行します。
+
+
+
+getter/setter の場合 -- もしプロパティの読み書きをすると、プロトタイプで参照されて呼び出されます。
+
+例えば、以下のコードで `admin.fullName` プロパティをチェックしてください:
+
+```js run
+let user = {
+ name: "John",
+ surname: "Smith",
+
+ set fullName(value) {
+ [this.name, this.surname] = value.split(" ");
+ },
+
+ get fullName() {
+ return `${this.name} ${this.surname}`;
+ }
+};
+
+let admin = {
+ __proto__: user,
+ isAdmin: true
+};
+
+alert(admin.fullName); // John Smith (*)
+
+// setter がトリガします!
+admin.fullName = "Alice Cooper"; // (**)
+
+alert(admin.fullName); // Alice Cooper, admin の状態が変更されました。
+alert(user.fullName); // John Smith, user の状態はそのままです。
+```
+
+ここで、行 `(*)` では、プロパティ `admin.fullName` はプロトタイプである `user` が getter を持っているので、それが呼ばれます。同様に行 `(**)` では、プロパティはプロトタイプにある setter が呼ばれます。
+
+## "this" の値
+
+上の例で、興味深い質問が起きるかもしれません。: `set fullName(value)` の内側での `this` の値はなんでしょうか？プロパティ `this.name` と `this.surname` が書かれているのはどこでしょうか？ `user` または `admin` ?
+
+答えはシンプルです: `this` はプロトタイプによる影響を持ったく受けません。
+
+**メソッドがどこにあるかは関係ありません：オブジェクトの中でも、そのプロトタイプ内でも。メソッド呼び出しでは、`this` は常にドットの前のオブジェクトです。**
+
+したがって、setter は実際に `this` として `admin` となり、`user` ではありません。
+
+多くのメソッドを持つ大きなオブジェクトを持ち、それを継承する場合があるため、これは実際には非常に重要なことです。継承したオブジェクトで継承したメソッドを実行すると、大きなオブジェクトではなく、継承したオブジェクトの状態を変更します。
+
+例えば、ここでは `animal` は "メソッド格納域" を表現しており、`rabbit` はそれを使います。
+
+呼び出し `rabbit.sleep()` は `rabbit` オブジェクトに `this.isSleeping` をセットします。:
+
+```js run
+// animal がメソッドを持っています
+let animal = {
+ walk() {
+ if (!this.isSleeping) {
+ alert(`I walk`);
+ }
+ },
+ sleep() {
+ this.isSleeping = true;
+ }
+};
+
+let rabbit = {
+ name: "White Rabbit",
+ __proto__: animal
+};
+
+// rabbit.isSleeping を変更する
+rabbit.sleep();
+
+alert(rabbit.isSleeping); // true
+alert(animal.isSleeping); // undefined (prototype にそのようなプロパティはありません)
+```
+
+結果の図は次のようになります:
+
+
+
+もし `bird`, `snake` など `animal` から継承された他のオブジェクトを持っていた場合、それらもまた `animal` のメソッドへのアクセスができます。しかし各メソッドでの `this` は対応するオブジェクトであり、`animal` ではなく、呼び出し時に評価されます（前のドット）。 したがって、`this` にデータを書き込むとき、これらのオブジェクトに格納されます。
+
+結果として、メソッドは共有されますが、オブジェクトの状態は共有されません。
+
+## for..in loop
+
+`for..in` ループは継承したプロパティも繰り返し処理します。
+
+例:
+
+```js run
+let animal = {
+ eats: true
+};
+
+let rabbit = {
+ jumps: true,
+ __proto__: animal
+};
+
+*!*
+// Object.keys は実親のキーだけを返します
+alert(Object.keys(rabbit)); // jumps
+*/!*
+
+*!*
+// for..in は実親と継承したキー両方をループします
+for(let prop in rabbit) alert(prop); // jumps, eats
+*/!*
+```
+
+これは期待している動作ではなく、継承したプロパティは除きたい場合は組み込みのメソッド [obj.hasOwnProperty(key)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)が利用できます。これは `obj` が `key` という名前のプロパティをもつ場合（継承したものは含みません）、`true` を返します。
+
+従って、継承したプロパティをフィルタする（あるいはそれらについて何かをする）ことが可能です。:
+
+```js run
+let animal = {
+ eats: true
+};
+
+let rabbit = {
+ jumps: true,
+ __proto__: animal
+};
+
+for(let prop in rabbit) {
+ let isOwn = rabbit.hasOwnProperty(prop);
+
+ if (isOwn) {
+ alert(`Our: ${prop}`); // Our: jumps
+ } else {
+ alert(`Inherited: ${prop}`); // Inherited: eats
+ }
+}
+```
+
+ここでは、次の継承チェーンがあります: `rabbit` は `animal` を継承し、`animal` は `Object.prototype` を継承しています（`animal` はリテラルオブジェクト `{...}` なので、これはデフォルトです）。その上は `null` です。:
+
+
+
+興味深い点が1つあります。メソッド `rabbit.hasOwnProperty` はどこから来るのでしょうか？我々は定義していません。チェーンをみることで、メソッドは `Object.prototype.hasOwnProperty` で提供されていることがわかります。つまり、継承されたものです。
+
+...ですが、なぜ `hasOwnProperty` は継承したプロパティもリストする `for..in` ループで `eats` や `jumps` のように登場しないのでしょう。
+
+答えはシンプルです。これは列挙不可だからです。`Object.prototype` の他のすべてのプロパティと同様に、`enumerable:false` フラグを持ちます。そして、`for..in` は列挙可能なプロパティのみをリストします。そのため、`Object.prototype` のプロパティは列挙されません。
+
+```smart header="ほぼすべての他のキー/バリュー取得メソッドは継承したプロパティを無視します"
+`Object.keys`, `Object.values` などのほとんどの他のキー/バリュー取得メソッドは、継承したプロパティを無視します。
+
+これらはオブジェクト自身の操作のみ行います。プロトタイプからのプロパティは考慮され *ません*。
+```
+
+## サマリ
+
+- JavaScriptでは、すべてのオブジェクトは隠れた `[[Prototype]]` プロパティを持っており、それは別のオブジェクトまたは `null` です。
+- それにアクセスするために `obj.__proto__` を使うことができます(他の方法もあります。それらは後ほど学びます)。
+- `[[Prototype]]` によるオブジェクトの参照は "プロトタイプ" と呼ばれます。
+- もしも `obj` のプロパティを読みたい、またはメソッドを呼び出したいが、そこに存在しない場合、JavaScriptはプロトタイプの中で見つけようとします。
+- 書き込み/削除操作はオブジェクトに対して直接動作し、プロトタイプを使いません(プロパティが setter でない限り)。
+- `obj.method()` を呼び出し、`method` がプロトタイプから取られた場合も、`this` は依然として `obj` を参照します。したがって、メソッドはたとえ継承されていたとしても、常に現在のオブジェクトで動作します。
+- `for..in` ループは自身と継承したプロパティ両方を繰り返し処理します。他のすべてのキー/バリュー取得メソッドはオブジェクト自身に対してのみ操作します。
diff --git a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg
new file mode 100644
index 0000000000..eb79c19ffd
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg
new file mode 100644
index 0000000000..4bf580ae77
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg
new file mode 100644
index 0000000000..838c78395b
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg
new file mode 100644
index 0000000000..d791e5390d
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg
new file mode 100644
index 0000000000..b324710286
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg
new file mode 100644
index 0000000000..4f3c1bc0ec
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg
new file mode 100644
index 0000000000..bf0baf013a
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg
new file mode 100644
index 0000000000..28daef3af8
--- /dev/null
+++ b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg
@@ -0,0 +1,48 @@
+
+
\ No newline at end of file
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/solution.md b/1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/solution.md
rename to 1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/task.md b/1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/04-function-prototype/1-changing-prototype/task.md
rename to 1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/solution.md b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/solution.md
rename to 1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
diff --git a/1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/task.md b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/04-function-prototype/4-new-object-same-constructor/task.md
rename to 1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/task.md
diff --git a/1-js/08-prototypes/02-function-prototype/article.md b/1-js/08-prototypes/02-function-prototype/article.md
new file mode 100644
index 0000000000..f4593cda9d
--- /dev/null
+++ b/1-js/08-prototypes/02-function-prototype/article.md
@@ -0,0 +1,175 @@
+# F.prototype
+
+思い出してください、新しいオブジェクトは `new F()` のように、コンストラクタ関数で生成できます。
+
+`F.prototype` がオブジェクトの場合、`new` 演算子は新しいオブジェクトで `[[Prototype]]` をセットするためにそれを使用します。
+
+```smart
+JavaScriptは最初からプロトタイプの継承を持っています。 それは言語の中心的な特徴の1つでした。
+
+しかし、昔は直接アクセスすることはできませんでした。確実に機能したのは、この章で説明する、コンストラクタ関数の `"prototype"` プロパティを使うことです。そして、それを使っているスクリプトはまだたくさんあります。
+```
+
+ここで `F.prototype` は `F` 上の `"prototype"` と名付けられた通常のプロパティを意味していることに注意してください。用語 "プロトタイプ" と似ていますが、ここでは本当にその名前をもつ通常のプロパティを意味しています。
+
+ここではその例です:
+
+```js run
+let animal = {
+ eats: true
+};
+
+function Rabbit(name) {
+ this.name = name;
+}
+
+*!*
+Rabbit.prototype = animal;
+*/!*
+
+let rabbit = new Rabbit("White Rabbit"); // rabbit.__proto__ == animal
+
+alert( rabbit.eats ); // true
+```
+
+`Rabbit.prototype = animal` の設定は、文字通り次のことを述べています。: "`new Rabbit` が生成される時、その `[[Prototype]]` へ `animal` を割り当てます。"
+
+これが結果のイメージです:
+
+
+
+上記の図で、`"prototype"` は水平矢印で、通常のプロパティです。`[[Prototype]]` は縦矢印で、`animal` から `rabbit` の継承を意味しています。
+
+```smart header="`F.prototype` は `new F` 時にだけ使用されます"
+`F.prototype` プロパティは `new F` が呼ばれたときにだけ使用され、新しいオブジェクトの `[[Prototype]]` を割り当てます。
+
+作成後に、`F.prototype` プロパティが変更された場合（`F.prototype = <別のオブジェクト>`）、`new F` によって生成された新しいオブジェクトは `[[Prototype]]` として別のオブジェクトを持ちますが、既に存在するオブジェクトは古いものを保持したままです。
+```
+
+## デフォルトの F.prototype, constructor プロパティ
+
+すべての関数は、たとえ明示的に提供されていなくても `"prototype"` プロパティを持っています。
+
+デフォルトの `"prototype"` は `constructor` というプロパティだけを持つオブジェクトで、それは関数自体を指します。
+
+こんな感じです:
+
+```js
+function Rabbit() {}
+
+/* デフォルト prototype
+Rabbit.prototype = { constructor: Rabbit };
+*/
+```
+
+
+
+コードでそれを確認できます:
+
+```js run
+function Rabbit() {}
+// デフォルトでは:
+// Rabbit.prototype = { constructor: Rabbit }
+
+alert( Rabbit.prototype.constructor == Rabbit ); // true
+```
+
+当然、何もしない場合、 `constructor` プロパティは `[[Prototype]]` を通じてすべての rabbit が利用できます。:
+
+```js run
+function Rabbit() {}
+// デフォルトでは:
+// Rabbit.prototype = { constructor: Rabbit }
+
+let rabbit = new Rabbit(); // {constructor: Rabbit} の継承
+
+alert(rabbit.constructor == Rabbit); // true (prototype から)
+```
+
+
+
+`constructor` プロパティを使って既存のものと同じコンストラクタを使って新しいオブジェクトを作成することができます。
+
+このように:
+
+```js run
+function Rabbit(name) {
+ this.name = name;
+ alert(name);
+}
+
+let rabbit = new Rabbit("White Rabbit");
+
+*!*
+let rabbit2 = new rabbit.constructor("Black Rabbit");
+*/!*
+```
+
+これは、オブジェクトを持っているが、どのコンストラクタが使われたか分からない場合(例えばサードパーティーのライブラリが使われているなど)で、同じ種類のものを使って別のオブジェクトを作る必要がある場合に便利です。
+
+しかし、おそらく `"constructor"` に関する最も重要なことは...
+
+**...JavaScript 自体は正しい `"constructor"` 値を保証しません。**
+
+はい、関数のためのデフォルトの `"prototype"` は存在しますが、それがすべてです。その後どうなるかは私たち次第です。
+
+特に、もしデフォルトプロトタイプ全体を置き換えると、その中に `"constructor"` はなくなります。
+
+例:
+
+```js run
+function Rabbit() {}
+Rabbit.prototype = {
+ jumps: true
+};
+
+let rabbit = new Rabbit();
+*!*
+alert(rabbit.constructor === Rabbit); // false
+*/!*
+```
+
+したがって、正しい `"constructor"` を維持するためには、全体を上書きする代わりに、デフォルト `"prototype"` に対して追加/削除を行います。:
+
+```js
+function Rabbit() {}
+
+// 完全に Rabbit.prototype を上書きはしません
+// 単に追加するだけです
+Rabbit.prototype.jumps = true
+// デフォルト Rabbit.prototype.constructor は保持されます
+```
+
+もしくは、代替として手動で `constructor` プロパティを再び作ります。:
+
+```js
+Rabbit.prototype = {
+ jumps: true,
+*!*
+ constructor: Rabbit
+*/!*
+};
+
+// 追加したので、これで constructor も正しいです
+```
+
+
+## サマリ
+
+このチャプターでは、constructor 関数を通して作成されたオブジェクトのための `[[Prototype]]` を設定方法について簡単に説明しました。後で、それに依存するより高度なプログラミングパターンを見ていきます。
+
+すべてが非常にシンプルで、物事を明確にするための留意事項はほんの少しです。:
+
+- `F.prototype` プロパティは `[[Prototype]]` と同じではありません。`F.prototype` がする唯一のことは: `new F()` が呼ばれたときに新しいオブジェクトの `[[Prototype]]` をセットすることです。
+- `F.prototype` の値はオブジェクトまたは null でなければなりません。: 他の値では動作しません。
+- `"prototype"` プロパティはコンストラクタ関数に設定され、`new` で呼び出されたときにのみ、特別な効果があります。
+
+通常のオブジェクトでは、`prototype` は特別なものではありません。:
+```js
+let user = {
+ name: "John",
+ prototype: "Bla-bla" // no magic at all
+};
+```
+
+デフォルトでは、すべての関数は `F.prototype = { constructor: F }` を持っているので、その `"constructor"` プロパティへアクセスすることで、オブジェクトの constructor を取得することができます。
diff --git a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg
new file mode 100644
index 0000000000..59d60b397a
--- /dev/null
+++ b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.svg b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.svg
new file mode 100644
index 0000000000..37601da27b
--- /dev/null
+++ b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.svg
@@ -0,0 +1,39 @@
+
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.svg b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.svg
new file mode 100644
index 0000000000..a6f78e5747
--- /dev/null
+++ b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.svg
@@ -0,0 +1,87 @@
+
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype-1.svg b/1-js/08-prototypes/02-function-prototype/object-prototype-1.svg
new file mode 100644
index 0000000000..8a93d2a864
--- /dev/null
+++ b/1-js/08-prototypes/02-function-prototype/object-prototype-1.svg
@@ -0,0 +1,38 @@
+
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype.svg b/1-js/08-prototypes/02-function-prototype/object-prototype.svg
new file mode 100644
index 0000000000..828f61d3be
--- /dev/null
+++ b/1-js/08-prototypes/02-function-prototype/object-prototype.svg
@@ -0,0 +1,30 @@
+
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg
new file mode 100644
index 0000000000..ede4e1227e
--- /dev/null
+++ b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.svg b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.svg
new file mode 100644
index 0000000000..28daef3af8
--- /dev/null
+++ b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.svg
@@ -0,0 +1,48 @@
+
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg
new file mode 100644
index 0000000000..54b3d79804
--- /dev/null
+++ b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/solution.md b/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/solution.md
rename to 1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/solution.md
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/task.md b/1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/1-defer-to-prototype/task.md
rename to 1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/task.md
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/solution.md b/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/solution.md
rename to 1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/task.md b/1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/2-defer-to-prototype-extended/task.md
rename to 1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/task.md
diff --git a/1-js/08-prototypes/03-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md
new file mode 100644
index 0000000000..d9b3167af7
--- /dev/null
+++ b/1-js/08-prototypes/03-native-prototypes/article.md
@@ -0,0 +1,198 @@
+# ネイティブのプロトタイプ
+
+`"prototype"` プロパティはJavaScript自身のコア部分で広く使われています。すべての組み込みのコンストラクタ関数はこれを使用しています。
+
+最初に単純なオブジェクトの場合を見ていき、次により複雑なオブジェクトの場合にどのようになるかを見ていきましょう。
+
+## Object.prototype
+
+空のオブジェクトを出力してみましょう。:
+
+```js run
+let obj = {};
+alert( obj ); // "[object Object]" ?
+```
+
+文字列 `"[object Object]"` を生成するコードはどこにあるのでしょう？ それは組み込みの `toString` メソッドですが、どこにあるのでしょう？ `obj` は空です!
+
+...しかし、短い記法 `obj = {}` は `obj = new Object()` と同じで、その `Object` は組み込みのオブジェクトコンストラクタ関数です。その関数は `toString` や他の関数を持つ巨大なオブジェクトを参照する `Object.prototype` を持っています。
+
+このようになります:
+
+
+
+`new Object()` が呼ばれた(もしくはリテラルオブジェクト `{...}` が作られた)とき、その `[[Prototype]]` は前のチャプターで私たちが話してきたルールによって、 `Object.prototype` にセットされます。:
+
+
+
+その後、`obj.toString()` が呼ばれると、`Object.prototype` からメソッドが取り出されます。
+
+このようにして確認できます:
+
+```js run
+let obj = {};
+
+alert(obj.__proto__ === Object.prototype); // true
+
+alert(obj.toString === obj.__proto__.toString); //true
+alert(obj.toString === Object.prototype.toString); //true
+```
+
+上の `Object.prototype` のチェーンで、追加の `[[Prototype]]` がないことに注意してください。:
+
+```js run
+alert(Object.prototype.__proto__); // null
+```
+
+## 他の組み込みのプロトタイプ
+
+`Array`, `Date`, `Function` のような、他の組み込みのオブジェクトもまたプロトタイプにメソッドを保持しています。
+
+例えば、配列 `[1, 2, 3]` を作るとき、デフォルトの `new Array()` コンストラクタが内部で使われます。なので、配列データは新しいオブジェクトに書き込まれ、`Array.prototype` はそのプロトタイプとなり、メソッドを提供します。これは非常にメモリ効率が良いです。
+
+スペックでは、すべての組み込みのプロトタイプは先頭に `Object.prototype` を持っています。なので、"すべてはオブジェクトを継承している" という人もいます。
+
+全体図は次のとおりです（3つの組み込みについて書いています）:
+
+
+
+プロトタイプを手動でチェックしてみましょう。:
+
+```js run
+let arr = [1, 2, 3];
+
+// Array.prototype から継承している?
+alert( arr.__proto__ === Array.prototype ); // true
+
+// 次に Object.prototype からは継承している?
+alert( arr.__proto__.__proto__ === Object.prototype ); // true
+
+// そしてトップの null
+alert( arr.__proto__.__proto__.__proto__ ); // null
+```
+
+プロトタイプのメソッドのいくつかは重複する可能性があります。例えば、`Array.prototype` はカンマ区切りで要素を表示する自身の `toString` を持っています。:
+
+```js run
+let arr = [1, 2, 3]
+alert(arr); // 1,2,3 <-- Array.prototype.toString の結果
+```
+
+以前見たように、`Object.prototype` も同様に `toString` を持っていますが、`Array.prototype` はチェーンでより近い位置にあるので、配列がもつものが使用されます。
+
+
+
+
+
+Chrome developer console のようなブラウザ内のツールでも継承を表示できます(組み込みオブジェクトのために `console.dir` を使う必要があるかもしれません)。
+
+
+
+他の組み込みオブジェクトも同じように動作します。関数でさえも、それらは組み込みの `Function` コンストラクタのオブジェクトであり、メソッドです: `call/apply` など、`Function.prototype` から取り出されたものです。関数には独自の `toString`もあります。
+
+```js run
+function f() {}
+
+alert(f.__proto__ == Function.prototype); // true
+alert(f.__proto__.__proto__ == Object.prototype); // true, object からの継承
+```
+
+## プリミティブ(Primitives)
+
+最も複雑なことは、文字列、数値、ブール値で起こります。
+
+覚えている通り、それらはオブジェクトではありません。しかし、それらのプロパティへアクセスをしようとした場合、組み込みのコンストラクタ `String`, `Number`, `Boolean` を使った一時的なラッパーオブジェクトが作られます。それらはメソッドを提供し、消えます。
+
+それらのオブジェクトは我々には見えない形で作られ、ほとんどのエンジンはそれらを最適化しますが、スペックではこのように正確に説明されています。それらのオブジェクトのメソッドもまた `String.prototype`, `Number.prototype` や `Boolean.prototype` として利用可能なものとしてプロトタイプに存在します。
+
+```warn header="値 `null` と `undefined` はオブジェクトラッパーを持っていません"
+特別な値 `null` や `undefined` は別です。それらはオブジェクトラッパーを持ちません。そのため、利用可能なメソッドやプロパティはありません。また、それらに対応するプロトタイプもありません。
+```
+
+## ネイティブプロトタイプの変更
+
+ネイティブプロトタイプは変更することができます。例えば、もしあるメソッドを `String.prototype` に追加した場合、それはすべての文字列で利用可能になります。:
+
+```js run
+String.prototype.show = function() {
+ alert(this);
+};
+
+"BOOM!".show(); // BOOM!
+```
+
+開発の過程で、新しい組み込みメソッドを追加したいと考えてるかもしれません。そして、それをネイティブプロトタイプに加えたいという、若干の誘惑があるかもしれません。ですが、それは一般的には悪い考えです。
+
+```
+プロトタイプはグローバルなので、コンフリクトが発生しやすいです。もし２つのライブラリがメソッド `String.prototype.show` を追加している場合、片方はもう一方に上書きされます。
+
+そのため、一般的には、ネイティブのプロトタイプの変更は悪いアイデアとされています。
+```
+
+**現代のプログラミングでは、ネイティブプロトタイプの変更が認められたケースが１つだけあります。それはポリフィルです。**
+
+ポリフィルは JavaScript のスペックには存在するが、特定のJavaScript エンジンではまだサポートされていないメソッドの代わりを用意することを指す用語です。
+
+手動で実装し、組み込みのプロトタイプにそれを取り込むことができます。
+
+例:
+
+```js run
+if (!String.prototype.repeat) { // もしこのようなメソッドがない場合
+ // prototype に追加します
+
+ String.prototype.repeat = function(n) {
+ // 文字列を n 回繰り返す
+
+ // 実際、このコードはこれより複雑になります
+ // "n" の負の値に対するエラーのスロー
+ // 完全なアルゴリズムは仕様にあります
+ return new Array(n + 1).join(this);
+ };
+}
+
+alert( "La".repeat(3) ); // LaLaLa
+```
+
+
+## プロトタイプからの借用
+
+チャプター で私たちはメソッドの借用について話しました。:
+
+これはあるオブジェクトからメソッドをとり、それを別のオブジェクトにコピーするときです。
+
+ネイティブプロトタイプのメソッドのいくつかはしばしば借用されます。
+
+例えば、配列ライクなオブジェクトを作成している場合、そこにいくつかの `Array` メソッドをそこにコピーしたい場合があります。
+
+例
+
+```js run
+let obj = {
+ 0: "Hello",
+ 1: "world!",
+ length: 2,
+};
+
+*!*
+obj.join = Array.prototype.join;
+*/!*
+
+alert( obj.join(',') ); // Hello,world!
+```
+
+組み込みの `join` メソッドの内部アルゴリズムは、正しいインデックスと `length` プロパティのみを考慮するため、これは機能します。オブジェクトがたしかに配列かどうかはチェックしません。多くの組み込みメソッドはこのようになっています。
+
+別の可能性は、`obj.__proto__` を `Array.prototype` に設定することで継承することで、これによりすべての `Array` メソッドは自動的に `obj` で利用可能になります。
+
+ですが、`obj` が既に別のオブジェクトを継承していた場合にはこれは不可能です。一度に1つのオブジェクトしか継承できません。
+
+借用メソッドは柔軟であり、必要であれば異なるオブジェクトから機能を混ぜることも可能です。
+
+## サマリ
+
+- すべての組み込みオブジェクトは同じパターンに従います。:
+ - メソッドはプロトタイプに保持されています(`Array.prototype`, `Object.prototype`, `Date.prototype` など)。
+ - オブジェクト自身はデータのみを保持します(配列アイテム、オブジェクトプロパティ、日付)。
+- プリミティブもまたラッパーオブジェクトのプロトタイプにメソッドを保持します。: `Number.prototype`, `String.prototype`, `Boolean.prototype` 。`undefined` と `null` にだけはラッパーオブジェクトはありません。
+- 組み込みのプロトタイプを変更したり、新しいメソッドを実装することができます。 しかし、それを変更することはお勧めしません。 おそらく唯一許可されるケースは、新しい標準が追加されたものの、まだエンジンのJavaScriptメソッドではサポートされていないときだけです。
diff --git a/1-js/07-object-oriented-programming/05-native-prototypes/console_dir_array.png b/1-js/08-prototypes/03-native-prototypes/console_dir_array.png
similarity index 100%
rename from 1-js/07-object-oriented-programming/05-native-prototypes/console_dir_array.png
rename to 1-js/08-prototypes/03-native-prototypes/console_dir_array.png
diff --git a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg
new file mode 100644
index 0000000000..59d60b397a
--- /dev/null
+++ b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg
new file mode 100644
index 0000000000..ebb4f32051
--- /dev/null
+++ b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
new file mode 100644
index 0000000000..4d6129e0a0
--- /dev/null
+++ b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg
new file mode 100644
index 0000000000..9630e68e27
--- /dev/null
+++ b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg
new file mode 100644
index 0000000000..9ccb342299
--- /dev/null
+++ b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype.svg
new file mode 100644
index 0000000000..024dd30213
--- /dev/null
+++ b/1-js/08-prototypes/03-native-prototypes/object-prototype.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg
new file mode 100644
index 0000000000..ede4e1227e
--- /dev/null
+++ b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg
new file mode 100644
index 0000000000..54b3d79804
--- /dev/null
+++ b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/solution.md b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/solution.md
rename to 1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/task.md b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/06-prototype-methods/2-dictionary-tostring/task.md
rename to 1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/task.md
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/solution.md b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/solution.md
rename to 1-js/08-prototypes/04-prototype-methods/3-compare-calls/solution.md
diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md
rename to 1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md
diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md
new file mode 100644
index 0000000000..651f70f0fa
--- /dev/null
+++ b/1-js/08-prototypes/04-prototype-methods/article.md
@@ -0,0 +1,204 @@
+
+# __proto__ なしでの プロトタイプ メソッド, オブジェクト
+
+このセクションの最初の最初の章では、プロトタイプ をセットアップする現代のメソッドを説明します。
+
+`__proto__` は古く、やや非推奨とされています（JavaScript標準のブラウザのみの部分で）。
+
+現代のメソッドは次のものです:
+
+- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- 与えられた `proto` を `[[Prototype]]` として、また任意のプロパティディスクリプタで空のオブジェクトを作ります。
+- [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- `obj` の `[[Prototype]]` を返します。
+- [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- `obj` の `[[Prototype]]` に `proto` をセットします。
+
+これらは `__proto__` の代わりに使用します。
+
+例:
+
+```js run
+let animal = {
+ eats: true
+};
+
+// animal をプロトタイプとして新しいオブジェクトを作成する
+*!*
+let rabbit = Object.create(animal);
+*/!*
+
+alert(rabbit.eats); // true
+
+*!*
+alert(Object.getPrototypeOf(rabbit) === animal); // rabbit のプロトタイプを取得
+*/!*
+
+*!*
+Object.setPrototypeOf(rabbit, {}); // rabbit のプロトタイプを {} に変更
+*/!*
+```
+
+`Object.create` は任意で2つ目の引数を持ち、これはプロパティディスクリプタです。次のように、新しいオブジェクトに追加のプロパティが指定できます :
+
+```js run
+let animal = {
+ eats: true
+};
+
+let rabbit = Object.create(animal, {
+ jumps: {
+ value: true
+ }
+});
+
+alert(rabbit.jumps); // true
+```
+
+ディスクリプタはチャプター で説明したのと同じフォーマットです。
+
+`for..in` でプロパティをコピーするよりも、より強力にオブジェクトをクローンするのに `Object.create` が使用できます。:
+
+```js
+let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
+```
+
+この呼び出しはすべてのプロパティを含む `obj` の本当の正確なコピーを作ります。: 列挙型、非列挙型、データプロパティ、setter/getter -- すべてと、正確な `[[Prototype]]` です。
+
+## 略史
+
+`[[Prototype]]` を管理する方法はたくさんあります! 同じことをするたくさんの方法があります!
+
+なぜでしょう？
+
+それは歴史的な理由によるものです。
+
+- コンストラクタ関数の `"prototype"` プロパティはとても古くから機能しています。
+- 2012年後半: `Object.create` が標準に登場しました。これは与えられたプロトタイプでオブジェクトを作りますが、それを取得/設定することはできませんでした。そのため、ブラウザはいつでもプロトタイプの取得/設定ができる非標準の `__proto__` アクセサを実装しました。
+- 2015年後半: `Object.setPrototypeOf` と `Object.getPrototypeOf` が標準に追加されました。`__proto__` はどこでも実行されているデファクトであったため、標準の付録Bに追加されています。これはブラウザ以外の環境ではオプションです。
+
+今現在、私たちはこれらのすべての方法を自由に使うことができます。
+
+なぜ `__proto__` は関数 `getPrototypeOf/setPrototypeOf` に置き換えられたのでしょうか？これは興味深い質問であり、なぜ `__proto__` ではダメなのかを理解する必要があります。答えを知るには続きを読んでください。
+
+```warn header="速度が重要な場合は、既存のオブジェクトの `[[Prototype]]` を変更しないでください"
+技術的には、いつでも `[[Prototype]]` の取得/設定が可能です。しかし、通常はオブジェクト作成時に一度だけ設定を行い、変更はしません。`rabbit` は `animal` から継承しており、それは変更しません。
+
+また、JavaScriptエンジンは高度に最適化されています。`Object.setPrototypeOf` または `obj.__proto__=` で "その場で" プロトタイプを変更することは、可能ですがとても遅い操作になります。そのため、何をしようとしているかわかっている場合、または JavaScript の速度が全く問題にならない場合以外は避けてください。
+```
+
+## "非常にシンプルな" オブジェクト
+
+ご存知の通り、オブジェクトはキー/値ペアを格納するための連想配列として使うことができます。
+
+...しかし、もしその中で *ユーザから提供された* キーを格納しようとした場合(例えばユーザが入力した辞書)、興味深い問題が起こります。: すべてのキーは `"__proto__"` を除いてうまく動作します。
+
+例を確認してみましょう:
+
+```js run
+let obj = {};
+
+let key = prompt("What's the key?", "__proto__");
+obj[key] = "some value";
+
+alert(obj[key]); // [object Object], "some value" ではありません!
+```
+
+ここでは、ユーザが `__proto__` を入力した場合、その代入は無視されます!
+
+それは驚くことではありません。`__proto__` プロパティは特別です: それはオブジェクトまたは `null` であり、文字列はプロトタイプにはなれません。
+
+しかし、このような振る舞いを実装するつもりはありませんでした。私たちはキー/値ペアを格納したいですが、キー名が `"__proto__"` の場合は正しく保存されませんでした。なので、これはバグです。
+
+ここでの結果はひどくはありませんが、他のケースでは、プロトタイプは実際に変更される可能性があるため、処理が予期しない方向で間違ってしまう可能性があります。
+
+最悪なのは、通常開発者はこのような可能性について全く考えません。そのため、このようなバグに気付きにくくなり、特にJavaScriptがサーバー側で使用されている場合には、それらを脆弱性に変えることさえあります。
+
+また、デフォルトの関数である、`toString` や他の組み込みメソッドに代入する場合も予期しないことが起こる可能性があります。
+
+どうやってこの問題を回避しましょう？
+
+まず、通常のオブジェクトの代わりに、格納域として `Map` を使用するよう切り替える方法があります。それですべて問題ありません。
+
+ですが、`Object` もまたここでは上手く機能します
+
+`__proto__` はオブジェクトのプロパティではなく、`Object.prototype` のアクセサプロパティです。:
+
+
+
+なので、もし `obj.__proto__` が読み込まれたり代入された場合、該当の getter/setter がそのプロトタイプから呼ばれ、それは `[[Prototype]]` の取得/設定をします。
+
+最初に言ったとおり、`__proto__` は `[[Prototype]]` にアクセスする方法であり、`[[Prototype]]` 自身ではありません。
+
+今、連想配列としてオブジェクトを使いたい場合、リテラルのトリックを使ってそれを行う事ができます。:
+
+```js run
+*!*
+let obj = Object.create(null);
+*/!*
+
+let key = prompt("What's the key?", "__proto__");
+obj[key] = "some value";
+
+alert(obj[key]); // "some value"
+```
+
+`Object.create(null)` はプロトタイプなし(`[[Prototype]]` が `null`)の空オブジェクトを作ります。:
+
+
+
+したがって、`__proto__` に対する継承された getter/setter はありません。今や通常のデータプロパティとして処理されますので、上の例は正しく動作します。
+
+このようなオブジェクトを "非常にシンプルな" または "純粋な辞書オブジェクト" と呼びます。なぜなら、それらは通常のオブジェクト `{...}` よりもシンプルなためです。
+
+欠点は、そのようなオブジェクトには組み込みのオブジェクトメソッドがないことです。 `toString` など:
+
+```js run
+*!*
+let obj = Object.create(null);
+*/!*
+
+alert(obj); // Error (no toString)
+```
+
+...しかし、連想配列ではそれは通常問題ありません。
+
+ほとんどのオブジェクトに関連したメソッドは `Object.keys(obj)` のように `Object.something(...)` であることに注目してください。それらはプロトタイプにはないので、このようなオブジェクトで機能し続けます。:
+
+
+```js run
+let chineseDictionary = Object.create(null);
+chineseDictionary.hello = "ni hao";
+chineseDictionary.bye = "zai jian";
+
+alert(Object.keys(chineseDictionary)); // hello,bye
+```
+
+## サマリ
+
+プロトタイプをセットアップしたり直接アクセスするための現代のメソッドは次の通りです:
+
+- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- 与えられた `proto` を `[[Prototype]]` (`null` もOK)として、また任意のプロパティディスクリプタで空のオブジェクトを作ります。
+- [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- `obj` の `[[Prototype]]` を返します( `__proto__` の getter と同じです)。
+- [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- `obj` の `[[Prototype]]` に `proto` をセットします( `__proto__` の setter と同じです)。
+
+組み込みの `__proto__` の getter/setter はユーザが作成したキーをオブジェクトに入れる場合に安全ではありません。ユーザがキーとして `"__proto__"` を入力する可能性があり、その場合エラーが発生し、通常は予期せぬ結果になるでしょう。
+
+なので、`Object.create(null)` を使用して `__proto__` をもたない "非常にシンプルな" オブジェクトを作成するか、`Map` オブジェクトを使用します。
+
+また、`Object.create` はオブジェクトのすべてのディスクリプタの浅いコピー（shallow-copy）を作成する簡単な方法です。
+
+```js
+let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
+```
+
+さらに、`__proto__` は `[[Prototype]]` の getter/setterであり、他のメソッドと同様に `Object.prototype` に存在することも明らかにしました。
+
+私たちは、`Object.create(null)` によってプロトタイプなしのオブジェクトを作ることができます。このようなオブジェクトは "純粋な辞書" として使われ、キーとして `"__proto__"` の問題はありません。
+
+他のメソッドです:
+
+- [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- 列挙可能な自身の文字列プロパティ名/値/キー値ペアの配列を返します。
+- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- すべての自身のシンボリックプロパティ名の配列を返します。
+- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- すべての自身の文字列プロパティ名を返します。
+- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- すべての自身のプロパティ名の配列を返します。
+- [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): それは `obj` 自身が `key` という名前のプロパティをもつ(継承でない) 場合に `true` を返します。
+
+オブジェクトプロパティ(`Object.keys` など)を返すすべてのメソッドは "自身の" プロパティを返します。もし継承されたものが欲しい場合は、`for..in` を使います。
diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg
new file mode 100644
index 0000000000..cf4d3023f8
--- /dev/null
+++ b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg
new file mode 100644
index 0000000000..9ccb342299
--- /dev/null
+++ b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/04-prototype-methods/rabbit-animal-object.svg b/1-js/08-prototypes/04-prototype-methods/rabbit-animal-object.svg
new file mode 100644
index 0000000000..28daef3af8
--- /dev/null
+++ b/1-js/08-prototypes/04-prototype-methods/rabbit-animal-object.svg
@@ -0,0 +1,48 @@
+
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/index.md b/1-js/08-prototypes/index.md
new file mode 100644
index 0000000000..3943c1af9f
--- /dev/null
+++ b/1-js/08-prototypes/index.md
@@ -0,0 +1 @@
+# プロトタイプ, 継承
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.md b/1-js/09-classes/01-class/1-rewrite-to-class/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.md
rename to 1-js/09-classes/01-class/1-rewrite-to-class/solution.md
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/clock.js b/1-js/09-classes/01-class/1-rewrite-to-class/solution.view/clock.js
similarity index 100%
rename from 1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/solution.view/clock.js
rename to 1-js/09-classes/01-class/1-rewrite-to-class/solution.view/clock.js
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/index.html b/1-js/09-classes/01-class/1-rewrite-to-class/solution.view/index.html
similarity index 100%
rename from 1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/solution.view/index.html
rename to 1-js/09-classes/01-class/1-rewrite-to-class/solution.view/index.html
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/clock.js b/1-js/09-classes/01-class/1-rewrite-to-class/source.view/clock.js
similarity index 100%
rename from 1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/source.view/clock.js
rename to 1-js/09-classes/01-class/1-rewrite-to-class/source.view/clock.js
diff --git a/1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/index.html b/1-js/09-classes/01-class/1-rewrite-to-class/source.view/index.html
similarity index 100%
rename from 1-js/07-object-oriented-programming/08-class-patterns/2-rewrite-to-prototypes/source.view/index.html
rename to 1-js/09-classes/01-class/1-rewrite-to-class/source.view/index.html
diff --git a/1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/task.md b/1-js/09-classes/01-class/1-rewrite-to-class/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/09-class/1-rewrite-to-class/task.md
rename to 1-js/09-classes/01-class/1-rewrite-to-class/task.md
diff --git a/1-js/09-classes/01-class/animal-rabbit-extends.svg b/1-js/09-classes/01-class/animal-rabbit-extends.svg
new file mode 100644
index 0000000000..7a55a5043c
--- /dev/null
+++ b/1-js/09-classes/01-class/animal-rabbit-extends.svg
@@ -0,0 +1,64 @@
+
+
\ No newline at end of file
diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md
new file mode 100644
index 0000000000..4980210b93
--- /dev/null
+++ b/1-js/09-classes/01-class/article.md
@@ -0,0 +1,430 @@
+
+# クラス(Class) 基本構文
+
+```quote author="Wikipedia"
+オブジェクト指向プログラミングでは、*クラス* はオブジェクト生成、状態(メンバ変数)の初期値の提供や振る舞いの実装(メンバ関数またはメソッド)のための拡張可能なプログラムコードテンプレートです。
+```
+
+実践では、ユーザや商品など、同じ種類のオブジェクトを大量に作成することがしばしばあります。
+
+ の章ですでにご存知の通り、`new function` はそれ場合に役立ちます。
+
+ですが、最新の JavaScript では、より高度な "class" 構造があり、オブジェクト指向プログラミングに役立つ優れた新機能が導入されています。
+
+## "class" 構文
+
+基本の構文は次の通りです:
+```js
+class MyClass {
+ // クラスメソッド
+ constructor() { ... }
+ method1() { ... }
+ method2() { ... }
+ method3() { ... }
+ ...
+}
+```
+
+その後、`new MyClass()` で、リストされたすべてのメソッドをもつ新しいオブジェクトを作成します。
+
+`constructor()` メソッドは `new` により自動で呼び出され、そこでオブジェクトを初期化できます。
+
+例
+
+```js run
+class User {
+
+ constructor(name) {
+ this.name = name;
+ }
+
+ sayHi() {
+ alert(this.name);
+ }
+
+}
+
+// 使い方:
+let user = new User("John");
+user.sayHi();
+```
+
+`new User("John")` が呼び出されると:
+1. 新しいオブジェクトが作られます。
+2. 指定された引数で `constructor` が実行され、`this.name` へ代入します。
+
+...以降、`user.sayHi()` のように、オブジェクトメソッドが呼び出せます。
+
+
+```warn header="クラスメソッドの間にはカンマは不要です"
+初心者の開発者の落とし穴として、クラスメソッドの間にカンマを置くことがあります。これは構文エラーになります。
+
+ここでの表記はオブジェクトリテラルと混同しないでください。クラス内では、カンマは必要ありません。
+```
+
+# クラスとは？
+
+では、`class` は正確に何でしょうか？これはまったく新しい言語レベルのエンティティではありません。
+
+魔法を解き明かして、クラスが実際に何であるか見てみましょう。これは多くの複雑な側面を理解するのに役立ちます。
+
+JavaScript ではクラスは関数の一種です。
+
+これを見てください:
+
+```js run
+class User {
+ constructor(name) { this.name = name; }
+ sayHi() { alert(this.name); }
+}
+
+// 証拠: User は function です
+*!*
+alert(typeof User); // function
+*/!*
+```
+
+`class User {...}` 構造は実際に行っていることは以下です:
+
+1. クラス宣言の結果となる `User` と言う名前の関数を作成します。関数コードは `constructor` メソッドです（メソッドがない場合は空と想定します）。
+2. `User.prototype` に、`sayHi` などのクラスメソッドを格納します。
+
+`new User` オブジェクトが作成された後、そのメソッドを呼び出すと、 の章で説明しように、プロトタイプから取得されます。従って、オブジェクトはクラスメソッドへのアクセスを持ちます。
+
+`class User` 宣言の結果を次のように説明できます:
+
+
+
+これを確認するコードは以下です:
+
+```js run
+class User {
+ constructor(name) { this.name = name; }
+ sayHi() { alert(this.name); }
+}
+
+// class は function
+alert(typeof User); // function
+
+// ...あるいは, より正確には User は constructor メソッド
+alert(User === User.prototype.constructor); // true
+
+// メソッドは User.prototype にあります e.g:
+alert(User.prototype.sayHi); // sayHi メソッドのコード
+
+// prototype には正確には2つのメソッドがあります
+alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
+```
+
+## 単なるシンタックスシュガーではありません
+
+`class` は "シンタックスシュガー"（新しいものは導入されていないが、より可読性が高い書き方）という人が時々います。実際、`class` キーワードを使わずに同じものを宣言することが可能です。:
+
+```js run
+// 純粋な関数で User クラスを書き換え
+
+// 1. constructor 関数を作成
+function User(name) {
+ this.name = name;
+}
+// 関数 prototype は "constructor" プロパティをデフォルトで持ちます
+// なので、作成は不要です
+
+// 2. prototype へメソッドを追加
+User.prototype.sayHi = function() {
+ alert(this.name);
+};
+
+// 使い方:
+let user = new User("John");
+user.sayHi();
+```
+
+この定義の結果はほぼ同じです。なので、コンストラクタとそのプロトタイプメソッドを一緒に定義するための、`class` のシンタックスシュガーとみなされる理由はたしかにあります。
+
+ですが、重要な違いがあります。
+
+1. まず、`class` で生成された関数は特別な内部プロパティ `[[IsClassConstructor]]: true` でラベル付けされています。そのため、手動で作成するのとまったく同じではありません。
+
+ 言語は様々な箇所でそのプロパティをチェックします。例えば通常の関数とは異なり、`new` で呼び出す必要があります:
+
+ ```js run
+ class User {
+ constructor() {}
+ }
+
+ alert(typeof User); // function
+ User(); // Error: クラスのコンストラクタ User は `new` なしで呼び出せません
+ ```
+
+ また、ほとんどの JavaScript エンジンではクラスのコンストラクタの文字列表現は、"class..." で始まります
+
+ ```js run
+ class User {
+ constructor() {}
+ }
+
+ alert(User); // class User { ... }
+ ```
+ 他の違いもあります。この後見ていきます。
+
+2. クラス メソッドは列挙不可です
+
+ クラス定義は、`"prototype"` にあるすべてのメソッドに対して `enumerable` フラグを `false` にセットします。
+
+ オブジェクトを `for...in` するとき、通常はクラスメソッドは必要ないのでこれは便利です。
+
+3. クラスは常に `use strict` です
+
+ クラス構造の中のコードはすべて自動で strict モードです。
+
+加えて、`class` 構文には後で説明するような多くの機能があります。
+
+## クラス表現
+
+関数と同じように、クラスも別の式の中で定義し、渡したり、返却したり代入することができます。
+
+これはクラス式の例です。:
+
+```js
+let User = class {
+ sayHi() {
+ alert("Hello");
+ }
+};
+```
+
+名前付き関数と同様、クラスも名前を持つことができます。
+
+クラス式に名前がある場合、そのクラス内部でのみ見えます:
+
+```js run
+// "名前付きクラス式"
+// (スペックにはこのような用語はありませんが、名前付き関数式と同じです)
+let User = class *!*MyClass*/!* {
+ sayHi() {
+ alert(MyClass); // MyClass の名前はクラスの内部でのみ見えます
+ }
+};
+
+new User().sayHi(); // 動作します, MyClass の定義を表示
+
+alert(MyClass); // error, MyClass の名前はクラスの外からは見えません
+```
+
+次のように、クラスを動的に "要求に応じて" 作ることもできます。:
+
+```js run
+function makeClass(phrase) {
+ // クラス定義とその返却
+ return class {
+ sayHi() {
+ alert(phrase);
+ }
+ };
+}
+
+// 新しいクラスを作成
+let User = makeClass("Hello");
+
+new User().sayHi(); // Hello
+```
+
+
+### Getters/setters
+
+リテラルオブジェクトのように、クラスも getters/setters, 算出プロパティなどを含めることができます。
+
+これは、`get/set` を使用して実装された `user.name` の例です:
+
+```js run
+class User {
+
+ constructor(name) {
+ // setter を呼び出す
+ this.name = name;
+ }
+
+*!*
+ get name() {
+*/!*
+ return this._name;
+ }
+
+*!*
+ set name(value) {
+*/!*
+ if (value.length < 4) {
+ alert("Name too short.");
+ return;
+ }
+ this._name = value;
+ }
+
+}
+
+let user = new User("John");
+alert(user.name); // John
+
+user = new User(""); // Name too short.
+```
+
+技術的には、このようなクラス宣言は `User.prototype` に getter / setter を作成することで機能します。
+
+## 計算された名前（computed name）
+
+これは括弧 `[...]` を使用した計算されたメソッド名の例です。
+
+```js run
+class User {
+
+*!*
+ ['say' + 'Hi']() {
+*/!*
+ alert("Hello");
+ }
+
+}
+
+new User().sayHi();
+```
+
+このような特徴は、リテラルオブジェクトに似ているので、覚えやすいと思います。
+
+## クラスフィールド
+
+```warn header="古いブラウザではポリフィルが必要な場合があります"
+クラスフィールドは最近言語に追加されたものです。
+```
+
+以前は、クラスはメソッドだけを持っていました。
+
+"クラスフィールド" は任意のプロパティが追加できる構文です。
+
+例えば、`class User` に `name` プロパティを追加しましょう。
+
+```js run
+class User {
+*!*
+ name = "John";
+*/!*
+
+ sayHi() {
+ alert(`Hello, ${this.name}!`);
+ }
+}
+
+new User().sayHi(); // Hello, John!
+```
+
+つまり、宣言の中で、" = " と記述するだけです。
+
+クラスフィールドの重要な違いは、`User.prototype` ではなく、個々のオブジェクトにセットされることです。:
+
+```js run
+class User {
+*!*
+ name = "John";
+*/!*
+}
+
+let user = new User();
+alert(user.name); // John
+alert(User.prototype.name); // undefined
+```
+
+また、より複雑な式や関数呼び出しで値を代入することもできます。:
+
+```js run
+class User {
+*!*
+ name = prompt("Name, please?", "John");
+*/!*
+}
+
+let user = new User();
+alert(user.name); // John
+```
+
+
+### クラスフィールドでバインドされたメソッドを作成する
+
+章 でデモしたように、JavaScript での関数は動的な `this` を持ちます。これは呼び出しのコンテキストに依存します。
+
+そのため、オブジェクトメソッドが渡され、別のコンテキストで呼び出された場合、`this` はもうそのオブジェクトの参照ではありません。
+
+例えば、このコードは `undefined` になります:
+
+```js run
+class Button {
+ constructor(value) {
+ this.value = value;
+ }
+
+ click() {
+ alert(this.value);
+ }
+}
+
+let button = new Button("hello");
+
+*!*
+setTimeout(button.click, 1000); // undefined
+*/!*
+```
+
+問題は "`this` なし" で呼び出されたことです。
+
+章 で議論したように、これを直す2つのアプローチがあります。:
+
+1. `setTimeout(() => button.click(), 1000)` のようにラッパー関数を渡す。
+2. メソッドをオブジェクトにバインドする。 e.g. コンストラクタにて。
+
+クラスフィールドは別の、すばらしい構文を提供します:
+
+```js run
+class Button {
+ constructor(value) {
+ this.value = value;
+ }
+*!*
+ click = () => {
+ alert(this.value);
+ }
+*/!*
+}
+
+let button = new Button("hello");
+
+setTimeout(button.click, 1000); // hello
+```
+
+クラスフィールド `click = () => {...}` はオブジェクトごとに作られ、`Button` オブジェクトごとに別々の関数です。そして、`this` はそのオブジェクトを参照します。どこで `button.click` を渡しても、`this` は常に正しい値になります。
+
+これはイベントリスナーなど、ブラウザ環境で特に役立ちます。
+
+## サマリ
+
+基本のクラス構文は次のようになります。:
+
+```js
+class MyClass {
+ prop = value; // プロパティ
+
+ constructor(...) { // コンストラクタ
+ // ...
+ }
+
+ method(...) {} // メソッド
+
+ get something(...) {} // getter
+ set something(...) {} // setter
+
+ [Symbol.iterator]() {} // 計算された名前のメソッド (ここではシンボル)
+ // ...
+}
+```
+
+`MyClass` は技術的には関数（`constructor` として提供）で、メソッド、getter / setter は `MyClass.prototype` に記述されます。
+
+次の章では、継承など他の機能を含め、クラスにてより詳しく学びます。
diff --git a/1-js/09-classes/01-class/class-user.svg b/1-js/09-classes/01-class/class-user.svg
new file mode 100644
index 0000000000..418d71d187
--- /dev/null
+++ b/1-js/09-classes/01-class/class-user.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/solution.md b/1-js/09-classes/02-class-inheritance/1-class-constructor-error/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/solution.md
rename to 1-js/09-classes/02-class-inheritance/1-class-constructor-error/solution.md
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/task.md b/1-js/09-classes/02-class-inheritance/1-class-constructor-error/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/1-class-constructor-error/task.md
rename to 1-js/09-classes/02-class-inheritance/1-class-constructor-error/task.md
diff --git a/3-animation/2-css-animations/3-animate-circle/solution.md b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md
similarity index 100%
rename from 3-animation/2-css-animations/3-animate-circle/solution.md
rename to 1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md
diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js
new file mode 100644
index 0000000000..8009273e3f
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js
@@ -0,0 +1,34 @@
+class Clock {
+ constructor({ template }) {
+ this._template = template;
+ }
+
+ _render() {
+ let date = new Date();
+
+ let hours = date.getHours();
+ if (hours < 10) hours = '0' + hours;
+
+ let mins = date.getMinutes();
+ if (mins < 10) mins = '0' + mins;
+
+ let secs = date.getSeconds();
+ if (secs < 10) secs = '0' + secs;
+
+ let output = this._template
+ .replace('h', hours)
+ .replace('m', mins)
+ .replace('s', secs);
+
+ console.log(output);
+ }
+
+ stop() {
+ clearInterval(this._timer);
+ }
+
+ start() {
+ this._render();
+ this._timer = setInterval(() => this._render(), 1000);
+ }
+}
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
rename to 1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/index.html b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/solution.view/index.html
rename to 1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html
diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js
new file mode 100644
index 0000000000..8009273e3f
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js
@@ -0,0 +1,34 @@
+class Clock {
+ constructor({ template }) {
+ this._template = template;
+ }
+
+ _render() {
+ let date = new Date();
+
+ let hours = date.getHours();
+ if (hours < 10) hours = '0' + hours;
+
+ let mins = date.getMinutes();
+ if (mins < 10) mins = '0' + mins;
+
+ let secs = date.getSeconds();
+ if (secs < 10) secs = '0' + secs;
+
+ let output = this._template
+ .replace('h', hours)
+ .replace('m', mins)
+ .replace('s', secs);
+
+ console.log(output);
+ }
+
+ stop() {
+ clearInterval(this._timer);
+ }
+
+ start() {
+ this._render();
+ this._timer = setInterval(() => this._render(), 1000);
+ }
+}
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/index.html b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/2-clock-class-extended/source.view/index.html
rename to 1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html
diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md
new file mode 100644
index 0000000000..29be5d86bb
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md
@@ -0,0 +1,12 @@
+importance: 5
+
+---
+
+# 拡張された時計
+
+私たちは `Clock` クラスを持っています。今のところ、毎秒時間を表示します。
+
+`Clock` を継承した新たなクラス `ExtendedClock` を作成し、`precision` パラメータを追加してください -- "時計のカチカチ" の間の `ms` の数値です。デフォルトでは `1000` (1秒) です。
+
+- あなたのコードはファイル `extended-clock.js` にしてください。
+- オジリナルの `clock.js` は変更しないでください。それを拡張してください。
diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.svg b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.svg
new file mode 100644
index 0000000000..8ab5682913
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.svg
@@ -0,0 +1,67 @@
+
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md b/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md
new file mode 100644
index 0000000000..abe36bad8f
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md
@@ -0,0 +1,87 @@
+解答は2つパートがあります。
+
+最初に、簡単な方は、継承しているクラスはコンストラクタで `super()` を呼ぶ必要があるということです。そうでなければ `"this"` が "定義済み" になりません。
+
+なので、次のように直します:
+
+```js run
+class Rabbit extends Object {
+ constructor(name) {
+*!*
+ super(); // 継承しているとき、親コンストラクタを呼ぶ必要があります
+*/!*
+ this.name = name;
+ }
+}
+
+let rabbit = new Rabbit("Rab");
+
+alert( rabbit.hasOwnProperty('name') ); // true
+```
+
+しかし、これですべてではありません。
+
+修正した後でさえ、`"class Rabbit extends Object"` 対 `class Rabbit` では依然として重要な違いがあります。
+
+知っている通り、 "extends" 構文は2つのプロトタイプを設定します。:
+
+1. コンストラクタ関数の `"prototype"` 間(メソッド用)
+2. コンストラクタ関数自身の間(静的メソッド用)
+
+我々のケースでは、`class Rabbit extends Object` では次を意味します:
+
+```js run
+class Rabbit extends Object {}
+
+alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
+alert( Rabbit.__proto__ === Object ); // (2) true
+```
+
+従って、このように `Rabbit` 経由で `Object` の静的メソッドにアクセスすることができます。:
+
+```js run
+class Rabbit extends Object {}
+
+*!*
+// 通常は Object.getOwnPropertyNames と呼びます
+alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b
+*/!*
+```
+
+また、`extends` を使わない場合 `class Rabbit` は2つ目の参照を持ちません。
+
+比較してみてください:
+
+```js run
+class Rabbit {}
+
+alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
+alert( Rabbit.__proto__ === Object ); // (2) false (!)
+
+*!*
+// エラー、Rabbit にこのような関数はありません
+alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error
+*/!*
+```
+
+シンプルな `class Rabbit` では `Rabbit` 関数は同じプロトタイプを持っています。
+
+```js run
+class Rabbit {}
+
+// (2) の代わりに、これは正しいです:
+alert( Rabbit.__proto__ === Function.prototype );
+```
+
+ところで、`Function.prototype` は "一般的な" 関数メソッドを持っています。例えば `call`, `bind` などです。それらは究極的には両方のケースで利用可能です。なぜなら、組み込みの `Object` コンストラクタに対して、`Object.__proto__ === Function.prototype` だからです。
+
+これはその図です:
+
+
+
+従って、まとめると2つの違いがあります。:
+
+| class Rabbit | class Rabbit extends Object |
+|--------------|------------------------------|
+| -- | コンストラクタで `super()` を呼ぶ必要がある |
+| `Rabbit.__proto__ === Function.prototype` | `Rabbit.__proto__ === Object` |
diff --git a/1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/task.md b/1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/10-class-inheritance/3-class-extend-object/task.md
rename to 1-js/09-classes/02-class-inheritance/3-class-extend-object/task.md
diff --git a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
new file mode 100644
index 0000000000..63b5a18a19
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/article.md b/1-js/09-classes/02-class-inheritance/article.md
new file mode 100644
index 0000000000..2a6a7f0930
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/article.md
@@ -0,0 +1,630 @@
+
+# クラスの継承
+
+クラスの継承は、あるクラスが別のクラスを拡張するための方法です。
+
+つまり、既存の機能の上に、新たな機能を作ることができます。
+
+## "extends" キーワード
+
+クラス `Animal` があるとします:
+
+```js
+class Animal {
+ constructor(name) {
+ this.speed = 0;
+ this.name = name;
+ }
+ run(speed) {
+ this.speed += speed;
+ alert(`${this.name} runs with speed ${this.speed}.`);
+ }
+ stop() {
+ this.speed = 0;
+ alert(`${this.name} stopped.`);
+ }
+}
+
+let animal = new Animal("My animal");
+```
+
+これは、`animal` オブジェクトと `Animal` クラスを、グラフィカルに表現したものです。:
+
+
+
+...そしてもう１つの `class Rabbit` を作成します。
+
+うさぎ(rabbit)は動物(animal)なので、`Rabbit` クラスは `Animal` がベースとなり、animal メソッドへアクセスできます。これで、"一般的な" 動物が実行できることをうさぎも実行できます。
+
+別のクラスを拡張する構文は `class Child extends Parent` です。
+
+`Animal` を継承した `class Rabbit` を作成しましょう。:
+
+```js
+*!*
+class Rabbit extends Animal {
+*/!*
+ hide() {
+ alert(`${this.name} hides!`);
+ }
+}
+
+let rabbit = new Rabbit("White Rabbit");
+
+rabbit.run(5); // White Rabbit runs with speed 5.
+rabbit.hide(); // White Rabbit hides!
+```
+
+`Rabbit` クラスのオブジェクトは、`rabbit.hide()` のように `Rabbit` のメソッドと、`rabbit.run()` のように `Animal` メソッド両方が利用できます。
+
+内部では、`extends` キーワードは、以前からあるプロトタイプの仕組みを使用して動作しています。`Rabbit.prototype.[[Prototype]]` を `Animal.prototype` にセットします。そのため、`Rabbit.prototype` でメソッドが見つからない場合には、JavaScript は `Animal.prototype` から取得します。
+
+
+
+例えば、`rabbit.run` メソッドを見つけるために、エンジンは次のようにチェックします（図の下から上）:
+1. `rabbit` オブジェクト(`run` はありません)。
+2. そのプロトタイプ、つまり `Rabbit.prototype`(`hide` はありますが、`run`はありません)。
+3. そのプロトタイプ、つまり (`extends` しているため) `Animal.prototype`, (最終的に `run` メソッドを持ちます)。
+
+ の章から想起できるように、JavaScript は同じプロトタイプ継承を組み込みオブジェクトに対しても使います。E.g. `Date.prototype.[[Prototype]]` は `Object.prototype` なので、date は一般的なオブジェクトメソッドを持っています。
+
+````smart header="`extends` の後では任意の式が指定できます"
+クラス構文では単にクラスではなく、`extends` の後に任意の式を指定することができます。
+
+例えば、親クラスを生成する関数呼び出します:
+
+```js run
+function f(phrase) {
+ return class {
+ sayHi() { alert(phrase) }
+ }
+}
+
+*!*
+class User extends f("Hello") {}
+*/!*
+
+new User().sayHi(); // Hello
+```
+ここでは、 `class User` は `f("Hello")` の結果を継承しています。
+
+多くの条件に依存したクラスを生成するために関数を使用し、それを継承するといった高度なプログラミングパターンに対して役立つ場合があります。
+````
+
+## メソッドのオーバーライド
+
+では、前に進めてメソッドをオーバライドをしてみましょう。デフォルトでは、`class Rabbit` では指定されておらず、`class Animal` から直接 "そのまま" 取得しています。
+
+ですが、`Rabbit` で自身の `stop` を指定すると、代わりにそれが使われます。:
+
+```js
+class Rabbit extends Animal {
+ stop() {
+ // ...class Animal の stop() の代わりに
+ // rabbit.stop() で利用されます
+ }
+}
+```
+
+通常は親メソッドを完全に置き換えるのではなく、その上に機能の微調整または拡張を行うことを望みます。メソッド内で何かをしますが、その前後または処理中に親メソッドを呼び出します。
+
+クラスはそのために `"super"` キーワードを提供しています。
+
+- `super.method(...)` は親メソッドを呼び出します。
+- `super(...)` は親のコンストラクタを呼び出します(コンストラクタの内側でのみ)。
+
+例えば、うさぎ(rabbit)が止まったとき自動的に隠れさせます。:
+
+```js run
+class Animal {
+
+ constructor(name) {
+ this.speed = 0;
+ this.name = name;
+ }
+
+ run(speed) {
+ this.speed += speed;
+ alert(`${this.name} runs with speed ${this.speed}.`);
+ }
+
+ stop() {
+ this.speed = 0;
+ alert(`${this.name} stopped.`);
+ }
+
+}
+
+class Rabbit extends Animal {
+ hide() {
+ alert(`${this.name} hides!`);
+ }
+
+*!*
+ stop() {
+ super.stop(); // 親の stop 呼び出し
+ this.hide(); // その後隠す
+ }
+*/!*
+}
+
+let rabbit = new Rabbit("White Rabbit");
+
+rabbit.run(5); // White Rabbit runs with speed 5.
+rabbit.stop(); // White Rabbit stopped. White rabbit hides!
+```
+
+今、 `Rabbit` は処理の中で親 `super.stop()` を呼び出す `stop` メソッドを持ちます。
+
+````smart header="アロー関数は `super` を持っていません"
+ の章で述べた通り、アロー関数には `super` がありません。
+
+もしアクセスすると、外部の関数から取得されます。例えば:
+```js
+class Rabbit extends Animal {
+ stop() {
+ setTimeout(() => super.stop(), 1000); // 1秒後、親の stop を実行
+ }
+}
+```
+
+アロー関数での `super` は、 `stop()` 内での `super` と同じです。なので、意図通りに動きます。以下のように "通常の" 関数を指定するとエラーになります。:
+
+```js
+// Unexpected super
+setTimeout(function() { super.stop() }, 1000);
+```
+````
+
+
+## コンストラクタのオーバライド
+
+コンストラクタに対しては、少し用心が必要です。
+
+今まで、`Rabbit` は自身の `constructor` を持っていませんでした。
+
+[仕様(specification)](https://tc39.github.io/ecma262/#sec-runtime-semantics-classdefinitionevaluation)によると、クラスが別のクラスを拡張し、`constructor` を持たない場合、次のような `constructor` が生成されます。
+
+```js
+class Rabbit extends Animal {
+ // 独自のコンストラクタを持たないクラスを拡張するために生成されます
+*!*
+ constructor(...args) {
+ super(...args);
+ }
+*/!*
+}
+```
+
+ご覧の通り、基本的にはすべての引数を渡して親の `constructor` を呼び出します。それは自身のコンストラクタを書いていない場合に起こります。
+
+では、カスタムのコンストラクタを `Rabbit` に追加してみましょう。それは `name` に加えて `earLength` を指定します。:
+
+```js run
+class Animal {
+ constructor(name) {
+ this.speed = 0;
+ this.name = name;
+ }
+ // ...
+}
+
+class Rabbit extends Animal {
+
+*!*
+ constructor(name, earLength) {
+ this.speed = 0;
+ this.name = name;
+ this.earLength = earLength;
+ }
+*/!*
+
+ // ...
+}
+
+*!*
+// 動作しません!
+let rabbit = new Rabbit("White Rabbit", 10); // Error: this は定義されていません
+*/!*
+```
+
+おっと! エラーになりました。これではうさぎを作ることができません。何が間違っていたのでしょう？
+
+簡単な回答:
+
+- **継承したクラスのコンストラクタは `super(...)` を呼び出し、(!) `this` を使う前にそれを行わなければなりません。**
+
+...しかしなぜでしょうか？ ここで何が起きているのでしょう？ 確かにこの要件は奇妙に見えます。
+
+もちろん、これに対する説明がありますので詳細を見てみましょう。これで何が起こっているのかを理解するでしょう。
+
+JavaScriptでは、継承しているクラスのコンストラクタ関数(いわゆる "派生コンストラクタ(derived constructor)") とその他の関数で区別があります。派生コンストラクタ関数は特別な内部プロパティ `[[ConstructorKind]]:"derived"` が付けられ、特別な内部のラベルです。
+
+このラベルは `new` の振る舞いに影響を与えます、
+
+- 通常の関数が `new` で実行される際、空のオブジェクトを作成し、 `this` に割り当てます。
+- ですが、派生コンストラクタが実行されるとき、そうは実行されません。親のコンストラクタがこのジョブを実行することを期待します。
+
+なので、親(元になる)コンストラクタを実行するために、派生コンスタクタは `super` の呼び出しが必要になります。そうしないと、`this` のオブジェクトは生成されないからです。結果、エラーになるでしょう。
+
+`Rabbit` コンストラクタを動作させるために、`this` を使う前に `super()` を呼びます:
+
+```js run
+class Animal {
+
+ constructor(name) {
+ this.speed = 0;
+ this.name = name;
+ }
+
+ // ...
+}
+
+class Rabbit extends Animal {
+
+ constructor(name, earLength) {
+*!*
+ super(name);
+*/!*
+ this.earLength = earLength;
+ }
+
+ // ...
+}
+
+*!*
+// 今は問題ありません
+let rabbit = new Rabbit("White Rabbit", 10);
+alert(rabbit.name); // White Rabbit
+alert(rabbit.earLength); // 10
+*/!*
+```
+
+
+
+### クラスフィールドのオーバーライド: a tricky note
+
+```warn header="高度な内容です"
+ここの内容は、他のプログラミング言語でのクラスに対してある程度経験あること前提としています。
+
+言語へのよりよい洞察を提供し、バグの原因になりうる(ただし頻度はそれほど頻繁ではありません)振る舞いについても説明します。
+
+理解するのが難しい場合は、先に進んで読み続けてから、しばらくしてから戻ってください。
+```
+
+メソッドだけではなく、クラスフィールドもオーバーライドすることができます。
+
+ですが、親のコンストラクタでオーバーライドされたフィールドにアクセスする際、多くの他のプログラミング言語とは大きく異なる、トリッキーな振る舞いがあります。
+
+この例を考えます:
+
+```js run
+class Animal {
+ name = 'animal';
+
+ constructor() {
+ alert(this.name); // (*)
+ }
+}
+
+class Rabbit extends Animal {
+ name = 'rabbit';
+}
+
+new Animal(); // animal
+*!*
+new Rabbit(); // animal
+*/!*
+```
+
+ここでは、クラス `Rabbit` は `Animal` を拡張しており、`name` フィールドを自身の値としてオーバーライドしています。
+
+`Rabbit` には自身のコンストラクタはないので、`Animal` コンストラクタが呼ばれます。
+
+興味深いことは、`new Animal()` と `new Rabbit()` 両方のケースで、行 `(*)` の `alert` は `animal` を表示することです。
+
+**言い換えると、親コンストラクタは常にオーバーライドされたものではなく、自身のフィールド値を利用します。**
+
+何がおかしいでしょうか?
+
+まだはっきりしない場合は、メソッドの場合と比較してみてください。
+
+ここには同じコードがありますが、`this.name` フィールドの代わりに `this.showName()` メソッドを呼んでいます。:
+
+```js run
+class Animal {
+ showName() { // this.name = 'animal' の代わり
+ alert('animal');
+ }
+
+ constructor() {
+ this.showName(); // alert(this.name); の代わり
+ }
+}
+
+class Rabbit extends Animal {
+ showName() {
+ alert('rabbit');
+ }
+}
+
+new Animal(); // animal
+*!*
+new Rabbit(); // rabbit
+*/!*
+```
+
+注目してください: 出力結果は異なります。
+
+そして、これは自然に期待しているものです。親コンストラクタが派生クラスで呼び出されるとき、オーバーライドされたメソッドが使用されます。
+
+...ですが、クラスフィールドの場合はそうではありません。前述のように、親コンストラクタは常に親フィールドを使用します。
+
+なぜ差異があるのでしょうか？
+
+理由は、フィールドの初期化順です。クラスフィールドは次のタイミングで初期化されます:
+- ベースクラスのコンストラクタ(何も拡張していない)の前
+- 派生クラスの `super()` の直後
+
+今回のケースでは、`Rabbit` は派生クラスで、`constructor()` はありません。以前言った通り、これは`super(...args)` だけがある空のコンストラクタと同じです。
+
+そのため、`new Rabbit()` は `super()` を呼び出し、親コンストラクタを実行し、(派生クラスのルールに従い)その後クラスフィールドが初期化されます。親コンストラクタが実行された時点では、まだ `Rabbit` クラスフィールドはないため、`Animal` フィールドが使用されます。
+
+フィールドとメソッドのこの微妙な違いは、JavaScript 固有のものです。
+
+幸い、この振る舞いはオーバーライドされたフィールドが親コンストラクタの中で使用されている場合にのみです。出くわすと何が起こっているのか理解するのが難しいかもしれないので、ここで説明しています。
+
+問題になった場合には、フィールドの代わりにメソッドあるいは getter/setter を使用して修正できます。
+
+
+## Super: internals, [[HomeObject]]
+
+```warn header="高度な情報です"
+初めてチュートリアルを読んでいるなら、このセクションはスキップして構いません。
+
+ここは、継承と `super` の内部の仕組みについて説明しています。
+```
+
+`super` の内部をもう少し詳細に見ていきましょう。ここまでで、いくつか興味深いことがあります。
+
+まず最初に、今まで学んできたすべてのことだけでは、 `super` が完全動作するのは不可能です!
+
+確かに、それが技術的にどのように動くのか、自問してみましょう。オブジェクトメソッドを実行するとき、`this` は現在のオブジェクトを取ります。もし `super.method()` を呼び出す場合、エンジンは現在のオブジェクトのプロトタイプから `method` を取得する必要があります。
+
+課題はシンプルに見えますが、そうではありません。エンジンは現在のオブジェクト `this` を知っているので、`this.__proto__.method` で親の `method` が取得できるかもしれません。残念ながら、このような "単純な" 解決策は機能しません。
+
+問題をデモしてみましょう。簡単にするために、クラスなしで単純なオブジェクトを使用します。
+
+詳細を知る必要がなければ、このパートをスキップして `[[HomeObject]]` サブセクションに進んでください。特に問題はありません。ここは物事を深く理解することに興味がある場合に呼んでください。
+
+以下の例で、`rabbit.__proto__ = animal` です。`rabbit.eat()` で、`this.__proto__` を使用して、`animal.eat()` メソッドを呼び出します:
+
+```js run
+let animal = {
+ name: "Animal",
+ eat() {
+ alert(this.name + " eats.");
+ }
+};
+
+let rabbit = {
+ __proto__: animal,
+ name: "Rabbit",
+ eat() {
+*!*
+ // これがおそらく super.eat() が動作する方法です
+ this.__proto__.eat.call(this); // (*)
+*/!*
+ }
+};
+
+rabbit.eat(); // Rabbit eats.
+```
+
+行 `(*)` でプロトタイプ(`animal`) から `eat` を取り、現在のオブジェクトコンテキストでそれを呼び出します。`.call(this)` はここでは重要であることに注意してください。なぜなら、シンプルな `this.__proto__.eat()` は現在のオブジェクトではなくプロトタイプのコンテキストで親の `eat` を実行するためです。
+
+また、上のコードは実際に期待通り動作します: 正しい `alert` になります。
+
+今度はもう1つのオブジェクトをチェーンに追加しましょう。 どのように壊れるかを見てみます:
+
+```js run
+let animal = {
+ name: "Animal",
+ eat() {
+ alert(this.name + " eats.");
+ }
+};
+
+let rabbit = {
+ __proto__: animal,
+ eat() {
+ // ...bounce around rabbit-style 親 (animal) メソッドを呼び出す
+ this.__proto__.eat.call(this); // (*)
+ }
+};
+
+let longEar = {
+ __proto__: rabbit,
+ eat() {
+ // ...do something with long ears 親 (rabbit) メソッドを呼び出す
+ this.__proto__.eat.call(this); // (**)
+ }
+};
+
+*!*
+longEar.eat(); // Error: 最大呼び出しスタックサイズを超えました
+*/!*
+```
+
+コードはこれ以上動作しません! `longEar.ear()` を呼び出そうとするとエラーになります。
+
+これは明白ではないかもしれませんが、もし `longEar.eat()` 呼び出しをトレースをするとなぜかが分かります。行 `(*)` と `(**)` は共に、`this` の値は現在のオブジェクト (`longEar`) です。それが肝心です: すべてのオブジェクトメソッドはプロトタイプなどではなく、現在のオブジェクトを `this` として取得します。
+
+したがって、行 `(*)` と `(**)` は共に、`this.__proto__` の値は全く同じで、`rabbit` です。それらは両方とも、無限ループで `rabbit.eat` を呼んでいます。
+
+これは何が起きているかを示す図です。:
+
+
+
+1. `longEar.eat()` の中で、行 `(**)` は `this=longEar` となる `rabbit.eat` を呼び出します。
+ ```js
+ // longEar.eat() の中では this = longEar です
+ this.__proto__.eat.call(this) // (**)
+ // なので次のようになります
+ longEar.__proto__.eat.call(this)
+ // つまり呼ばれるのは
+ rabbit.eat.call(this);
+ ```
+2. 次に `rabbit.eat` の 行 `(*)` で、チェーンの中でより高次へ呼び出しを渡したいですが、`this=longEar` なので、 `this=__prto__.eat` は再び `rabbit.eat` です!
+
+ ```js
+ // rabbit.eat() の中でも this = longEar です
+ this.__proto__.eat.call(this) // (*)
+ // なので次のようになります
+ longEar.__proto__.eat.call(this)
+ // なので (再び)
+ rabbit.eat.call(this);
+ ```
+
+3. ...したがって、それ以上高次へ登ることができないので、`rabbit.eat` はエンドレスで自身を呼び出します。
+
+`this` だけを使ってこの問題を解くことはできません。
+
+### `[[HomeObject]]`
+
+その解決策を提供するため、JavaScriptはもう１つ関数のための特別な内部プロパティを追加しています: `[[HomeObject]]` です。
+
+関数がクラスまたはオブジェクトメソッドとして指定されたとき、その `[[HomeObject]]` プロパティはそのオブジェクトになります。
+
+そして、`super` はこれを使って親のプロトタイプとメソッドメソッドを解決しましま。
+
+最初のオブジェクトで、それがどのように動くのか見てみましょう:
+
+```js run
+let animal = {
+ name: "Animal",
+ eat() { // [[HomeObject]] == animal
+ alert(this.name + " eats.");
+ }
+};
+
+let rabbit = {
+ __proto__: animal,
+ name: "Rabbit",
+ eat() { // [[HomeObject]] == rabbit
+ super.eat();
+ }
+};
+
+let longEar = {
+ __proto__: rabbit,
+ name: "Long Ear",
+ eat() { // [[HomeObject]] == longEar
+ super.eat();
+ }
+};
+
+*!*
+// ただしく機能します
+longEar.eat(); // Long Ear eats.
+*/!*
+```
+
+`[[HomeObject]]` のより、意図したとおりに動作します。`longEar.eat` のようなメソッドは、その `[[HomeObject]]` を知っており、そのプロトタイプから親のメソッドを取得します。`this` を使用することなく。
+
+### メソッドは "自由" ではありません
+
+これまでの認識の通り、一般的な関数は "自由" であり、JavaScript のオブジェクトにバインドされていません。そのため、オブジェクト間でコピーしたり別の `this` で呼び出すことができます。
+
+しかし、メソッドはそのオブジェクトを記録しているため、`[[HomeObject]]` の存在はその原則に違反します。`[[HomeObject]]` は変更できないため、このバインドは永遠です。
+
+`[[HomeObject]]` が使用される言語での唯一の場所が `super` です。したがって、メソッドが `super` を使用しない場合、メソッドは以前として自由とみなせ、オブジェクト間でコピーできます。しかし、`super` があると、うまくいかない可能性があります。
+
+これはコピー後の上手く行かない `super` の結果のデモです:
+
+```js run
+let animal = {
+ sayHi() {
+ alert(`I'm an animal`);
+ }
+};
+
+// rabbit は animal を継承
+let rabbit = {
+ __proto__: animal,
+ sayHi() {
+ super.sayHi();
+ }
+};
+
+let plant = {
+ sayHi() {
+ alert("I'm a plant");
+ }
+};
+
+// tree は plant を継承
+let tree = {
+ __proto__: plant,
+*!*
+ sayHi: rabbit.sayHi // (*)
+*/!*
+};
+
+*!*
+tree.sayHi(); // I'm an animal (?!?)
+*/!*
+```
+
+`tree.sayHi()` の呼び出しは、"I'm an animal" を表示します。これは間違いです。
+
+理由は簡単です:
+- 行 `(*)` で、メソッド `tree.sayHi` は `rabbit` からコピーされました。
+- `rabbit` で作られているので、`[[HomeObject]]` は `rabbit` です。`[[HomeObject]]` を変える方法はありません。
+- `tree.sayHi()` のコードは `super.sayHi()` を内部に持ちます。`rabbit` から進み、`animal` よりメソッドを取得します。
+
+これが、起きていることの図です。:
+
+
+
+### 関数プロパティではないメソッド
+
+`[[HomeObject]]` はクラスと単純なオブジェクト両方で定義されたメソッドに対して定義されています。しかし、オブジェクトの場合、メソッドは指定された方法で正確に指定されなければなりません。: `"method: function()"` ではなく `method()` として指定する必要があります。
+
+我々にとってこの違いは本質的ではないかもしれませんが、JavaScript にとっては重要です。
+
+下の例では、上の例との比較のために非メソッド構文を使っています。`[[HomeObject]]` プロパティはセットされず、継承は動作しません。:
+
+```js run
+let animal = {
+ eat: function() { // 短縮構文: eat() {...} にする必要があります
+ // ...
+ }
+};
+
+let rabbit = {
+ __proto__: animal,
+ eat: function() {
+ super.eat();
+ }
+};
+
+*!*
+rabbit.eat(); // super 呼び出しエラー([[HomeObject]] が無いため)
+*/!*
+```
+
+## サマリ
+
+1. クラスを拡張するには: `class Child extends Parent`:
+ - これは `Child.prototype.__proto__` は `Parent.prototype` になることを意味し、メソッドが継承されます。
+2. コンストラクタをオーバーライドするとき:
+ - `this` を使う前に `Child` コンストラクタの中で `super` として親のコンストラクタを呼ぶ必要があります。
+3. 他のメソッドをオーバーライドするとき:
+ - `super.method()` を使用することで、`Child` で親のメソッドを呼び出すことができます。
+4. 内部:
+ - メソッドは内部の `[[HomeObject]]` プロパティで自身のクラス/オブジェクトを覚えています。 これが `super` が親メソッドを解決する方法です。
+ - そのため、あるオブジェクトから別のオブジェクトへ `super` を持つメソッドをコピーするのは安全ではありません。
+
+また：
+ - アロー関数は独自の `this` や `super` を持っていないので、周囲の文脈に透過的にフィットします。
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg
new file mode 100644
index 0000000000..5ea9bf29ea
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg
new file mode 100644
index 0000000000..72e47e34c2
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg
new file mode 100644
index 0000000000..bced3d355e
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg
new file mode 100644
index 0000000000..f53fc92dee
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg
new file mode 100644
index 0000000000..2f30a3a901
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg
new file mode 100644
index 0000000000..f6450ddc49
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/this-super-loop.svg b/1-js/09-classes/02-class-inheritance/this-super-loop.svg
new file mode 100644
index 0000000000..4f5f45034a
--- /dev/null
+++ b/1-js/09-classes/02-class-inheritance/this-super-loop.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg
new file mode 100644
index 0000000000..3e354b895d
--- /dev/null
+++ b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/03-static-properties-methods/article.md b/1-js/09-classes/03-static-properties-methods/article.md
new file mode 100644
index 0000000000..caef4925f6
--- /dev/null
+++ b/1-js/09-classes/03-static-properties-methods/article.md
@@ -0,0 +1,237 @@
+# 静的(static)プロパティとメソッド
+
+クラス全体にメソッドを割り当てることもできます。このようなメソッドは _static(静的)_ と呼ばれます。
+
+クラス宣言の中では、次のように `static` キーワードを付けます。
+
+```js run
+class User {
+*!*
+ static staticMethod() {
+*/!*
+ alert(this === User);
+ }
+}
+
+User.staticMethod(); // true
+```
+
+これは、実際にはプロパティとして直接割り当てるのと同じことをします。:
+
+```js
+class User {}
+
+User.staticMethod = function () {
+ alert(this === User);
+};
+
+User.staticMethod(); // true
+```
+
+`User.staticMethod()` 内の `this` の値はクラスコンストラクタ `User` 自身("ドットの前のオブジェクト" ルール)です。
+
+通常 static メソッドは、クラスには属するが、特定のオブジェクトには属さない関数を実装するのに使用されます。
+
+例えば、`Article` オブジェクトがあり、それらを比較するための関数が必要とします。
+
+自然な解決策は、静的メソッド `Article.compare` を追加することです。:
+
+```js run
+class Article {
+ constructor(title, date) {
+ this.title = title;
+ this.date = date;
+ }
+
+*!*
+ static compare(articleA, articleB) {
+ return articleA.date - articleB.date;
+ }
+*/!*
+}
+
+// usage
+let articles = [
+ new Article("Mind", new Date(2019, 1, 1)),
+ new Article("Body", new Date(2019, 0, 1)),
+ new Article("JavaScript", new Date(2019, 11, 1))
+];
+
+*!*
+articles.sort(Article.compare);
+*/!*
+
+alert( articles[0].title ); // Body
+```
+
+ここでは、`Article.compare` は記事を比較する手段として、記事の “上位” にいます。記事のメソッドと言うよりはクラス全体のメソッドです。
+
+別の例は、いわゆる “ファクトリー” メソッドです。
+
+記事の作成には複数の方法が必要です:
+
+1. 与えられたパラメータ(`title`, `date` など)による作成
+2. 今日の日付の空の記事の作成
+3. ...
+
+最初の方法はコンストラクタで実装することができます。そして、2 つ目の方法としてはクラスの静的メソッドを作ることができます。
+
+ここでの `Article.createTodays()` を見てください:
+
+```js run
+class Article {
+ constructor(title, date) {
+ this.title = title;
+ this.date = date;
+ }
+
+*!*
+ static createTodays() {
+ // 思い出してください, this = Article
+ return new this("Today's digest", new Date());
+ }
+*/!*
+}
+
+let article = Article.createTodays();
+
+alert( article.title ); // Todays digest
+```
+
+これで今日のダイジェストを作成する必要があるたびに、`Article.createTodays()` を呼べます。改めて言いますが、これは記事のメソッドではなく、クラス全体のメソッドです。
+
+静的メソッドは、次のように、データベース関連のクラスでデータベースの検索/保存/削除のためにも使用されます。:
+
+```js
+// Article は記事を管理するための特別なクラスと仮定します
+// 記事を削除するための static メソッド:
+Article.remove({ id: 12345 });
+```
+
+## 静的プロパティ
+
+[recent browser=Chrome]
+
+静的プロパティも可能で、通常のクラスプロパティと同じように見えますが、先頭に `static` が付きます。
+
+```js run
+class Article {
+ static publisher = "Ilya Kantor";
+}
+
+alert(Article.publisher); // Ilya Kantor
+```
+
+これは直接 `Article` に代入するのと同じです。:
+
+```js
+Article.publisher = "Ilya Kantor";
+```
+
+## 静的プロパティとメソッドの継承 [#statics-and-inheritance]
+
+静的プロパティとメソッドは継承されます。
+
+例えば、以下のコードの `Animal.compare` と `Animal.planet` は継承され、`Rabbit.compare` と `Rabbit.planet` としてアクセス可能です。
+
+```js run
+class Animal {
+ static planet = "Earth";
+
+ constructor(name, speed) {
+ this.speed = speed;
+ this.name = name;
+ }
+
+ run(speed = 0) {
+ this.speed += speed;
+ alert(`${this.name} runs with speed ${this.speed}.`);
+ }
+
+*!*
+ static compare(animalA, animalB) {
+ return animalA.speed - animalB.speed;
+ }
+*/!*
+
+}
+
+// Inherit from Animal
+class Rabbit extends Animal {
+ hide() {
+ alert(`${this.name} hides!`);
+ }
+}
+
+let rabbits = [
+ new Rabbit("White Rabbit", 10),
+ new Rabbit("Black Rabbit", 5)
+];
+
+*!*
+rabbits.sort(Rabbit.compare);
+*/!*
+
+rabbits[0].run(); // Black Rabbit runs with speed 5.
+
+alert(Rabbit.planet); // Earth
+```
+
+`Rabbit.compare` を呼び出すと、継承された `Animal.compare` が呼び出されます。
+
+これはどのように機能しているでしょう？すでに推測したかもしれませんが、`extends` もまた `Rabbit` に `Animal` への参照を持つ `[[Prototype]]` を与えます。
+
+
+
+したがって, `Rabbit extends Animal` は 2 つの `[[Prototype]]` の参照を作成します:
+
+1. `Rabbit` 関数は プロトタイプ的に `Animal` 関数を継承しています。
+2. `Rabbit.prototype` はプロトタイプ的に `Animal.prototype` を継承しています。
+
+結果、継承は通常のものと静的なメソッド両方で機能します。
+
+ここで、それを確認しましょう:
+
+```js run
+class Animal {}
+class Rabbit extends Animal {}
+
+// 静的
+alert(Rabbit.__proto__ === Animal); // true
+
+// 通常のメソッド
+alert(Rabbit.prototype.__proto__ === Animal.prototype); // true
+```
+
+## サマリ
+
+静的メソッドは、具体的なクラスインスタンスに関連する機能やインスタンスが存在することを必要する機能ではなく、むしろクラス全体に属している機能のために使用されます。
+
+例えば、比較用のメソッド `Article.compare(article1, article2)` や、ファクトリーメソッド `Article.createTodays()` です。
+
+これらはクラス宣言の中で `static` と言うキーワードでラベル付けされます。
+
+静的プロパティは、クラスレベルのデータを格納するときに使用され、インスタンスにバインドされません。
+
+構文は次の通りです:
+
+```js
+class MyClass {
+ static property = ...;
+
+ static method() {
+ ...
+ }
+}
+```
+
+これは技術的には、クラス自身への代入と同じです:
+
+```js
+MyClass.property = ...
+MyClass.method = ...
+```
+
+静的プロパティは継承されます。
+
+`class B extends A` の場合、クラス `B` 自体のプロトタイプは `A` を指します、: `B.[[Prototype]] = A`。したがって、`B` の中にフィールドが見つからない場合は、検索は `A` の中で続行されます。
diff --git a/1-js/09-classes/04-private-protected-properties-methods/article.md b/1-js/09-classes/04-private-protected-properties-methods/article.md
new file mode 100644
index 0000000000..0653aefa60
--- /dev/null
+++ b/1-js/09-classes/04-private-protected-properties-methods/article.md
@@ -0,0 +1,317 @@
+# Private / protected プロパティとメソッド
+
+オブジェクト指向プログラミングの最も重要な原則の 1 つは、内部インタフェースを外部インタフェースから切り離すことです。
+
+これは、"hello world" アプリケーションよりも複雑なものを作るすべての開発において "必須" です。
+
+これを理解するために、開発から離れて、現実の世界に目を向けましょう。
+
+通常、私たちが使っているデバイスは非常に複雑です。しかし、内部インタフェースを外部インタフェースから切り離すことで、問題なく使うことができます。
+
+## 実世界の例
+
+例えばコーヒーメーカーです。外側はシンプルです: ボタン、ディスプレイやいくつかの穴があるだけです。そして、もちろん結果はおいしいコーヒーです :)
+
+
+
+しかし内側は...(修理マニュアルにある図です)
+
+
+
+多くの構成要素があります。しかし、何も知らなくても私たちは使うことができます。
+
+コーヒーメーカーはとても信頼性が高いですね。何年も使え、調子が悪い場合にだけ修理に持っていきます。
+
+コーヒーメーカーの信頼性とシンプルさの秘密は、すべての構成要素がよく調整され、内部に _隠れている_ ことです。
+
+もしコーヒーメーカーの保護カバーを外すと、使うのが非常に複雑になり(どこを押せばよい？)、危険です(感電するかもしれません)。
+
+これから見ていきますが、プログラミングにおいてオブジェクトはコーヒーメーカーのようなものです。
+
+しかし、内部の詳細を隠すには、保護カバーではなく言語や規則の特別な構文を使っていきます。
+
+## 内部 / 外部インタフェース
+
+オブジェクト指向プログラミングでは、プロパティとメソッドは 2 つのグループに分けられます:
+
+- _内部インタフェース_: クラスの他のメソッドからアクセス可能だが、外側からはアクセスできないメソッドやプロパティ。
+- _外部インタフェース_: 外部のクラスからもアクセス可能なメソッドやプロパティ。
+
+コーヒーメーカーで例えるなら、内部に隠されているもの: ボイラーチューブや発熱体など、は内部インタフェースです。
+
+内部インタフェースはオブジェクトが機能するために使われ、その構成要素はお互いに使用されます。例えば、ボイラーチューブは発熱体に取り付けられます。
+
+しかし、コーヒーメーカーの外側からは、誰もそこに届かないよう保護カバーで閉ざされています。内部の詳細は隠されており、アクセスできません。私たちは、外部インタフェースを介してのみその機能を利用できます。
+
+したがって、オブジェクトを使用するのに必要なことは、その外部インタフェースを知ることです。内部でどのように動いているか完全に分からないかもしれませんが、問題ありません。
+
+ここまでは一般的な前置きでした。
+
+JavaScript には、3 種類のプロパティとメンバがあります。
+
+- パブリック(public): どこからでもアクセス可能です。これらは外部インタフェースになります。今まで、私たちはパブリックなプロパティとメソッドのみを使用していました。
+- プライベート(private): クラス内部からのみアクセスできます。これらは内部インタフェース用です。
+
+他の多くの言語には、"プロテクト(protected)" フィールドも存在します。: これは、クラス及び、そのクラスを継承したサブクラスの内部からのみアクセス可能であることを意味します。これも内部インタフェースには役立ちます。通常は、継承しているクラスを適切に拡張できるよう、それらにアクセスさせたいため、ある意味ではプライベートよりも広く知られています。
+
+protected フィールドは言語レベルでは JavaScript に実装されていません。が、実際には非常に便利であるため、エミュレートされています。
+
+次のステップでは、これらすべての種類のプロパティを使用した JavaScript でコーヒーメーカーを作ります。コーヒーメーカーには多くの構成要素がありますが、シンプルさを保つためにモデル化はしません（モデル化することも可能です）。
+
+## "waterAmount" を保護(protect)する
+
+最初に、単純なコーヒーメーカークラスを作りましょう。:
+
+```js run
+class CoffeeMachine {
+ waterAmount = 0; // 内部の水の量
+
+ constructor(power) {
+ this.power = power;
+ alert(`Created a coffee-machine, power: ${power}`);
+ }
+}
+
+// コーヒーメーカーを生成
+let coffeeMachine = new CoffeeMachine(100);
+
+// 水を追加
+coffeeMachine.waterAmount = 200;
+```
+
+今のところ、プロパティ `waterAmount` と `power` は public です。外側から簡単に値を取得したり、任意の値に設定できます。
+
+より細かく制御できるように、`waterAmount` プロパティを protected に変更しましょう。例えば、誰もゼロより小さくは設定できないようにしたいです。
+
+**protected プロパティは、通常アンダースコア `_` で始まります。**
+
+これは言語レベルでは強制されていませんが、このようなプロパティやメソッドは外側からアクセスするべきではない、という慣習があります。ほとんどのプログラマはそれに従っています。
+
+なので、プロパティは `_waterAmount` になります:
+
+```js run
+class CoffeeMachine {
+ _waterAmount = 0;
+
+ set waterAmount(value) {
+ if (value < 0) {
+ value = 0;
+ }
+ this._waterAmount = value;
+ }
+
+ get waterAmount() {
+ return this._waterAmount;
+ }
+
+ constructor(power) {
+ this._power = power;
+ }
+}
+
+// コーヒーメーカーを生成
+let coffeeMachine = new CoffeeMachine(100);
+
+// 水を追加
+coffeeMachine.waterAmount = -10; // _waterAmount は -10 ではなく、 0 になります
+```
+
+これでアクセスが制御されたので、ゼロより小さい値へ設定は不可能です。
+
+## 読み取り専用(Read-only)の "power"
+
+`power` プロパティは、読み取り専用にしましょう。作成時にのみ設定し、それ以降変更しないプロパティも時にあります。
+
+これはまさにコーヒーメーカーの電力(power)のケースです。この値は決して変わりません。
+
+そうするためには、getter のみを作成する必要があります。setter は不要です。:
+
+```js run
+class CoffeeMachine {
+ // ...
+
+ constructor(power) {
+ this._power = power;
+ }
+
+ get power() {
+ return this._power;
+ }
+}
+
+// コーヒーメーカーを作成
+let coffeeMachine = new CoffeeMachine(100);
+
+alert(`Power is: ${coffeeMachine.power}W`); // Power is: 100W
+
+coffeeMachine.power = 25; // Error (setter はないので)
+```
+
+````smart header="Getter/setter 関数"
+ここでは、getter/setter 構文を使いました。
+
+しかし、多くの場合は次のような `get.../set...` 関数が好まれます。:
+
+```js
+class CoffeeMachine {
+ _waterAmount = 0;
+
+ *!*setWaterAmount(value)*/!* {
+ if (value < 0) throw new Error("Negative water");
+ this._waterAmount = value;
+ }
+
+ *!*getWaterAmount()*/!* {
+ return this.waterAmount;
+ }
+}
+
+new CoffeeMachine().setWaterAmount(100);
+```
+
+これは少し長く見えますが、関数はより柔軟です。たとえ現時点では必要ないとしても、この方法の場合、複数の引数を受け取ることができます。そのため、将来なにかをリファクタする必要がある場合に備えるなら、関数はより安全な選択肢です。
+
+もちろん、これはトレードオフです。一方で get/set 構文はより短くかけます。ここに厳密なルールはないので、決めるのはあなた次第です。
+````
+
+```smart header="Protected フィールドは継承されます"
+`class MegaMachine extends CoffeeMachine` と継承した場合、新しいクラスのメソッドから `this._waterAmount` や `this._power` にアクセスするのを妨げるものは何もありません。
+
+つまり、protected フィールは当然のことながら継承可能です。下で見ていく private なものとは異なります。
+```
+
+## Private "#waterLimit"
+
+[recent browser=none]
+
+プライベートなプロパティやメソッドに対する言語レベルのサポートを提供する、ほぼ標準的な完成した JavaScript の提案があります。
+
+プライベートは `#` から始める必要があります。それらはクラス内部からのみアクセス可能です。
+
+例えば、ここではプライベートな `#waterLimit` プロパティを追加し、水量をチェックするロジックを別のメソッドに抜き出しています:
+
+```js run
+class CoffeeMachine {
+*!*
+ #waterLimit = 200;
+*/!*
+
+*!*
+ #fixWaterAmount(value) {
+ if (value < 0) return 0;
+ if (value > this.#waterLimit) return this.#waterLimit;
+ }
+*/!*
+
+ setWaterAmount(value) {
+ this.#waterLimit = this.#fixWaterAmount(value);
+ }
+
+}
+
+let coffeeMachine = new CoffeeMachine();
+
+*!*
+// can't access privates from outside of the class
+coffeeMachine.#fixWaterAmount(123); // Error
+coffeeMachine.#waterLimit = 1000; // Error
+*/!*
+```
+
+言語レベルで、`#` はフィールドがプライベートであることを示す特別な記号です。その外側や継承したクラスからアクセスすることはできません。
+
+プライベートフィールドはパブリックなものと衝突しません。プライベートな `#waterAmount` とパブリックな `waterAmount` フィールド両方を同時にもつことができます。
+
+例えば、`#waterAmount` のアクセサとなる `waterAmount` を作りましょう。:
+
+```js run
+class CoffeeMachine {
+ #waterAmount = 0;
+
+ get waterAmount() {
+ return this.#waterAmount;
+ }
+
+ set waterAmount(value) {
+ if (value < 0) value = 0;
+ this.#waterAmount = value;
+ }
+}
+
+let machine = new CoffeeMachine();
+
+machine.waterAmount = 100;
+alert(machine.#waterAmount); // Error
+```
+
+protected なものとは異なり、private フィールドは言語レベルで強制されます。
+
+なお、`CoffeeMachine` を継承した場合、`#waterAmount` へアクセスはできません。アクセスするには、`waterAmount` の getter/setter を経由する必要があります。:
+
+```js
+class CoffeeMachine extends CoffeeMachine() {
+ method() {
+*!*
+ alert( this.#waterAmount ); // Error: CoffeeMachine からのみアクセス可能
+*/!*
+ }
+}
+```
+
+多くのシナリオにおいて、このような制限は厳しすぎます。`CoffeeMachine` を拡張する際には、その内部にアクセスすべき正当な理由があるかもしれません。そのため、protected フィールドは言語レベルの構文ではサポートされていませんが、多くの場合 protected フィールドが使われています。
+
+````warn
+Private フィールドは特別です。
+
+通常だと this[name] でフィールドにアクセスできます。:
+
+```js
+class User {
+ ...
+ sayHi() {
+ let fieldName = "name";
+ alert(`Hello, ${this[fieldName]}`);
+ }
+}
+```
+
+しかし、private フィールドだとそれはできません。: `this['#name']` は期待通り動作しません。これは private であることを維持するための、構文上の制限になります。
+````
+
+## サマリ
+
+OOP の用語では、外部インタフェースと内部インタフェースを切り離すことを、[カプセル化](<"https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)">) と呼びます。
+
+これには次のような利点があります:
+
+ユーザが自ら墓穴を掘らないようにするための保護
+: 想像してください、コーヒーメーカーを使用している開発者のチームがあるとしましょう。それは "最も優れたコーヒーメーカー" の会社で作られたもので、上手く動作します。が、ある時保護カバーが外され、内部インタフェースが公開された状態になっています。
+
+ 開発者はみな、意図したとおりにコーヒーメーカーを使用していますが、その中の一人である John がコーヒーメーカーの内部にいくらかの調整を行いました。それにより、2日後、コーヒーメーカーは失敗するようになりました。
+
+ これはもちろん John のせいではなく、むしろ保護カバーを外し、John に操作をさせた人の責任です。
+
+ プログラミングでも同じです。外部からの変更を意図していないものが勝手に変更された場合、結果は予測不可能です。
+
+Supportable
+: プログラミングにおける状況は、実際のコーヒーメーカーでの場合よりも複雑です。なぜなら一度購入するだけではないからです。コードは絶えず開発と改良されます。
+
+ **もし内部インタフェースを厳密に区切ると、クラスの開発者は利用者へ通知しなくても内部のプロパティとメソッドを自由に変更することができます。**
+
+ 特定のメソッド名を変更したり、パラメータを変更したり、あるいは削除したりすることができることが明らか(外部のコードはそれらに依存していないため)だと、開発は遥かに容易になります。
+
+ 利用者は、新しいバージョンが登場した際、全体的な見直しになる可能性はありますが、それでも外部インタフェースが同じであればアップグレードは簡単です。
+
+複雑さを隠す
+: 人々はシンプルなものを使うのを好みます。中身はそうでないかもしれませんが、少なくとも外から見たときは。
+
+ プログラマも例外ではありません。
+
+ **実装の詳細が隠されていて、シンプルかつ良くドキュメント化された外部インタフェースが利用可能であることは常に便利です。**
+
+内部インタフェースを隠すために、proctected または public プロパティを使用します。]
+
+- protected フィールドは `_` で始まります。これはよく知られた慣習であり、言語レベルで強制されているものではありません。プログラマはそのクラスと、それを継承したクラスからのみ `_` で始まるフィールドにアクセスするべきです。
+- private フィールドは `#` で始まります。JavaScript では、クラス内からのみアクセスできます。
+
+現時点では、private フィールドはブラウザ間では十分にはサポートされていませんが、polyfill することができます。
diff --git a/1-js/09-classes/04-private-protected-properties-methods/coffee-inside.jpg b/1-js/09-classes/04-private-protected-properties-methods/coffee-inside.jpg
new file mode 100644
index 0000000000..60f84664d1
Binary files /dev/null and b/1-js/09-classes/04-private-protected-properties-methods/coffee-inside.jpg differ
diff --git a/1-js/09-classes/04-private-protected-properties-methods/coffee.jpg b/1-js/09-classes/04-private-protected-properties-methods/coffee.jpg
new file mode 100644
index 0000000000..ee26e1c064
Binary files /dev/null and b/1-js/09-classes/04-private-protected-properties-methods/coffee.jpg differ
diff --git a/1-js/09-classes/05-extend-natives/article.md b/1-js/09-classes/05-extend-natives/article.md
new file mode 100644
index 0000000000..8eaafdff5c
--- /dev/null
+++ b/1-js/09-classes/05-extend-natives/article.md
@@ -0,0 +1,89 @@
+# 組み込みのクラスを拡張する
+
+Array、Map などの組み込みのクラスも拡張可能です。
+
+例えば、ここでは `PowerArray` はネイティブの `Array` を継承しています:
+
+```js run
+// 1つメソッドを追加しています(その他のことももちろん可能です)
+class PowerArray extends Array {
+ isEmpty() {
+ return this.length === 0;
+ }
+}
+
+let arr = new PowerArray(1, 2, 5, 10, 50);
+alert(arr.isEmpty()); // false
+
+let filteredArr = arr.filter((item) => item >= 10);
+alert(filteredArr); // 10, 50
+alert(filteredArr.isEmpty()); // false
+```
+
+とても興味深い点に注目してください。`filter` や `map` といった組み込みのメソッドは、継承された型 `PowerArray` と同じ型の新しいオブジェクトを返します。そのために、内部の実装はオブジェクトの `constructor` プロパティを使用します。
+
+上の例では、
+
+```js
+arr.constructor === PowerArray;
+```
+
+`arr.filter()` が呼ばれると、内部的には `Array` ではなく、`arr.constructor` を使用して新しい結果の配列を作成します。結果に対してさらに `PowerArray` が持つメソッドを使用し続けることができるため、これは非常に有用です。
+
+さらに、その振る舞いをカスタマイズすることも可能です。
+
+特別な静的な getter `Symbol.species` を追加することができます。これが存在する場合、`map` や `filter` などの場合に Javascript が内部的に使用するコンストラクタを返す必要があります。
+
+もし、`map` や `filter` のような組み込みのメソッドが通常の配列を返してほしい場合、次のように `Symbol.species` で `Array` を返すようにします:
+
+```js run
+class PowerArray extends Array {
+ isEmpty() {
+ return this.length === 0;
+ }
+
+*!*
+ // 組み込みのメソッドは、これをコンストラクタとして使います
+ static get [Symbol.species]() {
+ return Array;
+ }
+*/!*
+}
+
+let arr = new PowerArray(1, 2, 5, 10, 50);
+alert(arr.isEmpty()); // false
+
+// filter はコンストラクタとして arr.constructor[Symbol.species] を使って新しい配列を作ります
+let filteredArr = arr.filter(item => item >= 10);
+
+*!*
+// filteredArr は PowerArray ではなく Array です
+*/!*
+alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function
+```
+
+ご覧の通り、これで `.filter` は `Array` を返します。そのため、拡張機能はこれ以上渡されません。
+
+```smart header="他のコレクションも同様に動作します"
+`Map` や `Set` などの他のコレクションも同様に動作します。これらも `Symbol.species` を使用しています。
+```
+
+## 組み込みでは、静的の継承はありません
+
+組み込みのオブジェクトは独自の静的メソッドを持っています。例えば `Object.keys`, `Array.isArray` などです。
+
+既にご存知のように、ネイティブクラスは互いに拡張しあいます。例えば、 `Array` は `Object` を拡張しています。
+
+通常、あるクラスが別のクラスを拡張する場合、静的メソッド、非静的メソッドの両方が継承されます。これは記事 [](info:static-properties-methods#statics-and-inheritance) で説明しました。
+
+しかし、組み込みのクラスは例外です。組み込みのクラスはお互いから静的なプロパティを継承しません。
+
+例えば、`Array` と `Date` はともに `Object` を継承しているので、これらのインスタンスは `Object.prototype` のメソッドを持ちます。が、`Array.[[Prototype]]` は `Object` を参照しないため、例えば `Array.keys()` (or `Date.keys()`) と言った静的メソッドは存在しません。
+
+これは、`Date` と `Object` の構造のイメージです:
+
+
+
+`Date` と `Object` の間に繋がりはないことに注目してください。`Object` と `Date` は両方とも独立し、`Date.prototype` は `Object.prototype` を継承しているだけです。
+
+これは組み込みのオブジェクトの継承と `extends` をして得られるものとの比較における重要な違いです。
diff --git a/1-js/09-classes/05-extend-natives/object-date-inheritance.svg b/1-js/09-classes/05-extend-natives/object-date-inheritance.svg
new file mode 100644
index 0000000000..be47d7fd96
--- /dev/null
+++ b/1-js/09-classes/05-extend-natives/object-date-inheritance.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/solution.md b/1-js/09-classes/06-instanceof/1-strange-instanceof/solution.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/solution.md
rename to 1-js/09-classes/06-instanceof/1-strange-instanceof/solution.md
diff --git a/1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/task.md b/1-js/09-classes/06-instanceof/1-strange-instanceof/task.md
similarity index 100%
rename from 1-js/07-object-oriented-programming/11-instanceof/1-strange-instanceof/task.md
rename to 1-js/09-classes/06-instanceof/1-strange-instanceof/task.md
diff --git a/1-js/09-classes/06-instanceof/article.md b/1-js/09-classes/06-instanceof/article.md
new file mode 100644
index 0000000000..8c4768bb62
--- /dev/null
+++ b/1-js/09-classes/06-instanceof/article.md
@@ -0,0 +1,218 @@
+# クラスのチェック: "instanceof"
+
+`instanceof` 演算子でオブジェクトが特定のクラスに属しているのかを確認することができます。また、継承も考慮されます。
+
+このようなチェックが必要なケースは多々あるかもしれません。ここでは、その型に応じて引数を別々に扱う *多形(ポリモーフィック)* 関数を構築するために使用します。
+
+## instanceof 演算子 [#ref-instanceof]
+
+構文は次の通りです:
+```js
+obj instanceof Class
+```
+
+それは `obj` が `Class` (または、それを継承しているクラス)に属している場合に `true` を返します。
+
+例:
+
+```js run
+class Rabbit {}
+let rabbit = new Rabbit();
+
+// Rabbit クラスのオブジェクト？
+*!*
+alert( rabbit instanceof Rabbit ); // true
+*/!*
+```
+
+コンストラクタ関数でも動作します。:
+
+```js run
+*!*
+// class の代わり
+function Rabbit() {}
+*/!*
+
+alert( new Rabbit() instanceof Rabbit ); // true
+```
+
+...また `Array` のような組み込みクラスでも動作します。:
+
+```js run
+let arr = [1, 2, 3];
+alert( arr instanceof Array ); // true
+alert( arr instanceof Object ); // true
+```
+
+`arr` は `Object` クラスにも属していることに留意してください。`Array` はプロトタイプ的に `Object` を継承しているためです。
+
+通常、`instanceof` 演算子はチェックのためにプロトタイプチェーンを検査します。この動きに対して、静的メソッド `Symbol.hasInstance` でカスタムロジックが設定できます。
+
+`obj instanceof Class` のアルゴリズムはおおまかに次のように動作します。:
+
+1. もし静的メソッド `Symbol.hasInstance` があれば、それ（`Class[Symbol.hasInstance](obj)`）を使います。これは `true` または `false` を返す必要があり、これで `instanceof` の振る舞いがカスタマイズできます。:
+
+ 例:
+
+ ```js run
+ // catEat プロパティをもつものは animal と想定する
+ // instanceOf チェックを設定
+ class Animal {
+ static [Symbol.hasInstance](obj) {
+ if (obj.canEat) return true;
+ }
+ }
+
+ let obj = { canEat: true };
+
+ alert(obj instanceof Animal); // true: Animal[Symbol.hasInstance](obj)が呼ばれます
+ ```
+
+2. ほとんどのクラスは `Symbol.hasInstance` を持っていません。このケースでは、通常のロジックが使用されます: `obj instanceOf Class` は `Class.prototype` が `obj` のプロトタイプチェーンうちの1つと等しいかをチェックします。
+
+ 言い換えると、以下のような比較を行います:
+ ```js
+ obj.__proto__ == Class.prototype
+ obj.__proto__.__proto__ == Class.prototype
+ obj.__proto__.__proto__.__proto__ == Class.prototype
+ ...
+ // いずれかが true の場合、 true が返却されます
+ // そうでない場合、チェーンの末尾に到達すると false を返します
+ ```
+
+ 上の例では、``rabbit.__proto__ === Rabbit.prototype` なので、すぐに回答が得られます。
+
+ 継承のケースでは、2つめのステップでマッチします:
+
+ ```js run
+ class Animal {}
+ class Rabbit extends Animal {}
+
+ let rabbit = new Rabbit();
+ *!*
+ alert(rabbit instanceof Animal); // true
+ */!*
+
+ // rabbit.__proto__ == Rabbit.prototype
+ *!*
+ // rabbit.__proto__.__proto__ === Animal.prototype (match!)
+ */!*
+ ```
+
+これは、`rabbit instanceof Animal` と `Animal.prototype` を比較したものです。:
+
+
+
+ところで、[objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf) というメソッドもあります。これは `objA` が `objB` のプロトタイプチェーンのどこかにあれば `true` を返します。なので、`obj instanceof Class` のテストは `Class.prototype.isPrototypeOf(obj)` と言い換えることができます。
+
+面白いことに、`Class` コンストラクタ自身はチェックには参加しません! プロトタイプと `Class.prototype`のチェーンだけです。
+
+これは `prototype` が変更されたときに興味深い結果につながります。
+
+このように:
+
+```js run
+function Rabbit() {}
+let rabbit = new Rabbit();
+
+// prototype を変更します
+Rabbit.prototype = {};
+
+// ...もう rabbit ではありません
+*!*
+alert( rabbit instanceof Rabbit ); // false
+*/!*
+```
+
+## おまけ: 型のための Object toString
+
+私たちは通常の文字列は `[object Object]` という文字列に変換されることをすでに知っています。:
+
+```js run
+let obj = {};
+
+alert(obj); // [object Object]
+alert(obj.toString()); // 同じ
+```
+
+これが `toString` の実装です。しかし、実際にはそれよりもはるかに強力な `toString` を作る隠れた機能があります。それを拡張させて `typeof` または `instanceof` の代替として利用することができます。
+
+奇妙に聞こえますか？たしかに。分かりやすく説明しましょう。
+
+[スペック(specification)](https://tc39.github.io/ecma262/#sec-object.prototype.tostring)によって、組み込みの `toString` はオブジェクトから抽出し、任意の値のコンテキストで実行することができます。そして、その結果はその値に依存します。
+
+- 数値の場合、それは `[object Number]` になります。
+- 真偽値の場合、`[object Boolean]` になります。
+- `null` の場合: `[object Null]`
+- `undefined` の場合: `[object Undefined]`
+- 配列の場合: `[object Array]`
+- ...など (カスタマイズ可能).
+
+デモを見てみましょう:
+
+```js run
+// 使いやすくするために toString メソッドを変数にコピー
+let objectToString = Object.prototype.toString;
+
+// これの型はなに?
+let arr = [];
+
+alert( objectToString.call(arr) ); // [object Array]
+```
+
+ここでは、コンテキスト `this=arr` で関数 `objectToString` を実行するため、[デコレータと転送, call/apply](info:call-apply-decorators) の章で説明した [call](mdn:js/function/call) を使いました。
+
+内部的には、`toString` アルゴリズムは `this` を検査し、対応する結果を返します。ほかの例です。:
+
+```js run
+let s = Object.prototype.toString;
+
+alert( s.call(123) ); // [object Number]
+alert( s.call(null) ); // [object Null]
+alert( s.call(alert) ); // [object Function]
+```
+
+### Symbol.toStringTag
+
+Object `toString` の振る舞いは特別なオブジェクトプロパティ `Symbol.toStringTag` を使用してカスタマイズできます。
+
+例:
+
+```js run
+let user = {
+ [Symbol.toStringTag]: 'User'
+};
+
+alert( {}.toString.call(user) ); // [object User]
+```
+
+ほとんどの環境固有のオブジェクトには、このようなプロパティがあります。これはいくつかのブラウザ固有の例です。:
+
+```js run
+// 環境固有のオブジェクトとクラスのtoStringTag:
+alert( window[Symbol.toStringTag]); // window
+alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest
+
+alert( {}.toString.call(window) ); // [object Window]
+alert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest]
+```
+
+ご覧の通り、結果は正確に `Symbol.toStringTag` (存在する場合)で、`[object ...]` の中にラップされています。
+
+最終的には、プリミティブなデータ型だけでなく、組み込みオブジェクトのためにも機能し、カスタマイズすることもできる "強化された typeof" があります。
+
+これは、型を文字列として取得するだけでなく、チェックするために、組み込みオブジェクトに対して `instanceof` の代わりに使用できます。
+
+## サマリ
+
+私たちが知っている型チェックメソッドについて再確認しましょう:
+
+| | 対象 | 戻り値 |
+|---------------|-------------|---------------|
+| `typeof` | プリミティブ | 文字列 |
+| `{}.toString` | プリミティブ, 組み込みオブジェクト, `Symbol.toStringTag` をもつオブジェクト | 文字列 |
+| `instanceof` | オブジェクト | true/false |
+
+ご覧のように、`{}.toString` は技術的には "より高度な" `typeof` です。
+
+そして、`instanceof` 演算子は、クラス階層を扱っていて継承を考慮したクラスのチェックをしたい場合に本当に輝きます。
diff --git a/1-js/09-classes/06-instanceof/instanceof.svg b/1-js/09-classes/06-instanceof/instanceof.svg
new file mode 100644
index 0000000000..d63b03a8a2
--- /dev/null
+++ b/1-js/09-classes/06-instanceof/instanceof.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/07-mixins/article.md b/1-js/09-classes/07-mixins/article.md
new file mode 100644
index 0000000000..8709ab8399
--- /dev/null
+++ b/1-js/09-classes/07-mixins/article.md
@@ -0,0 +1,208 @@
+# ミックスイン
+
+JavaScriptでは、単一のオブジェクトからのみ継承できます。オブジェクトの `[[Prototype]]` は1つしかありません。そしてクラスは単一の他のクラスだけを拡張することができます。
+
+ですが、それを制限と感じる場面があります。例えば、`StreetSweeper` と `Bicycle` というクラスを持っていて、`StreetSweepingBicycle` を作りたい場合などです。
+
+あるいは、`User` クラスと、イベント生成を実装した `EventEmitter` クラスがあり、`EventEmitter` の機能性を `User` に追加し、user がイベントを emit できるようにしたい、などです。
+
+ここでは、それを助ける "mixins(ミックスイン)" と呼ばれる考え方があります。
+
+Wikipedis の定義によると、[mixin](https://en.wikipedia.org/wiki/Mixin) は他のクラスの親クラスでないが、他のクラスで使用するためのメソッドを含むクラスです。
+
+つまり、*mixin* は特定の振る舞いを実装したメソッドを提供しますが、単独では使わず、別のクラスの振る舞いを追加するために使います。
+
+## mixin の例
+
+JavaScriptで mixin を作る最もシンプルな方法は、役立つメソッドをもつオブジェクトを作ることです。そうすることで、それらを簡単にどのクラスのプロトタイプにもマージできます。
+
+例えば、ここでは mixin `sayHiMixin` は `User` のためのいくつかの "スピーチ" を追加するために使われます。:
+
+```js run
+*!*
+// mixin
+*/!*
+let sayHiMixin = {
+ sayHi() {
+ alert("Hello " + this.name);
+ },
+ sayBye() {
+ alert("Bye " + this.name);
+ }
+};
+
+*!*
+// 使い方:
+*/!*
+class User {
+ constructor(name) {
+ this.name = name;
+ }
+}
+
+// メソッドをコピー
+Object.assign(User.prototype, sayHiMixin);
+
+// これで User は sayHi できます
+new User("Dude").sayHi(); // Hi Dude!
+```
+
+これは継承ではなく、単純なメソッドのコピーです。従って、`User` は他のクラスを拡張することができ、さらに以下のように追加のメソッドをミックスインするとして含めることができます:
+
+```js
+class User extends Person {
+ // ...
+}
+
+Object.assign(User.prototype, sayHiMixin);
+```
+
+ミックスインは自身の内部で継承を活用することもできます。
+
+例えば、ここでは `sayHiMixin` は `sayMixin` を継承しています。:
+
+```js run
+let sayMixin = {
+ say(phrase) {
+ alert(phrase);
+ }
+};
+
+let sayHiMixin = {
+ __proto__: sayMixin, // (またはここで prototype を設定するのに Object.create が使えます)
+
+ sayHi() {
+ *!*
+ // 親のメソッド呼び出し
+ */!*
+ super.say("Hello " + this.name); // (*)
+ },
+ sayBye() {
+ super.say("Bye " + this.name); // (*)
+ }
+};
+
+class User {
+ constructor(name) {
+ this.name = name;
+ }
+}
+
+// メソッドをコピー
+Object.assign(User.prototype, sayHiMixin);
+
+// これで User は sayHi できます
+new User("Dude").sayHi(); // Hello Dude!
+```
+
+`sayHiMixin` からの親メソッド `super.say()` の呼び出し（`(*)` でラベル付けされた行）は、クラスではなくそのミックスインのプロトタイプの中のメソッドを探すことに注意してください。
+
+これがその図です（右の部分を見てください）:
+
+
+
+これは、メソッド `sayHi` と `sayBye` は最初に `sayHiMixin` で作成されたためです。そのため、たとえコピーされたとしても、上の図で示す通り、`[[HomeObject]]` 内部プロパティは `sayHiMixin` を参照します。
+
+`super` は `[[HomeObject]].[[Prototype]]` で親メソッドを探すので、これは `User.[[Prototype]]` ではなく、`sayHiMixin.[[Prototype]]` を探すことを意味します。
+
+## イベントMixin
+
+さて、実践のためのミックスインを作ってみましょう。
+
+多くのブラウザオブジェクト（例えば）の重要な特徴は、イベントを生成できることです。イベントは、それを必要とするものへ "情報をブロードキャスト" する優れた方法です。そのため、簡単にイベントに関連する関数を任意の class/object に追加できるよう mixin を作成しましょう。
+
+- mixin はなにか重要なことが起こったときに、"イベントを生成" するためのメソッド `.trigger(name, [...data])` を提供します。`name` 引数はイベント名で、オプションでイベントデータを含む追加の引数が続きます。
+- また、指定された名前のイベントのリスナーとして `handler` 関数を追加するメソッド `.on(name, handler)` も提供します。指定された `name` のイベントがトリガーされたときに呼ばれ、`.trigger` 呼び出しから引数と取得します。
+- そして、`handler` リスナーを削除するためのメソッド `.off(name, handler)`。
+
+この mixin を追加したあと、オブジェクト `user` は、訪問者がログインするときに、`"login"` イベントを生成することができるようになります。また、別のオブジェクト、例えば `calendar` はそのようなイベントをリッスンし、ログインした人のカレンダーを読み込みます。
+
+あるいは、`menu` はメニュー項目が選択されたときにイベント `"select"` を生成でき、他のオブジェクトはそのイベントに反応するためにハンドラを割り当てることができます。
+
+これはそのコードです:
+
+```js run
+let eventMixin = {
+ /**
+ * イベントの購読, 使い方:
+ * menu.on('select', function(item) { ... }
+ */
+ on(eventName, handler) {
+ if (!this._eventHandlers) this._eventHandlers = {};
+ if (!this._eventHandlers[eventName]) {
+ this._eventHandlers[eventName] = [];
+ }
+ this._eventHandlers[eventName].push(handler);
+ },
+
+ /**
+ * 購読のキャンセル 使い方:
+ * menu.off('select', handler)
+ */
+ off(eventName, handler) {
+ let handlers = this._eventHandlers && this._eventHandlers[eventName];
+ if (!handlers) return;
+ for(let i = 0; i < handlers.length; i++) {
+ if (handlers[i] == handler) {
+ handlers.splice(i--, 1);
+ }
+ }
+ },
+
+ /**
+ * イベントを生成してデータをアタッチ
+ * this.trigger('select', data1, data2);
+ */
+ trigger(eventName, ...args) {
+ if (!this._eventHandlers || !this._eventHandlers[eventName]) {
+ return; // イベントに対応するハンドラがない場合
+ }
+
+ // ハンドラ呼び出し
+ this._eventHandlers[eventName].forEach(handler => handler.apply(this, args));
+ }
+};
+```
+
+
+1. `.on(eventName, handler)` -- その名前のイベントが発生した時に実行するための関数 `handler` を割り当てます。ハンドラは `_eventHandlers` プロパティの中に格納されます。
+2. `.off(eventName, handler)` -- ハンドラリストから関数を削除します。
+3. `.trigger(eventName, ...args)` -- イベントを生成します: すべての割り当てられたハンドラが呼び出され、`args` がそれらの引数として渡されます。
+
+使い方:
+
+```js run
+// クラスを作成
+class Menu {
+ choose(value) {
+ this.trigger("select", value);
+ }
+}
+// mixin を追加
+Object.assign(Menu.prototype, eventMixin);
+
+let menu = new Menu();
+
+// 選択時にハンドラを呼び出し
+*!*
+menu.on("select", value => alert("Value selected: " + value));
+*/!*
+
+// イベントのトリガ => 上のハンドラを実行し次を表示
+// Value selected: 123
+menu.choose("123"); // 選択された値
+```
+
+これで、もしユーザ選択に反応するためのコードがある場合、`menu.on(...)` でバインドすることができます。
+
+そして、`eventMixin` は継承のチェーンを邪魔することなく、我々が望むだけのクラスに対してこのような振る舞いを追加することができます。
+
+## サマリ
+
+*Mixin(ミックスイン)* -- は一般的なオブジェクト指向プログラミングの言葉です: 他のクラスのためのメソッドを含むクラスです。
+
+いくつかの他の言語は多重継承をサポートしています。JavaScriptは多重継承をサポートしていませんが、プロトタイプにそれらをコピーすることでミックスインが実装できます。
+
+上で見てきたイベントハンドリングのように、複数の振る舞いを追加することでクラスを拡張する方法としてミックスインが利用できます。
+
+ミックスインで誤って既存のクラスメソッドを上書きすると、競合が発生する可能性があります。そのため、一般的には、このような可能性を最小化するためにも、ミックスインの命名についてよく考える必要があります。
diff --git a/1-js/07-object-oriented-programming/13-mixins/head.html b/1-js/09-classes/07-mixins/head.html
similarity index 100%
rename from 1-js/07-object-oriented-programming/13-mixins/head.html
rename to 1-js/09-classes/07-mixins/head.html
diff --git a/1-js/09-classes/07-mixins/mixin-inheritance.svg b/1-js/09-classes/07-mixins/mixin-inheritance.svg
new file mode 100644
index 0000000000..1fdc223936
--- /dev/null
+++ b/1-js/09-classes/07-mixins/mixin-inheritance.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/09-classes/index.md b/1-js/09-classes/index.md
new file mode 100644
index 0000000000..dfe284a989
--- /dev/null
+++ b/1-js/09-classes/index.md
@@ -0,0 +1 @@
+# クラス
diff --git a/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/solution.md b/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md
similarity index 100%
rename from 1-js/08-error-handling/1-try-catch/1-finally-or-code-after/solution.md
rename to 1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md
diff --git a/1-js/08-error-handling/1-try-catch/1-finally-or-code-after/task.md b/1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md
similarity index 100%
rename from 1-js/08-error-handling/1-try-catch/1-finally-or-code-after/task.md
rename to 1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md
diff --git a/1-js/10-error-handling/1-try-catch/article.md b/1-js/10-error-handling/1-try-catch/article.md
new file mode 100644
index 0000000000..417961962a
--- /dev/null
+++ b/1-js/10-error-handling/1-try-catch/article.md
@@ -0,0 +1,675 @@
+# エラーハンドリング, "try..catch"
+
+どんなに我々のプログラミングが素晴らしくても、スクリプトがエラーになることはあります。それはミス、予期しないユーザ入力、間違ったサーバレスポンスやその他多くの理由により発生する可能性があります。
+
+通常、エラーが発生するとスクリプトは "死" (即時に停止) に、それをコンソールに出力します。
+
+しかし、エラーを "キャッチ" し、死ぬ代わりにより意味のあることをする構文構造 `try..catch` があります。
+
+## "try..catch" 構文
+
+`try..catch` 構造は2つのメインブロックを持っています: `try` と `catch` です。:
+
+```js
+try {
+
+ // code...
+
+} catch (err) {
+
+ // error handling
+
+}
+```
+
+それは次のように動作します:
+
+1. まず、`try {...}` のコードが実行されます。
+2. エラーがなければ、`catch(err)` は無視されます: 実行が `try` の最後に到達した後、`catch` を飛び越えます。
+3. エラーが発生した場合、`try` の実行が停止し、コントロールフローは `catch(err)` の先頭になります。`err` 変数(任意の名前が使えます)は発生した事象に関する詳細をもつエラーオブジェクトを含んでいます。
+
+
+
+従って、`try {…}` ブロックの内側のエラーはスクリプトを殺しません: `catch` の中でそれを扱う機会が持てます。
+
+いくつか例を見てみましょう。
+
+- エラーなしの例: `alert` `(1)` と `(2)` を表示します:
+
+ ```js run
+ try {
+
+ alert('Start of try runs'); // *!*(1) <--*/!*
+
+ // ...ここではエラーはありません
+
+ alert('End of try runs'); // *!*(2) <--*/!*
+
+ } catch(err) {
+
+ alert('Catch is ignored, because there are no errors'); // (3)
+
+ }
+ ```
+- エラーの例: `(1)` と `(3)` を表示します:
+
+ ```js run
+ try {
+
+ alert('Start of try runs'); // *!*(1) <--*/!*
+
+ *!*
+ lalala; // エラー, 変数は宣言されていません!
+ */!*
+
+ alert('End of try (never reached)'); // (2)
+
+ } catch(err) {
+
+ alert(`Error has occured!`); // *!*(3) <--*/!*
+
+ }
+ ```
+
+
+````warn header="`try..catch` は実行時エラーにのみ作用します"
+`try..catch` を動作させるために、コードは実行可能でなければなりません。つまり、有効なJavaScriptである必要があります。
+
+もしコードが構文的に誤っている場合には動作しません。例えば次は角括弧の不一致です:
+
+```js run
+try {
+ {{{{{{{{{{{{
+} catch(e) {
+ alert("The engine can't understand this code, it's invalid");
+}
+```
+
+JavaScriptエンジンは最初にコードを読み、次にそれを実行します。読み込みのフェーズで発生したエラーは "解析時間(parse-time)" エラーと呼ばれ、回復不能です(コードの内部からは)。なぜなら、エンジンはそのコードを理解することができないからです。
+
+そのため、`try..catch` は有効なコードの中で起きたエラーのみを扱うことができます。このようなエラーは "ランタイムエラー" または "例外" と呼ばれます。
+````
+
+
+````warn header="`try..catch` は同期的に動作します"
+もし `setTimeout` の中のような "スケジュールされた" コードで例外が発生した場合、`try..catch` はそれをキャッチしません。:
+
+```js run
+try {
+ setTimeout(function() {
+ noSuchVariable; // スクリプトはここで死にます
+ }, 1000);
+} catch (e) {
+ alert( "won't work" );
+}
+```
+
+`try..catch` は実際には関数をスケジュールする `setTimeout` 呼び出しをラップするためです。しかし関数自身は後で実行され、その時エンジンはすでに `try..catch` 構造を抜けています。
+
+スケジュールされた関数の内側の例外をキャッチするためには、その関数の中に `try..catch` が必要です。:
+```js run
+setTimeout(function() {
+ try {
+ noSuchVariable; // try..catch がエラーをハンドリングします!
+ } catch (e) {
+ alert( "error is caught here!" );
+ }
+}, 1000);
+```
+````
+
+## エラーオブジェクト
+
+エラーが発生したとき、JavaScript はその詳細を含めたオブジェクトを生成します。そして `catch` の引数として渡されます。:
+
+```js
+try {
+ // ...
+} catch(err) { // <-- "エラーオブジェクト", err の代わりに別の名前を使うこともできます
+ // ...
+}
+```
+
+すべての組み込みのエラーに対して、`catch` ブロック内のエラーオブジェクトは2つの主なプロパティを持っています。:
+
+`name`
+: エラー名です。未定義変数の場合、それは `"ReferenceError"` です。
+
+`message`
+: エラー詳細に関するテキストメッセージです。
+
+ほとんどの環境では、その他非標準のプロパティが利用可能です。最も広く使われ、サポートされているのは以下です:
+
+`stack`
+: 現在のコールスタックです: エラーに繋がったネスト呼び出しのシーケンスに関する情報を持つ文字列です。デバッグ目的で使われます。
+
+例:
+
+```js run untrusted
+try {
+*!*
+ lalala; // エラー, 変数が宣言されていません!
+*/!*
+} catch(err) {
+ alert(err.name); // ReferenceError
+ alert(err.message); // lalala is not defined
+ alert(err.stack); // ReferenceError: lalala is not defined at (...スタック呼び出し)
+
+ // 全体としてエラーを表示する事もできます
+ // エラーは "name: message" として文字列に変換されます
+ alert(err); // ReferenceError: lalala is not defined
+}
+```
+
+## 任意の "catch" バインディング
+
+[recent browser=new]
+
+エラーの詳細が必要ない場合、`catch` はそれを省略できます:
+
+```js
+try {
+ // ...
+} catch { // <-- (err) なし
+ // ...
+}
+```
+
+## "try..catch" の利用
+
+`try..catch` の実際のユースケースについて探索してみましょう。
+
+既にご存知の通り、JavaScriptは JSONエンコードされた値を読むためのメソッド [JSON.parse(str)](mdn:js/JSON/parse) がサポートされています。
+
+通常、それはネットワーク経由でサーバまたは別のソースから受信したデータをデコードするために使われます。
+
+今、次のようにデータを受信し、`JSON.parse` を呼び出します。:
+
+```js run
+let json = '{"name":"John", "age": 30}'; // サーバからのデータ
+
+*!*
+let user = JSON.parse(json); // テキスト表現をJSオブジェクトに変換
+*/!*
+
+// 今、 user 文字列からプロパティを持つオブジェクトです
+alert( user.name ); // John
+alert( user.age ); // 30
+```
+
+JSON に関する詳細な情報は、チャプター を参照してください。
+
+**`json` が不正な形式の場合、`JSON.parse` はエラーになるのでスクリプトは "死にます"。**
+
+それで満足しますか？もちろん満足しません!
+
+この方法だと、もしデータが何か間違っている場合、訪問者はそれを知ることができません(開発者コンソールを開かない限り)。また、人々は、エラーメッセージなしで何かが "単に死んでいる" ことを本当に本当に嫌います。
+
+エラーを扱うために `try..catch` を使いましょう。:
+
+```js run
+let json = "{ bad json }";
+
+try {
+
+*!*
+ let user = JSON.parse(json); // <-- エラーが起きたとき...
+*/!*
+ alert( user.name ); // 動作しません
+
+} catch (e) {
+*!*
+ // ...実行はここに飛びます
+ alert( "Our apologies, the data has errors, we'll try to request it one more time." );
+ alert( e.name );
+ alert( e.message );
+*/!*
+}
+```
+
+ここでは、メッセージを表示するためのだけに `catch` ブロックを使っていますが、より多くのことをすることができます。: 新たなネットワーク要求、訪問者への代替手段の提案、ロギング機構へエラーに関する情報の送信... すべて、単に死ぬよりははるかに良いです。
+
+## 独自のエラーをスローする
+
+仮に `json` が構文的に正しいが、必須の `"name"` プロパティを持っていない場合どうなるでしょう？
+
+このように:
+
+```js run
+let json = '{ "age": 30 }'; // 不完全なデータ
+
+try {
+
+ let user = JSON.parse(json); // <-- エラーなし
+*!*
+ alert( user.name ); // name はありません!
+*/!*
+
+} catch (e) {
+ alert( "doesn't execute" );
+}
+```
+
+ここで、`JSON.parse` は通常どおり実行しますが、`"name"` の欠落は実際には我々にとってはエラーです。
+
+エラー処理を統一するために、`throw` 演算子を使います。
+
+### "Throw" 演算子
+
+`throw` 演算子はエラーを生成します。
+
+構文は次の通りです:
+
+```js
+throw
+```
+
+技術的には、エラーオブジェクトとしてなんでも使うことができます。たとえ、数値や文字列のようなプリミティブでもOKです。しかし、`name` と `message` プロパティを持つオブジェクトを使うのがベターです(組み込みのエラーと互換性をいくらか保つために)。
+
+JavaScriptは標準エラーのための多くの組み込みのコンストラクタを持っています: `Error`, `SyntaxError`, `ReferenceError`, `TypeError` などです。我々もエラーオブジェクトを作るのにそれらが使えます。
+
+構文は次の通りです:
+
+```js
+let error = new Error(message);
+// or
+let error = new SyntaxError(message);
+let error = new ReferenceError(message);
+// ...
+```
+
+組み込みのエラー(任意のオブジェクトではなく、エラーのみ)では、`name` プロパティはコンストラクタの名前と全く同じになります。そして `message` は引数から取られます。
+
+例:
+
+```js run
+let error = new Error("Things happen o_O");
+
+alert(error.name); // Error
+alert(error.message); // Things happen o_O
+```
+
+`JSON.parse` が生成するエラーの種類を見てみましょう:
+
+```js run
+try {
+ JSON.parse("{ bad json o_O }");
+} catch(e) {
+*!*
+ alert(e.name); // SyntaxError
+*/!*
+ alert(e.message); // Unexpected token o in JSON at position 0
+}
+```
+
+ご覧の通り、それは `SyntaxError` です。
+
+...そして、我々のケースでは、ユーザは必ず `"name"` を持っていると仮定するので、`name` の欠落もまた構文エラーとして扱います。
+
+なので、それをスローするようにしましょう:
+
+```js run
+let json = '{ "age": 30 }'; // 不完全なデータ
+
+try {
+
+ let user = JSON.parse(json); // <-- エラーなし
+
+ if (!user.name) {
+*!*
+ throw new SyntaxError("Incomplete data: no name"); // (*)
+*/!*
+ }
+
+ alert( user.name );
+
+} catch(e) {
+ alert( "JSON Error: " + e.message ); // JSON Error: Incomplete data: no name
+}
+```
+
+行 `(*)` で、`throw` 演算子が与えられた `message` で `SyntaxError` を生成します。それは JavaScript が生成するのと同じ方法です。`try` の実行はすぐに停止し、制御フローは `catch` に移ります。
+
+今や、`catch` は`JSON.parse` と他のケースすべてのエラーハンドリングのための1つの場所になりました。
+
+## 再スロー
+
+上の例で、私たちは不正なデータを処理するために `try..catch` を使っています。しかし、`try {...}` ブロックの中で *別の予期しないエラー* が発生する可能性はあるでしょうか？ 変数が未定義、またはその他、単に "不正なデータ" ではない何か。
+
+例:
+
+```js run
+let json = '{ "age": 30 }'; // 不完全なデータ
+
+try {
+ user = JSON.parse(json); // <-- user の前に "let" をつけ忘れた
+
+ // ...
+} catch(err) {
+ alert("JSON Error: " + err); // JSON Error: ReferenceError: user is not defined
+ // (実際にはJSONのエラーではありません)
+}
+```
+
+もちろん、すべての可能性があります! プログラマはミスをするものです。何十年も何百万人もの人が使っているオープンソースのユーティリティであっても、突然酷いバグが発見され、ひどいハッキングにつながることがあります（ `ssh` ツールで起こったようなものです）。
+
+私たちのケースでは、`try..catch` は "不正なデータ" エラーをキャッチすることを意図しています。しかし、その性質上、`catch` は `try` からの *すべての* エラーを取得します。ここでは予期しないエラーが発生しますが、同じ `"JSON Error"` メッセージが表示されます。これは誤りでコードのデバッグをより難しくします。
+
+このような問題を避けるため、"再スロー" という手法が利用できます。ルールはシンプルです:
+
+**キャッチはそれが知っているエラーだけを処理し、すべてのオブジェクトを "再スロー" するべきです**
+
+"再スロー" テクニックの詳細は次のように説明できます:
+
+1. すべてのエラーをキャッチします。
+2. `catch(err) {...}` ブロックで、エラーオブジェクト `err` を解析します。
+3. どう処理すればいいか分からなければ、`throw err` をします。
+
+通常は、`instanceof` 演算子を使用してエラーの種類がチェックできます。:
+
+```js run
+try {
+ user = { /*...*/ };
+} catch (err) {
+*!*
+ if (err instanceof ReferenceError) {
+*/!*
+ alert('ReferenceError'); // 未定義変数へのアクセスに対する "ReferenceError"
+ }
+}
+```
+
+また、`erro.name` プロパティから、エラークラス名を取得することも可能です。すべてのネイティブエラーはエラークラス名があります。もう１つの選択肢は、`err.constructor.name` を参照することです。
+
+下のコードでは、`catch` が `SyntaxError` だけを処理するよう再スローを使っています。:
+
+```js run
+let json = '{ "age": 30 }'; // 不完全なデータ
+try {
+
+ let user = JSON.parse(json);
+
+ if (!user.name) {
+ throw new SyntaxError("Incomplete data: no name");
+ }
+
+*!*
+ blabla(); // 予期しないエラー
+*/!*
+
+ alert( user.name );
+
+} catch(e) {
+
+*!*
+ if (e.name == "SyntaxError") {
+ alert( "JSON Error: " + e.message );
+ } else {
+ throw e; // 再スロー (*)
+ }
+*/!*
+
+}
+```
+
+行 `(*)` での、`catch` ブロック内部からのエラーのスローは `try..catch` を "抜けて" 外部の `try..catch` 構造(存在する場合)でキャッチされる、またはスクリプトをキルします。
+
+従って、`catch` ブロックは実際に扱い方を知っているエラーだけを処理しその他すべてを "スキップ" します。
+
+下の例は、このようなエラーが1つ上のレベルの `try..catch` で捕捉されるデモです:
+
+```js run
+function readData() {
+ let json = '{ "age": 30 }';
+
+ try {
+ // ...
+*!*
+ blabla(); // error!
+*/!*
+ } catch (e) {
+ // ...
+ if (e.name != 'SyntaxError') {
+*!*
+ throw e; // 再スロー (今のエラーの扱い方を知らない)
+*/!*
+ }
+ }
+}
+
+try {
+ readData();
+} catch (e) {
+*!*
+ alert( "External catch got: " + e ); // caught it!
+*/!*
+}
+```
+
+ここでは、`readData` は `SyntaxError` の処理の仕方だけ知っており、外部の `try..catch` はすべての処理の方法を知っています。
+
+## try..catch..finally
+
+待ってください、それですべてではありません。
+
+`try..catch` 構造はもう1つのコード句: `finally` を持つ場合があります。
+
+もし存在する場合、それはすべてのケースで実行します。:
+
+- エラーが無かった場合は、`try` の後で。
+- エラーがあった場合には `catch` の後で。
+
+拡張された構文はこのようになります。:
+
+```js
+*!*try*/!* {
+ ... コードを実行しようとします ...
+} *!*catch*/!*(e) {
+ ... エラーを処理します ...
+} *!*finally*/!* {
+ ... 常に実行します ...
+}
+```
+
+このコードを実行してみましょう。:
+
+```js run
+try {
+ alert( 'try' );
+ if (confirm('Make an error?')) BAD_CODE();
+} catch (e) {
+ alert( 'catch' );
+} finally {
+ alert( 'finally' );
+}
+```
+
+このコードは2つの実行方法があります。:
+
+1. もし "Make an error" に "Yes" と答えると、`try -> catch -> finally` となります。
+2. もし "No" と言えば、`try -> finally` となります。
+
+`finally` 句は `try..catch` の前に何かを開始して、どのような結果であれファイナライズをしたいときに頻繁に使われます。
+
+例えば、フィボナッチ数関数 `fib(n)` にかかる時間を計測したいとします。当然ながら、それを実行する前に計測を開始して、実行後に終了させることができます。しかし、仮に関数呼び出しの間でエラーが起きたらどうなるでしょう？特に下のコードの `fib(n)` の実装では、負の値または非整数値だとエラーを返します。
+
+`finally` 句は何があっても計測を完了させるのに良い場所です。
+
+ここで、`finally` は両方のシチュエーション -- `fib` の実行が成功するケースと失敗するケース -- で時間が正しく計測されることを保証します。:
+
+```js run
+let num = +prompt("Enter a positive integer number?", 35)
+
+let diff, result;
+
+function fib(n) {
+ if (n < 0 || Math.trunc(n) != n) {
+ throw new Error("Must not be negative, and also an integer.");
+ }
+ return n <= 1 ? n : fib(n - 1) + fib(n - 2);
+}
+
+let start = Date.now();
+
+try {
+ result = fib(num);
+} catch (e) {
+ result = 0;
+*!*
+} finally {
+ diff = Date.now() - start;
+}
+*/!*
+
+alert(result || "error occured");
+
+alert( `execution took ${diff}ms` );
+```
+
+コードを実行して `prompt` に `35` を入力することで確認できます -- 通常 `try` の後に `finally` を実行します。そして `-1` を入れると -- すぐにエラーになり、その実行は `0ms` となります。両方の計測は正しく行われています。
+
+つまり、関数を終了するには方法が2つあります: `return` または `throw` です。 `finally` 句はそれら両方とも処理します。
+
+
+```smart header="変数は `try..catch..finally` の内部でローカルです"
+上のコードで `result` と `diff` 変数は `try..catch` の *前* で宣言されていることに注意してください。
+
+そうでなく、`let` が `{...}` ブロックの中で作られている場合、その中でしか見えません。
+```
+
+````smart header="`finally` と `return`"
+Finally 句は `try..catch` からの *任意の* 終了に対して機能します。それは明白な `return` も含みます。
+
+下の例では、`try` の中で `return` があります。この場合、`finally` は制御が外部コードに戻る前に実行されます。
+
+```js run
+function func() {
+
+ try {
+*!*
+ return 1;
+*/!*
+
+ } catch (e) {
+ /* ... */
+ } finally {
+*!*
+ alert( 'finally' );
+*/!*
+ }
+}
+
+alert( func() ); // 最初に finally の alert が動作し、次にこれが動作します
+```
+````
+
+````smart header="`try..finally`"
+
+`catch` 句がない `try..catch` 構造も役立ちます。私たちはここでエラーを正しく処理したくないが、開始した処理が完了したことを確認したいときに使います。
+
+```js
+function func() {
+ // (計測など)完了させる必要のあるなにかを開始する
+ try {
+ // ...
+ } finally {
+ // すべてが死んでいても完了させる
+ }
+}
+```
+上のコードでは、`try` の内側のエラーは常に抜けます。なぜなら `catch` がないからです。しかし `finally` は実行フローが外部に移る前に機能します。
+````
+
+## グローバルな catch
+
+```warn header="環境特有"
+このセクションの情報はコアなJavaScriptの一部ではありません。
+```
+
+`try..catch` の外側で致命的なエラーが起きてスクリプトが死んだことをイメージしてください。プログラミングエラーやその他何か酷いものによって。
+
+そのような出来事に反応する方法はありますか？ エラーをログに記録したり、ユーザーに何かを見せたり（通常はエラーメッセージが表示されません）。
+
+仕様ではそのようなものはありませんが、通常、環境がそれを提供しています。なぜなら本当に有用だからです。例えば、Node.js はそのために [process.on('uncaughtException')](https://nodejs.org/api/process.html#process_event_uncaughtexception)を持っています。また、ブラウザでは関数を特別な [window.onerror](mdn:api/GlobalEventHandlers/onerror) プロパティに代入することができます。それはキャッチしていないエラーの場合に実行されます。
+
+構文:
+
+```js
+window.onerror = function(message, url, line, col, error) {
+ // ...
+};
+```
+
+`message`
+: エラーメッセージ
+
+`url`
+: エラーが起きたスクリプトのURL
+
+`line`, `col`
+: エラーが起きた行と列番号
+
+`error`
+: エラーオブジェクト
+
+例:
+
+```html run untrusted refresh height=1
+
+```
+
+グローバルハンドラー `window.onerror` の役割は、通常スクリプトの実行の回復ではありません -- プログラミングエラーの場合、恐らくそれは不可能なので開発者にエラーメッセージを送ります。
+
+このようなケースでエラーログを提供する web サービスもあります。https://errorception.com> や 。
+
+それらは次のように動きます:
+
+1. 私たちはサービスに登録し、ページに挿入するためのJSのピース(またはスクリプトのURL)をそれらから得ます。
+2. そのJSスクリプトはカスタムの `window.onerror` 関数を持っています。
+3. エラーが起きた時、そのサービスへネットワークリクエストを送ります。
+4. 私たちはサービスのWebインタフェースにログインしてエラーを見ることができます。
+
+## サマリ
+
+`try..catch` 構造はランタイムエラーを処理することができます。文字通りコードを実行しようと試みて、その中で起こるエラーをキャッチします。
+
+構文は次の通りです:
+
+```js
+try {
+ // コードを実行
+} catch(err) {
+ // エラーが起きた場合、ここにジャンプ
+ // err はエラーオブジェクト
+} finally {
+ // すべてのケースで try/catch 後に実行する
+}
+```
+
+`catch` セクションがない、または `finally` がない場合があります。なので `try..catch` と `try..finally` もまた有効です。
+
+エラーオブジェクトは次のプロパティを持っています。:
+
+- `message` -- 人が読めるエラーメッセージです。
+- `name` -- エラー名を指す文字列です(エラーコンストラクタ名)
+- `stack` (非標準) -- エラー生成時のスタックです。
+
+エラーオブジェクトが不要であれば、`catch (err) {` の代わりに `catch {` とすることで省略できます。
+
+また、`throw` 演算子を使って独自のエラーを生成することもできます。技術的には、`throw` の引数は何でもよいですが、通常は組み込みの `Error` クラスを継承しているエラーオブジェクトです。次のチャプターでエラーを拡張する方法について詳しく説明します。
+
+*再スロー* はエラーハンドリングの非常に重要なパターンです。: `catch` ブロックは通常、特定のエラータイプを処理する方法を予期し、知っています。したがって、知らないエラーは再スローすべきです。
+
+たとえ `try..catch` を持っていない場合でも、ほとんどの環境では "抜け出た" エラーをキャッチするために "グローバル" なエラーハンドラを設定することができます。ブラウザでは、それは `window.onerror` です。
diff --git a/1-js/10-error-handling/1-try-catch/try-catch-flow.svg b/1-js/10-error-handling/1-try-catch/try-catch-flow.svg
new file mode 100644
index 0000000000..2c0d71348c
--- /dev/null
+++ b/1-js/10-error-handling/1-try-catch/try-catch-flow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/08-error-handling/2-custom-errors/1-format-error/solution.md b/1-js/10-error-handling/2-custom-errors/1-format-error/solution.md
similarity index 100%
rename from 1-js/08-error-handling/2-custom-errors/1-format-error/solution.md
rename to 1-js/10-error-handling/2-custom-errors/1-format-error/solution.md
diff --git a/1-js/08-error-handling/2-custom-errors/1-format-error/task.md b/1-js/10-error-handling/2-custom-errors/1-format-error/task.md
similarity index 100%
rename from 1-js/08-error-handling/2-custom-errors/1-format-error/task.md
rename to 1-js/10-error-handling/2-custom-errors/1-format-error/task.md
diff --git a/1-js/10-error-handling/2-custom-errors/article.md b/1-js/10-error-handling/2-custom-errors/article.md
new file mode 100644
index 0000000000..242cd26484
--- /dev/null
+++ b/1-js/10-error-handling/2-custom-errors/article.md
@@ -0,0 +1,330 @@
+# カスタムエラー, Error の拡張
+
+開発する際、タスクで上手くいかない可能性のある特定の物事を反映するために、独自のエラークラスが必要になることがよくあります。ネットワーク操作のエラーであれば、`HttpError`、データベース操作は `DbError`、検索操作の場合は`NotFoundError` などが必要な場合があります。
+
+エラーは `message`, `name` 、望ましくは `stack` のような基本のエラープロパティをサポートすべきです。ですが、他にも独自のプロパティを持つかもしれません。例えば `HttpError` オブジェクトであれば、 `404`, `403` もしくは `500` といった値をとる `statusCode` プロパティです。
+
+JavaScript は任意の引数で `throw` できるので、技術的にはカスタムのエラークラスは `Error` から継承する必要はありません。しかし、継承しているとエラーオブジェクトを識別する `obj instanceof Error` を使えるようになります。そのため、継承しておくほうのがベターです。
+
+アプリケーションを開発するにつれ、独自のエラーが自然に階層を形成します。たとえば、 `HttpTimeoutError` は `HttpError` を継承する、といったように。
+
+## Error を拡張する
+
+例として、ユーザデータをもつ JSON を読む関数 `readUser(json)` を考えてみましょう。
+
+ここでは、有効な `json` がどのように見えるかの例を示します。:
+```js
+let json = `{ "name": "John", "age": 30 }`;
+```
+
+内部的には、`JSON.parse` を使います。不正な `json` を受け取った場合は `SyntaxError` をスローします。しかし、たとえ `json` が構文的に正しくても、それが正しいユーザとは限りません。その `json` には必要なデータが不足しているかもしれません。例えば、上のケースだと、ユーザに必要不可欠な `name` や `age` プロパティを持っていない場合です。
+
+私たちの関数 `readUser(json)` はJSONを読むだけでなく、データのチェック(バリデート)をします。必須のフィールドがなかったり、フォーマットが誤っている場合はエラーになります。そしてそれは `SyntaxError` ではありません。なぜならデータは構文的には正しく、別の種類のエラーだからです。したがって、このエラーは `ValidationError` と呼び、そのためのクラスを作りましょう。このようなエラーは、問題のあるフィールドに関する情報も保持する必要があります。
+
+`ValidationError` クラスは `Error` クラスから継承します。
+
+`Error` クラスは組み込みですが、ここでは何を拡張しようとしているのか理解できるよう、そのクラスのおおよそのコードを示します:
+
+```js
+// JavaScript自体で定義された組み込みのErrorクラスの「擬似コード」
+class Error {
+ constructor(message) {
+ this.message = message;
+ this.name = "Error"; // (組み込みのエラークラスごとに異なる名前)
+ this.stack = ; // 非標準ですが、ほとんどの環境はサポートしています
+ }
+}
+```
+
+では、`ValidationError` をそれから継承させ、動かしましょう:
+
+```js run untrusted
+*!*
+class ValidationError extends Error {
+*/!*
+ constructor(message) {
+ super(message); // (1)
+ this.name = "ValidationError"; // (2)
+ }
+}
+
+function test() {
+ throw new ValidationError("Whoops!");
+}
+
+try {
+ test();
+} catch(err) {
+ alert(err.message); // Whoops!
+ alert(err.name); // ValidationError
+ alert(err.stack); // それぞれの行番号を持つネストされたコールのリスト
+}
+```
+
+補足: `(1)` で親のコンストラクタを呼び出しています。JavaScriptは子のコンストラクタ内で `super` 呼び出しが必要で、これは義務です。親のコンストラクタは `message` プロパティをセットします。
+
+親のコンストラクタは `name` プロパティも `"Error"` へセットしますので、行 `(2)` で正しい値にリセットしています。
+
+`readUser(json)` で使ってみましょう:
+
+```js run
+class ValidationError extends Error {
+ constructor(message) {
+ super(message);
+ this.name = "ValidationError";
+ }
+}
+
+// Usage
+function readUser(json) {
+ let user = JSON.parse(json);
+
+ if (!user.age) {
+ throw new ValidationError("No field: age");
+ }
+ if (!user.name) {
+ throw new ValidationError("No field: name");
+ }
+
+ return user;
+}
+
+// try..catch での動作例
+
+try {
+ let user = readUser('{ "age": 25 }');
+} catch (err) {
+ if (err instanceof ValidationError) {
+*!*
+ alert("Invalid data: " + err.message); // Invalid data: No field: name
+*/!*
+ } else if (err instanceof SyntaxError) { // (*)
+ alert("JSON Syntax Error: " + err.message);
+ } else {
+ throw err; // 知らないエラーなので、再スロー (**)
+ }
+}
+```
+
+上のコードの `try..catch` ブロックは `ValidationError` と `JSON.parse` からの組み込みの `SyntaxError` 両方を処理します。
+
+行 `(*)` で特定のエラーの種類をチェックするために、どのように `instanceof` を使っているか見てください。
+
+このようにして `err.name` を見ることもできます。:
+
+```js
+// ...
+// (err instanceof SyntaxError) の代わり
+} else if (err.name == "SyntaxError") { // (*)
+// ...
+```
+
+`instanceof` の方がよりベターです。なぜなら、将来 `ValidationError` を拡張し、`PropertyRequiredError` のようなサブタイプを作るからです。そして `instanceof` チェックは新しい継承したクラスでもうまく機能し続けます。それは将来を保証します。
+
+また、`catch` が未知のエラーに遭遇したとき、行 `(**)` でそれを再度スローすることも重要です。 `catch` はバリデーションと構文エラーの処理の仕方だけを知っています。他の種類(コード中のタイポやその他)の場合は失敗します。
+
+## さらなる継承
+
+`ValidationError` クラスはとても汎用的です。色んな種類の誤りがあります。例えば、プロパティが存在しなかったり、誤ったフォーマット(`age` が文字列値のような)など。ここで、存在しないプロパティに対するより具体的なクラス `PropertyRequiredError` を作りましょう。欠落しているプロパティについての追加の情報を保持します。
+
+```js run
+class ValidationError extends Error {
+ constructor(message) {
+ super(message);
+ this.name = "ValidationError";
+ }
+}
+
+*!*
+class PropertyRequiredError extends ValidationError {
+ constructor(property) {
+ super("No property: " + property);
+ this.name = "PropertyRequiredError";
+ this.property = property;
+ }
+}
+*/!*
+
+// 使用法
+function readUser(json) {
+ let user = JSON.parse(json);
+
+ if (!user.age) {
+ throw new PropertyRequiredError("age");
+ }
+ if (!user.name) {
+ throw new PropertyRequiredError("name");
+ }
+
+ return user;
+}
+
+// try..catch での動作例
+
+try {
+ let user = readUser('{ "age": 25 }');
+} catch (err) {
+ if (err instanceof ValidationError) {
+*!*
+ alert("Invalid data: " + err.message); // Invalid data: No property: name
+ alert(err.name); // PropertyRequiredError
+ alert(err.property); // name
+*/!*
+ } else if (err instanceof SyntaxError) {
+ alert("JSON Syntax Error: " + err.message);
+ } else {
+ throw err; // 知らないエラーなので、それを再スロー
+ }
+}
+```
+
+新しいクラス `PropertyRequiredError` は簡単に使えます。プロパティ名を渡すだけです。: `new PropertyRequiredError(property)`。人が読める `message` はコンストラクタで作られます。
+
+`PropertyRequiredError` コンストラクタでの `this.name` は再度手動で割り当てられることに注目してください。カスタムのエラーを作る度に `this.name = ` と代入することには、少しうんざりするかもしれません。が、`this.name = this.constructor.name` を行う "基本エラー" クラスを作り、カスタムエラーはそれを継承することで避けることができます。
+
+これを `MyError` と呼びましょう。
+
+ここでは、単純化した `MyError` のコードと他のカスタムエラークラスを示します。:
+
+```js run
+class MyError extends Error {
+ constructor(message) {
+ super(message);
+*!*
+ this.name = this.constructor.name;
+*/!*
+ }
+}
+
+class ValidationError extends MyError { }
+
+class PropertyRequiredError extends ValidationError {
+ constructor(property) {
+ super("No property: " + property);
+ this.property = property;
+ }
+}
+
+// name is correct
+alert( new PropertyRequiredError("field").name ); // PropertyRequiredError
+```
+
+これで、カスタムエラーははるかに短くなりました。特に `ValidationError` はコンストラクタの `"this.name = ..."` の行を除いたので。
+
+## 例外のラッピング
+
+上のコードの関数 `readUser` の目的は "ユーザデータを読むこと" ですよね？この処理では異なる種類のエラーが起こる可能性があります。今は `SyntaxError` と `ValidationError` を持っていますが、将来 `readUser` 関数が成長し、新たなコードが別の種類のエラーを生み出すかもしれません。
+
+`readUser` を呼び出すコードは、これらのエラーを処理する必要があります。今は `catch` ブロックの中で、異なるエラータイプのチェックと未知のエラーを再スローするために、複数の `if` を使っています。
+
+スキーマはこのようになります:
+
+```js
+try {
+ ...
+ readUser() // 潜在的なエラーの原因
+ ...
+} catch (err) {
+ if (err instanceof ValidationError) {
+ // バリデーションエラーの処理
+ } else if (err instanceof SyntaxError) {
+ // シンタックスエラーの処理
+ } else {
+ throw err; // 未知のエラー、再スロー
+ }
+}
+```
+
+上のコードでは2種類のエラーがありますが、他にもありえます。
+
+もし `readUser` 関数が複数の種類のエラーを生成する場合、`readUser` 呼び出しをするすべてのコードで、毎回本当にすべてのエラータイプを1つずつチェックしたいですか？
+
+多くの場合、答えは、"いいえ" です。: 外側のコードは "それらすべての1つ上のレベル" でありたいです。つまり、"データ読み込みエラー" が発生したかどうかが知りたいだけです。発生した正確な理由については、多くの場合は無関心です（エラーメッセージで説明されています）。また、さらに良いのは、必要な場合にのみエラーの詳細を取得する方法があることです。
+
+このテクニックは "例外のラッピング(wrapping exceptions)" と呼ばれます。
+
+1. 汎用的な "データ読み込み" エラーを表現する新しいクラス `ReadError` を作ります。
+2. 関数 `readUser` は `ValidationError` や `SyntaxError` のような、内部で発生するデータ読み込みエラーをキャッチし、代わりに `ReadError` を生成します。
+3. `ReadError` オブジェクトは自身の `cause` プロパティに元のエラーへの参照を保持します。
+
+`readUser` を呼び出すコードは、`ReadError` だけをチェックする必要があり、他の種類のデータ読み込みエラーのチェックは不要です。そして、エラーの詳細が必要な場合は、その `cause` プロパティで確認できます。
+
+これは、`ReadError` を定義し、`readUser` と `try..catch` でそれを利用するデモです。:
+
+```js run
+class ReadError extends Error {
+ constructor(message, cause) {
+ super(message);
+ this.cause = cause;
+ this.name = 'ReadError';
+ }
+}
+
+class ValidationError extends Error { /*...*/ }
+class PropertyRequiredError extends ValidationError { /* ... */ }
+
+function validateUser(user) {
+ if (!user.age) {
+ throw new PropertyRequiredError("age");
+ }
+
+ if (!user.name) {
+ throw new PropertyRequiredError("name");
+ }
+}
+
+function readUser(json) {
+ let user;
+
+ try {
+ user = JSON.parse(json);
+ } catch (err) {
+*!*
+ if (err instanceof SyntaxError) {
+ throw new ReadError("Syntax Error", err);
+ } else {
+ throw err;
+ }
+*/!*
+ }
+
+ try {
+ validateUser(user);
+ } catch (err) {
+*!*
+ if (err instanceof ValidationError) {
+ throw new ReadError("Validation Error", err);
+ } else {
+ throw err;
+ }
+*/!*
+ }
+
+}
+
+try {
+ readUser('{bad json}');
+} catch (e) {
+ if (e instanceof ReadError) {
+*!*
+ alert(e);
+ // Original error: SyntaxError: Unexpected token b in JSON at position 1
+ alert("Original error: " + e.cause);
+*/!*
+ } else {
+ throw e;
+ }
+}
+```
+
+上のコードで、`readUser` は説明されている通りに正確に動作します -- 構文とバリデーションエラーをキャッチし、`ReadError` エラーを代わりにスローします(未知のエラーは通常通り再スローします)。
+
+なので、外部のコードは `instanceof ReadError` をチェックするだけです。可能性のあるすべてのエラータイプをリストする必要はありません。
+
+このアプローチは、"低レベルの例外" を取り除き、呼び出しコードで使用するより抽象的で便利な "ReadError" に "ラップ" するため、"例外のラッピング" と呼ばれます。 オブジェクト指向プログラミングで広く使用されています。
+
+## サマリ
+
+- `Error` や他の組み込みのエラークラスから継承することができます。そのときは、`name` プロパティに手を入れることと、`super` の呼び出しを忘れないでください。
+- 特定のエラーのチェックには `instanceof` が使えます。これは継承している場合にも有効です。しかし、ときにはサードパーティのライブラリから来たエラーオブジェクトを持っていて、簡単にそのクラスを取得する方法がないことがあります。このような場合には `name` プロパティが使えます。
+- 例外のラッピングは広く利用されているテクニックです: 関数が低レベルの例外を処理し、それぞれの低レベルの例外の代わりに高レベルのエラーを生成します。低レベルの例外は、上の例の `err.cause` のようにオブジェクトのプロパティになることがありますが、厳密には必須ではありません。
diff --git a/1-js/08-error-handling/index.md b/1-js/10-error-handling/index.md
similarity index 100%
rename from 1-js/08-error-handling/index.md
rename to 1-js/10-error-handling/index.md
diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md
new file mode 100644
index 0000000000..7a282d6744
--- /dev/null
+++ b/1-js/11-async/01-callbacks/article.md
@@ -0,0 +1,310 @@
+
+
+# 前置き: コールバック
+
+```warn header="ここの例ではブラウザメソッドを使用します"
+コールバック、promise や他の抽象的な概念の使用法を示すために、いくつかのブラウザメソッドを使用します。具体的には、スクリプトの読み込みと単純なドキュメント操作の実行です。
+
+これらのメソッドに馴染みがなく、例での使用法がわかりにくい場合、チュートリアルの [次のパート](/document) のいくつかの章を読むことをおすすめします。
+
+
+```
+
+多くの関数は *非同期* アクションがスケジュールできる JavaScript ホスト環境によって提供されます。つまり、今開始したアクションですが、後で終了します。
+
+例えば、そのような関数の1つとして `setTimeout` 関数があります。
+
+非同期アクションの実際の例は他にもあります。例えばスクリプトとモジュールの読み込みです（後述の章で説明します）。
+
+指定された `src` でスクリプトをロードする関数 `loadScript(src)` を見てください。:
+
+```js
+function loadScript(src) {
+ //
+
+
diff --git a/6-async/04-promise-api/one.js b/1-js/11-async/04-promise-error-handling/one.js
similarity index 100%
rename from 6-async/04-promise-api/one.js
rename to 1-js/11-async/04-promise-error-handling/one.js
diff --git a/1-js/11-async/04-promise-error-handling/promise-then-chain.svg b/1-js/11-async/04-promise-error-handling/promise-then-chain.svg
new file mode 100644
index 0000000000..fb60142fbd
--- /dev/null
+++ b/1-js/11-async/04-promise-error-handling/promise-then-chain.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/11-async/04-promise-error-handling/promise-then-many.svg b/1-js/11-async/04-promise-error-handling/promise-then-many.svg
new file mode 100644
index 0000000000..8fea7beaaf
--- /dev/null
+++ b/1-js/11-async/04-promise-error-handling/promise-then-many.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/11-async/04-promise-error-handling/three.js b/1-js/11-async/04-promise-error-handling/three.js
new file mode 100644
index 0000000000..8536e85a18
--- /dev/null
+++ b/1-js/11-async/04-promise-error-handling/three.js
@@ -0,0 +1,3 @@
+function three() {
+ alert(3);
+}
diff --git a/6-async/04-promise-api/two.js b/1-js/11-async/04-promise-error-handling/two.js
similarity index 100%
rename from 6-async/04-promise-api/two.js
rename to 1-js/11-async/04-promise-error-handling/two.js
diff --git a/6-async/04-promise-api/iliakan.json b/1-js/11-async/04-promise-error-handling/user.json
similarity index 100%
rename from 6-async/04-promise-api/iliakan.json
rename to 1-js/11-async/04-promise-error-handling/user.json
diff --git a/6-async/04-promise-api/01-promise-errors-as-results/solution.md b/1-js/11-async/05-promise-api/01-promise-errors-as-results/solution.md
similarity index 100%
rename from 6-async/04-promise-api/01-promise-errors-as-results/solution.md
rename to 1-js/11-async/05-promise-api/01-promise-errors-as-results/solution.md
diff --git a/6-async/04-promise-api/01-promise-errors-as-results/solution.view/index.html b/1-js/11-async/05-promise-api/01-promise-errors-as-results/solution.view/index.html
similarity index 100%
rename from 6-async/04-promise-api/01-promise-errors-as-results/solution.view/index.html
rename to 1-js/11-async/05-promise-api/01-promise-errors-as-results/solution.view/index.html
diff --git a/6-async/04-promise-api/01-promise-errors-as-results/source.view/index.html b/1-js/11-async/05-promise-api/01-promise-errors-as-results/source.view/index.html
similarity index 100%
rename from 6-async/04-promise-api/01-promise-errors-as-results/source.view/index.html
rename to 1-js/11-async/05-promise-api/01-promise-errors-as-results/source.view/index.html
diff --git a/6-async/04-promise-api/01-promise-errors-as-results/task.md b/1-js/11-async/05-promise-api/01-promise-errors-as-results/task.md
similarity index 100%
rename from 6-async/04-promise-api/01-promise-errors-as-results/task.md
rename to 1-js/11-async/05-promise-api/01-promise-errors-as-results/task.md
diff --git a/6-async/02-promise-basics/03-animate-circle-promise/solution.md b/1-js/11-async/05-promise-api/02-promise-errors-as-results-2/solution.md
similarity index 100%
rename from 6-async/02-promise-basics/03-animate-circle-promise/solution.md
rename to 1-js/11-async/05-promise-api/02-promise-errors-as-results-2/solution.md
diff --git a/6-async/04-promise-api/02-promise-errors-as-results-2/solution.view/index.html b/1-js/11-async/05-promise-api/02-promise-errors-as-results-2/solution.view/index.html
similarity index 100%
rename from 6-async/04-promise-api/02-promise-errors-as-results-2/solution.view/index.html
rename to 1-js/11-async/05-promise-api/02-promise-errors-as-results-2/solution.view/index.html
diff --git a/6-async/04-promise-api/02-promise-errors-as-results-2/source.view/index.html b/1-js/11-async/05-promise-api/02-promise-errors-as-results-2/source.view/index.html
similarity index 100%
rename from 6-async/04-promise-api/02-promise-errors-as-results-2/source.view/index.html
rename to 1-js/11-async/05-promise-api/02-promise-errors-as-results-2/source.view/index.html
diff --git a/6-async/04-promise-api/02-promise-errors-as-results-2/task.md b/1-js/11-async/05-promise-api/02-promise-errors-as-results-2/task.md
similarity index 100%
rename from 6-async/04-promise-api/02-promise-errors-as-results-2/task.md
rename to 1-js/11-async/05-promise-api/02-promise-errors-as-results-2/task.md
diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md
new file mode 100644
index 0000000000..abf602707c
--- /dev/null
+++ b/1-js/11-async/05-promise-api/article.md
@@ -0,0 +1,323 @@
+# Promise API
+
+`Promise` クラスには 6 つの静的メソッドがあります。ここでそれらのユースケースについて簡単に説明します。
+
+## Promise.all
+
+並列に複数の promise を実行し、すべてが準備できるまで待ちたいとしましょう。
+
+例えば、平行で複数の URL をダウンロードし、すべてが完了したらコンテンツを処理する場合です。
+
+これが `Promise.all` の目的です。
+
+構文は次の通りです:
+
+```js
+let promise = Promise.all(iterable);
+```
+
+`Promise.all` は iterable(反復可能, 通常は promise の配列)を取り、新しい promise を返します。
+
+新しい promise は、配列の各 promise がすべて解決され、それらの結果を配列に持つと解決(resolve)されます。
+
+例えば、下の `Promise.all` は 3 秒後に解決され、その後結果は配列 `[1, 2, 3]` です。:
+
+```js run
+Promise.all([
+ new Promise((resolve, reject) => setTimeout(() => resolve(1), 3000)), // 1
+ new Promise((resolve, reject) => setTimeout(() => resolve(2), 2000)), // 2
+ new Promise((resolve, reject) => setTimeout(() => resolve(3), 1000)) // 3
+]).then(alert); // 1,2,3 promise が準備できた時: 各 promise は配列の中身に寄与します
+```
+
+結果の配列要素の順番は元の promise の順番と同じであることに注意してください。たとえ1つ目の promise が解決まで最も時間がかかったとしても、結果の配列の中では先頭にあります。
+
+一般的なやり方は、処理データの配列を promise の配列にマップし、それを `Promise.all` にラップすることです。
+
+例えば、URL の配列がある場合、次のようにしてすべてをフェッチできます:
+
+```js run
+let urls = [
+ 'https://api.github.com/users/iliakan',
+ 'https://api.github.com/users/remy',
+ 'https://api.github.com/users/jeresig'
+];
+
+// 各 url を promise の fetch(github url) へマップする
+let requests = urls.map(url => fetch(url));
+
+// Promise.all はすべてのジョブが解決されるまで待ちます
+Promise.all(requests)
+ .then(responses => responses.forEach(
+ response => alert(`${response.url}: ${response.status}`)
+ ));
+```
+
+名前からGithubユーザのユーザ情報を取得するより大きな例です（id で商品の配列をフェッチできますが、ロジックは同じです）:
+
+```js run
+let names = ['iliakan', 'remy', 'jeresig'];
+
+let requests = names.map(name => fetch(`https://api.github.com/users/${name}`));
+
+Promise.all(requests)
+ .then(responses => {
+ // すべてのレスポンスが用意できたら HTTP ステータスコードが見られます
+ for(let response of responses) {
+ alert(`${response.url}: ${response.status}`); // 各 url で 200 が表示されます
+ }
+
+ return responses;
+ })
+ // それぞれの中身を読むために、レスポンスの配列を response.json() の配列にマッピングします
+ .then(responses => Promise.all(responses.map(r => r.json())))
+ // すべての JSON応答が解析され、"user" はそれらの配列です。
+ .then(users => users.forEach(user => alert(user.name)));
+```
+
+**いずれかの promise が reject された場合、`Promise.all` により返却された promise は即座にエラーと一緒に reject します。**
+
+例:
+
+```js run
+Promise.all([
+ new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
+*!*
+ new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
+*/!*
+ new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
+]).catch(alert); // Error: Whoops!
+```
+
+ここでは、2つ目の promise が2秒後に reject されます。それは即座に `Promise.all` の reject に繋がるため、`catch` が実行されます。: reject されたエラーは `Promise.all` 全体の結果になります。
+
+```warn header="エラー時の場合, 他の promise は無視されます"
+ある promise が reject がされると、`Promise.all` は即座に reject し、配列の他の promise を完全に忘れます。これらの結果は無視されます。
+
+例えば、上の例のように複数の `fetch` 呼び出しがあり、1つが失敗した場合、他の promise は依然として実行中ですが、`Promise.all` はこれ以上ウォッチしません。おそらく正常に解決されますが、結果は無視されます。
+
+`promise` には "キャンセル" の考え方はないので、`Promise.all` はキャンセルしません。[別の章](info:fetch-abort)では、これに役立つ `AbortController` について説明しています。がこれは Promise API の一部ではありません。
+```
+
+````smart header="`Promise.all(iterable)` は `iterable` の中で非 promise の項目を許可します"
+通常、`Promise.all(iterable)` は promise の iterable (ほとんどの場合は配列)を受け付けます。しかし、もしそれらのオブジェクトが promise ではない場合、`Promise.resolve` でラップします。
+
+例えば、ここでは結果は `[1, 2, 3]` になります:
+
+```js run
+Promise.all([
+ new Promise((resolve, reject) => {
+ setTimeout(() => resolve(1), 1000)
+ }),
+ 2, // Promise.resolve(2) と扱われる
+ 3 // Promise.resolve(3) と扱われる
+]).then(alert); // 1, 2, 3
+```
+
+したがって、必要に応じて準備済みの値を `Promise.all` に渡せます。
+````
+
+## Promise.allSettled
+
+[recent browser="new"]
+
+`Promise.all` はいずれかの promise が reject されると、全体として reject されます。これは "白か黒か" のケースにはよいです。続行するために *すべての* 成功した結果が必要な場合です:
+
+```js
+Promise.all([
+ fetch('/template.html'),
+ fetch('/style.css'),
+ fetch('/data.json')
+]).then(render); // render メソッドはすべての fetch の結果が必要
+```
+
+`Promise.allSettled` は結果に関わらずすべての promise が解決するまで待ちます。結果の配列は以下を持ちます:
+
+- 成功したレスポンスの場合: `{status:"fulfilled", value:result}`
+- エラーの場合: `{status:"rejected", reason:error}`
+
+例えば、複数のユーザに対する情報をフェッチしたいとします。たとえ1リクエストが失敗しても、他の結果はほしいです。
+
+`Promise.allSettled` を使いましょう:
+
+```js run
+let urls = [
+ 'https://api.github.com/users/iliakan',
+ 'https://api.github.com/users/remy',
+ 'https://no-such-url'
+];
+
+Promise.allSettled(urls.map(url => fetch(url)))
+ .then(results => { // (*)
+ results.forEach((result, num) => {
+ if (result.status == "fulfilled") {
+ alert(`${urls[num]}: ${result.value.status}`);
+ }
+ if (result.status == "rejected") {
+ alert(`${urls[num]}: ${result.reason}`);
+ }
+ });
+ });
+```
+
+上の行 `(*)` の `results` は以下になります:
+```js
+[
+ {status: 'fulfilled', value: ...レスポンス...},
+ {status: 'fulfilled', value: ...レスポンス...},
+ {status: 'rejected', reason: ...エラーオブジェクト...}
+]
+```
+
+そのため、各 promise に対してステータスと `値 or エラー` を取得します。
+
+### Polyfill
+
+ブラウザでは、`Promise.allSettled` をサポートしていません。が polyfill するのは簡単です:
+
+```js
+if (!Promise.allSettled) {
+ const rejectHandler = reason => ({ status: 'rejected', reason });
+
+ const resolveHandler = value => ({ status: 'fulfilled', value });
+
+ Promise.allSettled = function (promises) {
+ const convertedPromises = promises.map(p => Promise.resolve(p).then(resolveHandler, rejectHandler));
+ return Promise.all(convertedPromises);
+ };
+}
+```
+
+このコードで、`promises.map` は入力値を取り、`p => Promise.resolve(p)` でそれらを promise に変換（非 promise が渡された場合に備えて）し、`.then` ハンドラに追加します。
+
+ハンドラは成功した結果 `value` を `{status:'fulfilled', value}` に、エラー `reason` は `{status:'rejected', reason}` に変換します。これは `Promise.allSettled` のフォーマットです。
+
+これで、指定された *すべて* の promise の結果を得る（たとえいくつかが reject されても） `Promise.allSettled` が利用できます。
+
+## Promise.race
+
+これは `Promise.all` と同様ですが、すべてが完了するのを待つのではなく、最初の結果(またはエラー)のみを待ちます。
+
+構文です:
+
+```js
+let promise = Promise.race(iterable);
+```
+
+例えば、ここでは結果は `1` になります:
+
+```js run
+Promise.race([
+ new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
+ new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
+ new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
+]).then(alert); // 1
+```
+
+なので、最初の結果/エラーが `Promise.race` 全体の結果になります。最初の確定した promise が "レースに勝った" 後、それ以外の結果/エラーは無視されます。
+
+
+## Promise.any
+
+`Promise.race` と同様ですが、最初の履行した(fulfilled) promise のみを待ち、その結果を得ます。指定された promise がすべて reject された場合、返却された promise は [`AggregateError`](mdn:js/AggregateError) で reject されます（`errors` プロパティにすべての promise エラーを格納する特別なエラーオブジェクトです）。
+
+構文は次の通りです:
+
+```js
+let promise = Promise.any(iterable);
+```
+
+例えば、ここでは結果は `1` になります:
+
+```js run
+Promise.any([
+ new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 1000)),
+ new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)),
+ new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
+]).then(alert); // 1
+```
+
+最初の promise が一番はやいですが、reject されたため、2つ目の promise が結果になっています。最初の履行した(fulfilled)promise が "レースに勝ち"、他の結果はすべて無視されます。
+
+これは promise がすべて失敗した例です:
+
+```js run
+Promise.any([
+ new Promise((resolve, reject) => setTimeout(() => reject(new Error("Ouch!")), 1000)),
+ new Promise((resolve, reject) => setTimeout(() => reject(new Error("Error!")), 2000))
+]).catch(error => {
+ console.log(error.constructor.name); // AggregateError
+ console.log(error.errors[0]); // Error: Ouch!
+ console.log(error.errors[1]); // Error: Error!
+});
+```
+
+ご覧の通り、失敗した promise のエラーオブジェクトは `AggregateError` オブジェクトの `errors` プロパティで利用可能です。
+
+## Promise.resolve/reject
+
+最近のコードでは、`Promise.resolve` と `Promise.reject` メソッドはめったに必要とされません。`async/await` 構文([少し後](info:async-await)で説明します) によって、これらがやや時代遅れになるためです。
+
+ここでは完全性のためと、何らかの理由で `async/await` が使用できない場合のために説明します。
+
+### Promise.resolve
+
+`Promise.resolve(value)` は結果 `value` をもつ解決された promise を作成します。
+
+以下と同様です:
+
+```js
+let promise = new Promise(resolve => resolve(value));
+```
+
+このメソッドは、関数が promise を返すことが期待される場合の互換性のために使用されます。
+
+例えば、以下の `loadCached` 関数は、URL をフェッチし、コンテンツを記憶（キャッシュ）します。同じURLに対する将来の呼び出し時には、キャッシュから即座にコンテンツが返されますが、promise にするために `Promise.resolve` を使用します。これで戻り値は常に promise になります:
+
+```js
+let cache = new Map();
+
+function loadCached(url) {
+ if (cache.has(url)) {
+*!*
+ return Promise.resolve(cache.get(url)); // (*)
+*/!*
+ }
+
+ return fetch(url)
+ .then(response => response.text())
+ .then(text => {
+ cache.set(url,text);
+ return text;
+ });
+}
+```
+
+関数は promise を返すことが保証されているため、`loadCached(url).then(…)` と書くことができます。`loadCached` の後に常に `.then` が使用でき、これが行 `(*)` の `Promise.resolve` の目的です。
+
+### Promise.reject
+
+`Promise.reject(error)` は `error` を持つ reject された promise を作成します。
+
+以下と同じです:
+
+```js
+let promise = new Promise((resolve, reject) => reject(error));
+```
+
+実際、このメソッドはほとんど使われません。
+
+## サマリ
+
+`Promise` クラスには 6 つの静的なメソッドがあります。:
+
+1. `Promise.all(promises)` -- すべての promise が解決するのを待って、結果の配列を返します。与えられた promise のいずれかが拒否されると、 `Promise.all` のエラーとなり、他のすべての結果は無視されます。
+2. `Promise.allSettled(promises)` (最近追加されたメソッド) -- すべての promise が完了するのを待って、以下のオブジェクト配列として結果を返します:
+ - `status`: `"fulfilled"` or `"rejected"`
+ - `value` (fulfilled の場合) or `reason` (rejected の場合).
+3. `Promise.race(promises)` -- 最初の promise の解決を待ち、その結果/エラーを返します。
+4. `Promise.any(promises)` (最近追加されたメソッド) -- 最初に履行された(fulfilled) promise を待ち、その結果を返します。指定したすべての promise が reject された場合、[`AggregateError`](mdn:js/AggregateError) が `Promise.any` のエラーになります。
+5. `Promise.resolve(value)` -- 与えられた値で promise を解決(resolve)します
+6. `Promise.reject(error)` -- 与えられたエラーで promise を拒否(reject)します
+
+これらのうち、`Promise.all` が実践では最も一般的です。
diff --git a/6-async/04-promise-api/head.html b/1-js/11-async/05-promise-api/head.html
similarity index 100%
rename from 6-async/04-promise-api/head.html
rename to 1-js/11-async/05-promise-api/head.html
diff --git a/1-js/11-async/05-promise-api/iliakan.json b/1-js/11-async/05-promise-api/iliakan.json
new file mode 100644
index 0000000000..32f89971a8
--- /dev/null
+++ b/1-js/11-async/05-promise-api/iliakan.json
@@ -0,0 +1,4 @@
+{
+ "name": "iliakan",
+ "isAdmin": true
+}
diff --git a/1-js/11-async/05-promise-api/one.js b/1-js/11-async/05-promise-api/one.js
new file mode 100644
index 0000000000..948a60e075
--- /dev/null
+++ b/1-js/11-async/05-promise-api/one.js
@@ -0,0 +1,3 @@
+function one() {
+ alert(1);
+}
diff --git a/1-js/11-async/05-promise-api/two.js b/1-js/11-async/05-promise-api/two.js
new file mode 100644
index 0000000000..b04795b86c
--- /dev/null
+++ b/1-js/11-async/05-promise-api/two.js
@@ -0,0 +1,3 @@
+function two() {
+ alert(2);
+}
diff --git a/1-js/11-async/06-promisify/article.md b/1-js/11-async/06-promisify/article.md
new file mode 100644
index 0000000000..415f476231
--- /dev/null
+++ b/1-js/11-async/06-promisify/article.md
@@ -0,0 +1,132 @@
+# Promisification
+
+"Promisification" は単純な変換を表す長い用語です。コールバックを受け付ける関数から、Promise を返す関数への変換です。
+
+多くの関数やライブラリはコールバックベースなので、このような変換は実際しばしば必要とされます。Promise はより便利であるため、このような変換は理にかなっています。
+
+より理解するために例を見てみましょう。
+
+例えば、章 の `loadScript(src, callback)` を考えてみましょう。
+
+```js run
+function loadScript(src, callback) {
+ let script = document.createElement('script');
+ script.src = src;
+
+ script.onload = () => callback(null, script);
+ script.onerror = () => callback(new Error(`Script load error for ${src}`));
+
+ document.head.append(script);
+}
+
+// 使用例:
+// loadScript('path/script.js', (err, script) => {...})
+```
+
+関数は指定された `src` のスクリプトを読み込み、エラーの場合は `callback(err)`, 読み込みに成功した場合には `callback(null, script)` を呼び出します。こちらは以前みましたが、このフォーマットはコールバックの使用で広く合意されているものです。
+
+Promise 化してみましょう。
+
+新しい `loadScriptPromise(src)` 関数は同じことをしますが、コールバックの代わりに Promise を返します。
+
+つまり、`src` のみ（`callback` なし）を渡し、戻り値で promise を得ます。この promise は読み込みが成功すると `script` で resolve し、そうでなければエラーで reject します。
+
+こちらです:
+```js
+let loadScriptPromise = function(src) {
+ return new Promise((resolve, reject) => {
+ loadScript(src, (err, script) => {
+ if (err) reject(err)
+ else resolve(script);
+ });
+ })
+}
+
+// 使用例:
+// loadScriptPromise('path/script.js').then(...)
+```
+
+ご覧の通り、新しい関数は元の `loadScript` 関数のラッパーです。結果を Promise の `resolve/reject` に変換する独自のコールバックを提供し、呼び出します。
+
+これで `loadScriptPromise` は Promise ベースのコードによくフィットします。コールバックよりも promise の方がよい（この後その理由をみていきます）なら、代わりにこちらを利用します。
+
+実際には、複数の関数を promise 化する必要があるかもしれません。この場合はヘルパーを用意するのが便利です。
+
+`promisify(f)` は Promise 化する関数 `f` を引数に取り、ラッパー関数を返します。
+
+```js
+function promisify(f) {
+ return function (...args) { // ラッパー関数を返します
+ return new Promise((resolve, reject) => {
+ function callback(err, result) { // f のためのカスタムコールバック
+ if (err) {
+ return reject(err);
+ } else {
+ resolve(result);
+ }
+ }
+
+ args.push(callback); // 引数の末尾にカスタムコールバックを追加
+
+ f.call(this, ...args); // 元の関数を呼び出します
+ });
+ };
+};
+
+// 使用例:
+let loadScriptPromise = promisify(loadScript);
+loadScriptPromise(...).then(...);
+```
+
+コードは多少複雑に見えますが、`loadScript` 関数の Promise 化をしており、本質的には上で書いたものと同じです。
+
+`promisify(f)` の呼び出しは、`f` `(*)` のラッパーを返します。ラッパーは promise を返し、呼び出しを元の `f` に転送し、カスタムコールバック `(**)` で結果を追跡します。
+
+ここで、`promisify` は、元の関数は2つの引数 `(err, result)` を持つコールバックを期待している前提です。これはもっともよく出くわすパターンです。そして、カスタムコールバックはまさに正しい形式であり、`promisify` はこのようなケースで上手く機能します。
+
+しかし、仮に元の `f` がより多くの引数 `callback(err, res1, res2)` を期待しているとしたらどうなるでしょうか？
+
+複数のコールバックの結果の配列を返す `promifify` の修正です:
+
+- `promisify(f)` が呼ばれた場合は、上と同様に動作します。
+- `promisify(f, true)` が呼ばれた場合は、コールバックの結果配列で resolve する promise を返します。これが複数の引数をもつコールバックに対するものです。
+
+```js
+// 結果の配列を得る場合は promisify(f, true)
+function promisify(f, manyArgs = false) {
+ return function (...args) {
+ return new Promise((resolve, reject) => {
+ function *!*callback(err, ...results*/!*) { // f のカスタムコールバック
+ if (err) {
+ return reject(err);
+ } else {
+ // manyArgs が指定されている場合、すべてのコールバック結果で resolve します
+ *!*resolve(manyArgs ? results : results[0]);*/!*
+ }
+ }
+
+ args.push(callback);
+
+ f.call(this, ...args);
+ });
+ };
+};
+
+// 使用例:
+f = promisify(f, true);
+f(...).then(arrayOfResults => ..., err => ...)
+```
+
+ご覧の通り、基本的には上記と同様ですが、`resolve` は `manyArgs` が true がどうかによって、1つまたはすべての引数で呼び出されます。
+
+ケースによっては、`err` はまったくないかもしれません: `callback(result)`, また、コールバックの形式が珍しいような場合には、ヘルパーを使わず、手動でこのような関数たちを Promise 化するのがよいでしょう。
+
+もう少し柔軟な Promisification 関数を持つモジュールもあります。例えば、[es6-promisify](https://github.com/digitaldesignlabs/es6-promisify) です。Node.js では、組み込みの `util.promisify` があります。
+
+```smart
+Promisification は素晴らしいアプローチです。特に `async/await` (次の章で説明します)を使うときには。ですが、これはコールバックの完全な置き換えにはなりません。
+
+覚えておいてください、Promise は1つの結果のみを持ちますが、コールバックは技術的には何度も呼ぶことができます。
+
+そのため、Promisification はコールバックを1度だけ呼ぶ関数のみを対象としています。それ以降の呼び出しは無視されます。
+```
diff --git a/1-js/11-async/07-microtask-queue/article.md b/1-js/11-async/07-microtask-queue/article.md
new file mode 100644
index 0000000000..1459076975
--- /dev/null
+++ b/1-js/11-async/07-microtask-queue/article.md
@@ -0,0 +1,112 @@
+
+# Microtasks
+
+Promise ハンドラ `.then`/`.catch`/`.finally` は常に非同期です。
+
+たとえ Promise がすくに解決されたとしても、`.then`/`.catch`/`.finally` の *下* にあるコードはこれらのハンドラの前に実行されます。
+
+デモです:
+
+```js run
+let promise = Promise.resolve();
+
+promise.then(() => alert("promise done!"));
+
+alert("code finished"); // このアラートが最初に表示されます
+```
+
+実行すると、`code finished` が最初に現れ、その後 `promise done!` が表示されます。
+
+Promise は最初から確実に終わっているので、これは奇妙です。
+
+なぜ `.then` が後でトリガーされたのでしょう？何がおきているのでしょう？
+
+## Microtasks キュー
+
+非同期タスクには適切な管理が必要です。そのために、ECMA 標準では内部キュー `PromiseJobs` について述べています。これは "microtask キュー"(v8 用語)と呼ばれることが多いです。
+
+[スペック](https://tc39.github.io/ecma262/#sec-jobs-and-job-queues)では次のように述べられています:
+
+- キューは先入れ先出し(first-in-first-out)です: 先にキューに入れられたタスクが最初に実行されます。
+- タスクの実行は他になにも実行されていないときにだけ開始されます。
+
+簡単に言うと、Promise が準備できると、その `.then/catch/finally` ハンドラはキューに入れられます。それらはまだ実行されていません。JavaScriptエンジンは、現在のコードがないときにキューからタスクを取り、実行します。
+
+なので、上の例では先に "code finished" が表示されました。
+
+
+
+Promise ハンドラは常に内部キューを通ります。
+
+複数の `.then/catch/finally` のチェーンがある場合、それらはすべて非同期に実行されます。つまり、最初にキューに入れられ、現在のコードが完了し、前にキューに入れられたハンドラが終了したときに実行されます。
+
+**順序が重要な場合はどうなるでしょうか？ `promise done` の後に `code finished` を処理したい場合はどうすればよいでしょう？**
+
+簡単です、単に `.then` でキューに入れるだけです:
+
+```js run
+Promise.resolve()
+ .then(() => alert("promise done!"))
+ .then(() => alert("code finished"));
+```
+
+これで順番は期待通りです。
+
+## 未処理の拒否(Unhandled rejection)
+
+ の章の `unhandledrejection` イベントを覚えていますか？
+
+今や、我々は JavaScript が未処理の拒否があったことをどのように見つけるのかを正確に知ることができます。
+
+**"未処理の拒否" は、microtask キューの最後で Promise エラーが処理されない場合に発生します。**
+
+通常、エラーが予想される場合には、それを処理するために Promise チェーンに `.catch` を追加します:
+
+```js run
+let promise = Promise.reject(new Error("Promise Failed!"));
+*!*
+promise.catch(err => alert('caught'));
+*/!*
+
+// 実行されません: error handled
+window.addEventListener('unhandledrejection', event => alert(event.reason));
+```
+
+...ですが、`.catch` を忘れていた場合、microtask キューが空になった後、エンジンはイベントをトリガーします:
+
+```js run
+let promise = Promise.reject(new Error("Promise Failed!"));
+
+// 実行されます: Promise Failed!
+window.addEventListener('unhandledrejection', event => alert(event.reason));
+```
+
+仮に、次のように後でエラーを処理するとどうなるでしょう？:
+
+```js run
+let promise = Promise.reject(new Error("Promise Failed!"));
+*!*
+setTimeout(() => promise.catch(err => alert('caught')), 1000);
+*/!*
+
+// 実行されます: Error: Promise Failed!
+window.addEventListener('unhandledrejection', event => alert(event.reason));
+```
+
+実行すると、最初に `Promise Failed!` が表示され、その後 `caught` が表示されます。
+
+microtask キューについて知らなければ、不思議に思うでしょう: "なぜ `unhandledrejection` ハンドラが実行されるのでしょう？ エラーをキャッチしているのに!"
+
+しかし、今は `unhandledrejection` は microtask キューが完了したときに生成されることが分かりました。: エンジンは Promise を検査し、いずれかが "拒否(rejected)" 状態であれば、イベントをトリガーします。
+
+上記の例では、`setTimeout` により追加された `.catch` もトリガーされますが、`unhandledrejection` はすでに発生した後なので、何も変わりません。
+
+## サマリ
+
+すべての Promise アクションは、"microtask キュー"(v8 用語)とも呼ばれる、内部の "promise jobs" キューを通るため、Promise の処理は常に非同期です。
+
+そのため、`.then/catch/finally` ハンドラは常に現在のコードが終了した後に呼ばれます。
+
+あるコードが `.then/catch/finally` の後に実行されることを保証する必要がある場合、Promise チェーンを使い `.then` で呼び出します
+
+ブラウザも Node.js も含めほとんどの JavaScript エンジンでは、microtask の概念は "イベントループ" と "microtask" と密接に関連しています。これらは Promise とは直接は関係ないので、チュートリアルの別のパート、チャプター で説明しています。
diff --git a/1-js/11-async/07-microtask-queue/promiseQueue.svg b/1-js/11-async/07-microtask-queue/promiseQueue.svg
new file mode 100644
index 0000000000..c802c44a01
--- /dev/null
+++ b/1-js/11-async/07-microtask-queue/promiseQueue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/11-async/08-async-await/01-rewrite-async/solution.md b/1-js/11-async/08-async-await/01-rewrite-async/solution.md
new file mode 100644
index 0000000000..4daab2935c
--- /dev/null
+++ b/1-js/11-async/08-async-await/01-rewrite-async/solution.md
@@ -0,0 +1,33 @@
+
+補足はコードの下にあります:
+
+```js run
+async function loadJson(url) { // (1)
+ let response = await fetch(url); // (2)
+
+ if (response.status == 200) {
+ let json = await response.json(); // (3)
+ return json;
+ }
+
+ throw new Error(response.status);
+}
+
+loadJson('no-such-user.json')
+ .catch(alert); // Error: 404 (4)
+```
+
+補足:
+
+1. 関数 `loadJson` は `async` になります。
+2. すべての内側の `.then` は `await` に置き換えられます。
+3. 次のように、await するのではなく、`response.json()` を返すこともできます。:
+
+ ```js
+ if (response.status == 200) {
+ return response.json(); // (3)
+ }
+ ```
+
+ そうすると、外側のコードはその promise を解決するために `await` する必要があります。
+4. `loadJson` からスローされたエラーは `.catch` で処理されます。そこでは `await loadJson(…)` を使うことができません。なぜなら `async` 関数の中ではないからです。
diff --git a/6-async/05-async-await/01-rewrite-async/task.md b/1-js/11-async/08-async-await/01-rewrite-async/task.md
similarity index 100%
rename from 6-async/05-async-await/01-rewrite-async/task.md
rename to 1-js/11-async/08-async-await/01-rewrite-async/task.md
diff --git a/6-async/05-async-await/01-rewrite-async-2/solution.md b/1-js/11-async/08-async-await/02-rewrite-async-2/solution.md
similarity index 100%
rename from 6-async/05-async-await/01-rewrite-async-2/solution.md
rename to 1-js/11-async/08-async-await/02-rewrite-async-2/solution.md
diff --git a/6-async/05-async-await/01-rewrite-async-2/task.md b/1-js/11-async/08-async-await/02-rewrite-async-2/task.md
similarity index 100%
rename from 6-async/05-async-await/01-rewrite-async-2/task.md
rename to 1-js/11-async/08-async-await/02-rewrite-async-2/task.md
diff --git a/1-js/11-async/08-async-await/03-async-from-regular/solution.md b/1-js/11-async/08-async-await/03-async-from-regular/solution.md
new file mode 100644
index 0000000000..f551356ca6
--- /dev/null
+++ b/1-js/11-async/08-async-await/03-async-from-regular/solution.md
@@ -0,0 +1,20 @@
+
+
+`async` 呼び出しを Promise として扱い、それに `.then` をつけるだけです。
+
+```js run
+async function wait() {
+ await new Promise(resolve => setTimeout(resolve, 1000));
+
+ return 10;
+}
+
+function f() {
+ // 1秒後に 10を表示
+*!*
+ wait().then(result => alert(result));
+*/!*
+}
+
+f();
+```
diff --git a/1-js/11-async/08-async-await/03-async-from-regular/task.md b/1-js/11-async/08-async-await/03-async-from-regular/task.md
new file mode 100644
index 0000000000..8991fc723c
--- /dev/null
+++ b/1-js/11-async/08-async-await/03-async-from-regular/task.md
@@ -0,0 +1,20 @@
+
+# 非 async から async を呼び出す
+
+"通常" の関数があります。そこから `async` 呼び出しを行い、その結果を使うにはどうすればよいでしょう？
+
+```js
+async function wait() {
+ await new Promise(resolve => setTimeout(resolve, 1000));
+
+ return 10;
+}
+
+function f() {
+ // ...ここに何を書きますか？
+ // async wait() をして 10 を取得するのを待ちます
+ // 覚えておいてください、"await" は使えません
+}
+```
+
+P.S. このタスクは技術的には非常に単純です。が、async/await に不慣れた開発者によくある質問です。
diff --git a/1-js/11-async/08-async-await/article.md b/1-js/11-async/08-async-await/article.md
new file mode 100644
index 0000000000..4c50228666
--- /dev/null
+++ b/1-js/11-async/08-async-await/article.md
@@ -0,0 +1,311 @@
+# Async/await
+
+"async/await" と呼ばれる、より快適に promise を利用する特別な構文があります。驚くほど簡単に理解し、使用することができます。
+
+## Async 関数
+
+`async` キーワードから始めましょう。次のように関数の前に置くことができます:
+
+```js
+async function f() {
+ return 1;
+}
+```
+
+関数の前の用語 "async" は1つの単純なことを意味します: 関数は常に promise を返します。コード中に `return <非 promise>` がある場合、JavaScript は自動的にその値を持つ 解決された promise にラップします。
+
+例えば、上のコードは 結果 `1` を持つ解決された promise を返します。テストしてみましょう: t it:
+
+```js run
+async function f() {
+ return 1;
+}
+
+f().then(alert); // 1
+```
+
+...明示的に promise を返すこともでき、それは同じです:
+
+```js run
+async function f() {
+ return Promise.resolve(1);
+}
+
+f().then(alert); // 1
+```
+
+したがって、`async` は関数が promise を返すことを保証し、非promise をその中にラップします。シンプルですよね？しかし、それだけではありません。`async` 関数の中でのみ動作する別のキーワード `await` があります。これはとてもクールです。
+
+## Await
+
+構文:
+
+```js
+// async 関数の中でのみ動作します
+let value = await promise;
+```
+
+キーワード `await` は promise が確定しその結果を返すまで、JavaScript を待機させます。 ult.
+
+これは1秒で解決する promise の例です:
+```js run
+async function f() {
+
+ let promise = new Promise((resolve, reject) => {
+ setTimeout(() => resolve("done!"), 1000)
+ });
+
+*!*
+ let result = await promise; // promise が解決するまで待ちます (*)
+*/!*
+
+ alert(result); // "done!"
+}
+
+f();
+```
+
+関数の実行は行 `(*)` で "一時停止" し、promise が確定したときに再開し、`result` がその結果になります。 そのため、上のコードは1秒後に "done!" を表示します。
+
+`await` は文字通り promise が確定するまで JavaScript を待ってから、その結果で続くことに注目しましょう。その間、エンジンは他のジョブ(他のスクリプトを実行し、イベントを処理するなど)を実行することができるため、CPUリソースを必要としません。
+
+これは、`promise.then` よりも promise の結果を得るためのより洗練された構文です。読みやすく、書くのが簡単です。
+
+````warn header="通常の関数で `await` を使うことはできません"
+非async関数で `await` を使おうとした場合、構文エラーになります。:
+
+```js run
+function f() {
+ let promise = Promise.resolve(1);
+*!*
+ let result = await promise; // Syntax error
+*/!*
+}
+```
+
+関数の前に `async` を置き忘れた場合にこのエラーが発生します。先程言ったように、`await` は `async function` の中でのみ動作します。
+````
+
+チャプター から例 `showAvatar()` を取り、`async/await` を使って書き直してみましょう:
+
+1. `.then` 呼び出しを `await` に置き換える必要があります。
+2. また、機能させるために関数を `async` にする必要があります。
+
+```js run
+async function showAvatar() {
+
+ // JSON を読み込む
+ let response = await fetch('/article/promise-chaining/user.json');
+ let user = await response.json();
+
+ // github ユーザを読み込む
+ let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
+ let githubUser = await githubResponse.json();
+
+ // アバターを表示する
+ let img = document.createElement('img');
+ img.src = githubUser.avatar_url;
+ img.className = "promise-avatar-example";
+ document.body.append(img);
+
+ // 3秒待つ
+ await new Promise((resolve, reject) => setTimeout(resolve, 3000));
+
+ img.remove();
+
+ return githubUser;
+}
+
+showAvatar();
+```
+
+非常にスッキリし、読みやすいですよね？前よりもはるかに良いです。
+
+````smart header="`await` はトップレベルのコードでは動作しません"
+最近のブラウザは、モジュールの内側ではトップレベルの `await` は問題なく動作します。モジュールに関しては の記事で説明します。
+
+例:
+
+```js run module
+// モジュールのトップレベルでコードが実行される想定です
+let response = await fetch('/article/promise-chaining/user.json');
+let user = await response.json();
+
+console.log(user);
+```
+
+モジュール未使用、あるいは[古いブラウザ](https://caniuse.com/mdn-javascript_operators_await_top_level)でサポートが必要な場合、無名の async 関数でラップする方法があります。
+
+次のようになります:
+
+```js
+(async () => {
+ let response = await fetch('/article/promise-chaining/user.json');
+ let user = await response.json();
+ ...
+})();
+```
+
+````
+
+````smart header="`await` は thenable を許容します"
+`promise.then` のように、`await` は thenable オブジェクト(`then` メソッドを呼ぶことができるもの)を使うことができます。繰り返しになりますが、このアイデアは、サードパーティオブジェクトは promise ではなく、promise 互換である場合があるということです(`.then` をサポートしている場合、`await` で使えます)。
+
+例えば、ここで `await` は `new Thenable(1)` を許容します:
+
+```js run
+class Thenable {
+ constructor(num) {
+ this.num = num;
+ }
+ then(resolve, reject) {
+ alert(resolve); // function() { native code }
+ // 1000ms 後に this.num*2 で解決する
+ setTimeout(() => resolve(this.num * 2), 1000); // (*)
+ }
+};
+
+async function f() {
+ // 1秒待って、結果は 2 になる
+ let result = await new Thenable(1);
+ alert(result);
+}
+
+f();
+```
+
+もし `await` が `.then` で非promise オブジェクトを得た場合、引数としてネイティブ関数 `resolve`, `reject` を提供しているメソッドを呼び出します。次に `await` はいずれかが呼ばれるまで待ち(上の例では、行 `(*)` です)、その結果で進みます。
+````
+
+````smart header="Async メソッド"
+クラスメソッドもまた async になれます。ただ前に `async` を置くだけです。
+
+```js run
+class Waiter {
+*!*
+ async wait() {
+*/!*
+ return await Promise.resolve(1);
+ }
+}
+
+new Waiter()
+ .wait()
+ .then(alert); // 1
+```
+意味は同じです: 返却される値が promise であることを保証し、`await` を有効にします。
+
+````
+## エラー処理
+
+もし promise が正常に解決すると、`await promise` は結果を返します。しかし拒否(reject) の場合はエラーをスローします。それはちょうどその行に `throw` 文があるように振る舞います。
+
+このコードは:
+
+```js
+async function f() {
+*!*
+ await Promise.reject(new Error("Whoops!"));
+*/!*
+}
+```
+
+...これと同じです:
+
+```js
+async function f() {
+*!*
+ throw new Error("Whoops!");
+*/!*
+}
+```
+
+実際には、promise を拒否するまでに時間がかかる場合があります。なので、`await` は待ち、その後エラーをスローします。
+
+エラーは `try..catch` でキャッチすることができ、それは通常の `throw` と同じ方法です:
+
+```js run
+async function f() {
+
+ try {
+ let response = await fetch('http://no-such-url');
+ } catch(err) {
+*!*
+ alert(err); // TypeError: failed to fetch
+*/!*
+ }
+}
+
+f();
+```
+
+エラーの場合、コントロールは `catch` ブロックにジャンプします。複数行をラップすることも可能です:
+
+```js run
+async function f() {
+
+ try {
+ let response = await fetch('/no-user-here');
+ let user = await response.json();
+ } catch(err) {
+ // fetch と response.json 両方のエラーをキャッチ
+ alert(err);
+ }
+}
+
+f();
+```
+
+もし `try..catch` がない場合、async 関数 `f()` の呼び出しによって生成された promise は拒否されます。それを処理にするには `.catch` を追加します。:
+
+```js run
+async function f() {
+ let response = await fetch('http://no-such-url');
+}
+
+// f() は拒否された promise になる
+*!*
+f().catch(alert); // TypeError: failed to fetch // (*)
+*/!*
+```
+
+そこに `.catch` を追加し忘れると、未処理の promise エラーを得ます(それはコンソールで見えます)。チャプター で説明した通り、グローバルイベントハンドラを使用することでこのようなエラーをキャッチすることができます。
+
+
+```smart header="`async/await` と `promise.then/catch`"
+`async/await` を使用するとき、`.then` はほとんど必要がありません。なぜなら `await` は私たちを待っているからです。そして `.catch` の代わりに通常の `try..catch` を使うことができます。それは通常（常にではないですが）より便利です。
+
+しかし、コードの最上位のレベルでは、`async` 関数の外にいるときは構文的に `await` を使うことができないため、最終的な結果または落ちるようなエラーを処理するために `.then/catch` を追加するのが普通です。上の例の行 `(*)` のように。
+```
+
+````smart header="`async/await` は `Promise.all` とうまく動作します"
+複数の promise を待つ必要があるとき、`Promise.all` でラップしてから `await` できます。
+
+```js
+// 結果の配列をまつ
+let results = await Promise.all([
+ fetch(url1),
+ fetch(url2),
+ ...
+]);
+```
+
+エラーが発生した場合、それは通常通り伝搬します: 失敗した promise から `Promise.all` に伝播し、呼び出しのまわりで `try..catch` を使ってキャッチができる例外になります。
+
+````
+
+## サマリ
+
+関数の前の `async` キーワードは2つの効果があります:
+
+1. 常に promise を返します
+2. その中で `await` を使えるようにします
+
+promise の前の `await` キーワードは、 promise が確定するまで JavaScript を待たせ、次のことをします:
+
+1. それがエラーであれば、まさにその場所で `throw error` が呼び出されたのと同じ例外が生成されます。
+2. それ以外の場合は、結果を返すので、値に割り当てることができます。
+
+共に、読み書きするのが簡単な非同期コードを書くことができる素晴らしいフレームワークを提供します。
+
+`async/await` と一緒に `promise.then/catch` を書く必要はほとんどありませんが、時には（例えば最も外側のスコープで）これらのメソッドを使わなければならないことがあるので、これらが promise に基づいていることを忘れてはいけません。 また、`Promise.all` は同時に多くのタスクを待つ良い方法です。
diff --git a/6-async/05-async-await/head.html b/1-js/11-async/08-async-await/head.html
similarity index 100%
rename from 6-async/05-async-await/head.html
rename to 1-js/11-async/08-async-await/head.html
diff --git a/1-js/11-async/index.md b/1-js/11-async/index.md
new file mode 100644
index 0000000000..a626cee4f0
--- /dev/null
+++ b/1-js/11-async/index.md
@@ -0,0 +1,2 @@
+
+# Promise, async/await
diff --git a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/solution.js b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/solution.js
new file mode 100644
index 0000000000..45c8b071bb
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/solution.js
@@ -0,0 +1,9 @@
+function* pseudoRandom(seed) {
+ let value = seed;
+
+ while(true) {
+ value = value * 16807 % 2147483647
+ yield value;
+ }
+
+};
diff --git a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/test.js b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/test.js
new file mode 100644
index 0000000000..5f3a0ae87e
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/test.js
@@ -0,0 +1,21 @@
+describe("pseudoRandom", function() {
+
+ it("follows the formula", function() {
+ let generator = pseudoRandom(1);
+
+ assert.equal(generator.next().value, 16807);
+ assert.equal(generator.next().value, 282475249);
+ assert.equal(generator.next().value, 1622650073);
+ });
+
+
+ it("returns same value for the same seed", function() {
+ let generator1 = pseudoRandom(123);
+ let generator2 = pseudoRandom(123);
+
+ assert.deepEqual(generator1.next(), generator2.next());
+ assert.deepEqual(generator1.next(), generator2.next());
+ assert.deepEqual(generator1.next(), generator2.next());
+ });
+
+});
diff --git a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md
new file mode 100644
index 0000000000..0497128889
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md
@@ -0,0 +1,38 @@
+```js run demo
+function* pseudoRandom(seed) {
+ let value = seed;
+
+ while(true) {
+ value = value * 16807 % 2147483647
+ yield value;
+ }
+
+};
+
+let generator = pseudoRandom(1);
+
+alert(generator.next().value); // 16807
+alert(generator.next().value); // 282475249
+alert(generator.next().value); // 1622650073
+```
+
+注意してください。次のように通常の関数でも同じことができます:
+
+```js run
+function pseudoRandom(seed) {
+ let value = seed;
+
+ return function() {
+ value = value * 16807 % 2147483647;
+ return value;
+ }
+}
+
+let generator = pseudoRandom(1);
+
+alert(generator()); // 16807
+alert(generator()); // 282475249
+alert(generator()); // 1622650073
+```
+
+これは、このコンテキストでは問題ありません。しかし、どこかで役立つかのしれない `for..of` を使ったイテレートや、ジェネレータの合成を使うことはできなくなります。
diff --git a/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/task.md b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/task.md
new file mode 100644
index 0000000000..17d390a2f6
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/task.md
@@ -0,0 +1,34 @@
+
+# 疑似乱数ジェネレータ
+
+ランダムデータが必要となる多くの場面があります。
+
+その1つはテストです。テキスト、数値など、上手くテストを行うためにはランダムなデータが必要になります。
+
+JavaScript では `Math.random()` を使うことができます。しかし、何か問題が起きた場合、まったく同じデータを使用して繰り返しテストができればよいです。
+
+そのために、"シード疑似乱数ジェネレータ" と呼ばれるものが使われます。それらは最初の値である "シード(種)" を取り、以降公式を使って次の値を生成します。同じシードは同じ一覧の数列を生成するので、フロー全体を簡単に再現することができます。繰り返すのに覚えておく必要があるのはシードだけです。
+
+これは、このような公式の例で、幾分か一様に分布した値を生成します。:
+
+```
+next = previous * 16807 % 2147483647
+```
+
+シードに `1` を使うと、値は次のようになります:
+1. `16807`
+2. `282475249`
+3. `1622650073`
+4. ...など...
+
+このタスクは、`seed` を取り、この式でジェネレータを生成するジェネレータ関数 `pseudoRandom(seed)` を作成することです。
+
+使用例:
+
+```js
+let generator = pseudoRandom(1);
+
+alert(generator.next().value); // 16807
+alert(generator.next().value); // 282475249
+alert(generator.next().value); // 1622650073
+```
diff --git a/1-js/12-generators-iterators/1-generators/article.md b/1-js/12-generators-iterators/1-generators/article.md
new file mode 100644
index 0000000000..b1907aa307
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/article.md
@@ -0,0 +1,469 @@
+
+# ジェネレータ
+
+通常の関数は、単一の値だけを返します(もしくはなにも返しません)。
+
+ジェネレータは、要求に応じて次々に複数の値、場合によっては無限の数の値を返す("生み出す")ことができます。それらは [反復可能(iterables)](info:iterable) と上手く機能し、データストリームを簡単に作成することができます。
+
+## ジェネレータ関数
+
+ジェネレータを作成するには、特別な構文構造: `function*`、いわゆる "ジェネレータ関数" を使用する必要があります。
+
+このようになります:
+
+```js
+function* generateSequence() {
+ yield 1;
+ yield 2;
+ return 3;
+}
+```
+
+`generateSequence()` が呼ばれたとき、コードは実行されません。代わりに、"ジェネレータ" と呼ばれる特別なオブジェクトを返します。
+
+```js
+// "ジェネレータ関数" は "ジェネレータオブジェクト" を生成します。
+let generator = generateSequence();
+```
+
+`generator` オブジェクトは "凍結された関数呼び出し" と捉えることができます。:
+
+
+
+作成時に、コードの実行は最初の部分で一時停止されます。
+
+ジェネレータのメインのメソッドは `next()` です。呼ばれると、最も近い `yield ` 文まで実行を再開します。その後、実行は一時停止し、値は外部のコードに返却されます。
+
+例えば、ここではジェネレータを作成し、最初に戻される値を取得しています:
+
+```js run
+function* generateSequence() {
+ yield 1;
+ yield 2;
+ return 3;
+}
+
+let generator = generateSequence();
+
+*!*
+let one = generator.next();
+*/!*
+
+alert(JSON.stringify(one)); // {value: 1, done: false}
+```
+
+`next()` の結果は常にオブジェクトです:
+- `value`: 戻された値
+- `done`: コードがまだ終わっていない場合は `false`, そうでなければ `true`.
+
+現時点では、最初の値だけ取得しました:
+
+
+
+再び `generator.next()` を呼びましょう。実行が再開し、次の `yield` を貸します。:
+
+```js
+let two = generator.next();
+
+alert(JSON.stringify(two)); // {value: 2, done: false}
+```
+
+
+
+そして、3回目を呼び出すと、実行は関数を終了する `return` 文に到達します。
+
+```js
+let three = generator.next();
+
+alert(JSON.stringify(three)); // {value: 3, *!*done: true*/!*}
+```
+
+
+
+これでジェネレータが済みました。`done:true` でそれが判断でき、`value:3` を最終結果として処理します。
+
+新たな `generator.next()` 呼び出しはこれ以上意味をなしません。それを行っても、同じオブジェクト `{done: true}` が返却されます。
+
+ジェネレータを "ロールバック" する方法はありません。しかし、`generateSequence()` 呼び出しによって、別の物を作ることはできます。
+
+これまでのところ、理解すべき最も重要なことは、ジェネレータ関数は通常の関数とは異なり、コードを実行しないことです。それらは "ジェネレータ工場(ファクトリー)" として機能します。 `function*` の実行はジェネレータを返し、その後、ジェネレータに値を要求します。
+
+```smart header="`function* f(…)` それとも `function *f(…)`?"
+これは軽い宗教的な質問で、両方の構文は正しいです。
+
+しかし、アスタリスク `*`はジェネレータ関数であることを表し、名前ではなく種類を表すので、通常は最初の構文がより好まれます。したがって、`function` キーワードに付けてください。
+```
+
+## ジェネレータは反復可能です
+
+おそらく `next()` メソッドを見て既に推測していると思いますが、ジェネレータは [反復可能(iterable)](info:iterable)です。
+
+`for..of` によって、値をループすることができます:
+
+```js run
+function* generateSequence() {
+ yield 1;
+ yield 2;
+ return 3;
+}
+
+let generator = generateSequence();
+
+for(let value of generator) {
+ alert(value); // 1, 次に 2
+}
+```
+
+これは `.next().value` を呼び出すよりも、ジェネレータを操作するのにはるかに見栄えの良い方法ですね。
+
+...しかし、注意してください: 上の例では `1` が表示された後 `2` が表示され、それですべてです。`3` は表示されません!
+
+これは、`done: true` のとき、for-of イテレーションは最後の `value` を無視するからです。なので、すべての結果を `for..of` で表示したい場合は、それらを `yield` で返さなければなりません:
+
+```js run
+function* generateSequence() {
+ yield 1;
+ yield 2;
+*!*
+ yield 3;
+*/!*
+}
+
+let generator = generateSequence();
+
+for(let value of generator) {
+ alert(value); // 1, 次に 2, 次に 3
+}
+```
+
+当然、ジェネレータは反復可能なので、スプレッド演算子`...` のような、関連するすべての機能を呼び出すことができます。:
+
+```js run
+function* generateSequence() {
+ yield 1;
+ yield 2;
+ yield 3;
+}
+
+let sequence = [0, ...generateSequence()];
+
+alert(sequence); // 0, 1, 2, 3
+```
+
+上のコードでは、`...generateSequence()` は iterable をアイテムの配列に変換します(スプレッド演算子についてはチャプター [](info:rest-parameters-spread-operator#spread-operator)) を読んでください)。
+
+## 反復可能(iterable)の代わりにジェネレータを使用する
+
+少し前、チャプター [](info:iterable) で、値 `from..to` を返す反復可能な `range` オブジェクトを作りました。
+
+ここで、そのコードを思い出しましょう。:
+
+```js run
+let range = {
+ from: 1,
+ to: 5,
+
+ // for..of は最初にこのメソッドを一度呼び出します
+ [Symbol.iterator]() {
+ // ...これは iterator オブジェクトを返します:
+ // 以降, for..of はそのオブジェクトでのみ機能し、次の値を要求します。
+ return {
+ current: this.from,
+ last: this.to,
+
+ // next() は for..of ループの各イテレーションで呼ばれます
+ next() {
+ // 値をオブジェクトとして返す必要があります {done:.., value :...}
+ if (this.current <= this.last) {
+ return { done: false, value: this.current++ };
+ } else {
+ return { done: true };
+ }
+ }
+ };
+ }
+};
+
+alert([...range]); // 1,2,3,4,5
+```
+
+ジェネレータを使用して反復可能(iterable)のシーケンスを作るほうが、遥かにエレガントです:
+
+```js run
+function* generateSequence(start, end) {
+ for (let i = start; i <= end; i++) {
+ yield i;
+ }
+}
+
+let sequence = [...generateSequence(1,5)];
+
+alert(sequence); // 1, 2, 3, 4, 5
+```
+
+...ですが、仮にカスタムの `range` オブジェクトを保持したいとしたらどうなるでしょうか？
+
+## Symbol.iterator からジェネレータへの変換
+
+ジェネレータを `Symbol.iterator` として提供することで、両方の世界からベストを得ることができます:
+
+```js run
+let range = {
+ from: 1,
+ to: 5,
+
+ *[Symbol.iterator]() { // [Symbol.iterator]: function*() の短縮記法
+ for(let value = this.from; value <= this.to; value++) {
+ yield value;
+ }
+ }
+};
+
+alert( [...range] ); // 1,2,3,4,5
+```
+
+`range` オブジェクトはいま反復可能です。
+
+これは非常に上手く機能します。なぜなら、`range[Symbol.iterator]` が呼ばれたとき、:
+- オブジェクトを返します(いまはジェネレータです)。
+- そのオブジェクトは `.next()` メソッドを持っています(そう、ジェネレータはそれを持っています)。
+- これは、`{value: ..., done: true/false}` の形式で値を返します。
+
+もちろん、これは偶然ではありません。ジェネレータは iterable をより簡単にすることを目的としているので、そのようにすることができます。
+
+ジェネレータを使用した最後のパターンは、元の iterable なコードよりも遥かに簡潔で、かつ同じ機能を提供します。
+
+```smart header="ジェネレータは永遠に続く可能性があります"
+上の例では、有限の数字列を生成しましたが、永遠に値を生成するジェネレータを作ることも可能です。例えば、終わりのない疑似乱数の列です。
+
+それは必ず `for..of` の中で `break` を必要とします。そうでなければ、ループは永遠に繰り返され、ハングします。
+```
+
+## ジェネレータの合成
+
+ジェネレータの合成は、ジェネレータ同士を透過的に "埋め込む" ことを可能にするジェネレータの特別な機能です。
+例えば、次のシーケンスを生成したいとします。
+
+- 数字 `0..9` (文字コード 48..57)
+- 大文字の `A..Z` が続く(文字コード 65..90)
+- アルファベット文字 `a..z` が続く(文字コード 97..122)
+
+次に、そこから選択した文字でパスワードを作成することを考えます(同様にして構文文字を追加することも可能です)が、最初にシーケンスを生成する必要があります。
+
+すでに `function* generateSequence(start, end)` があるので、3つのシーケンスを順に作りだすのに、これを再利用しましょう。
+
+通常の関数では、複数の別々の関数からの結果をまとめるためには、それらを呼び出し、結果を格納し、最後に結合します。
+
+ジェネレータの場合は、次のようによりスマートに行うことができます:
+
+```js run
+function* generateSequence(start, end) {
+ for (let i = start; i <= end; i++) yield i;
+}
+
+function* generatePasswordCodes() {
+
+*!*
+ // 0..9
+ yield* generateSequence(48, 57);
+
+ // A..Z
+ yield* generateSequence(65, 90);
+
+ // a..z
+ yield* generateSequence(97, 122);
+*/!*
+
+}
+
+let str = '';
+
+for(let code of generatePasswordCodes()) {
+ str += String.fromCharCode(code);
+}
+
+alert(str); // 0..9A..Za..z
+```
+
+この例にある特別な `yield*` ディレクティブは合成を担当します。これは、別のジェネレータに実行を *委譲(デリゲート)* します。あるいは、単純に言うと、ジェネレータを実行し、あたかもそれらが呼び出し元のジェネレータ自体によって行われたかのように、それらの yield を外部に透過的に転送します。
+
+結果は、入れ子のジェネレータのコードがインライン展開された場合と同じです。:
+
+```js run
+function* generateSequence(start, end) {
+ for (let i = start; i <= end; i++) yield i;
+}
+
+function* generateAlphaNum() {
+
+*!*
+ // yield* generateSequence(48, 57);
+ for (let i = 48; i <= 57; i++) yield i;
+
+ // yield* generateSequence(65, 90);
+ for (let i = 65; i <= 90; i++) yield i;
+
+ // yield* generateSequence(97, 122);
+ for (let i = 97; i <= 122; i++) yield i;
+*/!*
+
+}
+
+let str = '';
+
+for(let code of generateAlphaNum()) {
+ str += String.fromCharCode(code);
+}
+
+alert(str); // 0..9A..Za..z
+```
+
+ジェネレータの合成は、あるジェネレータのフローを別のジェネレータに挿入するための、自然な方法です。
+
+入れ子のジェネレータからの値のフローが無限の場合でも動作します。それはシンプルで中間結果を格納するための余分なメモリを必要としません。
+
+## "yield" は双方向
+
+ここまで、ジェネレータは "強化されたイテレータ" のようでした。これはよく利用される方法です。
+
+しかし、実際にはジェネレータはより強力で柔軟です。
+
+なぜなら、`yield` は双方向だからです: 結果を外部に返すだけでなく、ジェネレータ内部に値を渡す事もできます。
+
+そうするためには、引数を持つ `generator.next(arg)` を呼び出す必要があります。この引数は `yield` の結果になります。
+
+例を見てみましょう:
+
+```js run
+function* gen() {
+*!*
+ // 質問を外側のコードに渡して答えを待ちます
+ let result = yield "2 + 2?"; // (*)
+*/!*
+
+ alert(result);
+}
+
+let generator = gen();
+
+let question = generator.next().value; // <-- yield は値を返します
+
+generator.next(4); // --> 結果をジェネレータに渡します
+```
+
+
+
+1. 最初の呼び出し `generator.next()` は常に引数なしです。実行を開始し、最初の `yield` ("2+2?") の結果を返します。この時点で、ジェネレータは実行を一時停止します(依然としてその行にいます)。
+2. 次に、上の図にあるように、`yield` の結果は呼び出しコードの `question` 変数に入ります。
+3. `generator.next(4)` でジェネレータが再開し、結果として `4` が入ります: `let result = 4`
+
+外部のコードはすぐに `next(4)` を呼び出す必要はないことに注目してください。計算に時間がかかる場合があります。これも有効なコードです。:
+
+```js
+// ある時間経過後にジェネレータを再開する
+setTimeout(() => generator.next(4), 1000);
+```
+
+構文は少し変に見えるかもしれません。関数と呼び出しコードがお互いに値を渡し合うことはめったにありません。しかし、それがまさに起こっていることです。
+
+より明白にするために、これは別の例です:
+
+```js run
+function* gen() {
+ let ask1 = yield "2 + 2?";
+
+ alert(ask1); // 4
+
+ let ask2 = yield "3 * 3?"
+
+ alert(ask2); // 9
+}
+
+let generator = gen();
+
+alert( generator.next().value ); // "2 + 2?"
+
+alert( generator.next(4).value ); // "3 * 3?"
+
+alert( generator.next(9).done ); // true
+```
+
+実行の図です:
+
+
+
+1. まず、`.next()` は実行を開始します。そして最初の `yield` に到達します。
+2. 結果は外部のコードに返却されます。
+3. 2つ目の `.next(4)` は、`4` を最初の `yield` の結果としてジェネレータに戻し、実行を再開します。
+4. ...2つ目の `yield` に到達します。これはジェネレータ呼び出しの結果になります。
+5. 3つ目の `.next(9)` 2つ目の `yield` の結果として `9` をジェネレータに渡し実行を再開します。そして関数の終わりに到達するので、`done: true` です。
+
+これは "ピンポン" ゲームのようです。各 `next(value)` (最初のものを除く) はジェネレータに値を渡し、それは現在の `yield` の結果になり、次の `yield` の結果を戻します。
+
+## generator.throw
+
+上の例で見たように、外部のコードは `yield` の結果として値をジェネレータに渡す可能性があります。
+
+...しかし、そこでエラーを起こす(スローする)こともできます。エラーも結果の1つなので、これは自然なことです。
+
+エラーを `yield` に渡すには、`generator.throw(err)` を呼び出す必要があります。この場合、`err` は `yield` のある行に投げられます。
+
+例えば、ここで `"2 + 2?"` の yield はエラーになります:
+
+```js run
+function* gen() {
+ try {
+ let result = yield "2 + 2?"; // (1)
+
+ alert("The execution does not reach here, because the exception is thrown above");
+ } catch(e) {
+ alert(e); // エラーを表示します
+ }
+}
+
+let generator = gen();
+
+let question = generator.next().value;
+
+*!*
+generator.throw(new Error("The answer is not found in my database")); // (2)
+*/!*
+```
+
+エラーは、行 `(2)` でジェネレータにスローされ、`yield` のある行 `(1)` で例外となります。上の例では、`try..catch` がそれをキャッチし表示しています。
+
+キャッチしない場合、他の例外のように、ジェネレータは呼び出しコードで "落ちます"。
+
+呼び出しコードの現在の行は、`(2)` とラベル付けされた `generator.throw` を持つ行です。なので、次のようにここでキャッチすることができます:
+
+```js run
+function* generate() {
+ let result = yield "2 + 2?"; // この行でエラー
+}
+
+let generator = generate();
+
+let question = generator.next().value;
+
+*!*
+try {
+ generator.throw(new Error("The answer is not found in my database"));
+} catch(e) {
+ alert(e); // エラーを表示します
+}
+*/!*
+```
+
+ここでエラーをキャッチしなければ、通常どおり、外部の呼び出しコード(あれば)へ渡され、キャッチされなければスクリプトが強制終了します。
+
+## サマリ
+
+- ジェネレータはジェネレータ関数 `function*(…) {…}` により生成されます。
+- ジェネレータ内部にのみ `yield` 演算子が存在します。
+- 外部のコードとジェネレータは `next/yield` 呼び出しを通して結果をやり取りすることができます。
+
+モダンな JavaScript では、ジェネレータはめったに使用されません。しかし、実行中に呼び出しコードとデータをやり取りする関数の機能は非常にユニークであるため、便利なときがあります。
+
+また、次のチャプターでは、非同期のジェネレータについて学びます。それは `for` ループで非同期的に生成されたデータをのストリームを読むのに使われます。
+
+web プログラミングでは、しばしばストリーミングデータを扱います。e.g. ページングされた結果を取得する必要があるため、これはとても重要なユースケースです。
diff --git a/1-js/12-generators-iterators/1-generators/genYield2-2.svg b/1-js/12-generators-iterators/1-generators/genYield2-2.svg
new file mode 100644
index 0000000000..f45e69324d
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/genYield2-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/genYield2.svg b/1-js/12-generators-iterators/1-generators/genYield2.svg
new file mode 100644
index 0000000000..8d3e257c94
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/genYield2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-1.svg b/1-js/12-generators-iterators/1-generators/generateSequence-1.svg
new file mode 100644
index 0000000000..138df324cc
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-2.svg b/1-js/12-generators-iterators/1-generators/generateSequence-2.svg
new file mode 100644
index 0000000000..4c64e983e1
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-3.svg b/1-js/12-generators-iterators/1-generators/generateSequence-3.svg
new file mode 100644
index 0000000000..0af8e9efdc
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-4.svg b/1-js/12-generators-iterators/1-generators/generateSequence-4.svg
new file mode 100644
index 0000000000..23049fcd21
--- /dev/null
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/article.md b/1-js/12-generators-iterators/2-async-iterators-generators/article.md
new file mode 100644
index 0000000000..404f0803d2
--- /dev/null
+++ b/1-js/12-generators-iterators/2-async-iterators-generators/article.md
@@ -0,0 +1,417 @@
+
+# 非同期イテレーションとジェネレータ
+
+非同期イテレーションを使用すると、要求に応じて非同期に来るデータに対して反復処理することができます。例えば、ネットワーク経由でチャンクごとに何かをダウンロードする場合です。そして、非同期ジェネレータはそれをさらに便利にします。
+
+最初に単純な例を見て構文を把握し、その後、実際のユースケースを見ていきましょう。
+
+## 反復可能（iterable）を思い出してください
+
+反復可能（iterable）についてのトピックを思い出しましょう。
+
+ここでは `range` のようなオブジェクトがあると考えます:
+```js
+let range = {
+ from: 1,
+ to: 5
+};
+```
+
+そして、これに対して `for(value of range)` のように `for..of` を使用して、`1` から `5` までの値を取得したいとします。
+
+つまり、オブジェクトに *反復する機能* を追加したい、です。
+
+これは `Symbol.iterator` という名前の特別なメソッドを使用することで実装できます。
+
+- このメソッドはループが開始されたときに `for..of` コンストラクトで呼び出され、`next` メソッドをもつオブジェクトを返却する必要があります。
+- 各イテレーションのたびに、`next()` メソッドが実行され、次の値を取得します。
+- `next()` は `{done: true/false, value:}` の形式の値の返却が必要で、`done:true` はループが終わりであることを意味します。
+
+以下は、反復可能な `range` の実装です:
+
+```js run
+let range = {
+ from: 1,
+ to: 5,
+
+*!*
+ [Symbol.iterator]() { // for..of の最初に一度呼ばれます
+*/!*
+ return {
+ current: this.from,
+ last: this.to,
+
+*!*
+ next() { // 各イテレーションで呼ばれ、次の値を取得します
+*/!*
+ if (this.current <= this.last) {
+ return { done: false, value: this.current++ };
+ } else {
+ return { done: true };
+ }
+ }
+ };
+ }
+};
+
+for(let value of range) {
+ alert(value); // 1 then 2, then 3, then 4, then 5
+}
+```
+
+不明点があれば、通常のイテレータの詳細について [](info:iterable) を参照してください。
+
+## 非同期の反復可能
+
+非同期のイテレーションは、非同期（`setTimeout` や他の種類の遅延処理の後）に値がくるときに必要になります。
+
+一般的なケースは、オブジェクトが次の値を提供するためにネットワークリクエストを行う必要がある場合です。実際の例については、少し後で説明します。
+
+オブジェクトを非同期的に反復可能とするには、:
+
+1. `Symbol.iterator` の代わりに、`Symbol.asyncIterator` を使用します。
+2. `next()` は promise を返す必要があります（次の値で解決される）。
+ - `async` キーワードはこれを処理します。シンプルに `async next()` とできます。
+3. このようなオブジェクトをイテレートするには、`for await (let item of iterable)` ループを使用します。
+ - `await` に留意してください。
+
+最初の例として、先程と同様、反復可能な `range` オブジェクトを作成しましょう。ですが、今度は1秒毎に値を非同期的に返します。:
+
+やるべきことは、上のコードに対し少し置き換えるだけです:
+
+```js run
+let range = {
+ from: 1,
+ to: 5,
+
+*!*
+ [Symbol.asyncIterator]() { // (1)
+*/!*
+ return {
+ current: this.from,
+ last: this.to,
+
+*!*
+ async next() { // (2)
+*/!*
+
+*!*
+ // async next の中で、 "await" が使えます
+ await new Promise(resolve => setTimeout(resolve, 1000)); // (3)
+*/!*
+
+ if (this.current <= this.last) {
+ return { done: false, value: this.current++ };
+ } else {
+ return { done: true };
+ }
+ }
+ };
+ }
+};
+
+(async () => {
+
+*!*
+ for await (let value of range) { // (4)
+ alert(value); // 1,2,3,4,5
+ }
+*/!*
+
+})()
+```
+
+ご覧の通り、構成は通常のイテレータと同様です:
+
+1. オブジェクトを非同期的に反復可能にするために、`Symbol.asyncIterator` メソッドが必要です。 `(1)`
+2. それは promise を返す `next()` メソッドを持つオブジェクトを返す必要があります。`(2)`
+3. `next()` メソッドは `async` である必要はなく、promise を返す通常のメソッドかもしれませんが、`async` は中では `await` が使えるので便利です。ここでは単に1秒だけ遅延させています。`(3)`
+4. イテレートするために、`for await(let value of range)` `(4)` を使用しています。すなわち、"for" の後に "await" を追加します。これは `range[Symbol.asyncIterator]()` を一度だけ呼び出し、値に対して `next()` を呼び出します。
+
+以下は違いを示した表です:
+
+| | イテレータ | 非同期イテレータ |
+|-------|-----------|-----------------|
+| 反復可能を提供するオブジェクトメソッド | `Symbol.iterator` | `Symbol.asyncIterator` |
+| `next()` が返す値は | 任意の値 | `Promise` |
+| ループするのに使用するものは | `for..of` | `for await..of` |
+
+````warn header="スプレッド演算子 `...` は非同期には動作しません"
+通常の、同期的なイテレータを要する機能は、非同期イテレータでは動作しません。
+
+例えば、スプレッド演算子は動作しません:
+```js
+alert( [...range] ); // Error, no Symbol.iterator
+```
+
+`Symbol.asyncIterator` ではなく、`Symbol.iterator` があることを期待しているので、これは当然の結果です。
+
+また、`for..of` のケースに対しても同様です: `await` なしの構文は `Symbol.iterator` を必要とします。
+````
+
+## Recall generators
+
+ここでジェネレータを思い出しましょう。ジェネレータを使用すると、イテレーションのコードをはるかに短くすることができます。ほとんどの場合、反復可能にしたい場合、ジェネレータを使用します。
+
+単純にするために、いくつかの重要な点を省略すると、ジェネレータは "値を生成(yield)する関数" です。この詳細は [](info:generators) で説明しています。
+
+ジェネレータは `function*` ( * に注目)でラベル付けされたもので、値を生成すのに `yield` を使用します。ジェネレータをループするのに `for..of` が利用できます。
+
+この例は `start` から end` までの一連の値を生成します:
+
+```js run
+function* generateSequence(start, end) {
+ for (let i = start; i <= end; i++) {
+ yield i;
+ }
+}
+
+for(let value of generateSequence(1, 5)) {
+ alert(value); // 1, then 2, then 3, then 4, then 5
+}
+```
+
+すでにご存知の通り、オブジェクトを反復可能にするには `Symbol.iterator` の追加が必要です。
+
+```js
+let range = {
+ from: 1,
+ to: 5,
+*!*
+ [Symbol.iterator]() {
+ return