Java Scriptの基礎その18　JavaScriptのSetとMapの基本と応用

イントロダクション

JavaScriptには、データを効率的に管理するための便利なデータ構造がいくつかあります。その中でも、SetとMapはユニークな値の集合やキーと値のペアを効率的に扱うための強力なツールです。この記事では、SetとMapの基本的な使い方から応用例までを丁寧に解説し、実際のコードを通じて理解を深めていきます。

Setについて

Setの基本

Setは一意の値の集合を保持するデータ構造です。同じ値を複数回追加しても、Setは一度しか保持しません。

const italianMenu = new Set([
  "パスタ",
  "ピザ",
  "スパゲッティ",
  "カルボナーラ",
  "スパゲッティ",
  "ピザ",
]);

console.log(italianMenu);

このコードは、「パスタ」、「ピザ」、「スパゲッティ」、「カルボナーラ」の4つのユニークな要素を含むSetを作成します。重複する「スパゲッティ」と「ピザ」は1回しか保持されません。

出力:

Set(4) {"パスタ", "ピザ", "スパゲッティ", "カルボナーラ"}

新しいSetの作成

新しいSetを作成して、その内容を出力します。

console.log(new Set(["パエリア", "アヒージョ", "アヒージョ", "ハモンセラーノ"]));

出力:

Set(3) {"パエリア", "アヒージョ", "ハモンセラーノ"}

Setの操作

Setのサイズの取得、要素の存在確認、要素の追加・削除を行います。

console.log(italianMenu.size); // Setのサイズを取得
console.log(italianMenu.has("ピザ")); // 「ピザ」が含まれているか確認

italianMenu.add("ジェラート"); // 新しい要素を追加
console.log(italianMenu);

italianMenu.add("ジェラート"); // 重複する要素の追加
console.log(italianMenu);

italianMenu.delete("スパゲッティ"); // 特定の要素を削除
console.log(italianMenu);

出力:

4
true
Set(5) {"パスタ", "ピザ", "スパゲッティ", "カルボナーラ", "ジェラート"}
Set(5) {"パスタ", "ピザ", "スパゲッティ", "カルボナーラ", "ジェラート"}
Set(4) {"パスタ", "ピザ", "カルボナーラ", "ジェラート"}

インデックスによるアクセス

Setは配列のようにインデックスでアクセスすることはできません。

console.log(italianMenu[0]); // undefined

出力:

undefined

配列からSetへの変換

配列の重複を取り除きたい場合、Setを利用してユニークな要素の集合を作成できます。

const staffList = [
  "ウェイター",
  "シェフ",
  "ウェイター",
  "マネージャー",
  "マネージャー",
];

const staffUnique_1 = new Set(staffList);
console.log(staffUnique_1);

const staffUnique_2 = [...new Set(staffList)];
console.log(staffUnique_2);

出力:

Set(3) {"ウェイター", "シェフ", "マネージャー"}
["ウェイター", "シェフ", "マネージャー"]

文字列からSetへの変換

文字列もSetに変換することができます。

console.log(new Set("amuronamie").size);

出力:

6

Mapについて

Mapの基本

Mapはキーと値のペアを保持するデータ構造です。キーにはあらゆるデータ型を使用でき、各キーは一意である必要があります。

const sampleBarber = new Map();
sampleBarber.set("店名", "ヘアカットサロン太郎");
sampleBarber.set(1, "東京都上野");
sampleBarber.set(2, "東京都秋葉原");

console.log(sampleBarber);

出力:

Map(3) {"店名" => "ヘアカットサロン太郎", 1 => "東京都上野", 2 => "東京都秋葉原"}

Mapの操作

Mapでは、キーで値を取得したり、キーの存在を確認したり、エントリを削除したりすることができます。

console.log(sampleBarber.get("店名")); // キー "店名" の値を取得
console.log(sampleBarber.get(1)); // キー 1 の値を取得

sampleBarber.delete(2); // キー 2 のエントリを削除
console.log(sampleBarber);

出力:

ヘアカットサロン太郎
東京都上野
Map(2) {"店名" => "ヘアカットサロン太郎", 1 => "東京都上野"}

Mapのサイズとクリア

Mapのエントリ数を取得したり、すべてのエントリを削除したりできます。

console.log(sampleBarber.size); // Mapのサイズを取得
sampleBarber.clear(); // すべてのエントリを削除
console.log(sampleBarber);

出力:

2
Map(0) {}

Mapの詳細な操作

複数のキーと値を追加し、動的に値を取得します。

sampleBarber
  .set("サービス", ["ヘアカット", "髭剃り", "パーマ", "肩揉み"])
  .set("開店", 11)
  .set("閉店", 20)
  .set(true, "開店してます")
  .set(false, "閉店してます");

console.log(sampleBarber.get("店名"));
console.log(sampleBarber.get(true));
console.log(sampleBarber.get(1));

const currentTime = 8;
console.log(
  sampleBarber.get(
    currentTime > sampleBarber.get("開店") &&
      currentTime < sampleBarber.get("閉店")
  )
);

console.log(sampleBarber.has("カテゴリ"));
sampleBarber.delete(2);

const arraySample = [1, 2];
sampleBarber.set(arraySample, "テスト");
sampleBarber.set(document.querySelector("h1", "Heading"));
console.log(sampleBarber.size);
console.log(sampleBarber.get(arraySample));
sampleBarber.clear();

出力:

ヘアカットサロン太郎
開店してます
東京都上野
undefined
false
5
テスト
0

アンケートの例

Mapを使ったアンケートの例です。ユーザーの入力を受け取り、その結果を評価します。

const programmingSurvey = new Map([
  ["質問です", "この世で一番最強なプログラミング言語はどれですか？"],
  [1, "C++"],
  [2, "Java"],
  [3, "Java Script"],
  [4, "Python"],
  ["正解", 2],
  [true, "正解！🥳"],
  [false, "残念。違います。"],
]);

console.log(programmingSurvey);
console.log(programmingSurvey.get("質問です"));

for (const [key, value] of programmingSurvey) {
  if (typeof key === "number") console.log(`${key}:${value}`);
}

const displayAnswer = Number(prompt("どれでしょう？"));
console.log(
  programmingSurvey.get(programmingSurvey.get("正解") === displayAnswer)
);

出力:

Map(8) {"質問です" => "この世で一番最強なプログラミング言語はどれですか？", 1 => "C++", 2 => "Java", 3 => "Java Script", 4 => "Python", "正解" => 2, true => "正解！🥳", false => "残念。違います。"}
この世で一番最強なプログラミング言語はどれですか？
1:C++
2:Java
3:Java Script
4:Python

Mapから配列への変換

Mapのキーや値を配列に変換することもできます。

console.log([...programmingSurvey]);
console.log([...programmingSurvey.keys()]);
console.log([...programmingSurvey.values()]);

出力:

[["質問です", "この世で一番最強なプログラミング言語はどれですか？"], [1, "C++"], [2, "Java"], [3, "Java Script"], [4, "Python"], ["正解", 2], [true, "正解！🥳"], [false, "残念。違います。"]]
["質問です", 1, 2, 3, 4, "正解", true, false]
["この世で一番最強なプログラミング言語はどれですか？", "C++", "Java", "Java Script", "Python", 2, "正解！🥳", "残念。違います。"]

オブジェクトからMapへの変換

オブジェクトのエントリをMapに変換します。

const edmArtists = [
  {
    name: "Martin Garrix",
    origin: "Netherlands",
  },
  {
    name: "Avicii",
    origin: "Sweden",
  },
  {
    name: "Zedd",
    origin: "Russia/Germany",
  },
  {
    name: "Marshmello",
    origin: "USA",
  },
];

console.log(Object.entries(edmArtists));
const edmMap = new Map(Object.entries(edmArtists));
console.log(edmMap);

出力:

[[0, {name: "Martin Garrix", origin: "Netherlands"}], [1, {name: "Avicii", origin: "Sweden"}], [2, {name: "Zedd", origin: "Russia/Germany"}], [3, {name: "Marshmello", origin: "USA"}]]
Map(4) {0 => {name: "Martin Garrix", origin: "Netherlands"}, 1 => {name: "Avicii", origin: "Sweden"}, 2 => {name: "Zedd", origin: "Russia/Germany"}, 3 => {name: "Marshmello", origin: "USA"}}

まとめ

JavaScriptのSetとMapは、それぞれ異なる特性と用途を持つ強力なデータ構造です。Setはユニークな値のコレクションを提供し、重複を排除するのに役立ちます。Mapはキーと値のペアを柔軟に管理し、キーにはあらゆるデータ型を使用できます。これらを理解し活用することで、より効率的で明確なコードを書くことができます。日常的なプログラミングにこれらのデータ構造を活用してみましょう。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！