WEBVTT

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

2
00:00:00.921 --> 00:00:05.220
今回は、ネクストジェイエスのユーズコンテキスト入門です。

3
00:00:05.220 --> 00:00:10.901
テーマ切り替えを例に、プロバイダーでテーマと状態を共有する方法を学びます。

4
00:00:10.901 --> 00:00:17.196
ユーズコンテキストは、祖先にあるプロバイダーから値を受け取るリアクトのフックです。

5
00:00:17.196 --> 00:00:25.333
テーマや表示設定のように、複数の部品が必要とする値を、中間の部品へ何段もプロップスで渡さずに共有できます。

6
00:00:25.333 --> 00:00:30.861
この動画では、ページズルーターとタイプスクリプトを使い、型付きプロバイダーと専用フックを作り、

7
00:00:30.861 --> 00:00:36.388
最後にアプリルーターでの配置の違いまで確認します。

8
00:00:36.388 --> 00:00:39.631
まず、なぜコンテキストが必要なのかです。

9
00:00:39.631 --> 00:00:44.820
親から孫、さらにその先へ同じ値を渡し続けると、中間の部品が自分では使わない値まで受け取って渡す、

10
00:00:44.820 --> 00:00:50.010
いわゆるバケツリレーが起きます。

11
00:00:50.010 --> 00:00:54.388
部品が増えるほど、受け渡しの経路が読みにくくなります。

12
00:00:54.388 --> 00:01:01.361
コンテキストを使うと、祖先のプロバイダーが用意した値を、必要な子孫が直接読み取れます。

13
00:01:01.361 --> 00:01:03.631
ただし大切な区別があります。

14
00:01:03.631 --> 00:01:10.766
ユーズコンテキストは値を届ける仕組みであり、状態そのものを自動で作る機能ではありません。

15
00:01:10.766 --> 00:01:15.469
状態の保持と更新には、ユーズステートなどを組み合わせます。

16
00:01:15.469 --> 00:01:22.280
近くの親子で完結する受け渡しなら、プロップスのほうが流れを追いやすい場合もあります。

17
00:01:22.280 --> 00:01:25.189
テーマを共有するコンテキストを実装します。

18
00:01:25.189 --> 00:01:32.530
ファイルは、エスアールシー配下のコンテキストフォルダーにある、テーマコンテキスト・ティーエスエックスです。

19
00:01:32.530 --> 00:01:37.863
画面に示した前半では、まずテーマの型をライトとダークの二択に限定し、共有する値の型として、

20
00:01:37.863 --> 00:01:43.195
現在のテーマと切り替え関数をまとめたテーマバリューを定義します。

21
00:01:43.195 --> 00:01:46.797
次にクリエイトコンテキストでコンテキストを作ります。

22
00:01:46.797 --> 00:01:52.199
ここへ渡す初期値は、対応するプロバイダーが祖先にない場合のフォールバックです。

23
00:01:52.199 --> 00:01:58.155
この例ではアンディファインドを使い、配置忘れを後で専用フックで検出できるようにします。

24
00:01:58.155 --> 00:02:03.972
コンテキストはモジュールのトップレベルで一度だけ定義し、描画のたびに作り直しません。

25
00:02:03.972 --> 00:02:05.858
続いてプロバイダー本体です。

26
00:02:05.858 --> 00:02:10.843
テーマプロバイダーは、ユーズステートでテーマを保持し、初期値はライトです。

27
00:02:10.843 --> 00:02:17.713
切り替え関数のトグルテーマは、現在の値を受け取り、ライトならダークへ、ダークならライトへ反転させます。

28
00:02:17.713 --> 00:02:22.428
関数形式で更新するため、古い値に依存しない安全な書き方になっています。

29
00:02:22.428 --> 00:02:25.998
用意したテーマと切り替え関数を、バリューとしてコンテキストプロバイダーへ渡し、

30
00:02:25.998 --> 00:02:29.568
子要素をその内側に置きます。

31
00:02:29.568 --> 00:02:34.957
トグルテーマが値を更新すると、そのコンテキストを読む子孫へ新しい値が伝わります。

32
00:02:34.957 --> 00:02:38.595
なおこの例ではブラウザーの保存領域を使わないため、ページを完全に再読み込みすると、

33
00:02:38.595 --> 00:02:42.232
初期値のライトへ戻ります。

34
00:02:42.232 --> 00:02:46.312
次に、ページズルーターの共通部分へプロバイダーを配置します。

35
00:02:46.312 --> 00:02:50.527
ファイルはアンダースコアエーピーピー・ティーエスエックスです。

36
00:02:50.527 --> 00:02:58.279
全ページを表すコンポーネントをテーマプロバイダーで囲むことで、どのページからでも同じテーマを読めるようになります。

37
00:02:58.279 --> 00:03:03.174
既存のアンダースコアエーピーピーがある場合は、グローバルシーエスエスやレイアウトなどの処理を残し、

38
00:03:03.174 --> 00:03:08.070
プロバイダーで必要な範囲だけを囲んでください。

39
00:03:08.070 --> 00:03:13.645
サンプルでファイル全体を上書きして、既存の設定を失わないようにすることが大切です。

40
00:03:13.645 --> 00:03:17.951
同じプロバイダーがマウントされたままのクライアント側のページ移動では状態を共有できますが、

41
00:03:17.951 --> 00:03:22.258
プロバイダーをページごとに作り直す場合や、ブラウザーを再読み込みする場合は、

42
00:03:22.258 --> 00:03:26.564
状態の寿命が変わります。

43
00:03:26.564 --> 00:03:30.002
読み取り側は、専用フックのユーズテーマを用意します。

44
00:03:30.002 --> 00:03:34.762
このフックは内部でユーズコンテキストを呼び、取得した値をチェックします。

45
00:03:34.762 --> 00:03:39.192
もし値がアンディファインドなら、プロバイダーの内側で使われていないということなので、

46
00:03:39.192 --> 00:03:43.622
エラーを投げて配置忘れをすぐ気付けるようにします。

47
00:03:43.622 --> 00:03:47.853
チェックを通過すれば、型がテーマバリューに確定した値を返します。

48
00:03:47.853 --> 00:03:52.614
利用側は、ユーズテーマを呼ぶだけで、テーマと切り替え関数を取り出せます。

49
00:03:52.614 --> 00:03:56.118
毎回コンテキストを直接読み、未定義かどうかを各部品で繰り返し判定する必要がなくなり、

50
00:03:56.118 --> 00:03:59.622
使い方も統一できます。

51
00:03:59.622 --> 00:04:03.192
この一手間が、大きなアプリでの事故防止につながります。

52
00:04:03.192 --> 00:04:06.672
子コンポーネントから読み取りと更新を行う例です。

53
00:04:06.672 --> 00:04:12.038
テーマボタンは、ユーズテーマから現在のテーマと切り替え関数を受け取ります。

54
00:04:12.038 --> 00:04:15.881
ボタンをクリックするとトグルテーマが呼ばれ、押下状態を示すエーリアプレストには、

55
00:04:15.881 --> 00:04:19.723
ダークかどうかを渡します。

56
00:04:19.723 --> 00:04:24.364
表示文字も、ダークなら有効、そうでなければ無効と切り替わります。

57
00:04:24.364 --> 00:04:29.294
ポイントは、このボタンへテーマをプロップスで渡す必要がないことです。

58
00:04:29.294 --> 00:04:38.140
親がテーマを知らなくても、ボタン自身がコンテキストから直接読むため、間に部品が増えても受け渡しを書き足す必要がありません。

59
00:04:38.140 --> 00:04:39.449
ページ側の例です。

60
00:04:39.449 --> 00:04:45.995
テーマページもユーズテーマでテーマを読み、背景色と文字色を、ダークかどうかで切り替えます。

61
00:04:45.995 --> 00:04:49.777
ページの中には先ほどのテーマボタンが置かれています。

62
00:04:49.777 --> 00:04:54.795
開発サーバーでスラッシュテーマへアクセスすると、ボタンとページが同じテーマを参照し、

63
00:04:54.795 --> 00:04:59.813
クリックで表示がまとめて切り替わることが確認できます。

64
00:04:59.813 --> 00:05:04.468
ボタンが状態を更新し、ページがその結果を描くという役割分担です。

65
00:05:04.468 --> 00:05:10.432
どちらもプロバイダーが持つ一つの状態を見ているため、値が食い違うことがありません。

66
00:05:10.432 --> 00:05:16.832
共有したい値と、それを使う場所が離れているほど、この仕組みの効果が分かりやすくなります。

67
00:05:16.832 --> 00:05:19.398
再描画と値の管理に注意します。

68
00:05:19.398 --> 00:05:26.411
プロバイダーの値が変わると、コンテキストを読むコンポーネントは更新を受け取ります。

69
00:05:26.411 --> 00:05:30.003
値の比較にはオブジェクトイズが使われます。

70
00:05:30.003 --> 00:05:36.332
この例のバリューは新しいオブジェクトとして渡されるため、プロバイダーが別の理由で再描画された場合にも参照が変わり、

71
00:05:36.332 --> 00:05:42.661
読む側が更新されることがあります。

72
00:05:42.661 --> 00:05:50.273
実際に不要な再描画が問題になったら、コンテキストの責務を分ける、プロバイダーの配置を狭める、

73
00:05:50.273 --> 00:05:57.885
必要に応じてユーズメモやユーズコールバックで値を安定させる、といった方法を検討します。

74
00:05:57.885 --> 00:06:03.701
ただしメモ化しても、テーマ自体が変わった際の利用側の更新は必要です。

75
00:06:03.701 --> 00:06:06.780
対策は、実測してから入れてください。

76
00:06:06.780 --> 00:06:08.775
アプリルーターでの利用です。

77
00:06:08.775 --> 00:06:12.764
プロバイダーのファイルはユーズクライアントで始め、クライアントコンポーネントとして用意し、

78
00:06:12.764 --> 00:06:16.753
必要な部分を囲みます。

79
00:06:16.753 --> 00:06:23.592
サーバーコンポーネントのレイアウトから、そのプロバイダーを読み込んで子要素を渡すことはできます。

80
00:06:23.592 --> 00:06:30.715
ただし、サーバーコンポーネント自身がユーズコンテキストでクライアントの状態を読む構成にはできません。

81
00:06:30.715 --> 00:06:35.844
境界を意識して、状態を持つ部分だけをクライアント側へ寄せるのが基本です。

82
00:06:35.844 --> 00:06:38.124
あわせてセキュリティの注意です。

83
00:06:38.124 --> 00:06:42.255
コンテキストはアクセス権限を保証する仕組みではありません。

84
00:06:42.255 --> 00:06:47.812
表示名などを共有する用途には使えますが、認証と認可はサーバー側でも確認し、

85
00:06:47.812 --> 00:06:53.368
秘密のエーピーアイキーをコンテキストへ入れてブラウザーへ渡すことは避けてください。

86
00:06:53.368 --> 00:06:56.850
最後に、コンテキストを広げすぎない設計です。

87
00:06:56.850 --> 00:07:03.180
まず、テーマや設定を必要とする部品を確認し、必要な範囲にプロバイダーを置きます。

88
00:07:03.180 --> 00:07:08.720
アプリ全体で本当に必要なのか、画面の一部で足りるのかを考えてください。

89
00:07:08.720 --> 00:07:11.568
次に、更新頻度の違う値を整理します。

90
00:07:11.568 --> 00:07:16.158
頻繁に変わる入力値と、ほとんど変わらない設定を同じコンテキストへまとめると、

91
00:07:16.158 --> 00:07:20.748
利用側の更新範囲が広がる場合があります。

92
00:07:20.748 --> 00:07:25.021
実際の描画を確認し、役割に応じて分割するか判断します。

93
00:07:25.021 --> 00:07:25.970
まとめです。

94
00:07:25.970 --> 00:07:30.085
クリエイトコンテキストで入れ物を作り、プロバイダーがユーズステートで状態を持ち、

95
00:07:30.085 --> 00:07:34.200
専用フックで安全に読む。

96
00:07:34.200 --> 00:07:38.948
この三点セットを押さえれば、テーマ共有を自分で実装できます。