【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【圧倒的 低コスト】Oracle Cloud 構築・運用保守・監視サービス

【圧倒的 低コスト】Oracle Cloud 構築・運用保守・監視サービス

【WordPress専用】高速 クラウド / サーバー『WebSpeed』

【WordPress専用】高速 クラウド / サーバー『WebSpeed』

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【SNSアプリ開発】LINE カスタムアプリ開発サービス

【SNSアプリ開発】LINE カスタムアプリ開発サービス

【ECアプリ開発】Shopify カスタムアプリ開発サービス

【ECアプリ開発】Shopify カスタムアプリ開発サービス

【音声アプリ開発】Twilio カスタムアプリ開発サービス

【音声アプリ開発】Twilio カスタムアプリ開発サービス

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【グローバル対応】北米リージョン・クラウド / サーバー サポート

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

【取材記事】サーバーサイド・バックエンドエンジニアを募集中

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

「...」って・・・? 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/

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
7
読み込み中...
7 票, 平均: 1.00 / 17
437
facebook twitter はてなブックマーク
【大阪 / 横浜】インフラエンジニア / サーバーサイドエンジニア 積極採用中!

【大阪 / 横浜】インフラエンジニア / サーバーサイドエンジニア 積極採用中!

この記事をかいた人

About the author

山田雄貴

2021年株式会社ビヨンド入社
趣味はカラオケやボードゲーム
ボードゲームのが一つの棚で収まりきらなくなったため、新しい棚を購入したいが、家に棚を置く場所が無く悲しんでいる。
金型の設計や営業の経験もあり、多種多様な経験を積みサーバーサイドエンジニアの仕事に落ち着いている。
現在はPHPやPythonを用いたサーバーサイドの開発に従事している。
将来的にはフロントエンドの言語も習得したく、ReactベースのフロントエンドフレームワークであるNext.jsが気になっている。