JavaScriptのMapとObject：連想配列としての使用場面とメリット

作成日 2025.02.13
javascript
javascript

JavaScriptにはデータをキーと値のペアで管理できるMapとObjectという2つの主要なデータ構造があります。本記事では、これらの特性と使い分けについて詳しく見ていきます。

1. ObjectとMapの基本的な違い
2. Objectの基本的な使い方
3. Mapの基本的な使い方
4. キーの種類の違い
5. 反復処理の違い
6. データサイズとパフォーマンス
7. 順序の保持
8. ObjectからMapへの変換
9. MapからObjectへの変換
10. 用途に応じた使い分け
11. プロトタイプ汚染の回避
12. WeakMapとの違い
13. 実用的な例
14. 結論

ObjectとMapの基本的な違い

ObjectはJavaScriptの基本的なデータ型で、プロトタイプを持つ汎用的な構造です。一方、MapはES6で導入された新しいデータ構造で、キーと値のペアを効率的に管理することを目的としています。

Objectの基本的な使い方

const obj = {
  name: "Alice",
  age: 30
};

console.log(obj.name); // "Alice"

Mapの基本的な使い方

const map = new Map();
map.set("name", "Alice");
map.set("age", 30);

console.log(map.get("name")); // "Alice"

キーの種類の違い

Objectでは、キーは文字列またはシンボルに限定されます。Mapでは任意の値をキーとして使用できます。

// Objectのキー
const obj = {};
obj[123] = "数値";
console.log(obj["123"]); // "数値"

// Mapのキー
const map = new Map();
map.set(123, "数値");
console.log(map.get(123)); // "数値"

反復処理の違い

Mapは反復可能なデータ構造として設計されており、直接ループ処理が可能です。一方、Objectでは反復処理に追加の手間がかかります。

// Object
const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

// Map
const map = new Map([["a", 1], ["b", 2]]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

データサイズとパフォーマンス

大量のデータを扱う場合、Mapは高速でスケーラブルです。Objectはキー検索や挿入に対して若干のパフォーマンス低下が見られることがあります。

順序の保持

Objectではキーの挿入順が保証されませんが、Mapではキーの挿入順が保証されています。

// Object
const obj = { b: 2, a: 1 };
console.log(Object.keys(obj)); // ['b', 'a']

// Map
const map = new Map([["b", 2], ["a", 1]]);
console.log(Array.from(map.keys())); // ['b', 'a']

ObjectからMapへの変換

const obj = { name: "Alice", age: 30 };
const map = new Map(Object.entries(obj));
console.log(map.get("name")); // "Alice"

MapからObjectへの変換

const map = new Map([["name", "Alice"], ["age", 30]]);
const obj = Object.fromEntries(map);
console.log(obj.name); // "Alice"

用途に応じた使い分け

データ量が少ない場合や簡易なデータストレージにはObjectが適しています。データ量が多く、高速な操作が必要な場合にはMapを利用します。

プロトタイプ汚染の回避

Objectを使用する場合、プロトタイプ汚染のリスクがありますが、Mapではその心配がありません。

const obj = Object.create(null); // プロトタイプなし
obj.__proto__ = "破壊されない";
console.log(obj.__proto__); // "破壊されない"

WeakMapとの違い

WeakMapは、キーに対してオブジェクトしか使用できませんが、ガベージコレクションの対象となるキーを持つことで効率的なメモリ管理を提供します。

const weakMap = new WeakMap();
const key = {};
weakMap.set(key, "value");
// keyが参照されなくなると、WeakMapから自動的に削除される

実用的な例

ユーザーセッション管理では、オブジェクトIDをキーにして詳細データをMapで管理するのが適しています。

const sessionData = new Map();
sessionData.set("user1", { name: "Alice", role: "admin" });
sessionData.set("user2", { name: "Bob", role: "editor" });

console.log(sessionData.get("user1").role); // "admin"