導入
フロントエンド開発において、データの重複排除は避けて通れない課題です。特にAPIから取得したリストやユーザーの入力値から重複を取り除く際、従来のArrayのfilterやindexOfを用いた手法は、データ量が増えるほどパフォーマンスが低下しがちです。ここで強力な武器となるのがJavaScriptのSetオブジェクトです。本記事では、Set.prototype.sizeを活用して、効率的かつ簡潔に要素数を管理・取得する方法を解説します。
基礎知識
Setとは、ES6から導入された「値の集合」を扱うための組み込みオブジェクトです。最大の特徴は、「重複する値を保持できない」という点です。
Array（配列）がインデックスで要素を管理するのに対し、Setは値そのものをユニークなキーとして保持します。そして、そのSet内にいくつの要素が含まれているかを確認するためのプロパティがSet.prototype.sizeです。Arrayのlengthプロパティに相当するものですが、計算量（計算コスト）において配列よりも優れているケースが多いのが特徴です。
実装/解決策
配列から重複を排除して要素数をカウントしたい場合、従来は一度ループを回す必要がありましたが、Setを使えば非常にシンプルです。配列をSetのコンストラクタに渡すだけで、重複が自動的に削除されたコレクションが生成され、即座にsizeプロパティで要素数を確認できます。
サンプルプログラム
以下のコードは、重複を含む配列からユニークな値を取り出し、その個数を取得する実用的な例です。
// 重複を含むサンプルデータ
const tags = ['JavaScript', 'CSS', 'HTML', 'JavaScript', 'TypeScript', 'CSS'];
// 1. 配列をSetに変換（この時点で重複が自動排除される）
const uniqueTags = new Set(tags);
// 2. Set.prototype.sizeで要素数を取得
const count = uniqueTags.size;
// 結果を出力
console.log('ユニークなタグの数:', count); // 出力: 4
console.log('重複なしのリスト:', [...uniqueTags]); // 配列に戻すことも可能
// 3. 追加や削除の操作とサイズの変化
uniqueTags.add('React');
console.log('追加後のサイズ:', uniqueTags.size); // 出力: 5
応用・注意点
現場で活用する際のポイントがいくつかあります。
パフォーマンスの優位性:
Array.indexOfを用いた重複チェックは、配列の長さがNの場合、計算量はO(N^2)になります。一方、Setはハッシュテーブルに近い実装になっているため、追加や検索の計算量はO(1)（平均値）であり、大量のデータを扱う際ほどその恩恵を感じられます。
注意点: オブジェクトの参照
Setは「値」の比較に厳密等価演算子（===）に近いアルゴリズムを使用します。そのため、数値や文字列は正しく重複排除されますが、オブジェクトや配列は「参照」で比較される点に注意してください。たとえ中身が同じ {id: 1} というオブジェクトであっても、メモリ上の参照先が異なれば別物としてカウントされます。オブジェクトの重複を除去したい場合は、JSON文字列化してIDを生成するなどの工夫が必要です。
Setは単なる重複排除ツールではなく、データの「存在確認（hasメソッド）」を高速に行うためにも必須の知識です。ぜひ日々のコーディングに取り入れてみてください。