JavaScriptでドット3つを使いこなす！5つの使い方とサンプルコード

はじめに
●ドット3つとは
- ○スプレッド構文
- ○レスト構文
●使い方とサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでドット3つを使いこなすことができるようになります。

ドット3つ（スプレッド構文・レスト構文）はJavaScriptの便利な機能の1つで、配列やオブジェクトの操作に役立ちます。

しかし、初心者にとっては難しいと感じるかもしれません。

そこで、この記事では、初心者向けにJavaScriptのドット3つの使い方や注意点、カスタマイズ方法を徹底解説します。

サンプルコードも掲載しているので、ぜひ参考にしてください。

●ドット3つとは

ドット3つは、スプレッド構文とレスト構文の2つの機能を持っています。

それぞれの機能について簡単に説明します。

○スプレッド構文

スプレッド構文は、配列やオブジェクトを展開する際に使用します。

これにより、複数の要素やプロパティを一度に操作できるようになります。

○レスト構文

レスト構文は、可変長引数を受け取る関数の定義に使用します。

これにより、関数が任意の数の引数を受け取れるようになります。

●使い方とサンプルコード

ここでは、それぞれの機能を使ったサンプルコードとその説明を紹介します。

○サンプルコード1：配列の結合（スプレッド構文）

このコードでは、スプレッド構文を使って2つの配列を結合しています。

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

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

○サンプルコード2：オブジェクトのマージ（スプレッド構文）

このコードでは、スプレッド構文を使って2つのオブジェクトをマージしています。

この例では、オブジェクトobj1とobj2をマージして新しいオブジェクトmergedを作成しています。

const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const merged = {...obj1, ...obj2}; // {a: 1, b: 3, c: 4}

○サンプルコード3：関数の引数に配列を展開（スプレッド構文）

このコードでは、スプレッド構文を使って関数の引数に配列を展開しています。

この例では、sum関数が3つの引数を受け取り、それらを合計しています。

引数として配列numsを展開して、sum関数に渡しています。

function sum(x, y, z) {
  return x + y + z;
}

const nums = [1, 2, 3];
const result = sum(...nums); // 6

○サンプルコード4：可変長引数の受け取り（レスト構文）

このコードでは、レスト構文を使って可変長引数を受け取る関数を定義しています。

この例では、sumRest関数が任意の数の引数を受け取り、それらを合計しています。

function sumRest(...args) {
  return args.reduce((acc, cur) => acc + cur, 0);
}

const result1 = sumRest(1, 2, 3); // 6
const result2 = sumRest(1, 2, 3, 4, 5); // 15

○サンプルコード5：オブジェクトのプロパティを除外（レスト構文）

このコードでは、レスト構文を使ってオブジェクトのプロパティを除外する方法を紹介しています。

この例では、オブジェクトobjからプロパティaを除外して、新しいオブジェクトrestを作成しています。

const obj = {a: 1, b: 2, c: 3};
const {a, ...rest} = obj; // rest = {b: 2, c: 3}

●注意点と対処法

スプレッド構文やレスト構文は、ES6以降のバージョンでしか使えません。
古いバージョンのJavaScriptを使用している場合は、代替手段を検討してください。
スプレッド構文でオブジェクトをマージする際、プロパティ名が重複する場合は、後のオブジェクトの値が優先されます。
これを防ぐためには、マージの前に重複チェックを行ってください。

●カスタマイズ方法

スプレッド構文やレスト構文を応用して、独自の関数やオブジェクト操作を作成することができます。

例えば、配列の要素を逆順にする関数や、オブジェクトのプロパティを特定の条件でフィルタリングする関数など、様々なカスタマイズが可能です。

配列の要素を逆順にする関数

このコードでは、スプレッド構文を使って配列の要素を逆順にする関数reverseArrayを定義しています。
この例では、配列arrを逆順にして新しい配列resultを作成しています。

function reverseArray(arr) {
  return [...arr].reverse();
}

const arr = [1, 2, 3];
const result = reverseArray(arr); // [3, 2, 1]

オブジェクトのプロパティを特定の条件でフィルタリングする関数

このコードでは、レスト構文を使ってオブジェクトのプロパティを特定の条件でフィルタリングする関数filterPropertiesを定義しています。
この例では、オブジェクトobjから値が偶数であるプロパティのみを抽出し、新しいオブジェクトfilteredを作成しています。

function filterProperties(obj, predicate) {
  return Object.entries(obj).reduce((acc, [key, value]) => {
    if (predicate(value)) {
      return {...acc, [key]: value};
    }
    return acc;
  }, {});
}

const obj = {a: 1, b: 2, c: 3, d: 4};
const filtered = filterProperties(obj, value => value % 2 === 0); // {b: 2, d: 4}