【JavaScript】Object.keys()の使い方や応用例をご紹介！

JavaScriptでは、オブジェクトと呼ばれるデータを用いてさまざまな処理を実装します。オブジェクトを取り扱ううえでよく利用されるメソッドが、Object.keys()メソッドです。

しかし、使い方がイマイチ理解できなかったり、応用の仕方が分からなかったりする人もいることでしょう。

今回は、JavaScriptでオブジェクトを取り扱うなら覚えておきたい、Object.keys()メソッドの使い方と応用の仕方を、サンプルコードを交えて詳しく解説していきます。ぜひ参考にしてください。

JavaScriptを学び直すなら最新の第7版がおすすめ

2022年ITエンジニア大賞を受賞した話題本

オブジェクトとは？

Object.keys()メソッドの使い方を理解する前に、JavaScriptにおけるオブジェクトの仕組みについておさらいしましょう。

オブジェクトとは、関連する属性情報や機能が集約されたデータのことです。JavaScriptでは、オブジェクトで関連する情報をひとまとめにすることで、複雑なデータ構造を表現します。

例として、JavaScriptで会員制のショッピングサイトを開発するとしましょう。

会員制なので、ユーザーアカウントを作成・管理する必要があります。ユーザーアカウントには、ユーザー名・メールアドレス・パスワードなどが必要と考えられます。

このように、関連する情報を紐付けてひとまとめのデータとして表現したい場合は、オブジェクトを使うのがおすすめです。JavaScriptでは、以下のサンプルコードのようにしてオブジェクトを記述します。

let user_account = {
  // ユーザー名    
  name: "Sample Name",
  // メールアドレス
  mail: "sample_name@hoge.com",
  // パスワード
  pass: "TBNQMF_OBNF",
  // 年齢
  age: 23
};

オブジェクトは、属性情報を参照する際のインデックスとなる「キー」と、属性情報の中身である「値」が、コロンで紐付けされているものを、オブジェクトの要素としています。

ユーザー名であれば、コロン左側の「name」がキー、右側の「Sample Name」が値です。要素が複数ある場合はカンマで区切って、最後に要素全体を波カッコで囲めば、オブジェクトの出来上がりです。

Object.keysを使ってみよう

オブジェクトはキーと値の組みを要素としていることを、前節で説明しました。

Object.keys()メソッドは、オブジェクトの中で定義されている要素から、キーのみを抽出して配列にする機能を持ちます。基本的な使い方について、これから解説していきます。

Object.keysの基本的な使い方

まずは、以下のサンプルコードをご覧ください。

let bank_account = {
  bank_code: "0001",
  branch_code: "122",
  account_type: 1,
  account_no: "1303213"
};

let key_list = Object.keys(bank_account);

for (let key of key_list) {
  console.log(key);
}

Object.keys()メソッドは、オブジェクトを引数にとります。戻り値は、キー名を集約した文字列の配列です。

実際にサンプルコードを実行すると、コンソール上には「bank_code」「branch_code」「account_type」「account_no」が出力されることが分かります。

配列にする際は、オブジェクトで定義されている順番に配列に格納されます。

試しに、2行目と3行目の要素を入れ替えてから、再度実行してみましょう。すると今度は、「branch_code」「bank_code」「account_type」「account_no」の順で出力されることが分かります。

ただし、キーに0または正の整数をあてた場合は、数値の小さい順に配列に数値文字列が格納されます。以下のサンプルコードをご覧ください。

let memo_list = {
  7: "sample_memo",
  4: "hogehoge",
  1: "fugafuga",
  3: "piyo",
  0: "foo"
};

let key_list = Object.keys(memo_list);

console.log(key_list);

サンプルコードでは「7→4→1→3→0」の順に要素が定義されています。しかし、キーは0または正の整数で定義しているため、Object.keys()メソッドの戻り値は「[“0”, “1”, “3”, “4”, “7”]」と数値の小さい順に格納されます。

キーをシングルクォートで囲った場合も同様です。一方、負の整数や小数をキーとした場合は、並び替えられず定義した順に配列に格納されるので、注意してください。

Object.keysを配列に使った場合

Object.keys()メソッドは、配列に対しても適用できます。配列はオブジェクトと違い、キー名は必要としない代わりに、0から始まる正の整数をインデックスとして持ちます。

したがって、Object.keys()メソッドの戻り値は、0を含む正の整数が格納された配列です。以下のサンプルコードをご覧ください。

let name_list = [
  "Sato",
  "Suzuki",
  "Ito",
  "Yamamoto",
  "Watanabe"
];

let key_list = Object.keys(name_list);

console.log(key_list);

上記サンプルコードを実行すると、コンソール上には「[“0”, “1”, “2”, “3”, “4”]」と出力されることが分かります。このように、キーが必要ない配列をObject.keys()メソッドの引数に設定した場合は、数字が文字列として配列に格納されます。

【応用編】Arrayクラスのメソッドと組み合わせてみよう

Object.keys()を他のメソッドと併用することで、より高度な処理を実装できます。ここでは、併せて使いたいメソッドを4つ紹介します。

Array.forEach()と組み合わせる

1つ目は、Array.forEach()メソッドです。以下のサンプルコードで、使い方を説明しましょう。

let cost_list = {
  "Tnaka Taro": 1200,
  "Hayashi Ryu": 3000,
  "Sugimoto Hana": 1500,
  "Sakuma Shuhei": 2000,
}

Object.keys(cost_list).forEach(function(key) {
    console.log(key + ":" + cost_list[key]);
});

Array.forEach()メソッドは、引数に配列をとるメソッドであるため、オブジェクトに対して直接使うことができません。そこで、Object.keys()メソッドを使って、オブジェクトから配列を生成します。

Array.forEach()メソッドの引数は、コールバック関数です。したがって、配列の要素ごとに実行する処理を関数の形で記述します。

Array.filter()と組み合わせる

2つ目は、Array.filter()メソッドです。Array.filter()メソッドは、対象の配列の中からある特定の条件を満たす要素のみを抜き出し、新たな配列に格納する機能を持ちます。

特定の条件は、Array.forEach()メソッドのようにコールバック関数を記述し、引数に渡すことで判定します。以下のサンプルコードで、動作を確認しましょう。

let population_list = {
  "横浜市": 3756412,
  "大阪市": 2750995,
  "名古屋市": 2328138,
  "札幌市": 1972978,
  "福岡市": 1602633,
}

let new_list = Object.keys(population_list).filter(function(key) {
    return population_list[key] > 2000000;
});

console.log(new_list);

都市名と人口の組みを要素としたオブジェクトから、人口が200万以上の都市名を抽出する処理を実装しています。Array.forEach()メソッドのときと同じように、最初はObject.keys()メソッドを使って、都市名のみの配列を作成します。その次に、Array.filter()メソッドの呼び出しです。

Array.forEach()メソッドと違う点は、戻り値が存在することです。今回であれば、人口が200万以上の都市は、横浜市、大阪市、名古屋市が該当するため、new_listには「[“横浜市”, “大阪市”, “名古屋市”]」が格納されます。

Array.find()と組み合わせる

3つ目は、Array.find()メソッドです。Array.filter()メソッドのように、特定の条件に該当する要素が存在するかを探索する機能を持ちますが、Array.find()メソッドは最初にヒットした要素しか返しません。

つまり戻り値は、配列ではなく1つの情報です。サンプルコードは以下の通りです。

let area_list = {
  "高山市": 2177,
  "浜松市": 1558,
  "日光市": 1449,
  "北見市": 1427,
  "静岡市": 1411,
}

let result = Object.keys(area_list).find(function(key) {
  return area_list[key] < 2000 && area_list[key] >= 1000;
});

console.log(result);

今回の条件は、面積が1000以上2000未満であるものとしました。該当する都市名は、高山市以外の4都市が挙げられます。しかし、Array.find()メソッドは、該当する都市名のうち最初にヒットしたものしか返しません。つまり、resultには「浜松市」のみが格納されます。

Array.map()と組み合わせる

4つ目は、Array.map()メソッドです。Array.map()メソッドは、引数で指定したコールバック関数の処理を配列の要素ごとに実行します。

機能的にはArray.forEach()メソッドと同じ一方で、処理適用後の配列を戻り値として返すのが特徴です。以下のサンプルコードをご覧ください。

let price_list = {
  "pen": 780,
  "eraser": 660,
  "note": 770,
  "clip": 890,
}

let discount_list = Object.keys(price_list).map(function(key) {
  return price_list[key] * 0.90;
});

console.log(discount_list);

価格リストの各要素に対して、Array.map()メソッドで1割引後の価格を計算し、割引後の価格が格納された配列を作成しています。Array.forEach()メソッドで同じ計算を行っても、新しく配列は作成されないため、使い分けに注意しましょう。

最後に

さて、ここまでJavascriptのObject.keys()メソッドの使い方や応用例について解説してきましたがいかがでしたか？

実際の開発でも頻繁に登場する「オブジェクト」ですが、配列とは違って便利なメソッドはまだ少なく、その扱いに困ることも少なくないことでしょう。

今回ご紹介したObject.keys()メソッドとArrayクラスのメソッドを組み合わせると、オブジェクトを使った複雑な処理が実現しやすくなると思いますので、今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。

JavaScriptを学び直すなら最新の第7版がおすすめ

2022年ITエンジニア大賞を受賞した話題本