JavaScriptで配列の重複を削除する方法

JavaScriptでデータを扱う際、配列から重複した要素を削除することがよくあります。特にデータが増えると、効率的な方法で重複を取り除く必要が出てきます。この記事では、JavaScriptで重複要素を削除する2つの方法を紹介します。一つ目は単純なデータ型（数値や文字列など）の配列に対して、もう一つはオブジェクトの配列に対してです。

単純なデータの配列から重複を削除

単純な値の配列で重複を削除する場合、Set オブジェクトを利用するのが一番簡単で効率的です。Set は、JavaScript のデータ構造の一つで、重複する要素を含まないコレクションを作成します。以下のコード例では、数値と文字列が混在する配列から重複を削除しています。

const numbersAndStrings = [1, 2, 'apple', 3, 'banana', 'apple', 2];

const uniqueValues = [...new Set(numbersAndStrings)];
console.log(uniqueValues);  // [1, 2, 'apple', 3, 'banana']

この例では、Set を使って重複を削除し、スプレッド構文 (...) を用いて Set を再び配列に変換しています。これにより、元の配列の順序を保ったまま重複が除去された新しい配列を得ることができます。

オブジェクトの配列から重複を削除

オブジェクトの配列から重複を削除する場合、各オブジェクトが一意の識別子（たとえばユーザーID）を持っていることを前提とします。ここでのアプローチでは、Map オブジェクトを使います。Map はキーと値のペアを持ち、この性質を利用して各オブジェクトを一意のキー（この例ではユーザーID）にマッピングします。

以下のサンプルコードは、ユーザーIDをキーとして使用し、各ユーザーの最後のエントリーのみを保持する方法を示しています。

const users = [
  { id: '001', name: 'Alice' },
  { id: '002', name: 'Bob' },
  { id: '001', name: 'Alice', age: 30 }
];

const distinctUsers = Array.from(
  new Map(users.map((user) => [user.id, user])).values()
);
console.log(distinctUsers);
// Output: [{ id: '002', name: 'Bob' }, { id: '001', name: 'Alice', age: 30 }]

このコードでは、まず users 配列を .map() メソッドで加工し、[user.id, user] の形式の配列を生成します。次に、この配列を Map のコンストラクタに渡して新しい Map オブジェクトを作成し、最終的に .values() を用いて重複を排除したオブジェクトの配列を取得しています。重要なのは、Map は後に追加されたキーの値で既存の値を上書きするため、最終的な配列には各ユーザーの最新のデータのみが含まれます。

これらの方法を使えば、JavaScriptで効率的に配列の重複

を削除できます。どちらの方法も状況に応じて選択すると良いでしょう。