ソースコードの中で...という記述が出てきたんだけど、
これは何を意味しているの？
最初はこの3つのドットを見ると不思議に思うよね。
「…」について分かりやすく解説していくね！
スプレッド構文とは？
...を使って表現したものをスプレッド構文と言います。
スプレッド構文は、配列やオブジェクトの全ての値を別のリストに入れるときに使います。
スプレッド構文は配列やオブジェクトに対して使うよ。
スプレッド構文は配列の[]とオブジェクトの{}を外す役割をします。
console.log(...[1, 2, 3]);
// 1 2 3そのため[1, 2, 3]と[...[1, 2, 3]]は同一となります。
スプレッド構文の使い方
スプレッド構文は配列やオブジェクトの値を、追加・結合・コピー（複製）するきに役立ちます。
配列
スプレッド構文を使わない場合、配列を操作するためには、push()、concat()、splice()などをメソッドを組み合わせないといけませんでした。
しかしスプレッド構文を使うことでそれらのメソッドを使わずに簡単に操作することができます。
追加
配列に値を追加する方法です。展開した後に値を指定します。
let numbers = [1, 2, 3];
let numbers = [...numbers, 4];
// numbers: [1, 2, 3, 4]またこのように、一部分に挿入することもできます。
const parts = [3, 4];
const numbers = [1, 2, ...parts, 5];
// numbers: [1, 2, 3, 4, 5];結合
配列同士を結合する方法です。[]の中で結合したい配列を...で並べます。
const a = [1, 2];
const b = [3, 4];
const numbers = [...a, ...b];
// numbers: 1, 2, 3, 4コピー
配列をコピーする方法です。これはslice()メソッドと同一の動きになります。
const arr = [1, 2, 3];
const copy = [...arr];
// copy: [1, 2, 3]const arr = [[1], [2], [3]];
const copy = [...arr];
// copy: [[1], [2], [3]]オブジェクト
オブジェクトでもスプレッド構文を使うことができます。
追加
オブジェクトに値を追加する方法です。
let colors = { white: '白', black: '黒', red: '赤' };
let colors = { ...colors, blue: '青' };
// colors: { white: '白', black: '黒', red: '赤', blue: '青' }変更
オブジェクトの値を変更する方法です。
既に登録されているキーを指定することで、そのキーの値を変更します。
let colors = { white: '白', black: '黒', red: '赤' };
let colors = { ...colors, red: '紅' };
// colors: { white: '白', black: '黒', red: '紅' }結合
オブジェクト同士を結合する方法です。[]の中で結合したいオブジェクトを...で並べます。
const a = { white: '白', black: '黒' };
const b = { red: '赤', blue: '青' };
const colors = { ...a, ...b };
// colors: { white: '白', black: '黒', red: '赤', blue: '青' }const a = { white: '白', black: '黒' };
const b = { black: 'グレー', red: '赤' };
const colors = { ...a, ...b };
// colors: { white: '白', black: 'グレー', red: '赤' }コピー
オブジェクトをコピーする方法です。
スプレッド構文を使った方がObject.assign()を使うよりも短く記述できます。
const arr = { white: '白', black: '黒', red: '赤' };
const copy = { ...arr };
// copy: { white: '白', black: '黒', red: '赤' }スプレッド構文を使ってコピーする理由
スプレッド構文で複製をしないとコピー元の値も同時に変更されてしまうため、
別の配列やオブジェクトとして扱いたいときはスプレッド構文を使ってコピーをします。
これは浅いコピーと深いコピーを意識する必要があります。
const arr = [1, 2, 3];
const copy = arr;
copy.push(4);
// arr: [1, 2, 3, 4]
// copy: [1, 2, 3, 4]const arr = [1, 2, 3];
const copy = [...arr];
copy.push(4);
// arr: [1, 2, 3]
// copy: [1, 2, 3, 4]このようにコピーした配列に変更を加えたとしても、浅いコピーではコピー元に反映されてしまいます。
そのためコピーするとには注意が必要です。
スプレッド構文でのコピーは深いコピーとなるため、コピー元には影響を与えません。
浅いコピーと深いコピー注意だね！
まとめ
今回はスプレッド構文について解説したよ！
見た目は難しく感じるけど、使ってみると簡単だよね。
- スプレッド構文は全ての値を別のリストに入れるときに使う
- スプレッド構文は配列やオブジェクトに対して使うことができる
- スプレッド構文を使うことで、追加・結合・コピーを簡潔に書くことができる
最初は難しく感じたけど、使い方が分かると簡単だね！
