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

JavaScriptでドット3つを使ったサンプルコードの例JS
この記事は約6分で読めます。

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

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

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

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

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

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

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

はじめに

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

●注意点と対処法

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

●カスタマイズ方法

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

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

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

    このコードでは、スプレッド構文を使って配列の要素を逆順にする関数reverseArrayを定義しています。
    この例では、配列arrを逆順にして新しい配列resultを作成しています。
function reverseArray(arr) {
  return [...arr].reverse();
}

const arr = [1, 2, 3];
const result = reverseArray(arr); // [3, 2, 1]
  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}

まとめ

この記事では、JavaScriptのドット3つ(スプレッド構文・レスト構文)の使い方や注意点、カスタマイズ方法を解説しました。

これらの機能は、配列やオブジェクトの操作を簡潔に記述できるため、コードの可読性や効率性が向上します。

サンプルコードを参考にして、スプレッド構文やレスト構文を活用して、JavaScriptのコーディングスキルを向上させましょう。