【JavaScript入門】Set

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

Set

　JavaScript では、Set を使って重複しない値の集合を扱うことができます。同じ値を何度追加しても一度しか格納されないので、値の重複を除去したいシーンで便利です。new Set() で空の Set オブジェクトを作成し、メソッドを通じて要素を追加や削除、チェックできます。必要に応じて Set を使えば、配列のようにデータを並べつつ、重複を自動的に排除したいという要件を簡単に実現できるでしょう。

１．Set の基本仕様

重複しない：同じ値を add() しても 1 回分のみ保持する。
挿入順を保持：forEach() や values() などで列挙すると、追加したときの順番で要素が取得できる。
sizeプロパティ：要素数を簡単に取得できる（set.size）。

２．主なメソッドとプロパティ

プロパティ	説明
`.size`	Set に含まれる値の数を返す。

メソッド	説明
`.clear()`	セット内のデータをすべて削除する。
`.add(v)`	値 `v` をセットに追加。重複がなければセット自身を返す。
`.has(v)`	値 `v` が含まれているかどうか（true/false）を返す。
`.delete(v)`	値 `v` を削除する。削除成功で `true`、値がなければ `false`。
`.keys()`	値を挿入順に取り出すイテレータを返す（キーとして同じ値を扱うため、実質 `.values()` と同じ）。
`.values()`	値を挿入順に取り出すイテレータを返す。
`.entries()`	`[値, 値]` ペアを挿入順に取り出すイテレータを返す（連想配列のようにキー/値ではない）。
`.forEach(f)`	全ての要素について関数 `f` を順番に呼び出す。引数は `(value, value, setオブジェクト)` の順に渡される。

３．サンプルコード（HTML + JavaScript）

　以下の例を「mySetSample.html」というファイル名で保存し、ブラウザで開いて、開発者ツールのコンソールを確認してください。

【mySetSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>mySetSample.html</title>
</head>
<body>
  <h1>Set の基本的な使い方</h1>
  <p>コンソールを開いて、出力を確認してください。</p>

  <script>
    // 1. Set の作成
    const mySet = new Set();
    mySet.add('ココア');
    mySet.add('ほうじ茶');
    mySet.add('クッキー');

    // サイズの表示
    console.log('サイズ:', mySet.size); // 3

    // 2. すべての値を列挙
    mySet.forEach(function(value1, value2) {
      console.log('forEach:', value1, ':', value2);
    });

    // 3. 同じ値を再度追加しても重複しない
    mySet.add('ココア');
    console.log('同じ値追加後のサイズ:', mySet.size); // 3

    // 4. 値の存在チェックと削除
    console.log('has("ほうじ茶"):', mySet.has('ほうじ茶')); // true
    console.log('delete("ほうじ茶"):', mySet.delete('ほうじ茶')); // true
    console.log('has("ほうじ茶"):', mySet.has('ほうじ茶')); // false

    // 5. 配列を使った初期化
    const anotherSet = new Set(['コーヒー', 'コーヒー', '紅茶', '紅茶', 'バニラアイス']);
    console.log('anotherSet:', anotherSet);

    // 6. Set の内容をコンソールに出力（挿入順）
    for (const val of anotherSet.values()) {
      console.log('anotherSetの要素:', val);
    }
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

サイズ: 3
forEach: ココア : ココア
forEach: ほうじ茶 : ほうじ茶
forEach: クッキー : クッキー
同じ値追加後のサイズ: 3
has("ほうじ茶"): true
delete("ほうじ茶"): true
has("ほうじ茶"): false
anotherSet: Set(3) {"コーヒー", "紅茶", "バニラアイス"}
anotherSetの要素: コーヒー
anotherSetの要素: 紅茶
anotherSetの要素: バニラアイス

まとめ

重複しない：同じ値を2回 add() しても追加されるのは1回だけ。
挿入順が記憶される：取り出し時には追加したときの順序が維持される。
サイズ取得が簡単 ：mySet.size で要素数をすぐに把握。
配列からの初期化：new Set([...]) 形式で簡単に重複を排除した集合を作れる。

　Set は他のデータ構造（オブジェクトや配列）ほど頻繁に使わないかもしれませんが、重複を除外する必要がある場合や、集合的な操作を明確に表したい場合にとても役立ちます。使い道に応じて上手に活用してみてください。