オブジェクトのエントリ列挙（Object.entries）の基本と実践
Object.entries(obj) は「オブジェクトのキーと値のペア」を [key, value] の形で配列にして返す関数です。キーだけなら Object.keys、値だけなら Object.values、両方まとめて扱いたいなら Object.entries が最短ルートです。
基本の構文
const entries = Object.entries(obj);
- 返すもの:
[キー, 値]の配列。 - 対象: 自身の列挙可能なプロパティのみ（継承や非列挙は含まない）。
- 順序: Object.keys / Object.values と同じルール（数値っぽいキーが先、その後は作成順）。
すぐ使えるテンプレート集
1) 基本：キーと値のペアを取得
const user = { name: "Aki", age: 22 };
console.log(Object.entries(user));
// [["name","Aki"],["age",22]]
2) for…of でループ処理
const config = { host: "localhost", port: 3000 };
for (const [key, value] of Object.entries(config)) {
console.log(`${key} = ${value}`);
}
// host = localhost
// port = 3000
- ポイント: 分割代入でキーと値を同時に取り出せる。
3) entriesからMapを作る
const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
console.log(map.get("a")); // 1
- ポイント: Mapは順序保証や任意キーに強い。オブジェクトをMapへ変換する入口に。
4) entriesからオブジェクトを再構築（Object.fromEntries）
const obj = { a: 1, b: 2, c: 3 };
const doubled = Object.fromEntries(
Object.entries(obj).map(([k, v]) => [k, v * 2])
);
console.log(doubled); // { a: 2, b: 4, c: 6 }
- ポイント: entries → map → fromEntries で「値を加工した新しいオブジェクト」を作れる。
5) 配列のインデックスと値をペアに
const arr = ["red", "blue"];
console.log(Object.entries(arr));
// [["0","red"],["1","blue"]]
- ポイント: 配列もオブジェクトなのでインデックスがキーとして列挙される。
実務で便利なパターン
値のフィルタリングと再構築
const obj = { id: 1, name: "Mao", debug: true };
const filtered = Object.fromEntries(
Object.entries(obj).filter(([k]) => k !== "debug")
);
console.log(filtered); // { id: 1, name: "Mao" }
- ポイント: entriesでフィルタ → fromEntriesで戻す。
キーを変換して新しいオブジェクトに
const obj = { first_name: "Ren", last_name: "Ito" };
const camel = Object.fromEntries(
Object.entries(obj).map(([k, v]) => [k.replace(/_(.)/, (_,c)=>c.toUpperCase()), v])
);
console.log(camel); // { firstName: "Ren", lastName: "Ito" }
- ポイント: entriesでキーを加工して再構築。
JSONログを整形して表示
const payload = { status: "ok", code: 200 };
console.log(Object.entries(payload).map(([k,v]) => `${k}: ${v}`).join("\n"));
/*
status: ok
code: 200
*/
よくある落とし穴と対策
- 非列挙プロパティは出ない: definePropertyで enumerable: false にしたものは含まれない。
- Symbolキーは出ない: entriesは文字列キーのみ。Symbolは Object.getOwnPropertySymbols で。
- 順序を過信しない: 数値キーが先、その後は作成順。表示順を保証したいならソートする。
- Mapと混同しない: Object.entriesはオブジェクト専用。Map.entriesは別物だが似た形。
練習問題（手を動かして覚える）
- キーと値を「key=value」形式で出力
const obj = { a: 1, b: 2 };
for (const [k,v] of Object.entries(obj)) {
console.log(`${k}=${v}`);
}
- 値を2倍にして新しいオブジェクトを作る
const obj = { x: 10, y: 20 };
const doubled = Object.fromEntries(Object.entries(obj).map(([k,v]) => [k,v*2]));
console.log(doubled); // { x:20, y:40 }
- 配列をentriesで確認
const arr = ["apple","banana"];
console.log(Object.entries(arr)); // [["0","apple"],["1","banana"]]
直感的な指針
- キーと値を同時に扱う: Object.entries。
- 加工して新しいオブジェクト: entries → map → fromEntries。
- 配列もオブジェクト: インデックスがキーとして列挙される。
- 順序に依存しない: 必要ならソートしてから使う。
👉 Object.entries は「オブジェクトを配列化して処理する」万能ツール。キーと値を同時に扱えるので、初心者が「オブジェクトを柔軟に加工する」第一歩に最適です。