WEBVTT

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

2
00:00:01.101 --> 00:00:05.324
今回はオブジェクト・エントリーズを紹介します。

3
00:00:05.324 --> 00:00:12.667
これは、オブジェクトの中身を、キーと値の組の配列として取り出す静的メソッドです。

4
00:00:12.667 --> 00:00:19.368
前回学んだフロム・エントリーズが組からオブジェクトを作る変換だったのに対して、

5
00:00:19.368 --> 00:00:26.069
エントリーズはその逆向き、オブジェクトを組の配列へ分解する変換です。

6
00:00:26.069 --> 00:00:31.760
この動画では、書き方と引数と戻り値、記事の基本例と境界例、対象になるプロパティの範囲、

7
00:00:31.760 --> 00:00:37.451
例外などの注意点、そしてマップやフィルタと組み合わせる実践的な使い方まで、

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

9
00:00:43.142 --> 00:00:50.485
オブジェクトの全項目をまとめて処理したい場面で、最初の一歩になる大切な操作です。

10
00:00:50.485 --> 00:00:52.228
まず動作環境を確認します。

11
00:00:52.228 --> 00:00:57.189
オブジェクト・エントリーズは、二千十七年頃の仕様で導入されたメソッドです。

12
00:00:57.189 --> 00:01:01.010
クロームでは五十四以降、エッジでは十四以降、ファイアーフォックスでは四十七以降、

13
00:01:01.010 --> 00:01:04.831
サファリでは十・一以降で使えます。

14
00:01:04.831 --> 00:01:08.719
ノード・ジェイエスでは七・ゼロ・ゼロ以降に対応しています。

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

16
00:01:12.607 --> 00:01:20.249
対応範囲はかなり広く、現在使われる環境ではほぼ心配ありませんが、公開するコードでは対象環境を先に確認してください。

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

18
00:01:25.210 --> 00:01:26.805
書き方を確認します。

19
00:01:26.805 --> 00:01:33.984
オブジェクトと書き、続けてエントリーズと書いて、カッコの中に対象のオブジェクトを渡します。

20
00:01:33.984 --> 00:01:35.579
引数は一つだけです。

21
00:01:35.579 --> 00:01:42.598
戻り値は、キーと値という二つの要素を持つ小さな配列を、プロパティの数だけ並べた配列です。

22
00:01:42.598 --> 00:01:46.746
各組では、添字ゼロがキー、添字一が値として読めます。

23
00:01:46.746 --> 00:01:50.255
渡した元のオブジェクト自体は変更されません。

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

25
00:01:58.391 --> 00:02:02.858
キーは文字列として取り出される点も押さえておきましょう。

26
00:02:02.858 --> 00:02:09.398
引数の数が固定で一つだけという点も、よく似たメソッドと見分ける手掛かりになります。

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

28
00:02:11.306 --> 00:02:20.327
リンゴが三つ、オレンジが二つという在庫オブジェクトを用意し、エントリーズで組の配列へ分解するコードです。

29
00:02:20.327 --> 00:02:26.399
まず分解だけを行うと、アップルと三、オレンジと二という二組が返ります。

30
00:02:26.399 --> 00:02:31.516
記事の例では、そこへマップを続け、各組を名前と個数に分ける分割代入で受け取り、

31
00:02:31.516 --> 00:02:36.634
コロンでつないだ文字列へ変換しています。

32
00:02:36.634 --> 00:02:43.052
実行結果はアップル三、オレンジ二となり、ノードの実機結果とも一致しました。

33
00:02:43.052 --> 00:02:49.644
キーと値に意味のある変数名を付けられるのが、分割代入と組み合わせる利点です。

34
00:02:49.644 --> 00:02:59.706
なお記事のコードはテンプレート文字列で書かれていますが、スライドでは同じ結果になる通常の文字列連結で表示しています。

35
00:02:59.706 --> 00:03:06.189
実践的な使い方として、フォー・オブ文で組を一件ずつ処理する例を見ます。

36
00:03:06.189 --> 00:03:12.856
エントリーズの戻り値は配列なので、そのまま繰り返し処理の対象にできます。

37
00:03:12.856 --> 00:03:18.969
各組を名前と個数に分割代入で受け取り、イコールでつないで表示すると、アップルは三、

38
00:03:18.969 --> 00:03:25.081
オレンジは二と順に出力され、実機とも一致しました。

39
00:03:25.081 --> 00:03:32.397
オブジェクトのままでは全項目を順に眺める手段が乏しいのですが、組の配列に分解すれば、

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

41
00:03:39.713 --> 00:03:44.158
全項目への表示や集計は、この型で素直に書けます。

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

43
00:03:46.504 --> 00:03:50.527
空のオブジェクトをエントリーズへ渡すコードです。

44
00:03:50.527 --> 00:03:55.555
実行結果は空の配列となり、記事の期待出力とも一致しています。

45
00:03:55.555 --> 00:04:00.751
プロパティが一つもなければ、組もゼロ件で、例外にはなりません。

46
00:04:00.751 --> 00:04:05.360
データが空の場合でも特別な分岐を書かずに、そのままマップや繰り返し処理へ流せるのは、

47
00:04:05.360 --> 00:04:09.969
実務で地味に効く性質です。

48
00:04:09.969 --> 00:04:15.500
逆に言えば、結果が空でもエラーにはならないため、入力が空であること自体を検出したい場面では、

49
00:04:15.500 --> 00:04:21.031
長さの確認を自分で加える必要があります。

50
00:04:21.031 --> 00:04:26.227
この性質は、データ件数が未定の入力を扱う処理で特に役立ちます。

51
00:04:26.227 --> 00:04:28.916
組の配列ならではの応用を見ます。

52
00:04:28.916 --> 00:04:35.806
フィルターを使えば、在庫が三以上の組だけを残す、といった絞り込みが一行で書けます。

53
00:04:35.806 --> 00:04:40.848
実行結果はアップルと三の組だけとなり、実機とも一致しました。

54
00:04:40.848 --> 00:04:46.394
さらに、前回学んだフロム・エントリーズと往復させる型も確認します。

55
00:04:46.394 --> 00:04:51.015
各組の値に一を足してからオブジェクトへ戻すと、アップルが四、オレンジが三となり、

56
00:04:51.015 --> 00:04:55.637
こちらも実機と一致しています。

57
00:04:55.637 --> 00:04:59.670
分解して、配列のメソッドで加工し、組み立て直す。

58
00:04:59.670 --> 00:05:05.216
この往復変換が、オブジェクト全体へ一括処理を行う定番パターンです。

59
00:05:05.216 --> 00:05:08.136
対象になるプロパティの範囲を確認します。

60
00:05:08.136 --> 00:05:14.999
エントリーズが取り出すのは、オブジェクト自身が持つ、列挙可能な文字列キーのプロパティだけです。

61
00:05:14.999 --> 00:05:19.964
シンボルキーの項目は含まれず、列挙不可に設定した項目も含まれません。

62
00:05:19.964 --> 00:05:24.709
プロトタイプから継承したプロパティも対象外で、スライドの例では、継承した項目は出ず、

63
00:05:24.709 --> 00:05:29.455
自身の項目だけが返ることを実機で確認しました。

64
00:05:29.455 --> 00:05:37.778
並び順にも決まりがあり、整数らしいキーは文字列でも小さい順に先へ来て、その後に通常の文字列キーが定義順に続きます。

65
00:05:37.778 --> 00:05:41.574
順序に依存する処理では、この規則を意識してください。

66
00:05:41.574 --> 00:05:42.897
注意点を見ます。

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

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

69
00:05:54.304 --> 00:05:58.933
一方、オブジェクト以外でも例外にならない入力があります。

70
00:05:58.933 --> 00:06:02.901
文字列を渡すと添字と一文字ずつの組が返り、数値を渡すと空の配列が返ることを、

71
00:06:02.901 --> 00:06:06.869
実機で確認しました。

72
00:06:06.869 --> 00:06:14.805
意図しない型が静かに通ってしまう場合があるので、入力の型は呼び出し側でそろえておくのが安全です。

73
00:06:14.805 --> 00:06:21.583
もう一つ、記事が注意する点として、値がオブジェクトの場合、その参照は共有されます。

74
00:06:21.583 --> 00:06:26.874
組を取り出しただけでは値はコピーされない、と覚えておきましょう。

75
00:06:26.874 --> 00:06:31.209
実務に近い実例として、マップへの変換と集計を見ます。

76
00:06:31.209 --> 00:06:38.378
エントリーズの戻り値は、キーと値の組の配列という、マップがそのまま材料にできる形です。

77
00:06:38.378 --> 00:06:45.713
そのため、ニュー・マップへ渡すだけで、オブジェクトからマップへの変換が一行で完了します。

78
00:06:45.713 --> 00:06:50.715
ゲットでアップルを取り出すと三が返り、実機とも一致しました。

79
00:06:50.715 --> 00:06:57.050
集計も同じ要領で、在庫オブジェクトの値を順に足していくと合計は五になります。

80
00:06:57.050 --> 00:07:03.886
オブジェクトとマップは得意分野が異なるため、この橋渡しができること自体が価値です。

81
00:07:03.886 --> 00:07:10.555
キーの順序を保ちたい、サイズをすぐ知りたい、といった場面でマップ版が役立ちます。

82
00:07:10.555 --> 00:07:15.556
逆向きの変換が必要な場合は、エントリーズでマップからオブジェクトへは戻せないため、

83
00:07:15.556 --> 00:07:20.558
フロム・エントリーズの出番になります。

84
00:07:20.558 --> 00:07:21.700
まとめです。

85
00:07:21.700 --> 00:07:30.267
オブジェクト・エントリーズは、オブジェクトをキーと値の組の配列へ分解する静的メソッドです。

86
00:07:30.267 --> 00:07:32.742
判断のポイントは三つです。

87
00:07:32.742 --> 00:07:42.071
まず、戻り値は組の配列なので、マップやフィルターや繰り返しといった配列の処理をそのまま使えること。

88
00:07:42.071 --> 00:07:50.257
次に、対象は自身の列挙可能な文字列キーだけで、シンボルや継承した項目は含まれないこと。

89
00:07:50.257 --> 00:07:59.014
そして、加工した組をフロム・エントリーズで戻す往復変換が、最も実践的な使い方であることです。

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

91
00:08:07.772 --> 00:08:15.197
次に学ぶオブジェクト・バリューズと合わせると、取り出し方の選択肢がそろいます。

92
00:08:15.197 --> 00:08:16.910
お疲れさまでした。