JavaScriptでスプレッド構文を使いこなす！10の使い方・サンプルコード徹底解説

はじめに

この記事を読めば、JavaScriptでスプレッド構文を使いこなすことができるようになります。

●スプレッド構文とは

スプレッド構文は、配列やオブジェクトの要素を展開して、新しい配列やオブジェクトを作成するためのJavaScriptの機能です。

スプレッド構文は、短くて簡潔なコードで複雑な処理を実現できるため、より効率的なコーディングが可能になります。

○スプレッド構文の基本

スプレッド構文は、3つのドット（…）を使って表現されます。

例えば、配列やオブジェクトをスプレッド構文で展開する場合は、下記のように記述します。

const array = [1, 2, 3];
const newArray = [...array];
console.log(newArray); // [1, 2, 3]

●スプレッド構文の使い方

スプレッド構文は、さまざまな場面で活用できます。

下記では、スプレッド構文の使い方をいくつかのサンプルコードと共に紹介します。

○サンプルコード1：配列の結合

スプレッド構文を使って、複数の配列を結合することができます。

下記の例では、配列aと配列bを結合して新しい配列cを作成しています。

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b];
console.log(c); // [1, 2, 3, 4, 5, 6]

○サンプルコード2：オブジェクトの結合

スプレッド構文を使って、複数のオブジェクトを結合することができます。

下記の例では、オブジェクトobj1とobj2を結合して新しいオブジェクトobj3を作成しています。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }

○サンプルコード3：関数の引数展開

スプレッド構文を使って、関数の引数を展開することができます。

下記の例では、配列argsを関数funcの引数として展開しています。

function func(a, b, c) {
  return a + b + c;
}

const args = [1, 2, 3];
console.log(func(...args)); // 6

○サンプルコード4：配列のコピー

スプレッド構文を使って、配列をコピーすることができます。

下記の例では、配列originalをコピーして新しい配列copyを作成しています。

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

○サンプルコード5：オブジェクトのコピー

スプレッド構文を使って、オブジェクトをコピーすることができます。

下記の例では、オブジェクトoriginalObjをコピーして新しいオブジェクトcopyObjを作成しています。

const originalObj = { a: 1, b: 2, c: 3 };
const copyObj = { ...originalObj };
console.log(copyObj); // { a: 1, b: 2, c: 3 }

●スプレッド構文の応用例

スプレッド構文を応用することで、より高度な処理が可能になります。

下記では、スプレッド構文の応用例をいくつかのサンプルコードと共に紹介します。

○サンプルコード6：最大値・最小値の取得

スプレッド構文を使って、配列の最大値や最小値を簡単に取得することができます。

下記の例では、配列numbersの最大値と最小値を取得しています。

const numbers = [3, 5, 1, 7, 2];
const max = Math.max(...numbers);
const min = Math.min(...numbers);
console.log(max); // 7
console.log(min); // 1

○サンプルコード7：配列の挿入

スプレッド構文を使って、配列の任意の位置に新しい要素を挿入することができます。

下記の例では、配列originalの2番目の位置に新しい要素4を挿入して、新しい配列newArrayを作成しています。

const original = [1, 2, 3];
const newArray = [...original.slice(0, 2), 4, ...original.slice(2)];
console.log(newArray); // [1, 2, 4, 3]

○サンプルコード8：配列の逆順

スプレッド構文を使って、配列を逆順にすることができます。

下記の例では、配列originalを逆順にして、新しい配列reversedArrayを作成しています。

const original = [1, 2, 3];
const reversedArray = [...original].reverse();
console.log(reversedArray); // [3, 2, 1]

○サンプルコード9：オブジェクトのディープコピー

スプレッド構文を使って、オブジェクトのディープコピーを作成することができます。

下記の例では、オブジェクトoriginalObjをディープコピーして、新しいオブジェクトdeepCopiedObjを作成しています。

const originalObj = {
  a: 1,
  b: { c: 2, d: 3 },
};

const deepCopiedObj = {
  ...originalObj,
  b: { ...originalObj.b },
};

console.log(deepCopiedObj); // { a: 1, b: { c: 2, d: 3 } }

○サンプルコード10：マージソート

スプレッド構文を使って、配列をマージソートする関数を実装することができます。

下記の例では、配列numbersをマージソートして、新しい配列sortedNumbersを作成しています。

function mergeSort(arr) {
  if (arr.length <= 1) {
    return arr;
  }

  const middle = Math.floor(arr.length / 2);
  const left = arr.slice(0, middle);
  const right = arr.slice(middle);

  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
  const result = [];

  while (left.length && right.length) {
    if (left[0] < right[0]) {
      result.push(left.shift());
    } else {
      result.push(right.shift());
    }
  }

  return [...result, ...left, ...right];
}

const numbers = [8, 4, 1, 5, 9, 2];
const sortedNumbers = mergeSort(numbers);
console.log(sortedNumbers); // [1, 2, 4, 5, 8, 9]

このように、スプレッド構文を使ってマージソートのアルゴリズムを実装することができます。

マージソートは、分割統治法を用いた効率的なソートアルゴリズムであり、スプレッド構文を活用することで簡潔に実装が可能です。