JavaScriptのスプレッド構文とは？配列やオブジェクトを展開する基本

JavaScriptのスプレッド構文（...）は、配列やオブジェクトの中身を展開して扱うための便利な記法です。
直感的にデータをコピー・結合・分解できるため、現代のJavaScriptでは必須ともいえる基本機能です。

本記事では、スプレッド構文の基本から実践的な使い方まで、基礎を確実に理解できるように解説します。

スプレッド構文とは？

スプレッド構文とは、配列やオブジェクトの要素を「展開」するための構文です。

const arr = [1, 2, 3];

console.log(...arr);
// 1 2 3

このように、...をつけることで、配列の中身をバラバラに展開できます。

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

配列のコピー

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2);
// [1, 2, 3]

スプレッド構文を使うことで、元の配列を壊さずにコピーを作成できます。

※参照渡しではなく、新しい配列として生成される点が重要です。

配列の結合

const arr1 = [1, 2];
const arr2 = [3, 4];

const result = [...arr1, ...arr2];

console.log(result);
// [1, 2, 3, 4]

複数の配列を簡単に結合できます。

配列の結合については、配列を結合する方法を解説した
「JavaScriptのconcat()とは？配列を結合する方法」とあわせて理解すると効果的です。

配列に要素を追加

const arr = [1, 2, 3];

const newArr = [...arr, 4];

console.log(newArr);
// [1, 2, 3, 4]

配列の末尾に要素を追加する場合にも活用できます。

配列操作の全体像は、
「JavaScriptの配列操作まとめ（map・filter・reduce）」で整理しておくと理解が深まります。

オブジェクトでのスプレッド構文の使い方

オブジェクトのコピー

const obj1 = { name: "Taro", age: 20 };
const obj2 = { ...obj1 };

console.log(obj2);
// { name: "Taro", age: 20 }

オブジェクトも同様にコピーできます。

オブジェクトの結合

const obj1 = { name: "Taro" };
const obj2 = { age: 20 };

const result = { ...obj1, ...obj2 };

console.log(result);
// { name: "Taro", age: 20 }

複数のオブジェクトをまとめることができます。

プロパティの上書き

const obj1 = { name: "Taro", age: 20 };

const obj2 = { ...obj1, age: 25 };

console.log(obj2);
// { name: "Taro", age: 25 }

後から書いたプロパティが優先されるため、値の上書きが可能です。

スプレッド構文の注意点

浅いコピーである

スプレッド構文は「浅いコピー」です。

const obj1 = {
  name: "Taro",
  address: { city: "Tokyo" }
};

const obj2 = { ...obj1 };

obj2.address.city = "Osaka";

console.log(obj1.address.city);
// Osaka

ネストされたオブジェクトはコピーされず、参照が共有されます。

この点を理解していないと、意図しない変更が発生する可能性があります。

配列・オブジェクト以外では使えない

スプレッド構文は基本的に以下で使用されます。

• 配列
• オブジェクト
• 関数の引数

データ型の基礎については、
「JavaScriptのデータ型とは？基本から解説」で確認しておくと安心です。

スプレッド構文と関数の関係

スプレッド構文は、関数の引数にも使用できます。

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

const arr = [1, 2, 3];

console.log(sum(...arr));
// 6

配列の要素を引数として展開することができます。

関数の基本については、
「JavaScriptの関数とは？基本と使い方を徹底解説」を参照すると理解が深まります。

スプレッド構文と分割代入との違い

似た機能として「分割代入」がありますが、役割は異なります。

• スプレッド構文：展開する
• 分割代入：取り出す

const arr = [1, 2, 3];

const [a, b, c] = arr;

console.log(a);
// 1

両者をセットで理解することで、データ操作の幅が広がります。

スプレッド構文がよく使われる場面

スプレッド構文は、以下のような場面で頻繁に使われます。

• 配列やオブジェクトのコピー
• データの結合
• 状態管理（Reactなど）
• 関数の引数展開

特に「元データを壊さずに処理したい」場合に有効です。

まとめ

スプレッド構文は、配列やオブジェクトを扱う上で非常に重要な機能です。

• ...でデータを展開できる
• 配列・オブジェクトのコピーや結合が簡単
• 浅いコピーである点に注意
• 関数の引数にも利用可能

日常的なコードの可読性と安全性を高めるため、早い段階で習得しておくことが重要です。

関連記事

• JavaScriptの配列操作まとめ（map・filter・reduce）
• JavaScriptのconcat()とは？配列を結合する方法
• JavaScriptの関数とは？基本と使い方を徹底解説
• JavaScriptのデータ型とは？基本から解説

これらをあわせて学習することで、JavaScriptの基礎理解がより強固になります。