【JavaScript入門】Object.keysの使い方とプロパティ列挙の方法まとめ

こんにちは!エンジニアの中沢です。

JavaScriptにはオブジェクトのプロパティを取得するための「Object.keys」があります。

オブジェクトのプロパティを配列で取得できるので、上手く活用してください。

この記事では、

・Object.keysとは
・Object.keysの使い方

という基本的な内容から、

・プロパティ列挙の方法

などの応用的な使い方に関しても解説していきます。

今回はこれらの方法を覚えるために、Object.keysのさまざまな使い方をわかりやすく解説します!

Object.keysとは

Object.keysとは、オブジェクトのプロパティを取得するために使うものです。

オブジェクトのプロパティを配列でまとめて取得できるので、うまく活用してください。

連想配列で使えば、キーを取得することができます。

Object.keysの使い方

この章では、「Object.keys」の基本的な使い方を見ていきましょう!

まずは、オブジェクトの作り方をおさらいしてからプロパティを取得する方法を学んでいきます。

オブジェクトの作り方

まずは、もっとも基本となるオブジェクトの作り方から見ていきましょう!

オブジェクトの構造は簡単に言うと「プロパティ」と「メソッド」に分けられます。

プロパティはさまざまな情報を「キー」と「値」のペアで保持することが可能で、メソッドは関数に似ています。

空のオブジェクトは次のように作成することができます。

const obj1 = { }

const obj2 = new Object()

どちらの方法でも同じですが、「obj1」のようにリテラルで記述する方が簡単なのでよく使われています。

例えば、人物の「名前」と「年齢」の情報を持ったプロパティを保持するオブジェクトは次のように記述できます。

const obj = {

    name : '田中 太郎',
    age : 30

}

オブジェクトの中身が「キー: 値」というペアのデータ構造になっている点に注目してください。

基本的なオブジェクトはこのように作成できますが、さらにプロパティの操作やメソッドの追加に関しては次の記事を参考にしてみてください!

JavaScriptのオブジェクトはこう書け!使い方の基本を徹底解説!
更新日 : 2020年6月9日

オブジェクトのプロパティを取得する方法

オブジェクトの作り方が分かったところで、実際に「Object.keys」を使ってプロパティを取得してみましょう。

使い方としては、【 Object.keys( オブジェクト ) 】のように引数へオブジェクトを指定するだけです。

戻り値としてプロパティ名を列挙した配列データを取得することができるのが特徴です。

そこで、まずは次のようなオブジェクトデータを用意します。

const obj = {
  name: '田中 太郎',
  age: 30,
  area: 'Tokyo'
}

ここでは「name / age / area」という3つのプロパティが作られているのを確認しておいてください。

次に、Object.keys()を使って次のように記述します!

const result = Object.keys(obj);

console.log(result);

実行結果

["name", "age", "area"]

keys()の引数へオブジェクトを指定することで、すべてのプロパティを取得することができます。

実行結果を見るとプロパティ名が配列データとして取得できているのが分かりますね。

このように配列データに変換することで、JavaScriptの標準で提供されているさまざまな配列メソッドが利用できるので便利です。

Object.keysを配列に使用する方法

ここでは、Object.keysを配列に使用する方法を解説します。

Object.keysでプロパティを取得するには、引数に取得したいオブジェクトを指定します。

次のプログラムで確認してみましょう。

const obj = ["sa", "mu", "ra", "i"];
console.log(Object.keys(obj));

実行結果:

["0", "1", "2", "3"]

このようにして、プロパティを取得することができました。

プロパティ列挙の方法

この章では、プロパティを列挙する方法について見ていきましょう!

主に「forEach()」「map()」「filter()」メソッドを活用した方法について学んでいきます。

また、この章では以下の共通したオブジェクトデータを使用するものとします。

const obj = {
  name: '田中 太郎',
  age: 30,
  area: 'Tokyo'
}

forEach()によるプロパティ列挙

まずは、プロパティ列挙のもっとも定番な方法として「forEach()」を使った手法について見ていきましょう!

基本的にforEach()は配列に対して利用できるメソッドなのですが、Object.keys()の戻り値は配列なので相性が良いわけです。

プロパティを列挙する場合は次のように記述します。

Object.keys(obj).forEach(function(data) {

  console.log(data);

})

実行結果

name
age
area

forEach()の引数へ関数を定義している点に注目してください。

このように記述することで、プロパティ1つずつに対して任意の関数を実行することができるのです。

ちなみに、「obj[data]」のような形式にするとプロパティの値を出力することも可能です!

このforEach()に関して基本から応用技までを次の記事でまとめているので、ぜひ参考にしてみてください!

【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ!
更新日 : 2019年6月5日

map()によるプロパティ列挙

次に、map()を使ったプロパティの取得方法を見ていきましょう!

基本的な使い方はforEach()と同じなのですが、戻り値として取得したプロパティを配列で返してくれるのが特徴です。

次のサンプル例を見てください!

const result = Object.keys(obj).map(function(data) {

    return data;

})

console.log(result);

実行結果

["name", "age", "area"]

map()の引数へ指定した関数の内容に注目してください!

「return」を使って値を返していますよね?

この記述によりmap()は、任意の値を配列化してくれるわけです。

map()をさらに活用するための基本から応用技については、次の記事で詳しくまとめているのでぜひ参考にしてみてください!

【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説!
更新日 : 2019年5月23日

filter()によるプロパティ列挙

今度はfilter()を使ったプロパティの取得方法について見ていきましょう!

filter()はmap()とほとんど同じように使うことができます。

次のサンプル例を見てください!

const result = Object.keys(obj).filter(function(data) {

    return data;

})

console.log(result);

実行結果

["name", "age", "area"]

このサンプル例では、map()の部分をfilter()に置き換えただけですが実行結果は同じですね。

filter()の特徴としては、ある条件を満たしている場合のみ値を取得するような処理を記述することができます。

例えば、「return data === 'name'」のようにするとプロパティに「name」がある場合のみ値を返すようになります。

これを応用すれば、30歳以上のユーザーだけを抽出するような使い方も簡単に出来るわけです。

filter()についての基本から活用技については、次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【JavaScript入門】filterで配列のデータを抽出する方法
更新日 : 2019年4月8日

まとめ

いかがでしたか?

今回はObject.keysでオブジェクトのプロパティを取得する方法を解説しました。

連想配列のキーを取得できるので、ぜひ活用してくださいね。

もし、Object.keysの使い方を忘れてしまったらこの記事を確認してください!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

中沢 丈

中沢 丈

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]