JavaScript | 基礎構文:オブジェクト – Object.keys / values / entries

JavaScript JavaScript
スポンサーリンク

Object.keys / values / entries とは何か

Object.keys / Object.values / Object.entries は、オブジェクトの「列挙可能な自分自身のプロパティ」を取り出すための標準メソッドです。keys はキーの配列、values は値の配列、entries は [キー, 値] のペア配列を返します。配列として受け取れるので、map や forEach といった配列操作がそのまま使えます。

const user = { name: "太郎", age: 20 };

console.log(Object.keys(user));    // ["name", "age"]
console.log(Object.values(user));  // ["太郎", 20]
console.log(Object.entries(user)); // [["name", "太郎"], ["age", 20]]
JavaScript

何を返すかと“列挙可能・自分自身”の意味

これらのメソッドは「自分自身(own)」かつ「列挙可能(enumerable)」なプロパティだけを対象にします。継承(プロトタイプ)上のプロパティや、非列挙プロパティは含まれません。キーは文字列(数値キーでも文字列化)で返され、Symbol キーは含まれません。

const parent = { shared: 1 };
const child = Object.create(parent);
child.own = 2;

console.log(Object.keys(child));   // ["own"](shared は親のプロパティなので含まれない)

const obj = {};
Object.defineProperty(obj, "hidden", { value: 1, enumerable: false });
console.log(Object.keys(obj));     // [](非列挙は含まれない)
JavaScript

取り回しの基本(イテレーション・変換・フィルタ)

すべてをループする

const settings = { theme: "dark", locale: "ja" };
for (const [key, value] of Object.entries(settings)) {
  console.log(`${key} = ${value}`);
}
JavaScript

値を変換して新オブジェクトに

const prices = { apple: 120, banana: 80 };
const withTax = Object.fromEntries(               // entries → 変換 → fromEntries で戻す
  Object.entries(prices).map(([k, v]) => [k, Math.floor(v * 1.1)])
);
console.log(withTax); // { apple: 132, banana: 88 }
JavaScript

条件で絞り込む

const score = { a: 95, b: 60, c: 78 };
const passed = Object.fromEntries(
  Object.entries(score).filter(([, v]) => v >= 70)
);
console.log(passed); // { a: 95, c: 78 }
JavaScript

ここが重要です:entries は「オブジェクトを配列として扱える」ゲート。map/filter/reduce の力をそのまま使えるので、変換と抽出が読みやすく書けます。


キーの並び順(落とし穴を深掘り)

JavaScript のオブジェクトは、キーの列挙順に独特のルールがあります。整数っぽいキー(0, 1, 2 などの「正の整数の文字列」)は数値昇順、そのほかのキーは「追加順」で並びます。

const o = { "2": "two", "1": "one", a: "A", b: "B" };
o.c = "C";

console.log(Object.keys(o)); // ["1", "2", "a", "b", "c"]
JavaScript

ここが重要です:表示順や処理順に意味がある場合は、Object.entries で受け取ってから「必要な順」に並べ替える(sort)ほうが安全です。

const sorted = Object.fromEntries(
  Object.entries(o).sort(([k1], [k2]) => k1.localeCompare(k2))
);
JavaScript

Map と比較したときの使い分け(設計の指針)

オブジェクトは「構造(レコード)」に向き、Map は「順序保証・あらゆるキー型・サイズ取得が簡単」に向きます。Object.keys/values/entries は軽くて便利ですが、順序とキーの型で限界があります。順序が重要、キーにオブジェクトや関数を使いたい、サイズが頻繁に必要なら Map を検討しましょう。

const m = new Map();
m.set({ id: 1 }, "value"); // オブジェクトをキーにできる
console.log(m.size);       // 1(サイズがすぐ取れる)
JavaScript

ここが重要です:設定やデータの“形”を表すならオブジェクト+entriesで十分。コレクションとして扱い、順序やキー型が大事なら Map が適任です。


実践パターン(バリデーション・マージ・差分)

必須キーのチェック

const required = ["name", "age"];
const data = { name: "太郎" };
const missing = required.filter(key => !(key in data));
if (missing.length) throw new Error(`Missing: ${missing.join(", ")}`);
JavaScript

部分的にマージ(上書きルールを制御)

const base = { theme: "dark", locale: "ja", debug: false };
const override = { debug: true };
const merged = Object.fromEntries(
  Object.entries(base).map(([k, v]) => [k, k in override ? override[k] : v])
);
console.log(merged); // { theme: "dark", locale: "ja", debug: true }
JavaScript

差分を取る(変更点だけ抽出)

const a = { x: 1, y: 2, z: 3 };
const b = { x: 1, y: 9, z: 3 };
const diff = Object.fromEntries(
  Object.entries(b).filter(([k, v]) => a[k] !== v)
);
console.log(diff); // { y: 9 }
JavaScript

ここが重要です:entries → 配列操作 → fromEntries の往復で、検査・変換・比較のロジックがシンプルに書けます。


まとめ

Object.keys/values/entries は「自分自身かつ列挙可能なプロパティ」を配列として取り出すための基本ツールです。entries を起点に配列メソッドで変換・抽出し、Object.fromEntries でオブジェクトに戻すと、複雑な処理も読みやすく書けます。キーの並び順ルール(整数キーは数値昇順、そのほかは追加順)を理解し、順序に意味があるときは自分で並べ替えましょう。構造の表現にはオブジェクト、順序とキー型が重要なら Map——この使い分けが、意図通りに正確な処理を書く近道です。

タイトルとURLをコピーしました