JavaScript

【JavaScript】…ドット3つの意味と使い方|スプレッド構文とレスト構文について理解しよう

JavaScriptで他人が作成したソースコードを見ていると、「…」と記述された処理を見たこと1度はあると思います。

当時の私はこの…が何を指しているのか全く分からず、この処理は結局何をするのか理解できませんでした。昨今のJavaScriptを使った開発では使用される機会が増えているので、まだ理解できていない人はこちらの記事を参考に基本的な使い方を覚えましょう。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

スプレッド構文とレスト構文について

JavaScriptの「…」にはスプレッド構文レスト構文の2つの意味があります。スプレッド構文とレスト構文の基本的な使い方や違いについて解説していきます。

スプレッド構文の基本的な使い方

MDNで記載されているスプレッド構文の内容は以下のとおりです。

スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

引用元:MDN

MDNの解説の内容は要約すると、関数などで使用される引数や配列・オブジェクトなどに代入されている値をスプレッド構文(…)を使うことで、展開することができます。この「展開」がスプレッド構文の重要なポイントです。

下記のコードはスプレッド構文を使ったサンプルになります。

const name = ["田中","鈴木","山田"];

// 通常
console.log(name); // -> ['田中', '鈴木', '山田']

// スプレッド構文で配列を展開
console.log(...name); // -> 田中 鈴木 山田

スプレッド構文を配列で使う

配列でスプレッド構文を使ったサンプルコードを紹介します。

配列のコピー

スプレッド構文を使って配列のコピーをする方法は以下のとおりです。

const originalFruits = ["Apple", "Banana"];

// 配列のコピー
const copyFruits = [...originalFruits];
console.log(copyFruits); // -> ["Apple", "Banana"]

配列に値を追加

スプレッド構文を使って配列に値を追加する方法は以下のとおりです。

const originalFruits = ["Apple", "Banana"];

// 先頭に追加
const addFruits1 = ["Grape", ...originalFruits];
console.log(addFruits1); // -> ['Grape', 'Apple', 'Banana']

// 最後尾に追加
const addFruits2 = [...originalFruits, "Grape"];
console.log(addFruits2); // -> ['Apple', 'Banana', 'Grape']

// 真ん中に追加
const addFruits3 = ["Grape", ...originalFruits, "Strawberry"];
console.log(addFruits3); // -> ['Grape', 'Apple', 'Banana', 'Strawberry']

配列のマージ

スプレッド構文を使って2つの配列同士をマージ(統合)する方法は以下のとおりです。

const fruitsArr1 = ["Apple", "Banana"];
const fruitsArr2 = ["Grape", "Strawberry"];

// 配列のマージ
const integArr1 = [...fruitsArr1, ...fruitsArr2];
console.log(integArr1); // -> ['Apple', 'Banana', 'Grape', 'Strawberry']

const integArr2 = [...fruitsArr2, ...fruitsArr1];
console.log(integArr2); // -> ['Grape', 'Strawberry', 'Apple', 'Banana']

スプレッド構文をオブジェクトで使う

オブジェクトでスプレッド構文を使ったサンプルコードを紹介します。

オブジェクトのコピー

スプレッド構文を使ってオブジェクトのコピーをする方法は以下のとおりです。

const fruitsPrice = {
  Apple: 100,
  Banana: 150,
};

// オブジェクトのコピー
const fruitsPriceCopy = { ...fruitsPrice };
console.log(fruitsPriceCopy); // -> Apple: 100 Banana: 150

オブジェクトの追加

スプレッド構文を使ってオブジェクトに値を追加する方法は以下のとおりです。

const fruitsPrice = {
  Apple: 100,
  Banana: 150,
};

// オブジェクトの追加
const fruitsPriceAdd1 = { Grape: 300, Strawberry: 400, ...fruitsPrice };
console.log(fruitsPriceAdd1); // -> {Grape: 300, Strawberry: 400, Apple: 100, Banana: 150}

オブジェクトのマージ

スプレッド構文を使って2つのオブジェクト同士をマージ(統合)する方法は以下のとおりです。

const fruitsPriceObj1 = {
  Apple: 100,
  Banana: 150,
};

const fruitsPriceObj2 = {
  Grape: 300,
  Strawberry: 400,
};

// オブジェクトのマージ
const fruitsPriceInteg = { ...fruitsPriceObj1, ...fruitsPriceObj2 };
console.log(fruitsPriceInteg); // -> {Apple: 100, Banana: 150, Grape: 300, Strawberry: 400}

レスト構文の基本的な使い方

MDNで記載されているレスト構文の内容は以下のとおりです。

関数の最後の引数に ... の接頭辞を付けると、(ユーザーが提供した) その位置にある残りの引数を JavaScript の「標準の」配列の中に入れることができます。

引用元:MDN

MDNの解説の内容は要約すると、レスト構文(…)を引数の最後に設定すると残引数の値を配列の中に格納します。例えば、引数の数が2つで関数呼び出し時に渡される値が3つの場合、1つの値は引数に渡りません。この零された値を全て配列の中に格納します。

スプレッド構文は値を「展開」しますが、レスト構文は反対の値を「集約」します。

レスト構文を関数で使う

関数でレスト構文を使ったサンプルコードを紹介します。

残引数を取得

レスト構文を使って残引数を取得する方法は以下のとおりです。

function personalInfo(lastName, firstName, ...other) {
  console.log(`lastName:${lastName}`); // -> lastName:鈴木
  console.log(`firstName:${firstName}`); // -> firstName:一郎
  console.log(`other:${other}`); // -> other:25歳,男性
}

personalInfo("鈴木", "一郎", "25歳", "男性");

渡された値を全て取得

冒頭でレスト構文は残引数の値を配列に格納すると解説しましたが、引数を設定せずに全てレスト構文で値を配列に格納することも可能です。

レスト構文を使って関数呼び出し時に渡される全ての値を取得する方法は以下のとおりです。

function personalInfo(...info) {
  console.log(info);
}

console.log(personalInfo("田中", "太郎", "20歳")); // -> ['田中', '太郎', '20歳']
console.log(personalInfo("鈴木", "一郎", "25歳", "男性")); // ->  ['鈴木', '一郎', '25歳', '男性']

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村