1. 導入:なぜSetの「積集合」が重要なのか?
プログラミングをしていると、「2つのリストの中に共通するデータだけを取り出したい」という場面によく遭遇します。例えば、「お気に入りリスト」と「在庫リスト」の両方に含まれる商品だけを抽出する、といったケースです。
従来、これを行うには二重ループを書いたり、filterメソッドとincludesメソッドを組み合わせて複雑なコードを書く必要がありました。しかし、モダンなJavaScript(ES2024)で追加されたSet.prototype.intersectionを使えば、誰でも簡単に、そして高速に「共通要素(積集合)」を求めることができます。
2. 基礎知識:Setと積集合とは?
Set(セット)とは、値の「重複を許さない」コレクションです。配列(Array)と似ていますが、同じデータは1つしか保持できません。
積集合(Intersection)とは、2つの集合の両方に共通して含まれる要素だけを集めた新しい集合のことです。
これまでは「Arrayで管理していたデータを一旦Setに変換して計算し、またArrayに戻す」という手間がかかっていましたが、この新機能により、集合演算が直接行えるようになりました。
3. 実装/解決策
Setのintersectionメソッドは、非常にシンプルです。
「対象のSet」に対して`.intersection(比較対象のSet)`と記述するだけで、共通要素を持つ新しいSetが返されます。
※注意点として、このメソッドは「Setオブジェクト」同士の比較を行うため、もし手元に配列(Array)がある場合は、一度`new Set()`で変換してから使用します。
4. サンプルプログラム
以下のコードをコピーして、ブラウザのコンソールやNode.js環境で実行してみてください。
// 1. 比較したいデータを用意します
const myFavoriteColors = new Set(['赤', '青', '緑']);
const availableColors = new Set(['青', '黄色', '緑', '黒']);
// 2. intersectionを使って共通部分を取り出します
// myFavoriteColors にあり、かつ availableColors にも含まれる要素を抽出
const commonColors = myFavoriteColors.intersection(availableColors);
// 3. 結果を配列として確認するために変換します
console.log('共通のカラー:', [...commonColors]);
// 出力結果: ['青', '緑']
// 実用例: IDの照合
const userIds = new Set([101, 102, 103]);
const activeIds = new Set([102, 104, 105]);
const activeUserIds = userIds.intersection(activeIds);
console.log('アクティブなユーザーID:', Array.from(activeUserIds));
// 出力結果: [102]
5. 応用・注意点
現場で活用する際のポイントをまとめます。
・ブラウザの対応状況
この機能は比較的新しいため、古いブラウザ(Internet Explorerなど)では動作しません。もしレガシーな環境も考慮する必要がある場合は、Babelなどのトランスパイラを通すか、polyfillを検討してください。
・パフォーマンスについて
配列の`filter`と`includes`を組み合わせた方法に比べ、`Set`の`intersection`は計算量が少なくなるように設計されています。要素数が数千、数万と増える大規模なデータ処理においては、圧倒的にSetを使った方が処理時間が短縮されるため、パフォーマンス改善の手段として非常に有効です。
・データの型に注意
`Set`は値を一意に管理するため、オブジェクト({})などを要素にする場合は注意が必要です。オブジェクトの参照先が異なると、中身が同じでも「別の値」として扱われます。基本的には数値や文字列などのプリミティブな値の照合に使うのが最も安全で効果的です。