JavaScript | ES6+ 文法：オブジェクト拡張 – Object.entries

JavaScript JavaScript
スポンサーリンク

Object.entries とは何か

Object.entries は、オブジェクトの中身を「配列の配列」に変換する ES2017（ES8）のメソッドです。
「キーと値のペア」を [key, value] という2要素配列にし、それらをまとめて1つの配列として返します。

const user = { id: 1, name: "Alice" };

const entries = Object.entries(user);
console.log(entries);
// [ ["id", 1], ["name", "Alice"] ]
JavaScript

ここが重要です：
Object.entries(obj) の戻り値は「[キー文字列, 値] の配列」がズラッと並んだ二重配列です。
これにより、「オブジェクトを配列の世界（map / filter / for…of など）で扱える」ようになります。

基本的な動きと形をしっかり理解する

返ってくるのは「二重配列」

もう一度、形を意識して見てみます。

const product = { name: "PC", price: 100000 };

const entries = Object.entries(product);
console.log(entries);
// [
//   ["name", "PC"],
//   ["price", 100000]
// ]
JavaScript

外側は配列、
内側の1つ1つも [key, value] という配列になっている、という構造です。

インデックスで触るとこうなります。

console.log(entries[0]);    // ["name", "PC"]
console.log(entries[0][0]); // "name"
console.log(entries[0][1]); // "PC"
JavaScript

ここが重要です：
「entries = 配列」「entries の中身 = [キー, 値] の2要素配列」
という形をまず頭に入れてください。

for…of と組み合わせると読みやすい

二重配列を扱うときは、for...of と分割代入を組み合わせるとスッキリ書けます。

const user = { id: 1, name: "Alice", age: 20 };

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
// id 1
// name Alice
// age 20
JavaScript

[key, value] のように分割代入することで、
「キー」と「値」を別々の変数として受け取ることができます。
このパターンはよく使うので、形ごと覚えてしまって構いません。

Object.keys / Object.values との関係

3兄弟としてイメージするとわかりやすい

オブジェクトを配列に変換するメソッドとして、代表的なものが 3つあります。

const user = { id: 1, name: "Alice" };

console.log(Object.keys(user));    // ["id", "name"]
console.log(Object.values(user));  // [1, "Alice"]
console.log(Object.entries(user)); // [["id", 1], ["name", "Alice"]]
JavaScript

それぞれの役割はこうです。

  • Object.keys(obj) → キーだけの配列
  • Object.values(obj) → 値だけの配列
  • Object.entries(obj) → [キー, 値] のペア配列

ここが重要です：
何が欲しいのか（キーだけ／値だけ／両方セット）によって、3つを使い分けるイメージを持ってください。

よく使うパターン（実務寄りの例）

オブジェクトをループするときの「現代的な書き方」

昔は for...in を使ってオブジェクトを回すことが多かったですが、
最近は Object.entries を使う書き方のほうが明快です。

const user = { id: 1, name: "Alice", age: 20 };

// 昔よくあった書き方
for (const key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(key, user[key]);
  }
}

// ES6+ 以降の書き方（推奨）
for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
JavaScript

for...in だと hasOwnProperty でフィルタする必要があったりと、
初心者にはちょっと分かりづらいポイントが多めです。
Object.entries を使えば、「自分が欲しい“キーと値のペア”だけ」が素直に取れるので、コードが読みやすくなります。

オブジェクトを配列メソッドで処理する（map / filter など）

オブジェクトを一旦 entries に変換すれば、
配列と同じように map や filter が使えます。

const scores = { Alice: 80, Bob: 55, Carol: 92 };

// 60点以上の人だけに絞り込む
const passedEntries = Object.entries(scores)
  .filter(([name, score]) => score >= 60);

console.log(passedEntries);
// [ ["Alice", 80], ["Carol", 92] ]
JavaScript

「またオブジェクトに戻したい」場合は、Object.fromEntries と組み合わせます（ES2019）。

const passed = Object.fromEntries(passedEntries);
console.log(passed);
// { Alice: 80, Carol: 92 }
JavaScript

ここが重要です：
entries → 配列操作（map/filterなど） → fromEntries でオブジェクトに戻す
という流れは、ES6+ 以降の「オブジェクト変換」の定番パターンです。

値を加工して「新しいオブジェクト」を作る

例えば、「値を2倍したオブジェクト」を作りたいとき。

const priceTable = { apple: 100, orange: 80 };

// 値を2倍にした新オブジェクト
const doubled = Object.fromEntries(
  Object.entries(priceTable).map(([name, price]) => [name, price * 2])
);

console.log(doubled);
// { apple: 200, orange: 160 }
JavaScript

流れを分解するとこうです。

  1. Object.entries(priceTable)
    → [["apple", 100], ["orange", 80]]
  2. map で [name, price * 2] に変換
    → [["apple", 200], ["orange", 160]]
  3. Object.fromEntries(...) でオブジェクトに戻す
    → { apple: 200, orange: 160 }

一見ややこしそうに見えますが、
「オブジェクトを配列の世界に持ってきて、配列として加工してからオブジェクトに戻す」
という考え方が見えてくると、強力な道具に変わります。

分割代入と組み合わせた書き方（重要テクニック）

[key, value] の形をそのまま分割する

Object.entries の1要素は [key, value] という配列でした。
ここに分割代入を直接使うと、読みやすいループが書けます。

const settings = { theme: "dark", lang: "ja", debug: true };

for (const [key, value] of Object.entries(settings)) {
  console.log(`設定 ${key} = ${value}`);
}
// 設定 theme = dark
// 設定 lang = ja
// 設定 debug = true
JavaScript

[key, value] のように書くことで、
entry[0] や entry[1] を意識せずに「意味のある名前」で扱えます。

map / filter のコールバックでも同じテクニックが使える

const env = { NODE_ENV: "production", VERSION: "1.0.0", DEBUG: "false" };

const upper = Object.fromEntries(
  Object.entries(env).map(([key, value]) => [key, value.toUpperCase()])
);

console.log(upper);
// { NODE_ENV: "PRODUCTION", VERSION: "1.0.0", DEBUG: "FALSE" }
JavaScript

コールバックの引数に [key, value] をそのまま分割代入してしまえば、
「このコールバックは entries の1要素を処理しているんだな」とひと目で分かります。

ここが重要です：
Object.entries を使うときは、「分割代入で [key, value] を受ける」のがセットのテクニックだと覚えておくと良いです。

よくある注意点と勘違い（重要部分の深掘り）

プロパティの順番について

Object.entries で返される配列の順番は、基本的には

  1. 数値っぽいキー（配列のインデックスなど）
  2. それ以外の文字列キー
  3. シンボルキー（entries には含まれない）

といったルールがありますが、
初心者のうちは「普通のオブジェクトなら、大体“定義した順”だと思っておいて良い」くらいで構いません。

ただし、「順番に厳密な意味を持たせる設計」は避けるほうが無難です。

fromEntries が使える環境かどうか

Object.entries は ES2017、Object.fromEntries は ES2019 で追加されたメソッドです。
モダンな環境ではほぼどちらも使えますが、古い環境向けコードではポリフィルやトランスパイルが必要になることがあります。

初心者のうちは、

  • entries：よく出てくるので優先して覚える
  • fromEntries：entries と対の概念として「そういうのもある」と理解しておく

くらいの認識で十分です。

entries は「自分の、列挙可能なプロパティ」だけ

プロトタイプチェーンで継承されたプロパティや、
enumerable: false なプロパティは Object.entries には含まれません。

通常の {} で作った素朴なオブジェクトを相手にする限り、
あまり意識しなくても問題になることは少ないです。
「自分で書いたプロパティだけが対象」と思っておけばOKです。

例題で理解を固める

// 1) オブジェクトをキーと値に分けて出力
const user = { id: 1, name: "Alice", age: 20 };
for (const [key, value] of Object.entries(user)) {
  console.log(key, "=>", value);
}

// 2) 値が true のフラグだけ抽出
const flags = { debug: false, cache: true, log: true };
const enabled = Object.entries(flags)
  .filter(([key, value]) => value === true)
  .map(([key]) => key);

console.log(enabled); // ["cache", "log"]

// 3) 値を加工して新しいオブジェクトを作る
const priceTable = { apple: 100, orange: 80 };
const taxed = Object.fromEntries(
  Object.entries(priceTable).map(([name, price]) => [name, Math.round(price * 1.1)])
);
console.log(taxed); // { apple: 110, orange: 88 }

// 4) entries と keys/values の違い確認
const cfg = { theme: "dark", lang: "ja" };
console.log(Object.keys(cfg));    // ["theme", "lang"]
console.log(Object.values(cfg));  // ["dark", "ja"]
console.log(Object.entries(cfg)); // [["theme", "dark"], ["lang", "ja"]]
JavaScript

まとめ

Object.entries の核心は、
「オブジェクトを [キー, 値] の二重配列に変換して、“配列と同じノリ”で扱えるようにする」ことです。

これにより、

  • オブジェクトを自然な形でループできる
  • map / filter など配列の強力なメソッドをそのまま使える
  • 必要なら Object.fromEntries で、加工した結果をオブジェクトに戻せる

という流れが手に入ります。

for...in より読みやすく、
「オブジェクトを配列に変換して処理する」という ES6+ 的なスタイルの基礎になるので、
形（[ [key, value], ... ]）と分割代入パターン（for (const [key, value] of Object.entries(obj))）を、ぜひ体で覚えてしまってください。

スポンサーリンク
タイトルとURLをコピーしました