Skip to content

Commit

Permalink
2024/07/26 時点の英語版に基づき更新
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Oct 12, 2024
1 parent 010438f commit 8eb41d6
Showing 1 changed file with 29 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: 分割代入
slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
l10n:
sourceCommit: 0f3738f6b1ed1aa69395ff181207186e1ad9f4d8
sourceCommit: 8cb0caef8175e1772f13ef7bc761f9616e2c5a4b
---

{{jsSidebar("Operators")}}
Expand Down Expand Up @@ -38,7 +38,7 @@ let a, b, a1, b1, c, d, rest, pop, push;
[a, b, ...{ pop, push }] = array;
[a, b, ...[c, d]] = array;
({ a, b } = obj); // 中括弧が必要
({ a, b } = obj); // 括弧が必要
({ a: a1, b: b1 } = obj);
({ a: a1 = aDefault, b = bDefault } = obj);
({ a, b, ...rest } = obj);
Expand All @@ -53,7 +53,7 @@ let a, b, a1, b1, c, d, rest, pop, push;
const x = [1, 2, 3, 4, 5];
```

分割代入は似たような構文を使用しますが、代入の左辺が元の変数からどの値を受け取るかを定義します
分割代入では、同様の構文を使用しますが、代わりに代入の左辺で使用します。これは、元の変数から展開する値を定義します

```js
const x = [1, 2, 3, 4, 5];
Expand All @@ -74,9 +74,11 @@ const { a, b } = obj;

この機能は、Perl や Python などの言語に存在する機能に似ています。

配列またはオブジェクトの分解に関する機能については、以下の個々の[](#例)を参照してください。

### バインドと代入

オブジェクトと配列の分割代入には、2 種類の分割代入のパターンがあります。**バインドパターン****代入パターン**であり、構文が若干異なります。
オブジェクトと配列の分割代入には、2 種類の分割代入のパターンがあります。**{{Glossary("binding","バインド")}}パターン****代入パターン**であり、構文が若干異なります。

バインドパターンでは、宣言キーワード (`var``let``const`) から始めます。次に、個々のプロパティを変数にバインドするか、さらに構造化する必要があります。

Expand All @@ -99,6 +101,12 @@ let {
} = obj; // d は再代入可能
```

言語が変数をバインドする他の多くの構文でも、分割バインドパターンが使用できます。これには次のようなものがあります。

- [`for...in`](/ja/docs/Web/JavaScript/Reference/Statements/for...in)[`for...of`](/ja/docs/Web/JavaScript/Reference/Statements/for...of)[`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) ループのループ変数
- [関数](/ja/docs/Web/JavaScript/Reference/Functions)の引数
- [`catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) のバインド変数

代入パターンでは、パターンはキーワードで始まりません。それぞれの分解されたプロパティが、代入先に代入されます。この代入先は `var``let` であらかじめ宣言されているか、他のオブジェクトのプロパティです。一般的には、代入式の左辺に現れることができるものなら何でも構いません。

```js
Expand All @@ -111,13 +119,13 @@ const obj = { a: 1, b: 2 };
> [!NOTE]
> 宣言なしでオブジェクトリテラルの分割代入を使用する場合、代入文を囲む括弧 `( ... )` が必要です。
>
> `{ a, b } = { a: 1, b: 2 }` は、左辺の `{a, b}` がオブジェクトリテラルではなくブロックとみなされるため、単体では有効な構文ではありません。しかし、`({ a, b } = { a: 1, b: 2 })` は有効であり、`const { a, b } = { a: 1, b: 2 }` も同様です。
> `{ a, b } = { a: 1, b: 2 }` は、左辺の `{a, b}` [式文](/ja/docs/Web/JavaScript/Reference/Statements/Expression_statement)のルールによりオブジェクトリテラルではなくブロックとみなされるため、単体では有効な構文ではありません。しかし、`({ a, b } = { a: 1, b: 2 })` は有効であり、`const { a, b } = { a: 1, b: 2 }` も同様です。
>
> もし、お使いのコーディングスタイルで末尾のセミコロンを記述していない場合は、`( ... )` 式の前にセミコロンを記述する必要がありますし、前の行の関数を実行するために使用される可能性もあります。
上のコードの等価な _バインドパターン_ は、有効な構文ではないことに注意してください。

```js example-bad
```js-nolint example-bad
const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;
Expand All @@ -128,6 +136,8 @@ const { a: numbers[0], b: numbers[1] } = obj;
// これは完全に正しくありません。
```

代入パターンをは[代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Assignment)の左辺としてのみ使用できます。`+=``*=` などの複合代入演算子では使用できません。

### 既定値

それぞれの分解されたプロパティは、_既定値_ を持つことができます。既定値は、プロパティが存在しないか、値が `undefined` である場合に使用されます。プロパティが値 `null` を持つ場合は使用されません。
Expand Down Expand Up @@ -166,16 +176,6 @@ const [a, ...b,] = [1, 2, 3];
// 常に最後の要素として残余演算子を使用することを考慮してください。
```

### 他の構文での分解パターン

言語が変数をバインドしてくれる多くの構文では、同様に分解パターンを使用することができます。これには、次のようなものがあります。

- [`for...in`](/ja/docs/Web/JavaScript/Reference/Statements/for...in) および [`for...of`](/ja/docs/Web/JavaScript/Reference/Statements/for...of) ループのループ変数
- [関数](/ja/docs/Web/JavaScript/Reference/Functions)の引数
- [`catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) のバインド変数

配列やオブジェクトの分解に固有の機能については、下記の個別の例を参照してください。

##

### 配列の分割代入
Expand Down Expand Up @@ -265,16 +265,15 @@ console.log(c); // 1

#### 残余プロパティとしてのバインドパターンの使用

配列の分割代入の残余プロパティは、別の配列やオブジェクトの結合パターンにすることができます。これにより、配列のプロパティとインデックスを同時に展開することができます
配列の分割代入の残余プロパティは、別の配列やオブジェクトの結合パターンにすることができます。残りの要素を集めた後に作成された配列から、内部の分割代入が構造を解除します。そのため、この方法では元の反復可能な要素に存在するプロパティにアクセスすることはできません

```js
const [a, b, ...{ pop, push }] = [1, 2];
console.log(a, b); // 1 2
console.log(pop, push); // [Function pop] [Function push]
const [a, b, ...{ length }] = [1, 2, 3];
console.log(a, b, length); // 1 2 1
```

```js
deconst [a, b, ...[c, d]] = [1, 2, 3, 4];
const [a, b, ...[c, d]] = [1, 2, 3, 4];
console.log(a, b, c, d); // 1 2 3 4
```

Expand All @@ -287,7 +286,7 @@ console.log(a, b, c, d, e, f); // 1 2 3 4 5 6

一方、オブジェクトの分解では、残余プロパティとして識別子しか保有することができません。

```js example-bad
```js-nolint example-bad
const { a, ...{ b } } = { a: 1, b: 2 };
// SyntaxError: `...` must be followed by an identifier in declaration contexts
Expand Down Expand Up @@ -450,7 +449,7 @@ function userDisplayName({ displayName: dname }) {
return dname;
}

console.log(userDisplayName(user)); // `jdoe`
console.log(userDisplayName(user)); // "jdoe"
```

入れ子になっているオブジェクトも展開することができます。
Expand Down Expand Up @@ -570,7 +569,7 @@ console.log(foo); // "bar"

#### 無効な JavaScript 識別子をプロパティ名として使用する

JavaScript で有効な代替識別子を与えることにより、JavaScript で有効ではない{{glossary("Identifier", "識別子")}}であるプロパティ名を分割代入で使用できます。
JavaScript で有効な代替識別子を与えることにより、JavaScript で有効ではない{{Glossary("Identifier", "識別子")}}であるプロパティ名を分割代入で使用できます。

```js
const foo = { "fizz-buzz": true };
Expand All @@ -581,7 +580,7 @@ console.log(fizzBuzz); // true

### プリミティブ値の分割代入

オブジェクトの分割代入は、[プロパティへのアクセス](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)とほぼ等価です。 これは、プリミティブ値を分割しようとすると、値が対応するラッパーオブジェクトに取得され、プロパティはラッパーオブジェクトにアクセスされることを意味しています。
オブジェクトの分割代入は、[プロパティへのアクセス](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors)とほぼ等価です。 これは、プリミティブ値を分割しようとすると、値が対応するラッパーオブジェクトに取得され、プロパティはラッパーオブジェクトにアクセスされることを意味しています。

```js
const { a, toFixed } = 1;
Expand All @@ -592,7 +591,7 @@ console.log(a, toFixed); // undefined ƒ toFixed() { [native code] }

```js example-bad
const { a } = undefined; // TypeError: Cannot destructure property 'a' of 'undefined' as it is undefined.
const { a } = null; // TypeError: Cannot destructure property 'b' of 'null' as it is null.
const { b } = null; // TypeError: Cannot destructure property 'b' of 'null' as it is null.
```

これは、パターンが空のときにも起こります。
Expand Down Expand Up @@ -629,8 +628,9 @@ const obj = {
},
};
const { self, prot } = obj;
// self "123"
// prot "456" (プロトタイプチェーンへのアクセス)

console.log(self); // "123"
console.log(prot); // "456"
```

## 仕様書
Expand All @@ -644,4 +644,4 @@ const { self, prot } = obj;
## 関連情報

- [代入演算子](/ja/docs/Web/JavaScript/Reference/Operators#代入演算子)
- ["ES6 in Depth: Destructuring" on hacks.mozilla.org](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/)
- [ES6 in Depth: Destructuring](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/) (hacks.mozilla.org, 2015)

0 comments on commit 8eb41d6

Please sign in to comment.