【JavaScript】Setを使って配列から重複する値を削除する方法

JavaScriptで配列を扱っていると、同じ値が複数含まれているケースによく出会います。例として、以下のように同名の生徒が複数回登場する配列を考えてみましょう。

const listOfStudentName = ['John', 'Mike', 'John', 'Bob','Mike','Sam','Bob','John'];

この配列には「John」「Mike」「Bob」がそれぞれ複数回含まれています。このような重複した値を削除したい場合に便利なのが、ES6（ECMAScript 2015）で導入されたSet（セット）という概念です。

Setで重複を除去できる理由

Setは「同一の値を2つ以上格納できない」という特徴を持つデータ構造です。この性質を利用することで、配列から簡単に重複を取り除き、ユニークな値だけを持つ新しい配列を作成できます。

サンプルコード

const listOfStudentName = ['John', 'Mike', 'John', 'Bob','Mike','Sam','Bob','John'];
console.log("The value="+listOfStudentName);
const doesNotContainSameElementTwice = [...new Set(listOfStudentName)];
console.log("The Array=");
console.log(doesNotContainSameElementTwice)

ポイントは new Set(listOfStudentName) の部分です。配列を渡してSetオブジェクトを生成すると、自動的に重複した値が排除されます。さらに、スプレッド構文 [...] で展開することで、Setを再び通常の配列へと変換しています。

実行方法

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

node fileName.js

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

実行結果

このプログラムを実行すると、コンソールには次のような出力が表示されます。

PS C:\Users\Amit\JavaScript-code> node demo42.js
The value=John,Mike,John,Bob,Mike,Sam,Bob,John
The Array= [ 'John', 'Mike', 'Bob', 'Sam' ]

ご覧のとおり、元の配列に含まれていた重複した名前がすべて取り除かれ、「John」「Mike」「Bob」「Sam」という4つのユニークな値だけが残りました。わずか1行のコードで実現できるため、実務でも非常によく使われるテクニックです。ぜひ活用してみてください。