JavaScriptのObject.keys()メソッドとは？オブジェクトのキーを取得する方法を徹底解説

JavaScriptのObject.keys()メソッドは、オブジェクトに含まれるキーを取得し、それらを格納した配列を返します。返される配列内のキーの順序は、元のオブジェクトに出現した順序と同じになります。

JavaScript（JS）のオブジェクトは、「キー」と「値」という2つの主要な要素で構成されています。

オブジェクトを扱っていると、そのオブジェクトに関連付けられたキーの一覧を取得したい場面が出てきます。そんなときに役立つのが、JavaScriptのObject.keys()メソッドです。このメソッドを使えば、オブジェクト内のすべてのプロパティ名を一覧形式で簡単に生成できます。

この記事では、具体的なコード例を交えながら、Object.keys()メソッドを使ってオブジェクトに保存されたキーの一覧を取得する方法を解説します。あわせて、JavaScriptオブジェクトの基本的な構造についても簡単におさらいしましょう。

JavaScriptオブジェクトの基本をおさらい

JavaScriptにおけるオブジェクトは、キーを値に対応付けるマップ型のデータ構造です。オブジェクトに格納できる値には、文字列、数値、真偽値（Boolean）など、さまざまなデータ型が含まれます。以下は、JavaScriptのオブジェクトの一例です。

const job_description = {
	position: "Sales Assistant",
	floor_worker: true,
	hours_per_week: 38
};

コロン（:）の左側にある単語がキー、右側にある単語が値です。JavaScriptのオブジェクトは、Pythonでいう辞書（ディクショナリ）に相当するものだと考えると理解しやすいでしょう。

Object.keys()メソッドの構文

JavaScriptのObject.keys()メソッドは、JavaScriptオブジェクトやJSONオブジェクトの中にあるキーを返します。取得されるキーは、オブジェクト内に出現する順序どおりに配列へ格納されます。

Object.keys()メソッドの構文は次のとおりです。

Object.keys(object_name)

このメソッドが受け取る引数は1つだけです。それは「キーを取得したいオブジェクトの名前」です。Object.keys()メソッドは、指定されたオブジェクト内のすべてのキー名を、JavaScriptの配列として返します。

注目すべきは、メソッド名自体が「Object.keys()」となっている点です。これは、keys()がObjectのメソッドであるためです。キーを取得したいオブジェクトは、必ずObject.keys()の引数として指定する必要があります。keys()を任意のオブジェクトに直接連結（ドット記法で呼び出し）することはできません。個々のオブジェクトはkeys()メソッドへのアクセスを持たないからです。

Object.keys()の使用例

それでは、実際の例を見ながら、このメソッドの動作を確認していきましょう。

先ほど、地元のスーパーストアで募集されている求人情報をまとめた「job_description」というオブジェクトを作成しました。このオブジェクトには、真偽値・文字列・整数が含まれています。ここで、このオブジェクトに含まれるキーの一覧を取得したいとします。

その場合、次のようなコードを書くことができます。

const job_description = {
	position: "Sales Assistant",
	floor_worker: true,
	hours_per_week: 38
};

var job_keys = Object.keys(job_description);

console.log(job_keys);

このコードを実行すると、次の出力が得られます。

["position", "floor_worker", "hours_per_week"]

まず、スーパーストアの求人情報を格納したオブジェクトを持つ定数「job_description」を宣言しました。

続いて、Object.keys()を使ってこのオブジェクトに関連付けられたキーの一覧を取得し、その結果を変数「job_keys」に代入しています。最後に、console.log()で「job_keys」の内容をコンソールに出力しました。

ご覧のとおり、コードは3つの値を含む配列を返しました。それぞれの値が、オブジェクト内の一意なキー名に対応しています。

for...ofループと組み合わせた応用例

もう少し実践的な例を見てみましょう。

オブジェクト内のキーを、「Key Name: 」という接頭辞をつけてコンソールに出力したいとします。その場合は、次のようにコードを書きます。

const job_description = {
	position: "Sales Assistant",
	floor_worker: true,
	hours_per_week: 38
};

var job_keys = Object.keys(job_description);

for (var key of job_keys) {
	console.log("Key Name: " + key);
}

このコードを実行すると、次の出力が得られます。

Key Name: position
Key Name: floor_worker
Key Name: hours_per_week

まず、キーをコンソールに出力したい対象となる「job_description」オブジェクトを定義しました。次に、JSのObject.keys()メソッドを使って、オブジェクト内のキーの一覧を取得しています。

そして、「for...of」ループを使って、「job_description」オブジェクトの各キーを順番に処理しました。

各キーに対して、「Key Name: 」という文字列に続けてキー名をコンソールに出力しています。「for...of」ループの仕組みについてさらに詳しく知りたい方は、JavaScriptのforループに関する入門ガイドもあわせて参照してみてください。

まとめ

Object.keys()メソッドは、JavaScriptオブジェクトに保存されているキーの一覧を取得し、その結果を配列として返します。キーを取得する際には、オブジェクトに直接keys()を連結することはできず、必ずObject.keys()という構文を使用しなければならない点に注意しましょう。

この記事では、JavaScriptオブジェクトの基礎と、Object.keys()メソッドの使い方について解説しました。これであなたも、プロのJavaScript開発者のようにObject.keys()を使ってオブジェクトのキー一覧を取得できるはずです。

JavaScriptのコーディングについてさらに学びたい方は、JavaScriptの学習方法をまとめたガイドもぜひチェックしてみてください。