VIDEO LESSON

JavaScriptのObject.keys()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:35動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はオブジェクト・キーズを紹介します。
0:04これは、オブジェクトが持つキーだけを取り出して、文字列の配列として返す静的メソッドです。
0:13前回学んだバリューズが値だけを取り出したのに対して、キーズは値には触れず、
0:17項目名だけを並べます。
0:22この動画では、書き方と引数と戻り値、記事の基本例である設定項目の一覧化と、
0:28境界例の整数らしいキーの並び順、対象になるプロパティの範囲、ヌルを渡したときの例外などの注意点まで、
0:34実行結果と一緒に学びます。
0:40設定にどんな項目があるか調べたい場面で、最初の一歩になる操作です。
0:46キーの一覧が配列になれば、件数を数えたり、項目名で検索したりする処理がぐっと書きやすくなります。
0:55まず動作環境を確認します。
0:57オブジェクト・キーズは、ジャバスクリプトの初期から広く使われてきた、歴史の長いメソッドです。
1:04クロームでは五以降、エッジでは十二以降、ファイアーフォックスでは四以降、
1:08サファリでは五以降で使えます。
1:12ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。
1:17記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:21対応開始がとても古いため、現在使われる環境ではほぼ心配ありませんが、公開するコードでは対象環境を先に確認してください。
1:30追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
1:36書き方を確認します。
1:37オブジェクトと書き、続けてキーズと書いて、カッコの中に対象のオブジェクトを渡します。
1:44引数は一つだけです。
1:46戻り値は、プロパティのキーだけを文字列として並べた配列です。
1:51バリューズと違って値そのものは含まれず、項目名だけが要素になります。
1:56渡した元のオブジェクト自体は変更されません。
2:00スライドの例では、エーが一、ビーが二というオブジェクトから、エーとビーという文字列の配列が返ることを実機で確認しました。
2:10戻り値が配列なので、そのまま配列のメソッドにつなげられる点が、このメソッドの使い勝手の核です。
2:17記事の基本例を見ます。
2:19テーマがライト、言語がジェイエーという設定オブジェクトを用意し、その項目名の一覧を取り出すコードです。
2:27キーズを実行すると、テーマと言語という、二つのキー文字列の配列が返ります。
2:33実行結果は記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:38設定画面で、利用者が変更できる項目を一覧表示したり、想定外の項目が紛れていないか点検したりする場面では、
2:44値ではなく項目名こそが必要になります。
2:49そういうときに、キーだけを取り出すキーズがぴったりはまる例です。
2:55並びは基本的に定義した順序で返ります。
2:58実践的な使い方として、キーだけを順に処理する例を見ます。
3:02テーマ、言語、フォントサイズの三項目がある設定オブジェクトにキーズを使うと、
3:07三つの項目名の配列が返り、実機とも一致しました。
3:12戻り値は配列なので、長さを調べれば項目数が分かり、インクルーズを使えば特定の項目があるかどうかを真偽値で調べられます。
3:22オブジェクトのままでは項目を順に眺める手段が乏しいのですが、キーの配列に変換すれば、
3:28繰り返しも、並べ替えも、絞り込みも、配列の道具立てで書けるようになります。
3:35項目名を大文字にそろえるような加工も、マップでそのまま書けます。
3:40記事の境界条件の例を見ます。
3:42十と二をキーにしたオブジェクトをキーズへ渡すコードです。
3:47登録した順序は十、二ですが、実行結果は二、十の順となり、記事の期待出力とも一致しています。
3:54これは、整数として解釈できるキーは、文字列であっても数値として小さい順に先へ並ぶという決まりがあるためです。
4:03記事も、整数に見えるキーの順序を登録順だと思い込まないよう注意を促しています。
4:09通常の文字列キーは定義順に続きますが、数字キーが混ざるオブジェクトでは順序が入れ替わる点を、
4:14必ず押さえておいてください。
4:19オブジェクト以外を渡した場合も確認します。
4:22配列にキーズを使うと、要素そのものではなく、ゼロ、一、二という添字が文字列キーとして返り、
4:26実機とも一致しました。
4:30文字列を渡した場合も、文字の位置を表すゼロと一が返ります。
4:34一方、数値を渡すと空の配列が返ることを実機で確認しました。
4:38つまりキーズは、渡された値をオブジェクトとして解釈し、その項目名を取り出す仕組みです。
4:44配列の要素を取り出したいのにキーズを使ってしまうと、添字の文字列が返ってくるだけなので、
4:49目的に合ったメソッドを選ぶことが大切です。
4:53対象になるプロパティの範囲を確認します。
4:56キーズが取り出すのは、オブジェクト自身が持つ、列挙可能な文字列キーだけです。
5:01シンボルキーで登録した項目や、列挙不可に設定した項目、プロトタイプから継承した項目は含まれません。
5:08スライドの例では、継承した項目は出ず、自身の項目だけが返ること、そしてシンボルキーが含まれないことを実機で確認しました。
5:16シンボルも含めて自身のキーをすべて調べたい場合は、リフレクト・オウンキーズという別のメソッドが用意されています。
5:24用途に応じて使い分けてください。
5:26注意点を見ます。
5:27まず、戻り値にはキーの文字列しか残らないため、値との対応関係は失われます。
5:33項目名と中身を対にして表示する場合は、エントリーズを選んでください。
5:38次に、引数にヌルやアンディファインドを渡すと、タイプ・エラーの例外が発生します。
5:44実機でも、変換できないという内容のエラーになることを確認しました。
5:50外部から受け取った値を渡すときは、事前に存在確認をしてください。
5:55一方、空のオブジェクトを渡した場合は例外にはならず、空の配列が返ります。
6:00データが空でも処理を続けられる反面、空であること自体を検出したい場合は長さの確認を自分で加えてください。
6:08よく似た三つのメソッドの使い分けを整理します。
6:12キーだけが欲しいならキーズ、値だけが欲しいならバリューズ、キーと値の対応が必要ならエントリーズです。
6:19スライドでは同じ得点オブジェクトで比べています。
6:22バリューズは八十と九十という値の配列、エントリーズは教科名と点数の組の配列になり、
6:26実機とも一致しました。
6:30キーズは項目名だけを取り出すため、設定項目の点検や、想定したキーがそろっているかの検証に向きます。
6:37迷ったときは、対応関係を失わないエントリーズから検討し、キーだけ、または値だけで十分だと分かってからキーズやバリューズへ寄せるのが無難です。
6:47まとめです。
6:48オブジェクト・キーズは、オブジェクトのキーだけを取り出して文字列の配列にする静的メソッドです。
6:55判断のポイントは三つです。
6:57まず、戻り値はキーの配列なので、長さの確認やインクルーズやマップといった配列の処理をそのまま使えること。
7:05次に、対象は自身の列挙可能な文字列キーだけで、シンボルや継承した項目は含まれず、
7:10整数らしいキーは小さい順に並ぶこと。
7:14そして、値との対応関係が失われるため、中身が必要な場面ではエントリーズを選ぶことです。
7:21まずは記事の基本例と境界例を実行し、項目を一つ変えて結果を予測してから確かめてみてください。
7:28前回のバリューズと合わせると、取り出し方の選択肢がそろいます。
7:33お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Object.keys()でオブジェクト自身の列挙可能な文字列キーを取得する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのObject.keys()の使い方：引数・戻り値・実例と注意点 →