こんにちは！開発部の上條です🔋
今回の記事ではJavaScriptの「スプレッド構文」と「レスト構文（残余構文）」についてご紹介いたします。
なるべくわかりやすく記事にまとめたいと思います。それでは、本稿もどうぞよろしくお願いいたします。
目次はこちら
- １.はじめに
- ２.スプレッド構文とは
- ３.レスト構文とは
- ４.まとめ
はじめに
スプレッド構文とレスト構文はわりと最近使えるようになったJavaScriptの構文です。今回説明する二つの構文には共通点があります。その共通点とは、どちらも「…」演算子を利用する点です。
この二つの構文、演算子は同じですが使い方は真逆で、
「スプレッド構文」は「展開」
「レスト構文」は「集約」
のために使用します。
スプレッド構文とは
スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。
MDN -スプレッド構文-
つまり「引数、 配列リテラル、 オブジェクトリテラル」に対してオブジェクトを「展開」出来ると言う事です。
引数に展開
例：配列から最大値を取得
See the Pen
GRJYpmX by kamijodev (@kamijodev)
on CodePen.
例：複数の配列や数値から最大値を取得
See the Pen
スプレッド例２ by kamijodev (@kamijodev)
on CodePen.
例：インスタンス生成時の引数
See the Pen
ZEGqbXW by kamijodev (@kamijodev)
on CodePen.
配列リテラルに展開
例：配列の複製
See the Pen
スプレッド例４ by kamijodev (@kamijodev)
on CodePen.
例：配列の結合
See the Pen
スプレッド例５ by kamijodev (@kamijodev)
on CodePen.
オブジェクトリテラルに展開
例：オブジェクトの複製
See the Pen
スプレッド例６ by kamijodev (@kamijodev)
on CodePen.
ここまで見ていただければスプレッド構文について大体は理解できたのではないかと思います。
次はレスト構文です。冒頭でも述べましたが、レスト構文は「集約」です。
レスト構文(残余構文)とは
複数の要素を「集約」して 1 つのオブジェクトにまとめることが出来ます。
関数の引数(残余引数構文・Rest Parameters)や、次回記事予定の「分割代入構文」に使用することが出来ます。
残余引数構文
例：不定数の引数を配列として受け取る
See the Pen
レスト例１ by kamijodev (@kamijodev)
on CodePen.
まとめ
今回はスプレッド構文とレスト構文について説明させていただきました。
レスト構文には「残余引数構文」だけでなく、「分割代入構文」でも使用することがあります。
JavaScriptの「分割代入構文」の使い方については、こちらの記事にて詳しく紹介してます。
Japanese 
English