【JavaScript】スプレッド構文を理解する

JavaScriptのコードを見ていると時々見かける「…」

これは、スプレッド構文と呼ばれるものです。スプレッド構文は配列やオブジェクトに対して使う記法で内部の要素を順番に展開してくれる役割があります。

今回はそんなスプレッド構文についてまとめてみようと思います。スプレッド構文の主な役割は、

• 要素を展開する
• 要素をまとめる
• 要素をコピー/結合する

となります。ES2015で新しく追加され記法でよく使われている構文です。

…がコード内に書かれていた場合に何これ!?とならないようになんとなくでも知っておくべき構文です。

要素を展開する

スプレッド構文は、…（ドット3つ)で表します。

例えば以下のような配列があって配列の中身を出力したいとします。

const array1 = ["織田信長","豊臣秀吉","徳川家康"]

これを出力する場合にスプレッド構文なしで書くと

const array1 = ["織田信長","豊臣秀吉","徳川家康"]
console.log(array1[0],array1[1],array1[2])

[Running] node "c:\javascript\main.js"
織田信長 豊臣秀吉 徳川家康

一つ一つ配列を指定する必要があります。しかしスプレッド構文で書くと

const array1 = ["織田信長","豊臣秀吉","徳川家康"]
console.log(...array1)

[Running] node "c:\javascript\main.js"
織田信長 豊臣秀吉 徳川家康

…配列を指定するだけで配列の中身を順番に展開してくれます。
かなり、簡潔に書けるようになりました。

要素をまとめる

スプレッド構文は、配列の要素をまとめることもできます。以下は配列array1に1,2,3,4,5の５つの要素があって、3,4,5の後ろ3つだけを別の配列にまとめたいとします。この場合に以下のように書いて配列をまとめることが可能です。

const array1 = [1,2,3,4,5];
const [num1,num2,...array2]=array1;

console.log(num1)
console.log(num2)
console.log(array2)

[Running] node "c:\javascript\main.js"
1
2
[ 3, 4, 5 ]

要素をコピー/結合する

配列のコピー

ある配列をそのままコピーすることもできます。ここではarray1の武将をそのままarray2にコピーするときの書き方です。

const array1 = ["織田信長","豊臣秀吉","徳川家康"]
const array2 = [...array1]
console.log(...array1)
console.log(...array2)

[Running] node "c:\javascript\main.js"
織田信長 豊臣秀吉 徳川家康
織田信長 豊臣秀吉 徳川家康

array1にもarray2にも同じ要素が入っています。配列のコピーは他にも=(イコール)で変数をコピーする方法もよくとられると思います。この場合、イコールでコピーした場合は、変数が参照している参照値も引き継がれますが、スプレッド構文でコピーすると参照値は引き継がれません。

これを証明するためにイコールで配列をコピーして、配列の値を変更すると

const array1 = ["織田信長","豊臣秀吉","徳川家康"]
const array2 = array1
//徳川家康を石田三成に変更
array1[2] = "石田三成"

console.log(array1)
console.log(array2)

[Running] node "c:\javascript\main.js"
[ '織田信長', '豊臣秀吉', '石田三成' ]
[ '織田信長', '豊臣秀吉', '石田三成' ]

array1array2両方ともに値が変わります。

スプレッド構文でコピーした場合は、

const array1 = ["織田信長","豊臣秀吉","徳川家康"]
//スプレッド構文でコピー
const array2 = [...array1]
//徳川家康を石田三成に変更
array1[2] = "石田三成"

console.log(array1)
console.log(array2)

[Running] node "c:\javascript\main.js"
[ '織田信長', '豊臣秀吉', '石田三成' ]
[ '織田信長', '豊臣秀吉', '徳川家康' ]

array1は変更されていますが、スプレッド構文でコピーしたarray2は変更されていないことが分かります。JavaScriptでは、変数の値によって画面を書き換える処理などを組むことが多いのでスプレッド構文でのコピーは結構使われます。

配列の結合

スプレッド構文は配列の結合をすることもできます。以下はarray1とarray2の二つの配列を結合して表示させるプログラムです。スプレッド構文を使うことで簡単に結合することができます。

const array1 = ["織田信長","豊臣秀吉","徳川家康"]
const array2 = ["石田三成","明智光秀"]

console.log(...array1,...array2)

[Running] node "c:\javascript\main.js"
織田信長 豊臣秀吉 徳川家康 石田三成 明智光秀

array1とarray2が結合されています。

オブジェクトのコピーと結合

配列だけではなくオブジェクトも当然コピー及び結合が可能です。

const obj1 ={val1:"織田信長",val2:"豊臣秀吉",val3:"徳川家康"};
const obj2 = {val4:"石田三成",val5:"明智光秀"};

//スプレッド構文でコピー
obj3 = {...obj1};
//スプレッド構文で結合
obj4 = {...obj1,...obj2};

console.log(obj3)
console.log(obj4)

[Running] node "c:\javascript\main.js"
{ val1: '織田信長', val2: '豊臣秀吉', val3: '徳川家康' }
{
  val1: '織田信長',
  val2: '豊臣秀吉',
  val3: '徳川家康',
  val4: '石田三成',
  val5: '明智光秀'
}

まとめ

スプレッド構文についてまとめると