導入：なぜ今、Set.prototype.addなのか
フロントエンド開発において、重複のないデータのリストを管理する場面は頻繁に発生します。例えば、ユーザーが選択したタグの管理や、検索履歴の保持などです。これまで配列（Array）の `includes` や `indexOf` を使って重複チェックを行っていた場合、要素数が増えるにつれてパフォーマンスが急激に低下するという課題があります。`Set.prototype.add` を活用することで、これらの処理を効率化し、コードの可読性と実行速度を同時に向上させることができます。
基礎知識：Setオブジェクトとは
`Set` は、ES6（ECMAScript 2015）で導入された「値のコレクション」です。最大の特徴は、「値が重複して存在できない」という点です。配列と異なり、インデックスでアクセスするのではなく、要素の有無を高速に判定することに特化しています。`Set.prototype.add` は、新しい値をセットに追加するメソッドであり、もし既に同じ値が存在する場合は、追加を無視してセットの状態を維持します。これにより、従来の「配列に存在するか確認してから追加する」という条件分岐を省くことができます。
実装と解決策
実務では、単に `add` を呼ぶだけでなく、既存の配列から `Set` を生成し、操作後に再び配列に戻すパターンが一般的です。計算量（Big O）の観点で見ると、配列の `includes` による重複チェックは O(n) ですが、`Set.prototype.add`（および `has`）は平均して O(1) で処理が完了します。大規模なデータセットを扱う場合、この差は致命的です。
サンプルプログラム
以下に、重複を排除しながら効率的にデータを追加する実用的なコード例を示します。
// 重複を含む初期データ
const initialTags = ['react', 'vue', 'angular', 'react'];
// 1. 配列からSetを作成（この時点で重複が排除される）
const tagSet = new Set(initialTags);
// 2. 新しい値を追加する関数
const addTag = (tag) => {
// .add() は自分自身(Set)を返すため、メソッドチェーンが可能
// 重複がある場合は追加されず、無視される
tagSet.add(tag);
console.log(`現在のタグ数: ${tagSet.size}`);
};
addTag('svelte'); // 追加される
addTag('react'); // 重複のため無視される
// 3. 配列に戻す（スプレッド構文を利用）
const uniqueTags = [...tagSet];
console.log(uniqueTags);
// 結果: ['react', 'vue', 'angular', 'svelte']
応用・注意点：現場での落とし穴
`Set` を使用する上で注意すべき点がいくつかあります。
1. 参照型の比較
`Set` は値の比較に「Same-value-zero equality」アルゴリズムを使用します。これは `===` 演算子とほぼ同じ挙動ですが、オブジェクトや配列を要素にする場合は注意が必要です。`{ id: 1 }` というオブジェクトは、見た目が同じでも別々のインスタンスであれば別の値として `Set` に追加されてしまいます。オブジェクトを扱う場合は、IDなどのプリミティブな値で管理するようにしてください。
2. 過剰な変換のコスト
`Set` を使えば常に速いわけではありません。非常に少量のデータに対して、頻繁に `Array` ⇔ `Set` の相互変換（`…` スプレッド演算子や `Array.from()`）を行うと、その変換コストが無視できなくなります。データセットのサイズと操作頻度を考慮し、アプリケーション内で「Setの状態をどこまで維持するか」を設計することが重要です。
3. 順序の保証
`Set` は挿入された順序を保持します。これは React のレンダリングなどにおいて、要素の並び順が重要な場合に非常に有利に働きます。この特性を活かし、履歴機能などの実装に積極的に活用していきましょう。