JavaScript

JavaScriptの Map って何がすごいの？オブジェクトとの違い＆活用テクニックまとめ

JavaScriptの Map とは？オブジェクトより優れている理由＆使いどころを完全解説

JavaScript で キーと値のペアを管理する方法 として、Object と Map があります。

Object は昔から使われている方法ですが、 Map はより柔軟でパフォーマンスが良いデータ管理手段 として登場しました。

Map とは？

Map はキーと値のペアを管理できるデータ構造 です。

Map の特徴

  • キーにあらゆる型（オブジェクト・関数・数値など）が使える
  • キーの順番を保持できる
  • データの追加・削除・検索が高速
  • size で要素数を取得可能

Map の基本的な使い方

const myMap = new Map(); 

// キーと値のセット
myMap.set('name', 'Taro'); 
myMap.set(42, 'Number Key'); 
myMap.set(true, 'Boolean Key'); 

console.log(myMap.get('name')); // "Taro"
console.log(myMap.get(42)); // "Number Key"
console.log(myMap.get(true)); // "Boolean Key"

// キーが存在するかチェック
console.log(myMap.has('name')); // true

// 要素の削除
myMap.delete(42);
console.log(myMap.has(42)); // false

// サイズの取得
console.log(myMap.size); // 2
  • set( ) で値を追加し、get( ) で取得できる
  • has( ) で存在チェック
  • delete( ) で削除
  • size で要素数取得

Map と Object の違い

Map はオブジェクトよりも 柔軟で効率的 にデータ管理ができます！

比較項目MapObject
キーの種類どんな型でもOK（オブジェクト・数値・関数など）文字列 or Symbol のみ
キーの順番追加した順番を保持保証されない
要素数の取得size プロパティObject.keys(obj).length
ループ処理for...of, forEach()for...in, Object.keys()
パフォーマンス大量データ向き（追加・削除が高速）小規模データ向き

Map の便利な使い方＆実践テクニック

1. キーにオブジェクトを使う

例: ユーザー情報をオブジェクトキーで管理

const user1 = { id: 1, name: 'Alice' };
const user2 = { id: 2, name: 'Bob' };

const userSessions = new Map();
userSessions.set(user1, 'Session123');
userSessions.set(user2, 'Session456');

console.log(userSessions.get(user1)); // "Session123"
console.log(userSessions.get(user2)); // "Session456"

2. キーの順番を保持する

例: 最近使ったアイテムを管理
Map なら データの順番が変わらない ので、履歴管理や設定情報の保持 に便利！

const recentItems = new Map();
recentItems.set(1, 'りんご');
recentItems.set(2, 'ばなな');
recentItems.set(3, 'みかん');

console.log([...recentItems.keys()]); 
// 出力: [1, 2, 3] （追加順が保たれる）

3. データのカウントやグループ分け

Map の get() を使うと、カウントが簡単！

const words = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const wordCount = new Map();

for (const word of words) {
    wordCount.set(word, (wordCount.get(word) || 0) + 1);
}

console.log(wordCount);
// Map(3) { 'apple' => 3, 'banana' => 2, 'orange' => 1 }

4. データのループ処理が多い場合

for...of で簡単にループ処理ができる！

const users = new Map();
users.set(1, 'ねこ');
users.set(2, 'いぬ');
users.set(3, 'たぬき');

for (const [id, name] of users) {
    console.log(`ID: ${id}, Name: ${name}`);
}
//ID: 1, Name: ねこ
//ID: 2, Name: いぬ
//ID: 3, Name: たぬき

Map を使うべきケースまとめ

シチュエーションMap のメリット
オブジェクトをキーに使うユーザー情報やキャッシュ管理に最適
キーの順番を保持したい設定データや履歴管理に便利
頻繁な追加・削除があるdelete() で高速削除可能
カウント・グループ化size プロパティで簡単に要素数取得
ループ処理が多いfor...of で簡単に繰り返し処理

まとめ

  • Map は オブジェクトよりも柔軟で効率的 にデータを管理できる
  • キーの順番を保持、オブジェクトをキーに使う、大量データを扱う場合に最適
  • 実際のユースケース（キャッシュ・カウント・ループ処理）で活躍

Map を活用して、よりスマートな JavaScript コードを書きましょう！

-JavaScript
-