Map から配列へ — [...map.entries()] の基本と実践
Map の「キーと値のペア」を配列にしたいときは、[...map.entries()] が最短です。配列化すれば map/filter/sort などの配列操作が自由に使えます。
基本の使い方
const m = new Map([
["id", 1],
["name", "Aki"],
]);
// キーと値のペア配列（[key, value]）
const pairs = [...m.entries()];
console.log(pairs); // [["id", 1], ["name", "Aki"]]
// キーだけの配列
const keys = [...m.keys()];
console.log(keys); // ["id", "name"]
// 値だけの配列
const values = [...m.values()];
console.log(values); // [1, "Aki"]
- entries:
[key, value]の配列に展開できる。 - keys/values: それぞれを配列化して扱いやすくする。
- スプレッド:
...でイテラブルを配列へ展開。
よく使うテンプレート集
1) Map を配列に変換してソート・フィルタ
const m = new Map([
["c", 3],
["a", 1],
["b", 2],
]);
const sortedByKey = [...m.entries()].sort(([k1], [k2]) => k1.localeCompare(k2));
console.log(sortedByKey); // [["a",1],["b",2],["c",3]]
const filtered = [...m.entries()].filter(([k, v]) => v >= 2);
console.log(filtered); // [["c",3],["b",2]]
- ポイント:
[key, value]に分割代入すれば自然に比較・抽出できる。
2) 値だけ取り出して計算（合計・平均）
const prices = new Map([["apple", 120], ["banana", 90], ["orange", 100]]);
const values = [...prices.values()];
const sum = values.reduce((a, b) => a + b, 0);
const avg = sum / values.length;
console.log(sum, avg); // 310 103.333...
- ポイント: Map でも「値配列」にすれば配列計算が使える。
3) キーだけ取り出して表示・検証
const users = new Map([["u1", "Aki"], ["u2", "Mao"]]);
console.log([...users.keys()].join(", ")); // "u1, u2"
- ポイント: キー一覧が必要な UI や検証に使いやすい。
4) Map → オブジェクトへ変換（送受信や JSON 向け）
const m = new Map([["id", 1], ["name", "Aki"]]);
const obj = Object.fromEntries(m);
console.log(obj); // { id: 1, name: "Aki" }
console.log(JSON.stringify(obj)); // {"id":1,"name":"Aki"}
- ポイント: Map は直接 JSON 文字列化できないため、オブジェクト化してから。
5) 配列 → Map へ（往復可能）
const arr = [["id", 1], ["name", "Aki"]];
const m = new Map(arr);
console.log(m.get("name")); // "Aki"
- ポイント:
[key, value]形式を保つと相互変換が簡単。
実務で便利なパターン
- 辞書データの並べ替え: UI 表示前にキー順や値順で並べ替えたいとき、
[...m.entries()].sort(...)が定石。 - 検索と抽出:
m.has(key)で迅速に存在確認、抽出後は配列にして整形。 - 集計・統計:
valuesを配列化して合計・平均・分散などを計算。 - JSON 送信:
Object.fromEntries(m)でプレーンオブジェクト化して API に渡す。
// 値で降順ソートして上位N件を取得
function topNByValue(map, n) {
return [...map.entries()]
.sort(([, v1], [, v2]) => v2 - v1)
.slice(0, n);
}
const scores = new Map([["Aki", 80], ["Mao", 95], ["Ren", 88]]);
console.log(topNByValue(scores, 2)); // [["Mao",95],["Ren",88]]
代替書き方（好みで選べる）
const m = new Map([["a", 1], ["b", 2]]);
// Array.from で配列化
console.log(Array.from(m.entries())); // [["a",1],["b",2]]
console.log(Array.from(m.keys())); // ["a","b"]
console.log(Array.from(m.values())); // [1,2]
- ポイント: スプレッドと
Array.fromは同じ目的。可読性や一貫性で選択。
よくある落とし穴と対策
- Map は直接 JSON 化不可:
JSON.stringify(new Map(...))は{}になる。- 対策:
Object.fromEntries(map)でオブジェクト化してから文字列化。
- 対策:
- オブジェクトキーは参照一致:
{id:1}と同内容でも別インスタンスは別キー。- 対策: 同じ参照を再利用、またはキーを文字列化する仕組みを作る。
- 配列と Map の
mapの混同:Array.prototype.mapとMapオブジェクトは別物。- 対策: 「配列に変換してから
array.map」という順序を意識。
- 対策: 「配列に変換してから
練習問題（手を動かして覚える）
// 1) entries を配列化してキー昇順ソート
const m1 = new Map([["c",3],["a",1],["b",2]]);
console.log([...m1.entries()].sort(([k1],[k2]) => k1.localeCompare(k2)));
// 2) values を取り出して合計
const m2 = new Map([["x",10],["y",20],["z",5]]);
console.log([...m2.values()].reduce((a,b)=>a+b,0)); // 35
// 3) 値が10以上のペアだけ抽出
const m3 = new Map([["p",7],["q",12],["r",10]]);
console.log([...m3.entries()].filter(([,v]) => v >= 10)); // [["q",12],["r",10]]
// 4) Map→オブジェクト→JSON
const m4 = new Map([["id",1],["name","Aki"]]);
const obj4 = Object.fromEntries(m4);
console.log(JSON.stringify(obj4)); // {"id":1,"name":"Aki"}
直感的な指針
- ペアで扱う:
[...map.entries()]（配列操作を使いたいときの入口）。 - キーだけ／値だけ:
[...map.keys()]／[...map.values()]。 - 外部連携:
Object.fromEntries(map)でオブジェクト化して JSON。 - 並べ替え・集計: 配列化して
sort/filter/reduceを活用。