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

JavaScriptスプレッド構文の使い方とサンプルコードJS
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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]

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

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

●注意点と対処法

スプレッド構文を使用する際には、いくつかの注意点があります。

下記では、注意点とそれに対する対処法を説明します。

パフォーマンスへの影響

スプレッド構文を使用することで、パフォーマンスが低下する場合があります。

大量のデータを処理する際には、適切なアルゴリズムやデータ構造を用いて、パフォーマンスの最適化を行いましょう。

可読性の低下

スプレッド構文は簡潔な記述ができる反面、可読性が低下する場合があります。

適切なコメントや変数名を用いて、コードの可読性を向上させましょう。

ネストされたオブジェクトや配列の扱い

スプレッド構文を用いても、ネストされたオブジェクトや配列はシャローコピーされるため、ディープコピーを行う際には注意が必要です。

サンプルコード9のように、ネストされたオブジェクトや配列を明示的にコピーする方法を用いましょう。

まとめ

この記事を読めば、JavaScriptのスプレッド構文を使って、さまざまな処理を効率的に行うことができるようになります。

スプレッド構文は、配列やオブジェクトを簡潔に扱うための機能であり、使い方や応用例を理解することで、コードの質を向上させることができます。