「...」って・・・？　ES2015で追加されたスプレッド構文について解説します

お疲れ様です！
システム開発部の山田です。

今回は、ES2015で追加された配列などを展開する際に使用できるスプレッド構文について解説していきます。

スプレッド構文とは？

「...」を配列やオブジェクトの前に記載して使用する物がスプレッド構文です。
配列やオブジェクトなどを展開したい場合に使用する事ができます。
この機能は配列に対してはES2015で、オブジェクトに対してはES2018で追加された新機能です！
具体的には、関数呼び出し時複数の引数を指定する際や、
配列やオブジェクトの複製をしたい場合に使用できます。
以降では実際のコードを用いて動きを確認していきたいと思います。

配列での使用

新しい要素を追加した配列を作成

const fruits1 = ["りんご", "ばなな", "もも"];

const newFruits1 = ["はっさく", ...fruits1];
console.log(newFruits1);
// 結果：['はっさく', 'りんご', 'ばなな', 'もも']

結合した配列を作成

const fruits1 = ["りんご", "ばなな", "もも"];
const fruits2 = ["ぶどう", "みかん"];

const newFruits2 = [...fruits1, ...fruits2];
console.log(newFruits2);
// 結果：['りんご', 'ばなな', 'もも', 'ぶどう', 'みかん']

スプレッド構文を使用した場合のコピー

const fruits1 = ["りんご", "ばなな", "もも"];
const spreadArray = [...fruits1];

console.log(spreadArray === fruits1); // 結果：false

fruits1.push('すいか')

console.log(fruits1); // 結果：['りんご', 'ばなな', 'もも', 'すいか']
console.log(spreadArray); // 結果：['りんご', 'ばなな', 'もも']

変数fruits1と変数spreadArrayを厳密等価演算子(===)で比較した場合falseになります。
これは変数spreadArrayには値のみがコピーされている事が理由です。
試しに、変数fruits1に「すいか」を追加した場合、fruits1には反映されていますが、値のみをコピーしている変数spreadArrayには反映されていない事からも確認ができます。

オブジェクトでの使用

新しい要素を追加したオブジェクトを作成

const user = { id: 1, name: "太郎", age: 20 };

const addHeightUser = { height: 170, ...user };
console.log(addHeightUser);
// 結果：{height: 170, id: 1, name: '太郎', age: 20}

要素を変更したオブジェクトを作成

const user = { id: 1, name: "太郎", age: 20 };

const changeNameUser = { ...user, name: "次郎" };
console.log(changeNameUser);
// 結果：{id: 1, name: '次郎', age: 20}

重複しているキーに関しては、最後に定義した物が有効になる

結合したオブジェクトを作成

const user = { id: 1, name: "太郎", age: 20 };
const userHobby = { hobby: "ボードゲーム" };

const data = { ...user, ...userHobby };
console.log(data);
// 結果：{id: 1, name: '太郎', age: 20, hobby: 'ボードゲーム'}

スプレッド構文を使用した場合のコピー

const user = { id: 1, name: "太郎", age: 20 };
const spreadObj = { ...user };

console.log(spreadObj === user); // 結果：false

配列と同様、変数spreadObjには値のみがコピーされているため、厳密等価演算子(===)で比較した場合falseになります。

メソッドでの使用

複数の引数へ挿入する際に配列を展開して使用する事が可能

const array = ["太郎", 20];

const display = (userName, userAge) =>;
  console.log(`名前は${userName}、年齢は${userAge}`);

display(...array) // 結果：名前は太郎、年齢は20

スプレッド構文を使用し可変長引数とする事が可能

const display = (...numbers) => console.log(numbers);

display(1, 2, 3); // 結果：[1, 2, 3]
display(1, 2, 3, 4); // 結果：[1, 2, 3, 4]

変数の値は配列として取得できる

まとめ

今回はES2015から追加されたjavascriptで配列やオブジェクトの展開を行えるスプレッド構文について解説いたしました。
配列やオブジェクトの値をコピーする場合に、簡単に記載する事ができるため、今後も積極的に使用していきたいです。

最後に

私が所属するシステム開発のサービスサイト「SEKARAKU Lab（セカラク ラボ）」を開設しました。
ビヨンドは、サーバーの設計・構築から運用までをワンストップでお任せいただけますので、サーバーサイド開発でお困りの方はお気軽にお問い合わせください。
SEKARAKU Lab：https://sekarakulab.beyondjapan.com/