はじめに

JavaScript の スプレッド構文 (...) は、配列やオブジェクトの操作を簡潔に記述できる便利な構文です。
配列のコピーや結合、オブジェクトの展開、関数引数の展開など、さまざまな場面で活用できます。

本記事では、スプレッド構文の基本的な使い方から、実践的な活用方法までを詳しく解説します。

1. スプレッド構文の基本

配列の展開

スプレッド構文を使うと、配列の要素を展開して新しい配列を作成できます。

JAVASCRIPT
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5, 6];
console.log(newNumbers); // [1, 2, 3, 4, 5, 6]

✅ ポイント

• ...numbers によって numbers の中身を展開し、新しい配列を作成。
• 配列の結合も簡単に行える。

JAVASCRIPT
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

オブジェクトの展開

オブジェクトのスプレッド構文を使うと、新しいオブジェクトを作成しつつ、既存のオブジェクトのプロパティを展開できます。

JAVASCRIPT
const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26, country: "Japan" };
console.log(updatedUser);
// { name: "Alice", age: 26, country: "Japan" }

✅ ポイント

• ...user で user のプロパティを展開し、新しいオブジェクトを作成。
• age プロパティを上書きし、新たに country プロパティを追加。

2. スプレッド構文の応用

配列のコピー

スプレッド構文を使うと、簡単に配列のコピーを作成できます。

JAVASCRIPT
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]

✅ ポイント

• copiedArray = originalArray とすると 参照がコピー されてしまう。
• [...] を使うことで、新しい配列として独立したコピーが作成される。

オブジェクトのマージ

複数のオブジェクトをマージすることも可能です。

JAVASCRIPT
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // { a: 1, b: 3, c: 4 }

✅ ポイント

• b の値は obj2 の b: 3 で上書きされる。
• 後に展開されたオブジェクトのプロパティが優先される。

関数の引数としてのスプレッド構文

配列の要素を関数の引数として渡すときにもスプレッド構文が使えます。

JAVASCRIPT
function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

✅ ポイント

• sum(...numbers) によって numbers の各要素を個別の引数として展開。

3. スプレッド構文の制限と注意点

ネストされたオブジェクト・配列のコピーに注意

スプレッド構文では、浅いコピー（shallow copy）が作成されます。

JAVASCRIPT
const original = { nested: { value: 1 } };
const copied = { ...original };
copied.nested.value = 2;
console.log(original.nested.value); // 2（変更が反映される）

✅ 対策

• 深いコピー（deep copy） を作成するには JSON.parse(JSON.stringify(obj)) や structuredClone() を使う。

JAVASCRIPT
const deepCopied = JSON.parse(JSON.stringify(original));
deepCopied.nested.value = 3;
console.log(original.nested.value); // 2（元のオブジェクトは変更されない）

まとめ

スプレッド構文 (...) を活用すると、配列やオブジェクトの操作を簡潔に記述できます。

✅ 学んだこと

• 配列の展開・結合 → [...arr1, ...arr2]
• オブジェクトの展開・マージ → { ...obj1, ...obj2 }
• 配列・オブジェクトのコピー → [...array] / { ...object }
• 関数の引数展開 → func(...args)
• 浅いコピーの注意点と深いコピーの方法

スプレッド構文を適切に使いこなし、より効率的な JavaScript コーディングを目指しましょう。