こんにちは！エンジニアの中沢です。
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
}
オブジェクトの中身が「キー: 値」というペアのデータ構造になっている点に注目してください。
基本的なオブジェクトはこのように作成できますが、さらにプロパティの操作やメソッドの追加に関しては次の記事を参考にしてみてください！
オブジェクトのプロパティを取得する方法
オブジェクトの作り方が分かったところで、実際に「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()に関して基本から応用技までを次の記事でまとめているので、ぜひ参考にしてみてください！
map()によるプロパティ列挙
次に、map()を使ったプロパティの取得方法を見ていきましょう！
基本的な使い方はforEach()と同じなのですが、戻り値として取得したプロパティを配列で返してくれるのが特徴です。
次のサンプル例を見てください！
const result = Object.keys(obj).map(function(data) {
return data;
})
console.log(result);
実行結果
["name", "age", "area"]
map()の引数へ指定した関数の内容に注目してください！
「return」を使って値を返していますよね？
この記述によりmap()は、任意の値を配列化してくれるわけです。
map()をさらに活用するための基本から応用技については、次の記事で詳しくまとめているのでぜひ参考にしてみてください！
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()についての基本から活用技については、次の記事で体系的にまとめているのでぜひ参考にしてみてください！
まとめ
いかがでしたか？
今回はObject.keysでオブジェクトのプロパティを取得する方法を解説しました。
連想配列のキーを取得できるので、ぜひ活用してくださいね。
もし、Object.keysの使い方を忘れてしまったらこの記事を確認してください！
