2026年4月16日
JavaScript スプレッド構文とは？
JavaScriptの スプレッド構文（...） は、配列やオブジェクトを「展開」する構文です。3つのドット（...）で表します。
配列のコピー・結合・関数への引数展開など、さまざまな場面で使えます。ES2015（ES6）で追加された比較的新しい構文ですが、現在のブラウザではすべて対応しています。モダンなJavaScriptでは必須の知識なので、しっかり覚えましょう。
配列への使い方
const a = [1, 2, 3];
const b = [4, 5, 6];
// 配列のコピー
const copy = [...a];
console.log(copy); // [1, 2, 3]
// 配列の結合
const merged = [...a, ...b];
console.log(merged); // [1, 2, 3, 4, 5, 6]
// 要素を追加しながらコピー
const added = [...a, 4, 5];
console.log(added); // [1, 2, 3, 4, 5]🔗 あわせて変数入門もチェックしてみましょう。
関数の引数に展開する
const nums = [3, 1, 4, 1, 5, 9];
// Math.maxに配列を展開して渡す
console.log(Math.max(...nums)); // 9
function add(a, b, c) {
return a + b + c;
}
const args = [1, 2, 3];
console.log(add(...args)); // 6📖 詳しくはfetch入門で解説しています。
オブジェクトへの使い方
const user = { name: '田中', age: 15 };
// オブジェクトのコピー
const copy = { ...user };
// プロパティを追加・上書きしながらコピー
const updated = { ...user, age: 16, email: '[email protected]' };
console.log(updated);
// { name: '田中', age: 16, email: '[email protected]' }
// 2つのオブジェクトをマージ（結合）する
const defaults = { theme: 'light', lang: 'ja' };
const settings = { theme: 'dark' };
const merged = { ...defaults, ...settings };
console.log(merged); // { theme: 'dark', lang: 'ja' }オブジェクトのマージでは、後に書いたプロパティが優先されます。デフォルト設定とユーザー設定を組み合わせるパターンでよく使います。
👉 配列の基本も参考にしてください。
実践例：関数の引数に使う
スプレッド構文は関数呼び出しでも便利です。配列の要素を個別の引数として渡せます。
const scores = [85, 92, 78, 96, 88];
// Math.max() は個別の引数を受け取る
// スプレッド構文で配列を展開して渡す
const highest = Math.max(...scores);
console.log(highest); // 96
// 配列を結合する
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]実践例：状態の更新（React風パターン）
Reactなどのフレームワークでは、スプレッド構文を使って状態を更新するパターンが頻出します。元のオブジェクトを変更せず、新しいオブジェクトを作るのがポイントです。
// ユーザー情報を更新する（元のオブジェクトは変更しない）
const user = { name: '田中', age: 15, school: '中学校' };
const updatedUser = { ...user, age: 16 };
console.log(user.age); // 15（元のまま）
console.log(updatedUser.age); // 16（新しいオブジェクト）
// 配列に要素を追加する（元の配列は変更しない）
const todos = ['宿題', '部活'];
const newTodos = [...todos, '買い物'];
console.log(todos.length); // 2（元のまま）
console.log(newTodos.length); // 3このパターンを「イミュータブル（不変）な更新」と呼びます。元のデータを壊さないので、バグが起きにくくなります。Reactでは状態管理にこのパターンが必須なので、今のうちに慣れておきましょう。
📖 オブジェクト入門でオブジェクトの基本を確認できます。
よくある間違い
- ネストされたオブジェクトはシャローコピー：スプレッド構文のコピーは「浅いコピー（シャローコピー）」です。ネストされたオブジェクトは参照が共有されるため、変更が元のオブジェクトにも影響します。
- スプレッド構文とrest構文の混同：
...は使う場所によって意味が変わります。関数の引数定義で使うと「残りの引数をまとめる」rest構文になります。
📖 スコープの基本で変数の参照範囲を理解しましょう。
レスト構文との違い
スプレッド（展開する）とレスト（まとめる）は見た目は同じ ... ですが、使う場所で意味が変わります。
- スプレッド：配列→個別の値に展開（関数呼び出し・配列リテラルで使う）
- レスト：個別の値→配列にまとめる（関数の引数定義・分割代入で使う）
// レスト構文の例：残りの要素をまとめる
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [3, 4, 5]
// 関数の残余引数
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10「展開する場所で使えばスプレッド、受け取る場所で使えばレスト」と覚えましょう。
注意点とよくある間違い
- シャローコピーの限界：ネストしたオブジェクトは参照が共有されます。深いコピーが必要な場合は
structuredClone()を使いましょう。 - 大量データではパフォーマンスに影響：数万件のデータをスプレッドでコピーすると処理が重くなることがあります。
- 文字列にスプレッドを使う：
[..."hello"]は["h","e","l","l","o"]になります。意図しない結果にならないよう注意しましょう。 - オブジェクトの上書き順序：
{...a, ...b}ではbのプロパティが優先されます。同じキーがある場合、後に書いた方が残ります。
🔗 配列の基本・オブジェクト・分割代入・関数の引数・JavaScript入門も参考にしてください。
💡 スプレッド構文は最初は「なぜ必要なの？」と感じるかもしれませんが、実際のアプリ開発では毎日のように使います。特にReactやVueなどのフレームワークでは、状態管理でスプレッド構文が必須です。今のうちに使い方を覚えておきましょう。
- ✅ スプレッド構文（...）：配列・オブジェクトを展開する
- ✅ 配列のコピー・結合に使える
- ✅ 関数の引数に配列を展開して渡せる
- ✅ オブジェクトのコピー・プロパティの追加・上書きに使える
スプレッド構文を使いこなすと、配列・オブジェクトの操作がシンプルになります。レッスンでさらに実践的な使い方を学んでみましょう。
🚀 JavaScriptをレッスンで学ぼう！
このサイトのJavaScriptコースでは、スプレッド構文を使った実践的なプログラムをブラウザだけで学べます。無料・登録不要です。
JavaScriptコースを見る →