JavaScriptで配列の重複を削除し、一意の要素のみを含む配列を作成する方法

JavaScriptでは、配列から重複した要素を取り除き、一意（ユニーク）な値だけを含む新しい配列を作りたい場面がよくあります。本記事では、filter()メソッドを使った基本的な手法を中心に、実装手順と実行結果をわかりやすく解説します。

重複要素を含む配列の例

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

var duplicateNumbers = [10, 20, 100, 40, 20, 10, 100, 1000];

この配列から重複を取り除いた結果として、以下の出力を得たいと思います。

[10, 20, 100, 40, 1000]

filter()メソッドで一意の要素だけを抽出する

一意の要素のみを表示するには、filter()メソッドの概念を利用します。filter()は、各要素に対してコールバック関数を実行し、trueを返した要素だけで構成される新しい配列を作成します。ここでは、「その値が配列内で最初に現れた位置（index）」と「現在処理中の位置（index）」が一致する場合にのみtrueを返すことで、重複を除外しています。

サンプルコード

実際のコードは以下のとおりです。

var duplicateNumbers = [10, 20, 100, 40, 20, 10, 100, 1000];
console.log("With Duplicates Values=");
console.log(duplicateNumbers);
var noDuplicateNumbersArray = duplicateNumbers.filter(function (value, index, array) {
    return array.indexOf(value) === index;
}
);
console.log("Without Duplicates Values=")
console.log(noDuplicateNumbersArray);

プログラムの実行方法

上記のプログラムは、Node.jsを使って以下のコマンドで実行できます。

node fileName.js

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

実行結果

実行すると、コンソールには次のように出力されます。

PS C:\Users\Amit\JavaScript-code> node demo234.js
With Duplicates Values=
[
    10,   20, 100,
    40,   20,  10,
   100, 1000
]
Without Duplicates Values=
[ 10, 20, 100, 40, 1000 ]

このように、重複していた20・10・100がそれぞれ1つにまとめられ、一意の値だけを含む配列が生成されていることが確認できます。

補足：Setを使ったより簡潔な方法

ES2015以降では、Setオブジェクトを利用することで、さらに簡潔に重複を削除できます。Setは重複しない値のコレクションを扱うためのデータ構造で、スプレッド構文と組み合わせれば一行で書けます。

const numbers = [10, 20, 100, 40, 20, 10, 100, 1000];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [ 10, 20, 100, 40, 1000 ]

indexOf()を組み合わせたfilter()方式は計算量がO(n²)となるため、大規模な配列を扱う場合は、計算量O(n)で済むSet方式の方がパフォーマンス面で有利です。用途や配列の規模に応じて、適切な方法を選びましょう。