SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:01今回はオブジェクト・エントリーズを紹介します。
  3. 0:05これは、オブジェクトの中身を、キーと値の組の配列として取り出す静的メソッドです。
  4. 0:12前回学んだフロム・エントリーズが組からオブジェクトを作る変換だったのに対して、
  5. 0:19エントリーズはその逆向き、オブジェクトを組の配列へ分解する変換です。
  6. 0:26この動画では、書き方と引数と戻り値、記事の基本例と境界例、対象になるプロパティの範囲、
  7. 0:31例外などの注意点、そしてマップやフィルタと組み合わせる実践的な使い方まで、
  8. 0:37実行結果と一緒に学びます。
  9. 0:43オブジェクトの全項目をまとめて処理したい場面で、最初の一歩になる大切な操作です。
  10. 0:50まず動作環境を確認します。
  11. 0:52オブジェクト・エントリーズは、二千十七年頃の仕様で導入されたメソッドです。
  12. 0:57クロームでは五十四以降、エッジでは十四以降、ファイアーフォックスでは四十七以降、
  13. 1:01サファリでは十・一以降で使えます。
  14. 1:04ノード・ジェイエスでは七・ゼロ・ゼロ以降に対応しています。
  15. 1:08記事の互換性情報はエムディーエヌのデータに基づく目安です。
  16. 1:12対応範囲はかなり広く、現在使われる環境ではほぼ心配ありませんが、公開するコードでは対象環境を先に確認してください。
  17. 1:20追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
  18. 1:25書き方を確認します。
  19. 1:26オブジェクトと書き、続けてエントリーズと書いて、カッコの中に対象のオブジェクトを渡します。
  20. 1:33引数は一つだけです。
  21. 1:35戻り値は、キーと値という二つの要素を持つ小さな配列を、プロパティの数だけ並べた配列です。
  22. 1:42各組では、添字ゼロがキー、添字一が値として読めます。
  23. 1:46渡した元のオブジェクト自体は変更されません。
  24. 1:50スライドの例では、エーが一、ビーが二というオブジェクトから、二組の配列が返ることを実機で確認しました。
  25. 1:58キーは文字列として取り出される点も押さえておきましょう。
  26. 2:02引数の数が固定で一つだけという点も、よく似たメソッドと見分ける手掛かりになります。
  27. 2:09記事の基本例を見ます。
  28. 2:11リンゴが三つ、オレンジが二つという在庫オブジェクトを用意し、エントリーズで組の配列へ分解するコードです。
  29. 2:20まず分解だけを行うと、アップルと三、オレンジと二という二組が返ります。
  30. 2:26記事の例では、そこへマップを続け、各組を名前と個数に分ける分割代入で受け取り、
  31. 2:31コロンでつないだ文字列へ変換しています。
  32. 2:36実行結果はアップル三、オレンジ二となり、ノードの実機結果とも一致しました。
  33. 2:43キーと値に意味のある変数名を付けられるのが、分割代入と組み合わせる利点です。
  34. 2:49なお記事のコードはテンプレート文字列で書かれていますが、スライドでは同じ結果になる通常の文字列連結で表示しています。
  35. 2:59実践的な使い方として、フォー・オブ文で組を一件ずつ処理する例を見ます。
  36. 3:06エントリーズの戻り値は配列なので、そのまま繰り返し処理の対象にできます。
  37. 3:12各組を名前と個数に分割代入で受け取り、イコールでつないで表示すると、アップルは三、
  38. 3:18オレンジは二と順に出力され、実機とも一致しました。
  39. 3:25オブジェクトのままでは全項目を順に眺める手段が乏しいのですが、組の配列に分解すれば、
  40. 3:32繰り返しも、並べ替えも、絞り込みも、配列の道具立てで書けるようになります。
  41. 3:39全項目への表示や集計は、この型で素直に書けます。
  42. 3:44記事の境界条件の例を見ます。
  43. 3:46空のオブジェクトをエントリーズへ渡すコードです。
  44. 3:50実行結果は空の配列となり、記事の期待出力とも一致しています。
  45. 3:55プロパティが一つもなければ、組もゼロ件で、例外にはなりません。
  46. 4:00データが空の場合でも特別な分岐を書かずに、そのままマップや繰り返し処理へ流せるのは、
  47. 4:05実務で地味に効く性質です。
  48. 4:09逆に言えば、結果が空でもエラーにはならないため、入力が空であること自体を検出したい場面では、
  49. 4:15長さの確認を自分で加える必要があります。
  50. 4:21この性質は、データ件数が未定の入力を扱う処理で特に役立ちます。
  51. 4:26組の配列ならではの応用を見ます。
  52. 4:28フィルターを使えば、在庫が三以上の組だけを残す、といった絞り込みが一行で書けます。
  53. 4:35実行結果はアップルと三の組だけとなり、実機とも一致しました。
  54. 4:40さらに、前回学んだフロム・エントリーズと往復させる型も確認します。
  55. 4:46各組の値に一を足してからオブジェクトへ戻すと、アップルが四、オレンジが三となり、
  56. 4:51こちらも実機と一致しています。
  57. 4:55分解して、配列のメソッドで加工し、組み立て直す。
  58. 4:59この往復変換が、オブジェクト全体へ一括処理を行う定番パターンです。
  59. 5:05対象になるプロパティの範囲を確認します。
  60. 5:08エントリーズが取り出すのは、オブジェクト自身が持つ、列挙可能な文字列キーのプロパティだけです。
  61. 5:14シンボルキーの項目は含まれず、列挙不可に設定した項目も含まれません。
  62. 5:19プロトタイプから継承したプロパティも対象外で、スライドの例では、継承した項目は出ず、
  63. 5:24自身の項目だけが返ることを実機で確認しました。
  64. 5:29並び順にも決まりがあり、整数らしいキーは文字列でも小さい順に先へ来て、その後に通常の文字列キーが定義順に続きます。
  65. 5:37順序に依存する処理では、この規則を意識してください。
  66. 5:41注意点を見ます。
  67. 5:42引数にヌルやアンディファインドを渡すと、タイプ・エラーの例外が発生します。
  68. 5:49外部から受け取った値を渡すときは、事前に存在確認をしてください。
  69. 5:54一方、オブジェクト以外でも例外にならない入力があります。
  70. 5:58文字列を渡すと添字と一文字ずつの組が返り、数値を渡すと空の配列が返ることを、
  71. 6:02実機で確認しました。
  72. 6:06意図しない型が静かに通ってしまう場合があるので、入力の型は呼び出し側でそろえておくのが安全です。
  73. 6:14もう一つ、記事が注意する点として、値がオブジェクトの場合、その参照は共有されます。
  74. 6:21組を取り出しただけでは値はコピーされない、と覚えておきましょう。
  75. 6:26実務に近い実例として、マップへの変換と集計を見ます。
  76. 6:31エントリーズの戻り値は、キーと値の組の配列という、マップがそのまま材料にできる形です。
  77. 6:38そのため、ニュー・マップへ渡すだけで、オブジェクトからマップへの変換が一行で完了します。
  78. 6:45ゲットでアップルを取り出すと三が返り、実機とも一致しました。
  79. 6:50集計も同じ要領で、在庫オブジェクトの値を順に足していくと合計は五になります。
  80. 6:57オブジェクトとマップは得意分野が異なるため、この橋渡しができること自体が価値です。
  81. 7:03キーの順序を保ちたい、サイズをすぐ知りたい、といった場面でマップ版が役立ちます。
  82. 7:10逆向きの変換が必要な場合は、エントリーズでマップからオブジェクトへは戻せないため、
  83. 7:15フロム・エントリーズの出番になります。
  84. 7:20まとめです。
  85. 7:21オブジェクト・エントリーズは、オブジェクトをキーと値の組の配列へ分解する静的メソッドです。
  86. 7:30判断のポイントは三つです。
  87. 7:32まず、戻り値は組の配列なので、マップやフィルターや繰り返しといった配列の処理をそのまま使えること。
  88. 7:42次に、対象は自身の列挙可能な文字列キーだけで、シンボルや継承した項目は含まれないこと。
  89. 7:50そして、加工した組をフロム・エントリーズで戻す往復変換が、最も実践的な使い方であることです。
  90. 7:59まずは記事の基本例と境界例を実行し、項目を一つ変えて結果を予測してから確かめてみてください。
  91. 8:07次に学ぶオブジェクト・バリューズと合わせると、取り出し方の選択肢がそろいます。
  92. 8:15お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Object.entries()でキーと値の組を配列として取得する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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