JavaScript

JavaScriptのObject.keys()でオブジェクトのキー一覧を取得する方法

JavaScriptのObject.keys()を使い、オブジェクトが持つキーの一覧を取得する方法を、開発現場で使いやすい例とともに解説します。

この記事でわかること

  • Object.keys()の基本的な構文と戻り値を理解できる
  • 取得したキー一覧をforEach()やfor...ofで処理できる
  • キー一覧を使った表示・検索・検証の例を把握できる

Object.keys()でオブジェクトのキー一覧を取得する

Object.keys()は、オブジェクト自身が持つ列挙可能な文字列キーを配列として返すメソッドです。基本構文はObject.keys(対象のオブジェクト)です。

JavaScript
const user = {
  name: "Taro",
  age: 30,
};

const keys = Object.keys(user);
console.log(keys);
// 期待される出力: ["name", "age"]

戻り値は配列なので、配列の長さを調べたり、繰り返し処理を行ったりできます。空のオブジェクトに対しては空配列[]が返ります。

JavaScript
console.log(Object.keys({}));
// 期待される出力: []

取得したキー一覧を繰り返し処理する

取得したキーを使って、元のオブジェクトから値を参照できます。キーを変数keyで受け取り、user[key]のように記述します。

JavaScript
const user = {
  name: "Taro",
  age: 30,
};

Object.keys(user).forEach((key) => {
  console.log(`${key}: ${user[key]}`);
});
// 期待される出力:
// name: Taro
// age: 30

単純にすべてのキーを処理するならforEach()が使いやすく、途中で処理を止めたい場合はfor...ofとbreakを組み合わせます。

方法書きやすさ主な用途
forEach()短く書きやすい一覧の表示など、単純な繰り返し
for…of制御しやすい条件に応じて途中で処理を止める
forEach()とfor…ofの使い分け

開発現場で使いやすい利用例

フォーム入力や設定値の確認では、必要なキーがそろっているかを検証できます。

JavaScript
const formData = {
  name: "Taro",
  email: "taro@example.com",
};

const requiredKeys = ["name", "email"];
const isValid = requiredKeys.every((key) =>
  Object.keys(formData).includes(key),
);

console.log(isValid);
// 期待される出力: true

特定の項目が存在するかだけを調べる場合は、includes()を使うと簡潔です。キー一覧をmap()やfilter()につなげれば、表示対象のキーだけを抽出する処理にも応用できます。

JavaScript
const settings = {
  theme: "dark",
  language: "ja",
};

const hasTheme = Object.keys(settings).includes("theme");
console.log(hasTheme);
// 期待される出力: true

Object.keys()を使うときの注意点

  • Object.keys()はオブジェクトを変更せず、キー名の配列を作成します。
  • 取得したキーで値を参照するときは、同じオブジェクトに対してobject[key]を使います。
  • 配列に使うとインデックスが文字列のキーとして返ります。配列の要素を処理する目的なら、for...ofやforEach()のほうが意図を表しやすい場合があります。
  • Object.keys()が対象にするのは、オブジェクト自身の列挙可能な文字列キーです。継承プロパティや列挙不可のプロパティまで取得したい場合は、別のAPIを検討します。

参考