JavaScriptのスプレッド演算子（...）とは？基本構文から実践的な使い方まで徹底解説

JavaScriptのスプレッド演算子は、配列などの反復可能なオブジェクト（イテラブル）を展開し、その中身を個々の要素として扱えるようにする構文です。オブジェクトの複製、配列の結合、関数への引数の受け渡しなど、日常的なコーディングで頻繁に活用される非常に便利な機能です。

この記事では、スプレッド演算子の基本的な仕組みから、よく使われるユースケースまで、具体的なコード例とともにわかりやすく解説します。

JavaScriptのスプレッド演算子とは？

スプレッド演算子を使うと、イテラブル（反復可能なオブジェクト）の中身にアクセスできます。記述方法はシンプルで、「3つのドット（...）」の後にアクセスしたいイテラブルの名前を続けるだけです。この演算子はES6（ECMAScript 2015）で導入されました。

イテラブルとして扱える主なデータ型は、配列・オブジェクトリテラル・文字列の3種類です。これらはforループなどで順番に処理でき、同じ操作を繰り返し適用できるのが大きな特徴です。たとえば、文字列を1文字ずつ走査して特定の文字を置き換えたり、配列内のすべての値を合計したりすることができます。

スプレッド演算子の基本構文は次のとおりです。

var names = ["John", "Lisa", "Harry"];
var new_names = [...names, "Leslie"];
console.log(new_names);

この例では、...namesによって「names」配列の中身を展開し、「new_names」という新しい配列に格納しています。結果として「new_names」には元の配列の全要素に加えて、新しい要素「Leslie」が追加されます。

スプレッド演算子の主なユースケースは以下の3つです。

• イテラブルのコピーを作成する
• 新しいイテラブルに要素を追加する
• 関数に引数のリストを渡す

ユースケース①：配列やオブジェクトのコピーを作成する

スプレッド演算子は、イテラブルを複製するための最も手軽な方法のひとつです。コピーしたい配列名の前にドットを3つ付けるだけで、簡単に複製できます。

const lemon_drizzle = {
	name: "Lemon Drizzle",
	price: 1.95,
	vegan: true
}

const new_lemon_drizzle = {...lemon_drizzle};
console.log(new_lemon_drizzle);

このコードを実行すると、コンソールには次のように出力されます。

{ name: "Lemon Drizzle", price: 1.95, vegan: true }

ここで押さえておきたい重要なポイントが2つあります。

まず、これはJavaScriptオブジェクトのコピーであるため、配列で使う角括弧 [] ではなく、波括弧 {} を使用します。次に、単一の配列ではなく、キーと値のペアを3つ持つオブジェクトを指定している点です。各プロパティは「レモンドリズルカップケーキ」に関する情報（名前・価格・ヴィーガン対応かどうか）を表しています。

ユースケース②：新しいイテラブルに要素を追加する

スプレッド演算子の用途はコピーだけにとどまりません。あるイテラブルの要素を別のイテラブルに追加する際にも広く使われています。次の例を見てみましょう。

const cupcakes = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_cupcakes = [...cupcakes, 'Red Velvet', 'Raspberry Dark Chocolate'];
console.log(new_cupcakes);

このコードの出力結果は次のとおりです。

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

元の配列「cupcakes」をコピーした新しい配列「new_cupcakes」を作成し、さらに独自の要素を2つ追加しています。

同じ構文を使えば、2つのイテラブルを結合（マージ）することも可能です。角括弧の中に、スプレッド演算子付きの2つの配列を並べるだけです。

const old_menu = [
	'Lemon Drizzle',
	'Chocolate Chip',
	'Vanilla Iced'
];

const new_menu = [
	'Red Velvet',
	'Raspberry Dark Chocolate'
]

const final_menu = [...old_menu, ...new_menu];
console.log(final_menu);

出力結果：

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

先ほどと同じ結果が得られましたが、今回は2つの別々の配列を1つにマージしている点が異なります。

ユースケース③：関数に引数を渡す

JavaScriptの関数に複数の引数を渡す場合にも、スプレッド演算子が役立ちます。まずは通常の書き方から見てみましょう。

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

placeOrder('Geoff', 'Red Velvet', 1.85);

出力結果：

Name: Geoff
Order: Red Velvet
Price: 1.85

この例では、3つの引数を受け取ってコンソールに出力する関数 placeOrder() を定義しています。各値には、引数の内容を示すラベルが付けられています。

このコードでも問題なく動作しますが、引数をあらかじめ配列として定義しておき、スプレッド演算子で関数に渡すこともできます。

function placeOrder(name, order, price) {
	console.log('Name: ' + name);
	console.log('Order: ' + order);
	console.log('Price: ' + price);
}

const order = ['Geoff', 'Red Velvet', 1.85];

placeOrder(...order);

出力結果：

Name: Geoff
Order: Red Velvet
Price: 1.85

出力内容は先ほどとまったく同じですが、コードの動き方は異なります。値を直接関数に渡す代わりに、値をリスト（配列）として定義し、スプレッド演算子でその中身を展開して関数に渡しているのです。この書き方なら、引数の管理がひとつの配列にまとまるため、コードの保守性も向上します。

まとめ

スプレッド演算子は、現代のJavaScript開発において欠かせない機能のひとつです。イテラブルのコピー、新しいイテラブルへの要素追加、関数への引数渡しなどを、簡潔で読みやすいコードで実現できます。構文は非常にシンプルで、ドット3つ（...

ぜひ実際のコードでスプレッド演算子を試して、プロ級のJavaScriptスキルを身につけてください。