React ES6 スプレッド構文

1. スプレッド演算子 (Spread Operator)

JavaScript のスプレッド演算子（Spread Operator） ... は、既存の配列（Array）やオブジェクト（Object）の全部または一部を、別の配列やオブジェクトにコピーするために使用されます。

1.1 配列の結合

以下の例では、2 つの配列をスプレッド演算子を使って 1 つに結合しています。

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
// 両方の配列を展開して結合
const combinedNumbers = [...numbersOne, ...numbersTwo];

1.2 分割代入との組み合わせ

スプレッド演算子は、分割代入（Destructuring）と組み合わせて使用されることが非常に多いです。

以下の例では、配列の 1 番目と 2 番目の要素を変数に代入し、残りのすべての要素を新しい配列にまとめています。

const numbers = [1, 2, 3, 4, 5, 6];
// 最初の2つを抽出し、残りを 'rest' 配列に格納
const [one, two, ...rest] = numbers;

2. オブジェクトでのスプレッド演算子

スプレッド演算子は、配列だけでなくオブジェクトに対しても同様に使用できます。

2.1 オブジェクトの結合とプロパティの上書き

2 つのオブジェクトを結合して、新しいオブジェクトを作成する例を見てみましょう。

const car = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const car_more = {
  type: 'car',
  year: 2021, 
  color: 'yellow' // 'car' オブジェクトの color と一致
}

// スプレッド演算子で結合
const mycar = {...car, ...car_more}

この結果に注目してください。一致しなかったプロパティ（brand, model, type, year）はすべて新しいオブジェクトに追加されます。一方で、プロパティ名が一致したもの（color）については、後に記述されたオブジェクトの値によって上書きされます。この特性は、React でステート（State）の一部だけを更新する際によく利用されます。