JavaScriptで配列から重複する要素を簡単に削除する方法

JavaScriptでは、配列に含まれる重複した要素をわずか1行のコードで取り除くことができます。その鍵となるのが、Setオブジェクトとスプレッド構文（...）の組み合わせです。

重複要素を含む配列の例

まず、次のように重複した値を含む配列があると仮定しましょう。

10, 20, 10, 50, 60, 10, 20, 40, 50

重複を削除する方法：new Set() の活用

Setは、同じ値を1つしか保持できないコレクションです。この特性を利用すると、配列をSetに変換した時点で自動的に重複が排除されます。さらに、スプレッド構文（...）を使うことで、そのSetを再び配列に戻すことができます。

サンプルコード

以下が実際のコードです。

var arrayWithNoDuplicateNumbers = [...new Set([10, 20, 10, 50, 60, 10, 20, 40, 50])];
console.log("重複のない値 =")
console.log(arrayWithNoDuplicateNumbers);

プログラムの実行方法

上記のプログラムは、Node.js環境で以下のコマンドを実行します。

node fileName.js

ここでは、ファイル名を demo243.js として保存しています。

実行結果

実行すると、出力は次のようになります。すべての重複が取り除かれ、元の登場順序が保たれた状態で一意な値だけが出力されていることが確認できます。

PS C:\Users\Amit\javascript-code> node demo243.js
重複のない値 =
[ 10, 20, 50, 60, 40 ]

ポイント解説

• Set の特性： Setは値の一意性を保証するため、追加された重複値は自動的に無視されます。
• スプレッド構文： [...set]と書くことで、Setの中身を新しい配列へ展開できます。
• 順序の保持： この方法では、各値が最初に出現した順序が維持されます。
• 対応範囲： 数値だけでなく、文字列などプリミティブ型の値にも同様に適用できます。ただし、オブジェクトは参照が異なる限り重複とはみなされない点に注意してください。

このように、[...new Set(配列)]というイディオムを覚えておけば、filter()やindexOf()を組み合わせた従来の手法よりも簡潔かつ高速に重複削除を行えます。