このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】スプレッド構文

スプレッド構文

　JavaScript の スプレッド構文 は、配列の要素をひとつずつ展開して、関数の引数やオブジェクト・配列の合成に活用できる記法です。ドット 3つの「...」がそのまま「要素やプロパティを分解して取り出す」という動きを表しています。特に、関数に引数として複数の要素を一括で渡したい場合や、複数の配列・オブジェクトをまとめて操作したい場合に便利です。

１．スプレッド構文とは

1.1．基本の書き方

　スプレッド構文を使う最も単純な例として、配列を「...配列」と書くと、その配列の要素を個別に展開することができます。

関数名(...配列);

たとえば、配列に含まれる要素をひとつずつ「引数」として受け取りたいときなどに有効です。

1.2．関数に引数を展開して渡す

　複数の要素を含む配列がある場合、従来であれば配列をひとつずつ添え字で取り出して関数に渡さなければいけませんでした。スプレッド構文を使うと、非常に短い記述で同じことができます。

２．具体的な例

2.1．関数に配列を展開して渡す

　次のサンプルでは、setOrder() という関数が4つの引数を受け取り、コンソールに表示します。従来のやり方だと setOrder(orders[0], orders[1], ...) のように書きますが、スプレッド構文なら setOrder(...orders) でOKです。

【mySpreadExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>mySpreadExample.html</title>
</head>
<body>
  <h1>スプレッド構文のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて結果をチェックしてください。</p>

  <script>
    // 注文を受け取る関数
    function setOrder(order1, order2, order3, order4) {
      console.log('1番目:', order1);
      console.log('2番目:', order2);
      console.log('3番目:', order3);
      console.log('4番目:', order4);
    }

    // 配列を用意
    const orders = ['サンドイッチ', 'フレンチトースト', 'オレンジジュース', 'カフェラテ'];

    // スプレッド構文を使って配列を展開し、4つの引数として渡す
    setOrder(...orders);
  </script>
</body>
</html>

実行結果

デバックコンソールの出力

上記を実行すると、コンソールには次のような結果が表示されます。

1番目: サンドイッチ
2番目: フレンチトースト
3番目: オレンジジュース
4番目: カフェラテ

2.2．スプレッド構文で配列を合体

スプレッド構文は、配列同士を簡単に合体させるときにも使えます。

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

// 合体前: arr1, arr2 それぞれ別の配列
// 合体後: ...arr1, ...arr2 の展開で [1, 2, 3, 4, 5, 6] を作る
const merged = [...arr1, ...arr2];
console.log(merged); 
// => [1, 2, 3, 4, 5, 6]

　同様にオブジェクトのスプレッド構文（ES2018 以降）で、オブジェクトのプロパティをまとめたり上書きしたりも可能です。

まとめ

  • スプレッド構文は「...」で配列などの要素を展開する便利な記法。
  • 関数の引数として配列を展開したい場合、functionName(...array) と書くだけで済む。
  • 配列同士やオブジェクト同士を合体（マージ）するときにもスプレッド構文は強力。
  • 従来の方法（Function.apply など）に比べ、コード量が減り可読性が向上する。

　以上がスプレッド構文の基礎です。特に配列やオブジェクトを柔軟に扱う際に大変便利なので、今後のコーディングでぜひ活用してみてください。