🐕

javascript Mapオブジェクト/Setオブジェクトのユースケース

2024/05/09に公開

はじめに

javascriptが提供するMapオブジェクト、Setオブジェクトに関して仕様・機能はなんとなく理解できました。けれど、いつ使うねん？という疑問が発生。。

仕様・機能の理解と同じくらい難しいのが、ユースケースを理解すること。結構これで時間をとられることがあります。本来であれば、実際に使用するときにキャッチアップするのが正解なのでしょうけど、情報収集　や他人のコードを見てて気になってしまうこともあり、、今回はずっと放置してたMapオブジェクト、Setオブジェクトについて調査してみました。

それぞれの簡単な仕様・機能を紹介したあと、ユースケースを紹介していきます。ユースケースは多種多様なので、あくまで一例です、、

詳しいMapオブジェクト、Setオブジェクトの仕様・機能はMDNにお任せします

Map オブジェクト

Mapは、キーと値のペアを管理するコレクションです。通常のオブジェクトとの違いは、キーに任意のデータ型を使用できる点です。

let map = new Map();

// キーと値を追加
map.set('key1', 'value1');
map.set('key2', 'value2');

// キーを利用して値を取り出す
let value = map.get('key1');  // 'value1'
console.log(value);

// キーが存在するか確認する
let hasKey = map.has('key2');  // true
console.log(hasKey);

// キーに対応する値を削除する
map.delete('key2');

あとは、keyにstring以外のデータ型を使用できることです。これによるメリットを紹介したいと思います。

Mapオブジェクトのユースケース

例えば、フェッチしたデータの管理番号などをkeyに利用した場合、keyを使用して要素のソートが容易になります。

let myMap = new Map();
myMap.set(3, 'three');
myMap.set(1, 'one');
myMap.set(4, 'four');
myMap.set(2, 'two');

// キーを取得し、昇順にソート
let keysSortedAsc = Array.from(myMap.keys()).sort((a, b) => a - b);

// 昇順にソートされたキーを使用して値をアクセス
keysSortedAsc.forEach((key) => {
  console.log(`${key}: ${myMap.get(key)}`);
});

Set オブジェクト

Setは、重複する要素を自動的に排除するコレクションです。

// Setの作成
const mySet = new Set();

// 値の追加
mySet.add('apple');
mySet.add('banana');
mySet.add('orange');

// 値がSetに含まれているか確認
console.log(mySet.has('banana'));  // true
console.log(mySet.has('grape'));   // false

// Setのサイズ
console.log(mySet.size);  // 3

// 値の削除
mySet.delete('orange');

// 全ての値をループで処理
mySet.forEach(value => {
  console.log(value);
});

// Setのクリア
mySet.clear();
console.log(mySet.size);  // 0

ユースケース

例えば、サーバーからフェッチしたデータの要素からカテゴリーリストを作成する際、new Set()を使用することでカテゴリーの重複を避けることができます。

const data = [
  { title: "banana", category: "fruits" },
  { title: "apple", category: "fruits" },
  { title: "carrot", category: "vegetables" },
  { title: "grape", category: "fruits" },
];

// dataからカテゴリーを抽出し、それをSetに渡して重複を排除
const categories = new Set(data.map(item => item.category));

// Setの内容を配列として表示
console.log(Array.from(categories));  // ["fruit", "vegetables"]

まとめ

今回は、Mapオブジェクト、Setオブジェクトのユースケースの紹介でした。Setオブジェクトは重複を避けてくれるので便利だなと思いつつ、Mapオブジェクトはいつ使うのだろうと使いに迷い中です。

はじめに

Map オブジェクト

Mapオブジェクトのユースケース

Set オブジェクト

ユースケース

まとめ

Discussion