SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのObject.groupBy()：配列のデータを担当別にグループ化するの解説動画

再生時間 7:27動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00今回はジャバスクリプトのオブジェクト・グループバイを紹介します。
  3. 0:05これは、配列などのデータを、条件ごとにまとめて分類するメソッドです。
  4. 0:09問い合わせの一覧を担当チームごとに表示したい。
  5. 0:13そんなとき、これまではグループ用の配列を自分で用意して、データを一件ずつ振り分ける処理を書く必要がありました。
  6. 0:20グループバイを使えば、所属先を決める関数を渡すだけで、グループ別の配列を持つオブジェクトが作れます。
  7. 0:27この動画では、基本の使い方から、担当未設定の扱い、失敗しやすい注意点までを、
  8. 0:31実行結果と一緒に学びます。
  9. 0:34分類は、実務でとてもよく出てくる処理です。
  10. 0:37仕組みを一度理解しておくと、似た場面で迷わず使えるようになります。
  11. 0:42まず、どんな手間がなくなるかを見ます。
  12. 0:44画面の例では、問い合わせ三件を担当で分類しています。
  13. 0:48担当がデブのデータはデブの配列へ、サポートのデータはサポートの配列へ入ります。
  14. 0:54結果のデブの件数は二件で、手作業の振り分けは不要です。
  15. 0:58呼び出すのは配列自身ではなく、オブジェクトから呼び出す点も覚えてください。
  16. 1:03分類結果には、各グループの要素がそのまま残ります。
  17. 1:07件数や合計だけが欲しい場合は、分類したあとに集計します。
  18. 1:11分類と集計を分けることで、同じ結果を一覧表示にも件数表示にも使い回せます。
  19. 1:16言い換えると、グループバイは、行き先を決める作業だけを担当し、中身そのものには手を加えないメソッドです。
  20. 1:24引数と戻り値を確認します。
  21. 1:26第一引数は、分類したい反復可能な値で、この動画では配列を渡します。
  22. 1:31第二引数はコールバックで、各要素と、ゼロから始まる処理位置を受け取ります。
  23. 1:36画面の例では、位置が偶数か奇数かで分類し、イーブンにはエーとシーが入りました。
  24. 1:41コールバックの戻り値が、グループのキーになります。
  25. 1:45キーは文字列かシンボルを使え、それ以外の値は文字列に変換されます。
  26. 1:49エーピーアイ全体の戻り値は、各キーに要素の配列を持つオブジェクトです。
  27. 1:54このコードは、ノード・ジェイエスの実機でも同じ結果になることを確認済みです。
  28. 2:00なお、第一引数には配列以外の反復可能な値も渡せますが、基本は配列で覚えておけば十分です。
  29. 2:06コールバックの役割を押さえます。
  30. 2:08コールバックは、要素を加工して返す関数ではありません。
  31. 2:13返した値が、その要素の所属先になります。
  32. 2:16画面の例では、担当が文字列で、前後の空白を取り除いても文字が残る場合だけ、
  33. 2:20その担当名を採用します。
  34. 2:24担当がヌルだったり、空白だけだったりする場合は、アンアサインド、つまり未割り当てという専用グループに入れます。
  35. 2:33未設定のデータを単に見落とすのではなく、専用の置き場を用意するのがポイントです。
  36. 2:39対応が必要な問い合わせを、画面から落とさないための工夫です。
  37. 2:44対応環境を確認します。
  38. 2:45このメソッドが使えるようになったのは、クロームとエッジが百十七、ファイアフォックスが百十九、
  39. 2:50サファリが十七・四以降です。
  40. 2:54比較的新しいエーピーアイなので、古いブラウザーでは呼び出せないことがあります。
  41. 2:59ノード・ジェイエスでは二十一で導入されましたが、二十一系はすでにサポートが終了しています。
  42. 3:05試す環境には、エルティーエスの二十四系を使ってください。
  43. 3:09二十二系でも利用できます。
  44. 3:11画面のように、タイプオブでメソッドが関数として存在するかを確認してから使うと、
  45. 3:15未対応の環境でも安全に案内できます。
  46. 3:19記事の中心となる実行例を読みます。
  47. 3:22問い合わせは四件です。
  48. 3:24ティー百一とティー百三は担当がデブ、ティー百二はサポート、ティー百四は担当がヌルで未設定です。
  49. 3:32この配列をグループバイに渡し、先ほど学んだルールで分類します。
  50. 3:38担当が文字列なら空白を取り除いて採用し、それ以外は未割り当てに回します。
  51. 3:44そのあと、表示順をデブ、サポート、未割り当ての順に固定して、グループごとにアイディーと件数を表示します。
  52. 3:53外部ライブラリーも通信も使わない、自己完結したコードです。
  53. 3:58次のセクションで、実行結果を詳しく追います。
  54. 4:02コード全体は、そのままコピーしてブラウザーのコンソールやノード・ジェイエスで実行できます。
  55. 4:10実行結果を読み解きます。
  56. 4:12デブにはティー百一とティー百三の二件、サポートにはティー百二の一件、未割り当てにはティー百四の一件が入りました。
  57. 4:19元の配列の件数は四件のままで、元のデータは変更されていません。
  58. 4:24一方、セールスに該当する問い合わせはないため、セールスというキーは作られません。
  59. 4:29そこで、存在しないグループを取り出すときは、ヌル合体演算子で空配列を既定値にし、
  60. 4:32件数をゼロと表示しています。
  61. 4:36表示順は結果のキー任せにせず、画面側で順序を明示している点も、実務では大切です。
  62. 4:41なお、担当の種類があとから増える画面では、生成されたキーを列挙する形への切り替えも検討してください。
  63. 4:48戻り値の、少し変わった性質です。
  64. 4:50グループバイが返すオブジェクトは、プロトタイプがヌルです。
  65. 4:53そのため、普通のオブジェクトなら使えるハズオウンプロパティのような、継承されたメソッドがありません。
  66. 4:59画面でも、その型はアンデファインドでした。
  67. 5:02グループがあるかを確認したいときは、オブジェクト・ハズオウンを使います。
  68. 5:06取り出すときの既定値には、前セクションのヌル合体演算子が使えます。
  69. 5:10なぜプロトタイプがヌルなのかというと、どんな文字列がキーになっても、既存のメソッド名と衝突しないようにするためです。
  70. 5:17安全に分類するための設計です。
  71. 5:19大切な注意点が二つあります。
  72. 5:21一つ目は参照の共有です。
  73. 5:23グループの配列自体は新しく作られますが、中のオブジェクトは元データと共有されます。
  74. 5:28画面の例では、グループ側のタイトルを書き換えると、元の問い合わせのタイトルまで変わってしまいました。
  75. 5:35分類後のデータを編集する設計では、元まで変わってよいかを確認してください。
  76. 5:41二つ目はキーの変換です。
  77. 5:42コールバックが数値のイチを返しても、文字列のイチを返しても、キーは同じ文字列のイチになります。
  78. 5:49分類キーは、用途に合う文字列へ明示的にそろえると、意図が伝わりやすくなります。
  79. 5:54失敗例を見ます。
  80. 5:55一つ目は不正な入力です。
  81. 5:57ヌルのように反復できない値を渡すと、分類結果ではなく、タイプエラーが発生します。
  82. 6:03画面のようにトライとキャッチで囲めば、例外の種類だけを確認できます。
  83. 6:08コールバックの中で例外が発生した場合も、呼び出し全体が失敗し、完成した結果は返りません。
  84. 6:15二つ目は非同期です。
  85. 6:16この処理は同期で進むため、エイシンク関数をコールバックに渡しても、完了を待ってはくれません。
  86. 6:23プロミスが文字列化されて、意図しないグループにまとめられます。
  87. 6:28担当名の取得に通信が必要なら、先に非同期処理を終えてから分類してください。
  88. 6:34実務での活用とまとめです。
  89. 6:35担当別の問い合わせ一覧のほか、記事のカテゴリ別表示や、注文の状態別表示にも使えます。
  90. 6:42分類キーを返す部分を業務ルールに合わせれば、後続の表示処理を整理できます。
  91. 6:47導入するときは、未設定値の扱い、表示対象と順序、分類後にデータを編集するかを先に決めると、
  92. 6:51実装が安定します。
  93. 6:56ただし、全件を処理してグループの配列を保持するので、大量のデータでは処理時間とメモリーも確認してください。
  94. 7:04件数だけが必要な処理なら、配列をすべて保持する設計が適切か検討しましょう。
  95. 7:09練習として、自分のデータで未設定の置き場を決めてから、分類結果を予想して実行してみてください。
  96. 7:16グループバイは、分類キーを返すという一点に集中した、素直で覚えやすいエーピーアイです。
  97. 7:23まずは小さな配列で試してみてください。
  98. 7:26お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Object.groupBy()で配列を担当別に分類する方法を解説。引数と戻り値、ブラウザーとNode.jsの対応・実行手順、参照共有や非同期処理の注意点を自己完結したコードで学びます。

解説記事・サンプルコードを読む：JavaScriptのObject.groupBy()：配列のデータを担当別にグループ化する →