Map の基本 — new Map(), set, get
JavaScript の Map は「キーと値のペア」を保持するコレクションです。オブジェクトと似ていますが、任意の型をキーにできるのが大きな特徴です。順序も保持され、繰り返し処理に便利です。
基本の使い方
// Mapを作成
const m = new Map();
// 値をセット
m.set("name", "Aki");
m.set("age", 22);
// 値を取得
console.log(m.get("name")); // "Aki"
console.log(m.get("age")); // 22
- set(key, value): キーに値を登録。既にキーがある場合は上書き。
- get(key): キーに対応する値を取り出す。存在しない場合は
undefined。
Map とオブジェクトの違い
| 特徴 | Map | オブジェクト |
|---|---|---|
| キーの型 | 任意（文字列、数値、オブジェクトなど） | 文字列 or Symbol |
| 順序 | 追加順を保持 | 一部ルールあり（数値キーが先） |
| サイズ取得 | m.size | Object.keys(obj).length |
| 繰り返し | for...of で直接使える | for...in や Object.keys が必要 |
よく使うテンプレート集
1) 数値やオブジェクトをキーに
const m = new Map();
const objKey = { id: 1 };
m.set(100, "hundred");
m.set(objKey, "object value");
console.log(m.get(100)); // "hundred"
console.log(m.get(objKey)); // "object value"
2) キーの存在確認
const m = new Map();
m.set("x", 10);
console.log(m.has("x")); // true
console.log(m.has("y")); // false
3) キーの削除とクリア
const m = new Map();
m.set("a", 1).set("b", 2);
m.delete("a"); // "a"を削除
console.log(m.has("a")); // false
m.clear(); // 全削除
console.log(m.size); // 0
4) 繰り返し処理
const m = new Map([
["id", 1],
["name", "Aki"],
]);
for (const [k, v] of m) {
console.log(`${k} = ${v}`);
}
// id = 1
// name = Aki
5) 配列やオブジェクトに変換
const m = new Map([["a", 1], ["b", 2]]);
console.log([...m]); // [["a",1],["b",2]]
console.log(Object.fromEntries(m)); // { a:1, b:2 }
実務で便利なパターン
- キャッシュ: 計算結果やAPIレスポンスをキー付きで保存。
- 辞書: 言語コード→翻訳文字列など。
- オブジェクトキー: DOM要素やオブジェクトをキーにして関連データを保持。
const cache = new Map();
function getData(id) {
if (cache.has(id)) return cache.get(id);
const data = { id, value: Math.random() };
cache.set(id, data);
return data;
}
console.log(getData(1)); // 初回は生成
console.log(getData(1)); // 2回目はキャッシュから
よくある落とし穴と対策
- オブジェクトキーは参照一致: 同じ内容でも別インスタンスは別キー。
const m = new Map();
m.set({ id: 1 }, "value");
console.log(m.get({ id: 1 })); // undefined（別オブジェクト）
→ 対策: 同じ参照を使う。
- 順序を過信しない: Mapは追加順を保持するが、削除・再追加で順序が変わる。
- JSON化できない: Mapは直接
JSON.stringifyできない。
→ 対策:Object.fromEntries(m)でオブジェクトに変換してから。
練習問題（手を動かして覚える）
// 1) Mapにキーと値を追加して取り出す
const m1 = new Map();
m1.set("lang", "JavaScript");
console.log(m1.get("lang")); // "JavaScript"
// 2) 数値キーを使う
const m2 = new Map();
m2.set(42, "answer");
console.log(m2.get(42)); // "answer"
// 3) 繰り返しで全要素を表示
const m3 = new Map([["x", 10], ["y", 20]]);
for (const [k,v] of m3) console.log(k, v);
// 4) Mapをオブジェクトに変換
const obj = Object.fromEntries(m3);
console.log(obj); // { x:10, y:20 }
直感的な指針
- 文字列キーだけならオブジェクト、任意キーならMap。
- 順序やサイズが必要ならMap。
- JSON化や外部送信はオブジェクトに変換。
- キャッシュや辞書用途に最適。