icon
icon

JavaScriptのObject.keys()メソッドの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのObject.keys()メソッドの使い方について現役エンジニアが解説しています。Object.keysメソッドは名前の通り、連想配列のキー名を取得することが出来ます。また入れ後になっている場合は取得できなかったり、キー名が数値の場合はソートされるなどがあります。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptのObject.keys()メソッドの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのObject.keys()メソッドの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

Object.keys()メソッドとは

Object.keys()メソッドとは、Object型の変数からキーのみを抽出するメソッドです。

{ name: ‘taro’, age: 18 } という変数から、’name’と’age’を抽出することができます。他にも似たようなメソッドとして、Object.valuesObject.entriesがあります。

Object.keys()メソッドの使い方

Object.keys() メソッドは、キーを抽出したい対象を引数に指定することで、キーのみの配列を抽出できます。

const target = {
name: 'taro',
age: 18,
weight: 60,
height: 170,
};
Object.keys(target);
// => ['name', 'age', 'weight', 'height']

以下のような場合は、hobbies 配下の { 1: ‘tennis’, 2: ‘soccer’ } は、hobbiesの値となるので抽出できません。

const target = {
name: 'taro',
age: 18,
weight: 60,
height: 170,
hobbies: {
1:'tennis',
2:'soccer',
},
};
Object.keys(target);
// => ['name', 'age', 'weight', 'height', 'hobbies']

また、キーが数値(や数値を意味する文字列)の場合は、数値順にソートされることにも注意してください。

const target = {
3:3,
1:1,
5:5,
};
Object.keys(target);
// => ['1', '3', '5']

 

[PR] コーディングで副業する方法とは

実際に書いてみよう

実際にいくつか書いてみましょう。

let vegetables = {
apple: 150,
banana: 100,
cherry: 200,
};
Object.keys(vegetables);
// => ['apple', 'banana', 'cherry']
let ranking = {
20:'kumi',
9:'ryuji',
5:'taro',
13:'yuki',
}
Object.keys(ranking);
// => ["5", "9", "13", "20"]

 

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。