JavaScript

keys() とは？

たとえば、下のように「人の情報」をまとめたオブジェクトがあるとします。

const person = {
	name: "Taro",
	age: 20,
	country: "Japan"
};

console.log(Object.keys(person));

結果はこうなります

["name", "age", "country"]

このように「プロパティ名だけ」を配列（[]）として取り出すことができます。

もう少しだけ詳しく

• Object.keys() は オブジェクトに入っているキーを配列で返す メソッドです。
• つまり「キー一覧表を作ってくれる」ようなもの。
• Object の部分は固定で書きます。
• カッコの中に調べたいオブジェクトを入れるだけです。

実務での使いどころ

• データをループ処理で表示したいとき（forEach や for...of と組み合わせ）
• オブジェクトの中に「どんな項目があるか」を自動的に確認したいとき
• 項目名をもとに HTML を動的に作りたいとき

こう書けばOK（まとめ）

const keys = Object.keys(yourObject);

keys の結果は 配列。その配列を使えば、オブジェクトの中身を柔軟に扱えます。

注意ポイント

• Object.keys() で取得できるのは「自分の持っているプロパティ」だけ（継承されたものは含まれません）。
• 順番は基本的に「追加された順」ですが、数字っぽいキーは並び順が変わることがあります。
• 配列にも使えますが、その場合はインデックス番号（0, 1, 2…）がキーとして返されます。

keys() は Object 以外でも使える？

実は keys() は Object.keys() 以外にも使える場面があります。型（データの種類）ごとに意味が少し違います。

1. Object.keys()

const user = { name: "Taro", age: 20 };
console.log(Object.keys(user));  // ["name", "age"]

オブジェクトのキー一覧を配列で取り出します。

2. Map.keys()

const map = new Map([
    ["apple", 100],
    ["banana", 150],
    ["orange", 120]
]);

for (const key of map.keys()) {
    console.log(key);
}

結果：

apple
banana
orange

• Map.keys() は順番を保ったままキーを取り出せます。
• 結果は配列ではなく「繰り返し専用のオブジェクト（iterator）」です。
• 配列にしたいときは Array.from(map.keys())。

3. Set.keys()

const set = new Set(["apple", "banana", "orange"]);
console.log(Array.from(set.keys())); // ["apple", "banana", "orange"]

• Set にはキーの概念がないため、keys() は値（value）をそのまま返します。
• set.values() と結果は同じです。

4. 配列の keys()

const fruits = ["apple", "banana", "orange"];
for (const index of fruits.keys()) {
    console.log(index);
}

結果：

0
1
2

• 配列の keys() はインデックス番号を順番に返します。
• 値を取りたいときは values()。
• 番号と値の両方を扱うなら entries()。

まとめ（ざっくりイメージ）

• Object.keys() → オブジェクトのキー名を配列で。
• map.keys() → Mapのキーを順番に取り出す。
• set.keys() → Setの値をそのまま返す（keys＝values）。
• array.keys() → 配列の番号（index）を順番に返す。

補足メモ

• keys() は「データ構造を順番に読む」ためのメソッド。
• どの型でも「中身を確認したいとき」に使える。
• 結果が「配列」か「iterator」かは型によって違う点に注意。