WEBVTT

1
00:00:00.000 --> 00:00:01.119
こんにちは。

2
00:00:01.119 --> 00:00:04.850
今回はオブジェクト・キーズを紹介します。

3
00:00:04.850 --> 00:00:13.059
これは、オブジェクトが持つキーだけを取り出して、文字列の配列として返す静的メソッドです。

4
00:00:13.059 --> 00:00:17.536
前回学んだバリューズが値だけを取り出したのに対して、キーズは値には触れず、

5
00:00:17.536 --> 00:00:22.014
項目名だけを並べます。

6
00:00:22.014 --> 00:00:28.232
この動画では、書き方と引数と戻り値、記事の基本例である設定項目の一覧化と、

7
00:00:28.232 --> 00:00:34.451
境界例の整数らしいキーの並び順、対象になるプロパティの範囲、ヌルを渡したときの例外などの注意点まで、

8
00:00:34.451 --> 00:00:40.669
実行結果と一緒に学びます。

9
00:00:40.669 --> 00:00:46.825
設定にどんな項目があるか調べたい場面で、最初の一歩になる操作です。

10
00:00:46.825 --> 00:00:55.780
キーの一覧が配列になれば、件数を数えたり、項目名で検索したりする処理がぐっと書きやすくなります。

11
00:00:55.780 --> 00:00:57.759
まず動作環境を確認します。

12
00:00:57.759 --> 00:01:04.763
オブジェクト・キーズは、ジャバスクリプトの初期から広く使われてきた、歴史の長いメソッドです。

13
00:01:04.763 --> 00:01:08.646
クロームでは五以降、エッジでは十二以降、ファイアーフォックスでは四以降、

14
00:01:08.646 --> 00:01:12.528
サファリでは五以降で使えます。

15
00:01:12.528 --> 00:01:17.096
ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。

16
00:01:17.096 --> 00:01:21.511
記事の互換性情報はエムディーエヌのデータに基づく目安です。

17
00:01:21.511 --> 00:01:30.495
対応開始がとても古いため、現在使われる環境ではほぼ心配ありませんが、公開するコードでは対象環境を先に確認してください。

18
00:01:30.495 --> 00:01:36.128
追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。

19
00:01:36.128 --> 00:01:37.758
書き方を確認します。

20
00:01:37.758 --> 00:01:44.605
オブジェクトと書き、続けてキーズと書いて、カッコの中に対象のオブジェクトを渡します。

21
00:01:44.605 --> 00:01:46.236
引数は一つだけです。

22
00:01:46.236 --> 00:01:51.127
戻り値は、プロパティのキーだけを文字列として並べた配列です。

23
00:01:51.127 --> 00:01:56.669
バリューズと違って値そのものは含まれず、項目名だけが要素になります。

24
00:01:56.669 --> 00:02:00.256
渡した元のオブジェクト自体は変更されません。

25
00:02:00.256 --> 00:02:10.038
スライドの例では、エーが一、ビーが二というオブジェクトから、エーとビーという文字列の配列が返ることを実機で確認しました。

26
00:02:10.038 --> 00:02:17.700
戻り値が配列なので、そのまま配列のメソッドにつなげられる点が、このメソッドの使い勝手の核です。

27
00:02:17.700 --> 00:02:19.441
記事の基本例を見ます。

28
00:02:19.441 --> 00:02:27.510
テーマがライト、言語がジェイエーという設定オブジェクトを用意し、その項目名の一覧を取り出すコードです。

29
00:02:27.510 --> 00:02:33.365
キーズを実行すると、テーマと言語という、二つのキー文字列の配列が返ります。

30
00:02:33.365 --> 00:02:38.744
実行結果は記事の期待出力と一致し、ノードの実機結果とも一致しました。

31
00:02:38.744 --> 00:02:44.361
設定画面で、利用者が変更できる項目を一覧表示したり、想定外の項目が紛れていないか点検したりする場面では、

32
00:02:44.361 --> 00:02:49.978
値ではなく項目名こそが必要になります。

33
00:02:49.978 --> 00:02:55.042
そういうときに、キーだけを取り出すキーズがぴったりはまる例です。

34
00:02:55.042 --> 00:02:58.048
並びは基本的に定義した順序で返ります。

35
00:02:58.048 --> 00:03:02.639
実践的な使い方として、キーだけを順に処理する例を見ます。

36
00:03:02.639 --> 00:03:07.721
テーマ、言語、フォントサイズの三項目がある設定オブジェクトにキーズを使うと、

37
00:03:07.721 --> 00:03:12.804
三つの項目名の配列が返り、実機とも一致しました。

38
00:03:12.804 --> 00:03:22.477
戻り値は配列なので、長さを調べれば項目数が分かり、インクルーズを使えば特定の項目があるかどうかを真偽値で調べられます。

39
00:03:22.477 --> 00:03:28.953
オブジェクトのままでは項目を順に眺める手段が乏しいのですが、キーの配列に変換すれば、

40
00:03:28.953 --> 00:03:35.429
繰り返しも、並べ替えも、絞り込みも、配列の道具立てで書けるようになります。

41
00:03:35.429 --> 00:03:40.676
項目名を大文字にそろえるような加工も、マップでそのまま書けます。

42
00:03:40.676 --> 00:03:42.940
記事の境界条件の例を見ます。

43
00:03:42.940 --> 00:03:47.468
十と二をキーにしたオブジェクトをキーズへ渡すコードです。

44
00:03:47.468 --> 00:03:54.745
登録した順序は十、二ですが、実行結果は二、十の順となり、記事の期待出力とも一致しています。

45
00:03:54.745 --> 00:04:03.478
これは、整数として解釈できるキーは、文字列であっても数値として小さい順に先へ並ぶという決まりがあるためです。

46
00:04:03.478 --> 00:04:09.785
記事も、整数に見えるキーの順序を登録順だと思い込まないよう注意を促しています。

47
00:04:09.785 --> 00:04:14.637
通常の文字列キーは定義順に続きますが、数字キーが混ざるオブジェクトでは順序が入れ替わる点を、

48
00:04:14.637 --> 00:04:19.488
必ず押さえておいてください。

49
00:04:19.488 --> 00:04:22.467
オブジェクト以外を渡した場合も確認します。

50
00:04:22.467 --> 00:04:26.438
配列にキーズを使うと、要素そのものではなく、ゼロ、一、二という添字が文字列キーとして返り、

51
00:04:26.438 --> 00:04:30.410
実機とも一致しました。

52
00:04:30.410 --> 00:04:34.523
文字列を渡した場合も、文字の位置を表すゼロと一が返ります。

53
00:04:34.523 --> 00:04:38.637
一方、数値を渡すと空の配列が返ることを実機で確認しました。

54
00:04:38.637 --> 00:04:44.736
つまりキーズは、渡された値をオブジェクトとして解釈し、その項目名を取り出す仕組みです。

55
00:04:44.736 --> 00:04:49.346
配列の要素を取り出したいのにキーズを使ってしまうと、添字の文字列が返ってくるだけなので、

56
00:04:49.346 --> 00:04:53.956
目的に合ったメソッドを選ぶことが大切です。

57
00:04:53.956 --> 00:04:56.652
対象になるプロパティの範囲を確認します。

58
00:04:56.652 --> 00:05:01.773
キーズが取り出すのは、オブジェクト自身が持つ、列挙可能な文字列キーだけです。

59
00:05:01.773 --> 00:05:08.377
シンボルキーで登録した項目や、列挙不可に設定した項目、プロトタイプから継承した項目は含まれません。

60
00:05:08.377 --> 00:05:16.464
スライドの例では、継承した項目は出ず、自身の項目だけが返ること、そしてシンボルキーが含まれないことを実機で確認しました。

61
00:05:16.464 --> 00:05:24.012
シンボルも含めて自身のキーをすべて調べたい場合は、リフレクト・オウンキーズという別のメソッドが用意されています。

62
00:05:24.012 --> 00:05:26.168
用途に応じて使い分けてください。

63
00:05:26.168 --> 00:05:27.427
注意点を見ます。

64
00:05:27.427 --> 00:05:33.252
まず、戻り値にはキーの文字列しか残らないため、値との対応関係は失われます。

65
00:05:33.252 --> 00:05:38.605
項目名と中身を対にして表示する場合は、エントリーズを選んでください。

66
00:05:38.605 --> 00:05:44.902
次に、引数にヌルやアンディファインドを渡すと、タイプ・エラーの例外が発生します。

67
00:05:44.902 --> 00:05:50.097
実機でも、変換できないという内容のエラーになることを確認しました。

68
00:05:50.097 --> 00:05:55.134
外部から受け取った値を渡すときは、事前に存在確認をしてください。

69
00:05:55.134 --> 00:06:00.802
一方、空のオブジェクトを渡した場合は例外にはならず、空の配列が返ります。

70
00:06:00.802 --> 00:06:08.988
データが空でも処理を続けられる反面、空であること自体を検出したい場合は長さの確認を自分で加えてください。

71
00:06:08.988 --> 00:06:12.276
よく似た三つのメソッドの使い分けを整理します。

72
00:06:12.276 --> 00:06:19.423
キーだけが欲しいならキーズ、値だけが欲しいならバリューズ、キーと値の対応が必要ならエントリーズです。

73
00:06:19.423 --> 00:06:22.853
スライドでは同じ得点オブジェクトで比べています。

74
00:06:22.853 --> 00:06:26.570
バリューズは八十と九十という値の配列、エントリーズは教科名と点数の組の配列になり、

75
00:06:26.570 --> 00:06:30.286
実機とも一致しました。

76
00:06:30.286 --> 00:06:37.290
キーズは項目名だけを取り出すため、設定項目の点検や、想定したキーがそろっているかの検証に向きます。

77
00:06:37.290 --> 00:06:47.296
迷ったときは、対応関係を失わないエントリーズから検討し、キーだけ、または値だけで十分だと分かってからキーズやバリューズへ寄せるのが無難です。

78
00:06:47.296 --> 00:06:48.237
まとめです。

79
00:06:48.237 --> 00:06:55.604
オブジェクト・キーズは、オブジェクトのキーだけを取り出して文字列の配列にする静的メソッドです。

80
00:06:55.604 --> 00:06:57.642
判断のポイントは三つです。

81
00:06:57.642 --> 00:07:05.794
まず、戻り値はキーの配列なので、長さの確認やインクルーズやマップといった配列の処理をそのまま使えること。

82
00:07:05.794 --> 00:07:10.340
次に、対象は自身の列挙可能な文字列キーだけで、シンボルや継承した項目は含まれず、

83
00:07:10.340 --> 00:07:14.886
整数らしいキーは小さい順に並ぶこと。

84
00:07:14.886 --> 00:07:21.627
そして、値との対応関係が失われるため、中身が必要な場面ではエントリーズを選ぶことです。

85
00:07:21.627 --> 00:07:28.838
まずは記事の基本例と境界例を実行し、項目を一つ変えて結果を予測してから確かめてみてください。

86
00:07:28.838 --> 00:07:33.697
前回のバリューズと合わせると、取り出し方の選択肢がそろいます。

87
00:07:33.697 --> 00:07:35.108
お疲れさまでした。