WEBVTT

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

2
00:00:01.027 --> 00:00:08.560
今回はジャバスクリプトのマップ・ゲット・オア・インサート・コンピューテッドを紹介します。

3
00:00:08.560 --> 00:00:13.867
これは、マップにキーが登録済みならその値を返し、未登録なら初期値を作る関数を呼んで、

4
00:00:13.867 --> 00:00:19.174
作った値を保存してから返すメソッドです。

5
00:00:19.174 --> 00:00:28.075
担当者ごとの作業情報を管理するとき、登録済みかどうかの確認と初期化の分岐を毎回書くのは手間がかかります。

6
00:00:28.075 --> 00:00:32.698
このメソッドを使えば、その分岐を一行にまとめられます。

7
00:00:32.698 --> 00:00:38.005
しかも初期値を作る関数は、キーが未登録のときにだけ呼ばれます。

8
00:00:38.005 --> 00:00:44.852
この動画では、基本の書き方から、期待出力、失敗例や例外の扱いまで順に解説します。

9
00:00:44.852 --> 00:00:51.700
マップの基本的な使い方を先に知っておくと、このメソッドの便利さがより伝わります。

10
00:00:51.700 --> 00:00:53.019
まず動作環境です。

11
00:00:53.019 --> 00:00:58.003
このメソッドは比較的新しいため、古い環境では使えない場合があります。

12
00:00:58.003 --> 00:01:06.357
記事の実行例では、ブラウザーはクローム百四十五以降、ノード・ジェイエスは二十六・ゼロ・ゼロ以降を対象にしています。

13
00:01:06.357 --> 00:01:14.712
二千二十六年二月からは主要ブラウザーで利用可能とされていますが、端末やバージョンによっては未対応のこともあります。

14
00:01:14.712 --> 00:01:20.428
バージョン番号だけで判断せず、実行前にタイプオブで存在を確認するのが確実です。

15
00:01:20.428 --> 00:01:26.144
画面の式でファンクションと表示されれば対応、アンディファインドなら未対応です。

16
00:01:26.144 --> 00:01:31.421
未対応の環境では、後続の処理を実行しない判断を先に用意しておきましょう。

17
00:01:31.421 --> 00:01:38.456
対応していない環境でそのまま呼び出すとエラーになるため、この確認は実務でも省略しないでください。

18
00:01:38.456 --> 00:01:40.404
基本の書き方を見ましょう。

19
00:01:40.404 --> 00:01:47.747
マップに対してゲット・オア・インサート・コンピューテッドと書き、かっこの中に二つの引数を渡します。

20
00:01:47.747 --> 00:01:50.445
一つ目は取得または登録するキーです。

21
00:01:50.445 --> 00:01:54.566
二つ目はコールバック、つまりキーが未登録のときに保存する値を返す関数で、

22
00:01:54.566 --> 00:01:58.687
そのキー自身を引数として受け取ります。

23
00:01:58.687 --> 00:02:03.632
戻り値は、すでに登録されていた値、または今回作って保存した値です。

24
00:02:03.632 --> 00:02:08.278
画面の例では、アリスというキーで担当者名と空の作業一覧を持つオブジェクトが作られ、

25
00:02:08.278 --> 00:02:12.923
担当者名を取り出すとアリスと表示されます。

26
00:02:12.923 --> 00:02:18.468
キーを関数の中で使えるため、キーごとに違う初期値を作れるのがポイントです。

27
00:02:18.468 --> 00:02:20.648
ここで最も大切な注意点です。

28
00:02:20.648 --> 00:02:24.075
第二引数には、関数そのものを渡してください。

29
00:02:24.075 --> 00:02:30.772
クリエイトボックスと名前だけを書けば、呼び出しのタイミングはメソッド側に任せられます。

30
00:02:30.772 --> 00:02:34.354
キーが登録済みなら、関数は呼ばれずに済みます。

31
00:02:34.354 --> 00:02:42.764
ところが、かっこを付けてクリエイトボックスかっこと書くと、メソッドに渡す前にその関数が実行されてしまいます。

32
00:02:42.764 --> 00:02:46.658
初期化に手間のかかるオブジェクトや、解析結果のように作るコストが高い値ほど、

33
00:02:46.658 --> 00:02:50.551
この差は大きくなります。

34
00:02:50.551 --> 00:02:56.781
登録済みのキーでも毎回作り直してしまっては、このメソッドを使う意味がありません。

35
00:02:56.781 --> 00:02:59.896
かっこを付けない、と覚えておきましょう。

36
00:02:59.896 --> 00:03:02.231
具体例で動きを確かめましょう。

37
00:03:02.231 --> 00:03:10.947
担当者ごとの作業ボックスを入れるマップを用意し、初期化のたびに作成回数を数えるクリエイトボックス関数を作ります。

38
00:03:10.947 --> 00:03:17.484
この関数は、担当者名を受け取り、担当者名と空の作業一覧を持つオブジェクトを返します。

39
00:03:17.484 --> 00:03:23.399
まずアリスで取得すると、まだ未登録なので関数が呼ばれ、ボックスが作られます。

40
00:03:23.399 --> 00:03:26.356
そこへ仕様確認という作業を追加します。

41
00:03:26.356 --> 00:03:31.026
次に同じアリスでもう一度取得し、実装という作業を追加します。

42
00:03:31.026 --> 00:03:36.162
最後にボブで取得すると、別のキーなので新しいボックスが作られます。

43
00:03:36.162 --> 00:03:40.676
作成回数が何回になるか、次の画面の出力で確認してください。

44
00:03:40.676 --> 00:03:42.572
期待出力を見ましょう。

45
00:03:42.572 --> 00:03:47.570
初期化の表示はアリスとボブの二回だけで、作成回数も二です。

46
00:03:47.570 --> 00:03:55.325
二回目のアリスでは、保存済みのオブジェクトがそのまま返るため、作成回数は増えませんでした。

47
00:03:55.325 --> 00:03:59.462
また、最初に取得したものと二回目に取得したものが同じ参照かどうかを比べると、

48
00:03:59.462 --> 00:04:03.598
トゥルーになります。

49
00:04:03.598 --> 00:04:10.147
アリスの作業一覧には仕様確認と実装の両方が入り、ボブにはレビューが入ります。

50
00:04:10.147 --> 00:04:11.698
登録数は二件です。

51
00:04:11.698 --> 00:04:20.143
つまり、参照した回数ではなく、キーの種類の数だけ初期化が起きる、という流れが数字から読み取れます。

52
00:04:20.143 --> 00:04:24.624
重い初期化を避けたい場面で効く理由がここにあります。

53
00:04:24.624 --> 00:04:28.385
同じ参照である点は、便利さと注意点の両面を持ちます。

54
00:04:28.385 --> 00:04:33.087
取得するたびにコピーが作られるわけではないため、二回目に取得した側で作業を追加すると、

55
00:04:33.087 --> 00:04:37.789
一回目に取得した側からもその追加が見えます。

56
00:04:37.789 --> 00:04:44.010
画面の例でも、セカンド側で実装を追加すると、ファースト側の作業一覧に反映されています。

57
00:04:44.010 --> 00:04:49.507
担当者のボックスを一か所で共有したい用途では、この動きがそのまま役立ちます。

58
00:04:49.507 --> 00:04:54.571
一方で、取得した側が自由に書き換えると、他の場所の処理にも影響します。

59
00:04:54.571 --> 00:05:01.804
独立した控えが欲しい場合は、取得後に自分でコピーを作るなど、共有の範囲を設計しておくことが大切です。

60
00:05:01.804 --> 00:05:04.062
失敗例も確認しておきましょう。

61
00:05:04.062 --> 00:05:07.976
初期値を作る関数を、先に呼び出してしまう書き方です。

62
00:05:07.976 --> 00:05:15.955
クリエイトバリューかっこと書くと、その場で関数が実行され、戻り値の数値百が第二引数として渡ってしまいます。

63
00:05:15.955 --> 00:05:22.278
メソッドは関数を受け取る前提なので、数値が渡るとタイプエラーという例外が発生します。

64
00:05:22.278 --> 00:05:28.601
しかも、キーが登録済みかどうかに関係なく、呼び出し自体が先に実行される点も問題です。

65
00:05:28.601 --> 00:05:32.967
直し方は簡単で、かっこを外して関数そのものを渡すだけです。

66
00:05:32.967 --> 00:05:38.687
エラーが出たときは、まず第二引数にかっこが付いていないかを確認してください。

67
00:05:38.687 --> 00:05:46.064
この失敗は、かっこを付けるかどうかという小さな違いから起こるため、初心者が特に間違えやすい例です。

68
00:05:46.064 --> 00:05:49.986
初期化関数の中で例外が発生する可能性もあります。

69
00:05:49.986 --> 00:05:55.705
その場合は、呼び出し全体をトライ・キャッチで囲んで受け止めてください。

70
00:05:55.705 --> 00:06:02.895
画面の例では、コールバックがエラーを投げ、そのメッセージがキャッチ側で表示されています。

71
00:06:02.895 --> 00:06:08.287
注目点は、そのあとでキーの存在を確認するとフォルスになることです。

72
00:06:08.287 --> 00:06:14.170
値を返す前に例外になったため、この呼び出しによる登録は行われていません。

73
00:06:14.170 --> 00:06:21.687
つまり、失敗した初期化が中途半端に残ることはなく、次回もう一度同じキーで試すことができます。

74
00:06:21.687 --> 00:06:26.916
失敗し得る初期化ほど、例外の受け止め方を先に決めておきましょう。

75
00:06:26.916 --> 00:06:30.225
応用でつまずきやすい点を二つ紹介します。

76
00:06:30.225 --> 00:06:32.210
一つ目は非同期処理です。

77
00:06:32.210 --> 00:06:36.843
このメソッドは同期的にコールバックの戻り値を保存します。

78
00:06:36.843 --> 00:06:44.784
そのため、アシンク関数を渡すと、保存されるのは完了後のデータではなくプロミスそのものになります。

79
00:06:44.784 --> 00:06:51.236
失敗したプロミスも残り続けるため、再試行したい場合は削除の方針が別途必要です。

80
00:06:51.236 --> 00:06:55.538
入門段階では、同期的な初期化から始めるのが無難です。

81
00:06:55.538 --> 00:06:57.688
二つ目はキーの選び方です。

82
00:06:57.688 --> 00:07:02.652
オブジェクトをキーにすると、内容ではなく参照で区別されます。

83
00:07:02.652 --> 00:07:13.240
同じ内容のオブジェクトを毎回作ると別キーになってしまうため、担当者アイディーのような安定した文字列をキーにするのがおすすめです。

84
00:07:13.240 --> 00:07:15.438
最後に活用場面とまとめです。

85
00:07:15.438 --> 00:07:21.090
このメソッドは、担当者ごとの作業ボックス、画面ごとの編集状態、識別子ごとの解析済み設定など、

86
00:07:21.090 --> 00:07:26.742
同じキーには同じ保存値を返したい場面に向いています。

87
00:07:26.742 --> 00:07:31.609
導入時のコツは、初期化処理と日常的な更新処理を分けることです。

88
00:07:31.609 --> 00:07:39.146
完成コードでも、初期化はクリエイトボックス、作業の追加は取得後のプッシュと役割を分けていました。

89
00:07:39.146 --> 00:07:43.306
初期化関数に毎回必要な処理まで入れてしまうと、登録済みのキーでは実行されず、

90
00:07:43.306 --> 00:07:47.467
思わぬ見落としにつながります。

91
00:07:47.467 --> 00:07:54.061
また、長く動くアプリでは、不要になったキーを削除するタイミングも決めておきましょう。

92
00:07:54.061 --> 00:07:59.399
まずは作成回数と登録数を出力で確かめるところから始めてみてください。

93
00:07:59.399 --> 00:08:00.812
お疲れさまでした。