【サクッと解説】JavaScript スプレッド構文

2025年8月5日

1. 本記事のポイント

JavaScriptのスプレッド構文（...）と残余引数（rest parameter）の基本構文を整理
配列・オブジェクト操作、関数定義での具体的な活用シーンを紹介
実務でありがちな誤用や混同ポイントを解説

2. スプレッド構文と残余引数とは？

JavaScriptでは、...（ドット3つ）を使った構文が2種類存在します。1つはスプレッド構文（spread syntax）、もう1つは**残余引数（rest parameter）**です。

スプレッド構文は、配列やオブジェクトを展開して要素を取り出す際に使われます。代表的な用途は、配列のコピー、結合、関数呼び出し時の引数展開です。

一方、残余引数は関数定義で使われ、可変長の引数を1つの配列として受け取る手段です。どちらも構文上は ... を使いますが、使用位置と目的が異なります。

スプレッド構文と残余引数はどちらもES6以降で導入されており、可読性と柔軟性を高めるために広く使われています。実務では、APIレスポンスの加工やパラメータのバインド、ReactのProps展開など多くの場面で利用されます。

3. 詳細解説

配列のコピー・結合（スプレッド構文）

配列を浅くコピーしたり、複数の配列を結合する場面で使います。

JavaScript

const original = [1, 2, 3];
const copy = [...original]; // 浅いコピー
const extended = [...original, 4, 5]; // 要素の追加

console.log(copy);     // [1, 2, 3]
console.log(extended); // [1, 2, 3, 4, 5]

const original = [1, 2, 3];
const copy = [...original]; // 浅いコピー
const extended = [...original, 4, 5]; // 要素の追加

console.log(copy);     // [1, 2, 3]
console.log(extended); // [1, 2, 3, 4, 5]

関数引数への展開（スプレッド構文）

引数の配列を展開して関数に渡したい場合に使用します。

JavaScript

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

const nums = [10, 20, 30];
console.log(sum(...nums)); // 60

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

const nums = [10, 20, 30];
console.log(sum(...nums)); // 60

関数の残余引数の取得（rest parameter）

可変長の引数を受け取る関数で、引数を1つの配列として受け取れます。

JavaScript

function logAll(first, ...others) {
  console.log("first:", first);
  console.log("others:", others);
}

logAll("a", "b", "c", "d");
// first: a
// others: ["b", "c", "d"]

function logAll(first, ...others) {
  console.log("first:", first);
  console.log("others:", others);
}

logAll("a", "b", "c", "d");
// first: a
// others: ["b", "c", "d"]

オブジェクトのコピー・マージ（スプレッド構文）

オブジェクトでも同様に浅いコピーやプロパティの上書きマージに使えます。

JavaScript

const obj1 = { x: 1, y: 2 };
const obj2 = { y: 99, z: 3 };
const merged = { ...obj1, ...obj2 }; // yが上書きされる

console.log(merged); // { x: 1, y: 99, z: 3 }

const obj1 = { x: 1, y: 2 };
const obj2 = { y: 99, z: 3 };
const merged = { ...obj1, ...obj2 }; // yが上書きされる

console.log(merged); // { x: 1, y: 99, z: 3 }