スプレッド構文（...）は、配列やオブジェクトの要素を展開して別の配列・オブジェクトを作成したり、関数呼び出し時に配列を個々の引数に展開したりする機能です。逆に、関数定義の引数側で...を使うとレストパラメータとなり、可変長の引数を配列として受け取ることができます。スプレッドとレストは見た目は同じ...ですが、使う場所が異なりそれぞれ展開(spread)と収集(rest)の役割を果たします。
スプレッド構文により、複数の配列を結合したりオブジェクトをマージしたりする処理がシンプルに記述できます。レストパラメータを使うと、関数に渡された複数個の引数をまとめて扱うことが可能になります。
JavaScriptでのスプレッド構文とレストパラメータの例です。まず配列やオブジェクトでのスプレッドの使い方を示し、その後関数のレストパラメータの例を示します。
// 配列のスプレッド例: 配列の結合とコピー
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]
// スプレッドを使った配列のコピー（新しい配列を生成）
const copy = [...arr1];
copy.push(99);
console.log(arr1); // [1, 2, 3] （元の配列は変更なし）
console.log(copy); // [1, 2, 3, 99] （コピー側のみ変更）
// オブジェクトのスプレッド例: オブジェクトのマージ
const obj1 = {a: 1, b: 2};
const obj2 = {b: 5, c: 6};
const merged = {...obj1, ...obj2};
console.log(merged); // { a: 1, b: 5, c: 6 }
// ※ プロパティbはobj2側で上書き
// レストパラメータ例: 可変長引数を合計する関数
function sumAll(...numbers) {
return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3, 4)); // 10
console.log(sumAll(5, 10)); // 15解説: スプレッド構文...を配列に適用すると、配列内の要素を順に展開します。[...arr1, ...arr2]は配列arr1とarr2の要素をすべて並べた新しい配列を生成します。これにより、concatメソッドを使わず直感的に配列結合ができます。またconst copy = [...arr]のように書けば配列のコピー（シャローコピー）が簡単に作れます。
オブジェクトに対する{...obj1, ...obj2}も同様に、obj1とobj2のプロパティを併せ持つ新しいオブジェクトを生成します。重複するプロパティ（上記例ではb）がある場合、後ろに記述したオブジェクトの値で上書きされます。これにより、オブジェクトのマージや特定プロパティの上書きコピーといった操作が容易に実現できます。
関数定義での...numbersはレストパラメータを表し、呼び出し時に渡された任意個数の引数が配列numbersにまとまります。上記sumAll関数は、このnumbers配列の全要素を合計して返しています。sumAll(1,2,3,4)のように呼び出すと、numbersは[1,2,3,4]となり、その合計10を返します。レストパラメータにより、関数側では配列処理の形で実装を書けるため、可変個の引数を扱うロジックがシンプルになります。