導入：なぜSetの集合演算が重要なのか
実務におけるフロントエンド開発では、ユーザーが選択したタグの管理、重複の排除、複数のデータソースの統合など、「集合」を扱う場面が頻繁に登場します。従来、これらを実装するにはfilterやincludes、あるいはスプレッド構文を用いた重複排除など、記述量が多くなりがちな処理が必要でした。最新のECMAScript仕様で追加されたSet.prototype.unionは、これらの集合演算をネイティブかつ直感的に記述可能にする、非常に重要な機能です。
基礎知識：Setと集合演算の仕組み
Setは、一意の値のみを保持するJavaScriptの組み込みオブジェクトです。これまでのSetには、要素を追加するaddや削除するdeleteといったメソッドはありましたが、複数のSet同士を結合するような「集合演算（和集合、積集合、差集合）」を直接行うメソッドは存在しませんでした。
今回紹介するunionは、現在のSetと引数として渡された他の集合を組み合わせ、両方の要素を含む新しいSetを生成します。これにより、配列を一度Setに変換して展開するような冗長なコードを書く必要がなくなります。
実装・解決策
unionメソッドは「現在のSet」と「引数で渡した集合（Setや配列など）」の和集合を返します。実装にあたっては、以下の点に注意してください。
1. 戻り値は常に新しいSetインスタンスであること（元のSetは変更されない）。
2. 引数にはSetだけでなく、Iterable（配列など）も渡せるため、柔軟な運用が可能であること。
サンプルプログラム
以下に、ユーザーが選択した複数のタグリストを統合し、重複を排除する実務的な例を示します。
// ユーザーが選択したタグのグループA
const groupA = new Set(['JavaScript', 'React']);
// 外部APIから取得した推奨タグのグループB
const groupB = new Set(['React', 'TypeScript', 'Node.js']);
// unionを使用して和集合を作成
// groupAに含まれる要素と、groupBに含まれる要素をすべて含む新しいSetを作成します
const allTags = groupA.union(groupB);
// 結果を確認
console.log(allTags);
// 出力: Set(4) { 'JavaScript', 'React', 'TypeScript', 'Node.js' }
// 応用：配列を直接渡すことも可能
const extraTags = ['CSS', 'HTML'];
const finalTags = allTags.union(new Set(extraTags));
console.log(finalTags);
// 出力: Set(6) { 'JavaScript', 'React', 'TypeScript', 'Node.js', 'CSS', 'HTML' }
応用・注意点
実務で活用する際の重要な注意点が2つあります。
1. ブラウザの互換性: unionなどの新しいSetメソッドは比較的新しいため、利用する際はブラウザの対応状況を確認してください。古い環境で動作させる必要がある場合は、Core-jsなどのポリフィルを導入するか、Babelによるトランスパイルが必須となります。
2. 計算量とパフォーマンス: 非常に巨大なデータセットを頻繁に結合する場合、新しいSetを作成するコストが発生します。UIの再描画を伴う処理でこれを行う場合は、ReactのuseMemoなどで結果をキャッシュし、不必要な再計算を避ける設計を心がけましょう。
また、unionは「和集合」ですが、同様にintersection（積集合）やdifference（差集合）といった関連メソッドも同時に追加されています。これらを組み合わせることで、フィルタリング処理のロジックを大幅に簡潔化できるため、ぜひ併せて習得しておくことをおすすめします。