review - destructuring-assignment

Author: KenjiI

1-js/05-data-types/09-destructuring-assignment/article.md

@@ -2,18 +2,18 @@
 
 JavaScriptで最も使われる2つのデータ構造は `Object` と `Array` です。
 
-オブジェクトは多くの情報を1つのエンティティにまとめることができ、配列は順序付けされたコレクションを格納することが出来ます。従って、私たちはオブジェクトまたは配列を作りそれを1つのエンティティとして扱うことができます。もしくはそれを関数呼出しに渡すこともできます。
+オブジェクトは多くの情報を1つのエンティティにまとめることができ、配列は順序付けされたコレクションを格納することができます。従って、私たちはオブジェクトまたは配列を作り、それを1つのエンティティとして扱うことができます。また、それを関数呼び出しの際に渡すこともできます。
 
-*Destructuring assignment (分割代入)* は配列またはオブジェクトの中身を複数の変数に代入できる特別な構文で、便利な場合があります。デストラクタリング(構造の分解)は、多くのパラメータとデフォルト値を持つ複雑な関数でもうまく機能し、このチャプターですぐにこれらがどのように処理されているかわかるでしょう。
+*分割代入(Destructuring assignment)* は、配列またはオブジェクトの中身を複数の変数に代入できる特別な構文です。デストラクタリング(非構造化/構造の分解)は、多くのパラメータとデフォルト値を持つ複雑な関数でもうまく機能します。このチャプターでは、すぐにこれらがどのように処理されているかわかるでしょう。
 
 [cut]
 
-## Array のデストラクタリング 
+## Array の非構造化 
 
-配列がどのように変数に分解されるかの例です:
+配列を変数に分割する方法の例です:
 
 ```js
-// 名前と姓の配列を持っています
+// 姓名の配列があります
 let arr = ["Ilya", "Kantor"]
 
 *!*
@@ -25,9 +25,9 @@ alert(firstName); // Ilya
 alert(surname);  // Kantor
 ```
 
-これで、配列メンバーの代わりに変数を扱うことができます。
+これで、配列要素の代わりに変数を扱うことができます。
 
-`split` や他の配列を返すメソッドと組み合わせるとよいです:
+`split` やその他配列を返すメソッドと組み合わせると便利です:
 
 ```js
 let [firstName, surname] = "Ilya Kantor".split(' ');
@@ -49,19 +49,19 @@ let surname = arr[1];
 
 ```js run
 *!*
-// 1番目、2番めの要素は不要です
+// 1番目、2番目の要素が不要の場合
 let [, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
 */!*
 
 alert( title ); // Consul
 ```
 
-上のコードでは、最初と2つ目の配列の要素がスキップされていますが、3つ目は `title` に代入され、残りもまたスキップされています。
+上のコードでは、最初の2つの要素がスキップされ、3つ目は `title` に代入され、残りもスキップされています。
 ````
 
-````smart header="右辺の任意の反復可能なもの(iterable)に対して動作します"
+````smart header="右辺は任意の反復可能(iterable)に対して動作します"
 
-...実際には、配列だけでなく任意の反復可能なもの(iterable)で使うことができます:
+実際には配列だけでなく、任意の反復可能(iterable)に対して使うことができます:
 
 ```js
 let [a, b, c] = "abc"; // ["a", "b", "c"]
@@ -71,9 +71,9 @@ let [one, two, three] = new Set([1, 2, 3]);
 ````
 
 
-````smart header="左辺の任意のものに代入する"
+````smart header="左辺では任意のものに代入することが可能です"
 
-左辺には任意の "割り当て可能なもの" を使用できます。
+左辺には任意の "割り当て可能なもの" を指定することができます。
 
 例えば、オブジェクトのプロパティも指定できます:
 ```js run
@@ -87,9 +87,9 @@ alert(user.name); // Ilya
 
 ````smart header=".entries() を使ったループ"
 
-以前のチャプターで、私たちは [Object.entries(obj)](mdn:js/Object/entries) メソッドを見ました。
+以前のチャプターで、[Object.entries(obj)](mdn:js/Object/entries) メソッドを見ました。
 
-オブジェクトの key-value をループするために、それをデストラクタリングと一緒使うこともできます:
+オブジェクトの key-value をループするのに、分割代入を一緒に使うこともできます:
 
 ```js run
 let user = {
@@ -105,7 +105,7 @@ for (let [key, value] of Object.entries(user)) {
 }
 ```
 
-...また、map でも同じです:
+map も同様です:
 
 ```js run
 let user = new Map();
@@ -122,7 +122,7 @@ for (let [key, value] of user.entries()) {
 
 ### 残り '...'
 
-もしも、単に1つ目の値だけではなく、それに続く全てを集めたい場合 -- 3つのドッド `"..."` を使うことで "残りの部分" を取得するもう１つのパラメータを追加することができます:
+最初の値を取得するだけでなく、それに続くすべての値も集めたい場合、"残りの部分" の取得を意味する 3つのドッド `"..."` をパラメータに追加することで実現できます:
 
 
 ```js run
@@ -138,11 +138,11 @@ alert(rest.length); // 2
 */!*
 ```
 
-`rest` の値は残りの配列要素の配列です。 `rest` の代わりに他の変数名を使うこともできます。その前に3つのドットがあることを確認して、最後に分割代入を行います。
+`rest` は残りの値が要素として格納されている配列です。 `rest` の代わりに他の変数名を使うこともできます。変数名の前には3つのドットがあり、利用時には分割代入の最後にくるようにしてください。
 
 ### デフォルト値
 
-もしも代入変数よりも配列の値のほうが少ない場合、エラーにはなりません。不足している値は undefined とみなされます:
+代入する変数の数よりも配列の要素数のほうが少ない場合、エラーにはなりません。不足している値は undefined とみなされます:
 
 ```js run
 *!*
@@ -152,7 +152,7 @@ let [firstName, surname] = [];
 alert(firstName); // undefined
 ```
 
-値がなかった場合に "デフォルト" 値に置き換えたいとき、`=` を使って値を指定することができます:
+値がなかった場合に "デフォルト" 値を使いたければ、`=` を使ってデフォルト値を指定することができます:
 
 ```js run
 *!*
@@ -161,12 +161,12 @@ let [name = "Guest", surname = "Anonymous"] = ["Julius"];
 */!*
 
 alert(name);    // Julius (配列から)
-alert(surname); // Anonymous (デフォルtが使用された)
+alert(surname); // Anonymous (デフォルトが使用されました)
 ```
 
 デフォルト値はより複雑な式や関数呼び出しにすることもできます。それらは値が提供されなかったときのみ評価されます。
 
-例えば、ここでは、2つのデフォルトのために `prompt` 関数を使っていますが、それは値がなかったものの場合にだけ実行されます:
+例えば、ここでは2つのデフォルトに対して `prompt` 関数を使っていますが、値がなかった場合のみ実行されます:
 
 ```js run
 // 姓のプロンプトのみを実行する
@@ -177,7 +177,7 @@ alert(surname); // プロンプトが得たもの
 ```
 
 
-## オブジェクトのデストラクタリング 
+## オブジェクトの非構造化 
 
 分割代入はオブジェクトでも動作します。
 
@@ -187,7 +187,7 @@ alert(surname); // プロンプトが得たもの
 let {var1, var2} = {var1:…, var2…}
 ```
 
-右辺には、変数に分割したい既存のオブジェクトがあります。左辺は該当するプロパティの "パターン" を含みます。シンプルなケースでは、それは `{...}` の変数名のリストです。
+右辺には、変数に分割したい既存のオブジェクトがあります。左辺には該当するプロパティの "パターン" を指定します。単純なケースでは、それは `{...}` に変数名を並べたものです。
 
 例:
 
@@ -216,7 +216,7 @@ let {height, width, title} = { title: "Menu", height: 200, width: 100 }
 
 左辺のパターンはより複雑で、プロパティと変数の間のマッピングを指定することができます。
 
-もしプロパティを別の名前の変数に代入したい場合、例えば、`options.width` を変数名 `w` にしたい場合、コロンを使うことでセットすることができます:
+プロパティを別の名前の変数に代入したい場合、例えば、`options.width` を変数名 `w` にしたい場合、コロンを使うことでセットすることができます:
 
 ```js run
 let options = {
@@ -226,7 +226,7 @@ let options = {
 };
 
 *!*
-// { sourceProperty: targetVariable }
+// { 元のプロパティ: ターゲットとなる変数 }
 let {width: w, height: h, title} = options;
 */!*
 
@@ -239,9 +239,9 @@ alert(w);      // 100
 alert(h);      // 200
 ```
 
-コロンは "代入するプロパティ名: 代入先の変数名" となります。上の例では、プロパティ `width` は `w`に、プロパティ `height` は `h`, `title` は同じ名前に代入されます。
+コロンは "何を: どこに" を示します。上の例では、プロパティ `width` は `w`に、プロパティ `height` は `h`, `title` は同じ名前に代入されます。
 
-潜在的に不足しているプロパティについては、次のように `"="` を使ってデフォルト値を設定できます:
+値がない可能性のあるプロパティについては、次のように `"="` を使ってデフォルト値を設定できます:
 
 ```js run
 let options = {
@@ -257,7 +257,7 @@ alert(width);  // 100
 alert(height); // 200
 ```
 
-ちょうど配列や関数のパラメータのように、デフォルト値は任意の式または関数呼び出しにすることができます。それらは値がない場合に評価されます。
+配列や関数パラメータのように、デフォルト値は任意の式または関数呼び出しにすることができます。それらは値がない場合に評価されます。
 
 下のコードは、 width はプロンプトで尋ねられますが、 title は聞かれません。
 
@@ -274,7 +274,7 @@ alert(title);  // Menu
 alert(width);  // (プロンプトの結果)
 ```
 
-コロンと等号の両方を組み合わせることも出来ます。:
+コロンと等号の両方を組み合わせることもできます。:
 
 ```js run
 let options = {
@@ -290,11 +290,11 @@ alert(w);      // 100
 alert(h);      // 200
 ```
 
-### 残りの演算子
+### 残りの演算子(Rest operator)
 
-仮に、指定した変数よりも多くのプロパティをオブジェクトがもっていたらどうなるでしょうか。いくつかを設定し、"残り" をどこかに代入することはできるでしょうか？
+仮に、指定した変数よりも多くのプロパティをオブジェクトがもっていたらどうなるでしょうか。いくつか設定した後、"残り" をどこかにまとめて代入することはできるでしょうか？
 
-残りの演算子（3つの点）を使用するための仕様はほぼ標準ですが、ほとんどのブラウザではまだサポートされていません。
+ここで、残りの演算子（3つのドット）を使用するという仕様はほぼ標準ですが、ほとんどのブラウザではまだサポートされていません。
 
 このようになります:
 
@@ -327,7 +327,7 @@ let title, width, height;
 {title, width, height} = {title: "Menu", width: 200, height: 100};
 ```
 
-問題は、JavaScriptが（別の式の中ではなく）メインコードフローの `{...}' をコードブロックとして扱うことです。このようなコードブロックを使用すると、次のように文をグループ化できます。
+問題は、JavaScriptがメインコードフローの `{...}' をコードブロックとして扱うことです。このようなコードブロックは、次のように文をグループ化するために使われます。
 
 ```js run
 {
@@ -338,7 +338,7 @@ let title, width, height;
 }
 ```
 
-コードブロックではない JavaScript と示すためには、代入全体を括弧 `(...)` で囲む必要があります:
+コードブロックではないと JavaScript に示すためには、代入全体を括弧 `(...)` で囲む必要があります:
 
 ```js run
 let title, width, height;
@@ -351,11 +351,11 @@ alert( title ); // Menu
 
 ````
 
-## 入れ子構造のデストラクタリング 
+## 入れ子構造の非構造化 
 
-オブジェクトまたは配列に他のオブジェクトや配列が含まれている場合、より複雑な左辺のパターンを使用してより深い部分を抽出することができます。
+オブジェクトまたは配列に他のオブジェクトや配列が含まれている場合、より複雑な左辺のパターンを使用して、より深い部分を抽出することもできます。
 
-下のコードでは、`options` はプロパティ `size` の中に別のオブジェクトを持っており、プロパティ `items` に配列を持っています。代入の左辺のパターンは同じ構造を持ちます。:
+下のコードでは、`options` はプロパティ `size` の中に別のオブジェクトを持っており、プロパティ `items` に配列を持っています。ここで、代入する左辺のパターンは同じ構造を持っています。:
 
 ```js run
 let options = {
@@ -369,11 +369,11 @@ let options = {
 
 // わかりやすくするために、複数の行での分割代入
 let {
-  size: { // put size here
+  size: { // ここにサイズを格納
     width,
     height
   },
-  items: [item1, item2], // ここで items を割り当て
+  items: [item1, item2], // ここに items を割り当てる
   title = "Menu" // オブジェクトには存在しない (デフォルト値が使われます)
 } = options;
 
@@ -384,13 +384,13 @@ alert(item1);  // Cake
 alert(item2);  // Donut
 ```
 
-言及されていなかった `extra` を除いた `options` オブジェクト全体が該当する変数に代入されます。
+左辺で言及されていなかった `extra` を除いた `options` オブジェクト全体が該当する変数に代入されます。
 
 ![](destructuring-complex.png)
 
-最終的に、`width`, `height`, `item1`, `item2` とデフォルト値から `title` を持ちます。
+最終的には、`width`, `height`, `item1`, `item2` と、デフォルト値から `title` を得ます。
 
-それは分割代入ではよく起こります。私たちは、多くのプロパティを持つ複雑なオブジェクトを持っており、必要なものだけを抽出したいため。
+これは分割代入ではよく起こります。私たちは、多くのプロパティを持つ複雑なオブジェクトを持っており、必要なものだけを抽出したいからです。
 
 このようなことも頻繁にあります。:
 ```js
@@ -402,27 +402,27 @@ let { size } = options;
 
 ある関数が多くのパラメータを持っており、ほどんどがオプションであることがあります。特にユーザインタフェースのときに当てはまります。メニューを作る関数を想像してみてください。幅と高さ、タイトル、アイテムのリストなどを持っています。
 
-ここに、このような関数の悪い書き方があります:
+ここに、良くない関数の書き方があります:
 
 ```js
 function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
   // ...
 }
 ```
 
-現実において、問題はどうやって引数の順番を覚えるか、です。通常は IDE が助けてくれます、特にコードが良くドキュメント化されていれば。しかし、他にも…別の問題はほとんどのパタメータがデフォルトでOKの場合の関数の呼び方です。
+現実の問題の1つは、どうやって引数の順番を覚えるか、です。コードがしっかりドキュメント化されていれば、通常は IDE が助けてくれます。しかし、他にも問題があります。ほとんどのパタメータがデフォルトでOKの場合の関数の呼び方です。
 
 こうなりますか?
 
 ```js
 showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])
 ```
 
-これは酷く、より多くのパラメータを扱うときに読みにくくなります。
+これは見にくく、より多くのパラメータを扱う場合、非常に読みにくいです。
 
-このようなケースでデストラクタリングが助けに来てくれます!
+このようなケースで非構造化が役に立ちます!
 
-オブエジェクトとしてパラメータを渡し、関数はそれらを変数に分解することができます:
+オブエジェクトとしてパラメータを渡し、関数はそれらを変数に分解します:
 
 ```js run
 // オブジェクトを関数に渡す
@@ -431,7 +431,7 @@ let options = {
   items: ["Item1", "Item2"]
 };
 
-// ...そしてすぐに変数に展開されます
+// ...そしてすぐに変数に展開します
 function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []}*/!*) {
   // title, items – options から取得,
   // width, height – デフォルト値を利用
@@ -442,7 +442,7 @@ function showMenu(*!*{title = "Untitled", width = 200, height = 100, items = []}
 showMenu(options);
 ```
 
-また、入れ子のオブジェクトやコロンのマッピング使った複雑なデストラクタリングを使うこともできます:
+また、入れ子のオブジェクトやコロンのマッピング使った複雑な非構造化を使うこともできます:
 
 ```js run
 let options = {
@@ -453,8 +453,8 @@ let options = {
 *!*
 function showMenu({
   title = "Untitled",
-  width: w = 100,  // width goes to w
-  height: h = 200, // height goes to h
+  width: w = 100,  // width は w に
+  height: h = 200, // height は h に
   items: [item1, item2] // items の最初の要素は item1 へ、次は item2 へ
 }) {
 */!*
@@ -469,12 +469,13 @@ showMenu(options);
 構文は分割代入と同じです:
 ```js
 function({
+  // 渡されるプロパティ: 内部で利用するパラメータ名 = デフォルト値
   incomingProperty: parameterName = defaultValue
   ...
 })
 ```
 
-このような分割代入は `showMenu()` に引数があることを前提にしている点に注意してください。もし全ての値をデフォルトにしたい場合には、空のオブジェクトを指定する必要があります:
+なお、このような分割代入は `showMenu()` に引数があることを前提にしている点に注意してください。もしすべての値をデフォルトにしたい場合には、空のオブジェクトを指定する必要があります:
 
 ```js
 showMenu({});
@@ -483,7 +484,7 @@ showMenu({});
 showMenu();
 ```
 
-これについては、デストラクタリング対象全体のデフォルト値に `{}` を指定することで直すことができます:
+これについては、非構造化対象全体のデフォルト値に `{}` を指定することで対応することができます:
 
 
 ```js run