WEBVTT

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

2
00:00:00.828 --> 00:00:05.245
今回はジャバスクリプトのオブジェクト・グループバイを紹介します。

3
00:00:05.245 --> 00:00:09.938
これは、配列などのデータを、条件ごとにまとめて分類するメソッドです。

4
00:00:09.938 --> 00:00:13.113
問い合わせの一覧を担当チームごとに表示したい。

5
00:00:13.113 --> 00:00:20.705
そんなとき、これまではグループ用の配列を自分で用意して、データを一件ずつ振り分ける処理を書く必要がありました。

6
00:00:20.705 --> 00:00:27.607
グループバイを使えば、所属先を決める関数を渡すだけで、グループ別の配列を持つオブジェクトが作れます。

7
00:00:27.607 --> 00:00:31.126
この動画では、基本の使い方から、担当未設定の扱い、失敗しやすい注意点までを、

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

9
00:00:34.646 --> 00:00:37.545
分類は、実務でとてもよく出てくる処理です。

10
00:00:37.545 --> 00:00:42.100
仕組みを一度理解しておくと、似た場面で迷わず使えるようになります。

11
00:00:42.100 --> 00:00:44.885
まず、どんな手間がなくなるかを見ます。

12
00:00:44.885 --> 00:00:48.696
画面の例では、問い合わせ三件を担当で分類しています。

13
00:00:48.696 --> 00:00:54.413
担当がデブのデータはデブの配列へ、サポートのデータはサポートの配列へ入ります。

14
00:00:54.413 --> 00:00:58.370
結果のデブの件数は二件で、手作業の振り分けは不要です。

15
00:00:58.370 --> 00:01:03.794
呼び出すのは配列自身ではなく、オブジェクトから呼び出す点も覚えてください。

16
00:01:03.794 --> 00:01:07.458
分類結果には、各グループの要素がそのまま残ります。

17
00:01:07.458 --> 00:01:11.562
件数や合計だけが欲しい場合は、分類したあとに集計します。

18
00:01:11.562 --> 00:01:16.986
分類と集計を分けることで、同じ結果を一覧表示にも件数表示にも使い回せます。

19
00:01:16.986 --> 00:01:24.608
言い換えると、グループバイは、行き先を決める作業だけを担当し、中身そのものには手を加えないメソッドです。

20
00:01:24.608 --> 00:01:26.438
引数と戻り値を確認します。

21
00:01:26.438 --> 00:01:31.084
第一引数は、分類したい反復可能な値で、この動画では配列を渡します。

22
00:01:31.084 --> 00:01:36.293
第二引数はコールバックで、各要素と、ゼロから始まる処理位置を受け取ります。

23
00:01:36.293 --> 00:01:41.783
画面の例では、位置が偶数か奇数かで分類し、イーブンにはエーとシーが入りました。

24
00:01:41.783 --> 00:01:45.303
コールバックの戻り値が、グループのキーになります。

25
00:01:45.303 --> 00:01:49.949
キーは文字列かシンボルを使え、それ以外の値は文字列に変換されます。

26
00:01:49.949 --> 00:01:54.876
エーピーアイ全体の戻り値は、各キーに要素の配列を持つオブジェクトです。

27
00:01:54.876 --> 00:02:00.226
このコードは、ノード・ジェイエスの実機でも同じ結果になることを確認済みです。

28
00:02:00.226 --> 00:02:06.420
なお、第一引数には配列以外の反復可能な値も渡せますが、基本は配列で覚えておけば十分です。

29
00:02:06.420 --> 00:02:08.987
コールバックの役割を押さえます。

30
00:02:08.987 --> 00:02:13.318
コールバックは、要素を加工して返す関数ではありません。

31
00:02:13.318 --> 00:02:16.527
返した値が、その要素の所属先になります。

32
00:02:16.527 --> 00:02:20.457
画面の例では、担当が文字列で、前後の空白を取り除いても文字が残る場合だけ、

33
00:02:20.457 --> 00:02:24.387
その担当名を採用します。

34
00:02:24.387 --> 00:02:33.210
担当がヌルだったり、空白だけだったりする場合は、アンアサインド、つまり未割り当てという専用グループに入れます。

35
00:02:33.210 --> 00:02:39.627
未設定のデータを単に見落とすのではなく、専用の置き場を用意するのがポイントです。

36
00:02:39.627 --> 00:02:44.440
対応が必要な問い合わせを、画面から落とさないための工夫です。

37
00:02:44.440 --> 00:02:45.944
対応環境を確認します。

38
00:02:45.944 --> 00:02:50.046
このメソッドが使えるようになったのは、クロームとエッジが百十七、ファイアフォックスが百十九、

39
00:02:50.046 --> 00:02:54.148
サファリが十七・四以降です。

40
00:02:54.148 --> 00:02:59.480
比較的新しいエーピーアイなので、古いブラウザーでは呼び出せないことがあります。

41
00:02:59.480 --> 00:03:05.633
ノード・ジェイエスでは二十一で導入されましたが、二十一系はすでにサポートが終了しています。

42
00:03:05.633 --> 00:03:09.462
試す環境には、エルティーエスの二十四系を使ってください。

43
00:03:09.462 --> 00:03:11.239
二十二系でも利用できます。

44
00:03:11.239 --> 00:03:15.136
画面のように、タイプオブでメソッドが関数として存在するかを確認してから使うと、

45
00:03:15.136 --> 00:03:19.033
未対応の環境でも安全に案内できます。

46
00:03:19.033 --> 00:03:22.078
記事の中心となる実行例を読みます。

47
00:03:22.078 --> 00:03:24.049
問い合わせは四件です。

48
00:03:24.049 --> 00:03:32.468
ティー百一とティー百三は担当がデブ、ティー百二はサポート、ティー百四は担当がヌルで未設定です。

49
00:03:32.468 --> 00:03:38.021
この配列をグループバイに渡し、先ほど学んだルールで分類します。

50
00:03:38.021 --> 00:03:44.470
担当が文字列なら空白を取り除いて採用し、それ以外は未割り当てに回します。

51
00:03:44.470 --> 00:03:53.785
そのあと、表示順をデブ、サポート、未割り当ての順に固定して、グループごとにアイディーと件数を表示します。

52
00:03:53.785 --> 00:03:58.980
外部ライブラリーも通信も使わない、自己完結したコードです。

53
00:03:58.980 --> 00:04:02.921
次のセクションで、実行結果を詳しく追います。

54
00:04:02.921 --> 00:04:10.982
コード全体は、そのままコピーしてブラウザーのコンソールやノード・ジェイエスで実行できます。

55
00:04:10.982 --> 00:04:12.562
実行結果を読み解きます。

56
00:04:12.562 --> 00:04:19.933
デブにはティー百一とティー百三の二件、サポートにはティー百二の一件、未割り当てにはティー百四の一件が入りました。

57
00:04:19.933 --> 00:04:24.014
元の配列の件数は四件のままで、元のデータは変更されていません。

58
00:04:24.014 --> 00:04:29.279
一方、セールスに該当する問い合わせはないため、セールスというキーは作られません。

59
00:04:29.279 --> 00:04:32.833
そこで、存在しないグループを取り出すときは、ヌル合体演算子で空配列を既定値にし、

60
00:04:32.833 --> 00:04:36.387
件数をゼロと表示しています。

61
00:04:36.387 --> 00:04:41.652
表示順は結果のキー任せにせず、画面側で順序を明示している点も、実務では大切です。

62
00:04:41.652 --> 00:04:48.234
なお、担当の種類があとから増える画面では、生成されたキーを列挙する形への切り替えも検討してください。

63
00:04:48.234 --> 00:04:50.180
戻り値の、少し変わった性質です。

64
00:04:50.180 --> 00:04:53.706
グループバイが返すオブジェクトは、プロトタイプがヌルです。

65
00:04:53.706 --> 00:04:59.786
そのため、普通のオブジェクトなら使えるハズオウンプロパティのような、継承されたメソッドがありません。

66
00:04:59.786 --> 00:05:02.339
画面でも、その型はアンデファインドでした。

67
00:05:02.339 --> 00:05:06.717
グループがあるかを確認したいときは、オブジェクト・ハズオウンを使います。

68
00:05:06.717 --> 00:05:10.729
取り出すときの既定値には、前セクションのヌル合体演算子が使えます。

69
00:05:10.729 --> 00:05:17.782
なぜプロトタイプがヌルなのかというと、どんな文字列がキーになっても、既存のメソッド名と衝突しないようにするためです。

70
00:05:17.782 --> 00:05:19.606
安全に分類するための設計です。

71
00:05:19.606 --> 00:05:21.552
大切な注意点が二つあります。

72
00:05:21.552 --> 00:05:23.220
一つ目は参照の共有です。

73
00:05:23.220 --> 00:05:28.919
グループの配列自体は新しく作られますが、中のオブジェクトは元データと共有されます。

74
00:05:28.919 --> 00:05:35.869
画面の例では、グループ側のタイトルを書き換えると、元の問い合わせのタイトルまで変わってしまいました。

75
00:05:35.869 --> 00:05:41.013
分類後のデータを編集する設計では、元まで変わってよいかを確認してください。

76
00:05:41.013 --> 00:05:42.681
二つ目はキーの変換です。

77
00:05:42.681 --> 00:05:49.214
コールバックが数値のイチを返しても、文字列のイチを返しても、キーは同じ文字列のイチになります。

78
00:05:49.214 --> 00:05:54.635
分類キーは、用途に合う文字列へ明示的にそろえると、意図が伝わりやすくなります。

79
00:05:54.635 --> 00:05:55.838
失敗例を見ます。

80
00:05:55.838 --> 00:05:57.643
一つ目は不正な入力です。

81
00:05:57.643 --> 00:06:03.658
ヌルのように反復できない値を渡すと、分類結果ではなく、タイプエラーが発生します。

82
00:06:03.658 --> 00:06:08.771
画面のようにトライとキャッチで囲めば、例外の種類だけを確認できます。

83
00:06:08.771 --> 00:06:15.388
コールバックの中で例外が発生した場合も、呼び出し全体が失敗し、完成した結果は返りません。

84
00:06:15.388 --> 00:06:16.891
二つ目は非同期です。

85
00:06:16.891 --> 00:06:23.809
この処理は同期で進むため、エイシンク関数をコールバックに渡しても、完了を待ってはくれません。

86
00:06:23.809 --> 00:06:28.471
プロミスが文字列化されて、意図しないグループにまとめられます。

87
00:06:28.471 --> 00:06:34.035
担当名の取得に通信が必要なら、先に非同期処理を終えてから分類してください。

88
00:06:34.035 --> 00:06:35.994
実務での活用とまとめです。

89
00:06:35.994 --> 00:06:42.321
担当別の問い合わせ一覧のほか、記事のカテゴリ別表示や、注文の状態別表示にも使えます。

90
00:06:42.321 --> 00:06:47.895
分類キーを返す部分を業務ルールに合わせれば、後続の表示処理を整理できます。

91
00:06:47.895 --> 00:06:51.963
導入するときは、未設定値の扱い、表示対象と順序、分類後にデータを編集するかを先に決めると、

92
00:06:51.963 --> 00:06:56.031
実装が安定します。

93
00:06:56.031 --> 00:07:04.015
ただし、全件を処理してグループの配列を保持するので、大量のデータでは処理時間とメモリーも確認してください。

94
00:07:04.015 --> 00:07:09.590
件数だけが必要な処理なら、配列をすべて保持する設計が適切か検討しましょう。

95
00:07:09.590 --> 00:07:16.670
練習として、自分のデータで未設定の置き場を決めてから、分類結果を予想して実行してみてください。

96
00:07:16.670 --> 00:07:23.149
グループバイは、分類キーを返すという一点に集中した、素直で覚えやすいエーピーアイです。

97
00:07:23.149 --> 00:07:26.011
まずは小さな配列で試してみてください。

98
00:07:26.011 --> 00:07:27.367
お疲れさまでした。