JavaScriptのスプレッド構文（...）完全解説！初心者でもわかる配列とオブジェクトの展開方法

1. スプレッド構文とは？基本の考え方

1. スプレッド構文とは？基本の考え方

JavaScriptのスプレッド構文（...）は、配列やオブジェクトの中の要素を展開して、別の配列やオブジェクトにコピーしたり、関数の引数として渡すことができる便利な構文です。配列の中身をそのまま別の配列に入れたいときや、関数に複数の値を渡すときにとても役立ちます。

2. 配列でのスプレッド構文の使い方

2. 配列でのスプレッド構文の使い方

例えば、2つの配列を1つにまとめたい場合にスプレッド構文を使うと簡単です。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combined = [...array1, ...array2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

このように、...を使うと配列の中身をそのまま展開して、新しい配列に追加できます。

3. 配列のコピーにも便利

3. 配列のコピーにも便利

配列をコピーしたいときもスプレッド構文を使えば簡単です。元の配列を壊さずに新しい配列を作れます。

const original = [10, 20, 30];
const copy = [...original];
console.log(copy); // [10, 20, 30]

この方法は、後でコピーした配列を変更しても元の配列には影響しません。

4. 関数の引数に展開する

4. 関数の引数に展開する

スプレッド構文は関数の引数にも使えます。複数の値を順番に渡したいときに便利です。

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

配列の要素を1つずつ関数に渡すことができ、ループなどを使わずに簡単に計算できます。

5. オブジェクトでのスプレッド構文

5. オブジェクトでのスプレッド構文

配列だけでなくオブジェクトにもスプレッド構文は使えます。オブジェクトのコピーや結合も簡単に行えます。

const obj1 = { name: "Alice", age: 25 };
const obj2 = { city: "Tokyo", country: "Japan" };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); 
// { name: "Alice", age: 25, city: "Tokyo", country: "Japan" }

これにより、元のオブジェクトを壊さずに新しいオブジェクトを作れます。

6. 配列とオブジェクトの一部を抽出する

6. 配列とオブジェクトの一部を抽出する

分割代入と組み合わせると、配列やオブジェクトの一部だけを取り出すこともできます。

const colors = ["red", "green", "blue"];
const [first, ...rest] = colors;
console.log(first); // "red"
console.log(rest);  // ["green", "blue"]

オブジェクトでも同じように、一部のプロパティだけを取り出すことができます。

const user = { name: "Bob", age: 30, city: "Osaka" };
const { name, ...other } = user;
console.log(name);  // "Bob"
console.log(other); // { age: 30, city: "Osaka" }

7. 配列の結合やオブジェクトのマージで注意すること

7. 配列の結合やオブジェクトのマージで注意すること

スプレッド構文は便利ですが、オブジェクトのプロパティ名が同じ場合、後ろの値で上書きされます。配列の場合は順序を意識して結合してください。

const objA = { id: 1, value: "A" };
const objB = { id: 2, value: "B" };
const merged = { ...objA, ...objB };
console.log(merged); // { id: 2, value: "B" }

このように、スプレッド構文を使うときはどの値を優先するかを考える必要があります。

8. 実践！スプレッド構文で配列やオブジェクトを便利に扱う

8. 実践！スプレッド構文で配列やオブジェクトを便利に扱う

スプレッド構文を使えば、配列やオブジェクトの操作が簡単でコードも読みやすくなります。例えば、配列の追加や削除、オブジェクトのプロパティ更新なども短く書けます。

let nums = [1, 2, 3];
nums = [0, ...nums, 4]; // 配列の先頭と末尾に追加
console.log(nums); // [0, 1, 2, 3, 4]

const user1 = { name: "Carol", age: 22 };
const updatedUser = { ...user1, age: 23 }; // 年齢を更新
console.log(updatedUser); // { name: "Carol", age: 23 }

このように、スプレッド構文を活用すると、簡単にデータ操作や更新ができ、複雑な処理もスッキリ書けます。

9. スプレッド構文を覚えるとJavaScriptがもっと便利に

9. スプレッド構文を覚えるとJavaScriptがもっと便利に

スプレッド構文は初心者でもすぐに使える強力な機能です。配列やオブジェクトを展開したり、関数に渡すことで、コードの可読性が上がり、バグも減らせます。最初は少し不思議に見えるかもしれませんが、実際に手を動かして試すことで理解が深まります。

まとめ

まとめ

今回の記事では、JavaScriptのスプレッド構文（...）について詳しく解説しました。スプレッド構文は、配列やオブジェクトの要素を展開してコピーしたり、新しい配列やオブジェクトを作成する際に非常に便利な機能です。配列同士の結合やコピー、関数の引数展開、オブジェクトの結合や一部抽出など、さまざまな場面で活用できます。配列では元の配列を壊さずに新しい配列を作ることができる点や、関数に複数の引数を簡単に渡せる点が大きな特徴です。オブジェクトでは、プロパティを展開してコピーしたり、複数のオブジェクトを結合する際に便利で、後ろにあるオブジェクトの値で上書きされる点には注意が必要です。また、分割代入と組み合わせることで、配列やオブジェクトの一部だけを抽出して扱うことも可能です。実践的には、配列の先頭や末尾への追加や削除、オブジェクトのプロパティ更新なども簡単に書けるため、コードの可読性が向上し、バグの発生も抑えられます。これらのスプレッド構文の基本を理解することで、JavaScriptの配列やオブジェクト操作がより効率的に行えるようになります。

スプレッド構文のサンプルまとめ

配列やオブジェクトの操作を復習しましょう。

 // 配列の結合 const arrayA = [1, 2]; const arrayB = [3, 4]; const combinedArray = [...arrayA, ...arrayB]; console.log(combinedArray); // [1, 2, 3, 4]
// 配列のコピー
const originalArray = [5, 6, 7];
const copiedArray = [...originalArray];
console.log(copiedArray); // [5, 6, 7]

// 関数に引数を展開
function multiply(a, b, c) {
return a * b * c;
}
const numbers = [2, 3, 4];
console.log(multiply(...numbers)); // 24

// オブジェクトの結合
const user1 = { name: "Alice", age: 25 };
const user2 = { city: "Tokyo", country: "Japan" };
const mergedUser = { ...user1, ...user2 };
console.log(mergedUser); // { name: "Alice", age: 25, city: "Tokyo", country: "Japan" }

// 分割代入で配列やオブジェクトの一部抽出
const colors = ["red", "green", "blue"];
const [firstColor, ...otherColors] = colors;
console.log(firstColor); // "red"
console.log(otherColors); // ["green", "blue"]

const profile = { name: "Bob", age: 30, city: "Osaka" };
const { name, ...otherProfile } = profile;
console.log(name); // "Bob"
console.log(otherProfile); // { age: 30, city: "Osaka" }