SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのMap.getOrInsertComputed()：未登録のキーだけ初期値を作るの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:01今回はジャバスクリプトのマップ・ゲット・オア・インサート・コンピューテッドを紹介します。
  3. 0:08これは、マップにキーが登録済みならその値を返し、未登録なら初期値を作る関数を呼んで、
  4. 0:13作った値を保存してから返すメソッドです。
  5. 0:19担当者ごとの作業情報を管理するとき、登録済みかどうかの確認と初期化の分岐を毎回書くのは手間がかかります。
  6. 0:28このメソッドを使えば、その分岐を一行にまとめられます。
  7. 0:32しかも初期値を作る関数は、キーが未登録のときにだけ呼ばれます。
  8. 0:38この動画では、基本の書き方から、期待出力、失敗例や例外の扱いまで順に解説します。
  9. 0:44マップの基本的な使い方を先に知っておくと、このメソッドの便利さがより伝わります。
  10. 0:51まず動作環境です。
  11. 0:53このメソッドは比較的新しいため、古い環境では使えない場合があります。
  12. 0:58記事の実行例では、ブラウザーはクローム百四十五以降、ノード・ジェイエスは二十六・ゼロ・ゼロ以降を対象にしています。
  13. 1:06二千二十六年二月からは主要ブラウザーで利用可能とされていますが、端末やバージョンによっては未対応のこともあります。
  14. 1:14バージョン番号だけで判断せず、実行前にタイプオブで存在を確認するのが確実です。
  15. 1:20画面の式でファンクションと表示されれば対応、アンディファインドなら未対応です。
  16. 1:26未対応の環境では、後続の処理を実行しない判断を先に用意しておきましょう。
  17. 1:31対応していない環境でそのまま呼び出すとエラーになるため、この確認は実務でも省略しないでください。
  18. 1:38基本の書き方を見ましょう。
  19. 1:40マップに対してゲット・オア・インサート・コンピューテッドと書き、かっこの中に二つの引数を渡します。
  20. 1:47一つ目は取得または登録するキーです。
  21. 1:50二つ目はコールバック、つまりキーが未登録のときに保存する値を返す関数で、
  22. 1:54そのキー自身を引数として受け取ります。
  23. 1:58戻り値は、すでに登録されていた値、または今回作って保存した値です。
  24. 2:03画面の例では、アリスというキーで担当者名と空の作業一覧を持つオブジェクトが作られ、
  25. 2:08担当者名を取り出すとアリスと表示されます。
  26. 2:12キーを関数の中で使えるため、キーごとに違う初期値を作れるのがポイントです。
  27. 2:18ここで最も大切な注意点です。
  28. 2:20第二引数には、関数そのものを渡してください。
  29. 2:24クリエイトボックスと名前だけを書けば、呼び出しのタイミングはメソッド側に任せられます。
  30. 2:30キーが登録済みなら、関数は呼ばれずに済みます。
  31. 2:34ところが、かっこを付けてクリエイトボックスかっこと書くと、メソッドに渡す前にその関数が実行されてしまいます。
  32. 2:42初期化に手間のかかるオブジェクトや、解析結果のように作るコストが高い値ほど、
  33. 2:46この差は大きくなります。
  34. 2:50登録済みのキーでも毎回作り直してしまっては、このメソッドを使う意味がありません。
  35. 2:56かっこを付けない、と覚えておきましょう。
  36. 2:59具体例で動きを確かめましょう。
  37. 3:02担当者ごとの作業ボックスを入れるマップを用意し、初期化のたびに作成回数を数えるクリエイトボックス関数を作ります。
  38. 3:10この関数は、担当者名を受け取り、担当者名と空の作業一覧を持つオブジェクトを返します。
  39. 3:17まずアリスで取得すると、まだ未登録なので関数が呼ばれ、ボックスが作られます。
  40. 3:23そこへ仕様確認という作業を追加します。
  41. 3:26次に同じアリスでもう一度取得し、実装という作業を追加します。
  42. 3:31最後にボブで取得すると、別のキーなので新しいボックスが作られます。
  43. 3:36作成回数が何回になるか、次の画面の出力で確認してください。
  44. 3:40期待出力を見ましょう。
  45. 3:42初期化の表示はアリスとボブの二回だけで、作成回数も二です。
  46. 3:47二回目のアリスでは、保存済みのオブジェクトがそのまま返るため、作成回数は増えませんでした。
  47. 3:55また、最初に取得したものと二回目に取得したものが同じ参照かどうかを比べると、
  48. 3:59トゥルーになります。
  49. 4:03アリスの作業一覧には仕様確認と実装の両方が入り、ボブにはレビューが入ります。
  50. 4:10登録数は二件です。
  51. 4:11つまり、参照した回数ではなく、キーの種類の数だけ初期化が起きる、という流れが数字から読み取れます。
  52. 4:20重い初期化を避けたい場面で効く理由がここにあります。
  53. 4:24同じ参照である点は、便利さと注意点の両面を持ちます。
  54. 4:28取得するたびにコピーが作られるわけではないため、二回目に取得した側で作業を追加すると、
  55. 4:33一回目に取得した側からもその追加が見えます。
  56. 4:37画面の例でも、セカンド側で実装を追加すると、ファースト側の作業一覧に反映されています。
  57. 4:44担当者のボックスを一か所で共有したい用途では、この動きがそのまま役立ちます。
  58. 4:49一方で、取得した側が自由に書き換えると、他の場所の処理にも影響します。
  59. 4:54独立した控えが欲しい場合は、取得後に自分でコピーを作るなど、共有の範囲を設計しておくことが大切です。
  60. 5:01失敗例も確認しておきましょう。
  61. 5:04初期値を作る関数を、先に呼び出してしまう書き方です。
  62. 5:07クリエイトバリューかっこと書くと、その場で関数が実行され、戻り値の数値百が第二引数として渡ってしまいます。
  63. 5:15メソッドは関数を受け取る前提なので、数値が渡るとタイプエラーという例外が発生します。
  64. 5:22しかも、キーが登録済みかどうかに関係なく、呼び出し自体が先に実行される点も問題です。
  65. 5:28直し方は簡単で、かっこを外して関数そのものを渡すだけです。
  66. 5:32エラーが出たときは、まず第二引数にかっこが付いていないかを確認してください。
  67. 5:38この失敗は、かっこを付けるかどうかという小さな違いから起こるため、初心者が特に間違えやすい例です。
  68. 5:46初期化関数の中で例外が発生する可能性もあります。
  69. 5:49その場合は、呼び出し全体をトライ・キャッチで囲んで受け止めてください。
  70. 5:55画面の例では、コールバックがエラーを投げ、そのメッセージがキャッチ側で表示されています。
  71. 6:02注目点は、そのあとでキーの存在を確認するとフォルスになることです。
  72. 6:08値を返す前に例外になったため、この呼び出しによる登録は行われていません。
  73. 6:14つまり、失敗した初期化が中途半端に残ることはなく、次回もう一度同じキーで試すことができます。
  74. 6:21失敗し得る初期化ほど、例外の受け止め方を先に決めておきましょう。
  75. 6:26応用でつまずきやすい点を二つ紹介します。
  76. 6:30一つ目は非同期処理です。
  77. 6:32このメソッドは同期的にコールバックの戻り値を保存します。
  78. 6:36そのため、アシンク関数を渡すと、保存されるのは完了後のデータではなくプロミスそのものになります。
  79. 6:44失敗したプロミスも残り続けるため、再試行したい場合は削除の方針が別途必要です。
  80. 6:51入門段階では、同期的な初期化から始めるのが無難です。
  81. 6:55二つ目はキーの選び方です。
  82. 6:57オブジェクトをキーにすると、内容ではなく参照で区別されます。
  83. 7:02同じ内容のオブジェクトを毎回作ると別キーになってしまうため、担当者アイディーのような安定した文字列をキーにするのがおすすめです。
  84. 7:13最後に活用場面とまとめです。
  85. 7:15このメソッドは、担当者ごとの作業ボックス、画面ごとの編集状態、識別子ごとの解析済み設定など、
  86. 7:21同じキーには同じ保存値を返したい場面に向いています。
  87. 7:26導入時のコツは、初期化処理と日常的な更新処理を分けることです。
  88. 7:31完成コードでも、初期化はクリエイトボックス、作業の追加は取得後のプッシュと役割を分けていました。
  89. 7:39初期化関数に毎回必要な処理まで入れてしまうと、登録済みのキーでは実行されず、
  90. 7:43思わぬ見落としにつながります。
  91. 7:47また、長く動くアプリでは、不要になったキーを削除するタイミングも決めておきましょう。
  92. 7:54まずは作成回数と登録数を出力で確かめるところから始めてみてください。
  93. 7:59お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Map.getOrInsertComputed()で未登録のキーにだけ初期値を作る方法を解説。引数・戻り値、ブラウザーとNode.jsの対応と実行手順、期待出力、例外や参照共有の注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのMap.getOrInsertComputed()：未登録のキーだけ初期値を作る →