Set(集合)を使ってみよう

このレッスンでは、JavaScriptのSet(集合)を使い、重複を許さないデータの管理と高速な検索ができるようになることを目標にします。「JavaScript Set 使い方」「JavaScript 配列 重複削除」で調べている方向けの内容です。

Setは、同じ値を2つ以上入れられない「重複なしの箱」です。配列から重複を取り除きたいときや、値が含まれているかを高速に調べたいときに便利です。配列の.includes()よりSet.has()の方が、データ量が多いときに高速に動作するという性能上の利点もあります。数学の「集合」の考え方をそのままプログラムで扱えるようにした仕組みです。

サンプルコードでは、重複を含む配列numsからnew Set(nums)で重複のないuniqueNumsを作り、スプレッド構文[...uniqueNums]で配列に戻して表示しています。.has(2)のように、特定の値が含まれているかを確認するメソッドも用意されています。配列の重複チェックをforループで書くよりも短く、意図が伝わりやすいコードになります。

初心者がよくつまずくのが、Setは配列のようにインデックス番号でアクセスできない点です。uniqueNums[0]のような書き方はできず、値を取り出すには配列に変換するか、for...ofで1つずつ処理する必要があります。用途によっては配列とSetを行き来しながら使うことになります。

実際の開発現場では、フォームで選択されたタグの重複を除去したり、訪問済みのページIDを記録して重複判定したりと、Setは重複管理や高速な存在確認が必要な場面で幅広く使われています。

Setにはこの他にも.delete(値)で特定の値を削除したり、.sizeで要素数を調べたりするメソッドがあり、配列の.lengthにあたる機能も用意されています。