WEBVTT

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

2
00:00:00.862 --> 00:00:02.730
リアクト入門の第七回です。

3
00:00:02.730 --> 00:00:10.200
今回は、フラグメント、ストリクトモード、サスペンスとレイジーという、フック以外の組み込み機能を学びます。

4
00:00:10.200 --> 00:00:13.936
題材は、必要なときにだけ読み込むリアクト用語集です。

5
00:00:13.936 --> 00:00:18.820
普段は隠れていて、ボタンを押したときだけ姿を見せる小さなアプリです。

6
00:00:18.820 --> 00:00:26.004
フラグメントは余分な要素を増やさずに複数をまとめ、ストリクトモードは開発中の問題を早めに見つけます。

7
00:00:26.004 --> 00:00:32.469
レイジーはコンポーネントのコード読み込みを遅らせ、サスペンスはその間の表示を受け持ちます。

8
00:00:32.469 --> 00:00:36.348
四つの役割を分けて理解することが、この回のゴールです。

9
00:00:36.348 --> 00:00:39.652
一つずつ、コードと一緒に確認していきましょう。

10
00:00:39.652 --> 00:00:43.418
まず、四つの機能の役割を二つのグループに分けます。

11
00:00:43.418 --> 00:00:45.226
一つ目は構造と検証です。

12
00:00:45.226 --> 00:00:51.402
フラグメントは、余分なディーオーエム要素を作らずに複数の要素をまとめる仕組みです。

13
00:00:51.402 --> 00:00:57.277
ストリクトモードは、配下のコンポーネントに開発時の追加チェックを有効にします。

14
00:00:57.277 --> 00:01:03.152
どちらも、見た目を飾るためのエイチティーエムエル要素を作るものではありません。

15
00:01:03.152 --> 00:01:04.809
二つ目は読み込みです。

16
00:01:04.809 --> 00:01:10.534
レイジーは、コンポーネントのコードを必要になるまで読み込まないようにします。

17
00:01:10.534 --> 00:01:17.011
サスペンスは、配下の処理が待機している間、フォールバックに指定した表示へ切り替えます。

18
00:01:17.011 --> 00:01:20.024
今回は、この二つを組み合わせて使います。

19
00:01:20.024 --> 00:01:24.156
用語集の本体、グロッサリー・ティーエスエックスを作ります。

20
00:01:24.156 --> 00:01:28.146
用語と説明は、ディーエルの中にディーティーとディーディーを並べる形がふさわしいため、

21
00:01:28.146 --> 00:01:32.136
余分なディブは追加しません。

22
00:01:32.136 --> 00:01:35.698
データは、プロップス、ステート、フックの三件です。

23
00:01:35.698 --> 00:01:39.688
各用語にはアイディーを持たせ、マップで一覧に変換します。

24
00:01:39.688 --> 00:01:42.395
ここで各組を包むのがフラグメントです。

25
00:01:42.395 --> 00:01:50.375
フラグメント自体は画面上の要素にならないので、ディーエルの直接の子はディーティーとディーディーのまま保たれます。

26
00:01:50.375 --> 00:01:56.075
見出しには関連付けの属性も付け、画面の構造が支援技術にも伝わるようにしています。

27
00:01:56.075 --> 00:02:00.492
構造を変えずに複数をまとめられるのが、フラグメントの価値です。

28
00:02:00.492 --> 00:02:04.529
フラグメントには、短く書ける省略記法もあります。

29
00:02:04.529 --> 00:02:08.566
空の山かっこの組み合わせで要素を包む書き方です。

30
00:02:08.566 --> 00:02:12.435
ただし、この省略記法にはキーを指定できません。

31
00:02:12.435 --> 00:02:16.976
今回のように一覧の各組を並べる場合は、キーが必須です。

32
00:02:16.976 --> 00:02:24.714
そこで、フラグメントをインポートして明示的に書き、キーには用語データのアイディーを渡します。

33
00:02:24.714 --> 00:02:29.424
キーは、リアクトが一覧の各要素を見分けるための目印です。

34
00:02:29.424 --> 00:02:35.479
フラグメントで包んだからといって、安定したキーが必要な点は変わりません。

35
00:02:35.479 --> 00:02:42.544
並べ替えや追加が起きても壊れないよう、位置ではなくデータのアイディーを使いましょう。

36
00:02:42.544 --> 00:02:47.291
次に、アプリ・ティーエスエックスで読み込みの境界を作ります。

37
00:02:47.291 --> 00:02:53.462
レイジーでグロッサリーを包むと、このコンポーネントは最初から読み込まれません。

38
00:02:53.462 --> 00:03:00.265
ボタンで開く操作があり、初めて描画されるタイミングでモジュールの読み込みが始まります。

39
00:03:00.265 --> 00:03:05.329
読み込みの間、画面が真っ白にならないよう、サスペンスで包みます。

40
00:03:05.329 --> 00:03:11.658
フォールバックには、用語集を読み込んでいます、というステータス表示を指定します。

41
00:03:11.658 --> 00:03:18.936
開くかどうかはショーグロッサリーというステートで管理し、閉じている間は用語集を描画しません。

42
00:03:18.936 --> 00:03:24.474
ボタンの文言も、開いているかどうかで、開く、閉じる、と切り替わります。

43
00:03:24.474 --> 00:03:27.164
パネル自体は、隠す属性で隠します。

44
00:03:27.164 --> 00:03:31.283
レイジーを使うときに、間違えやすい約束が二つあります。

45
00:03:31.283 --> 00:03:33.571
一つ目は、読み込む側の形です。

46
00:03:33.571 --> 00:03:41.047
この書き方では、読み込むモジュールがデフォルトエクスポートしたコンポーネントである必要があります。

47
00:03:41.047 --> 00:03:46.386
用語集は、エクスポートデフォルトで定義してあるので、そのまま渡せます。

48
00:03:46.386 --> 00:03:48.522
二つ目は、宣言する場所です。

49
00:03:48.522 --> 00:03:53.786
レイジーの宣言をコンポーネントの関数の中に置くと、レンダーのたびに別のコンポーネントとして扱われ、

50
00:03:53.786 --> 00:03:59.049
ステートがリセットされる原因になります。

51
00:03:59.049 --> 00:04:03.168
必ずモジュールのトップレベル、外側で宣言してください。

52
00:04:03.168 --> 00:04:07.244
開発時の検証には、メイン・ティーエスエックスを確認します。

53
00:04:07.244 --> 00:04:13.569
ここでアプリ全体をストリクトモードで包むと、配下のコンポーネントに追加チェックが効きます。

54
00:04:13.569 --> 00:04:20.455
ヴァイトのテンプレートでは、最初から設定されていることが多いので、重ねて追加する必要はありません。

55
00:04:20.455 --> 00:04:25.937
ルート要素が見つからない場合は、エラーを投げて早めに気づけるようにしています。

56
00:04:25.937 --> 00:04:30.997
ストリクトモードは画面の部品ではなく、開発中にだけ働く検証の枠組みです。

57
00:04:30.997 --> 00:04:35.635
ここはアプリの入口のファイルなので、最初に目を通す価値があります。

58
00:04:35.635 --> 00:04:41.116
本番の表示内容そのものを変えるものではない、という位置づけを押さえてください。

59
00:04:41.116 --> 00:04:47.367
ストリクトモードでは、開発中にレンダーやエフェクトの処理が追加で実行されることがあります。

60
00:04:47.367 --> 00:04:51.117
これは不具合ではなく、問題を見つけるための仕掛けです。

61
00:04:51.117 --> 00:04:55.353
たとえば、プロップスを直接書き換えていないか、エフェクトで登録したイベントを解除し忘れていないか、

62
00:04:55.353 --> 00:04:59.590
といった点に気づけます。

63
00:04:59.590 --> 00:05:05.979
表示が二重に見えるからといって、チェックを隠すためにストリクトモードを外すのは本末転倒です。

64
00:05:05.979 --> 00:05:10.702
まず、レンダーが純粋か、エフェクトの後始末があるかを確認しましょう。

65
00:05:10.702 --> 00:05:15.008
本番ですべてが二重に実行されるわけではない点も、安心材料です。

66
00:05:15.008 --> 00:05:16.266
動作を確認します。

67
00:05:16.266 --> 00:05:18.641
初期表示では用語集は出ていません。

68
00:05:18.641 --> 00:05:24.230
開くボタンを押すと用語集が表示され、閉じると消え、もう一度開くと再表示されます。

69
00:05:24.230 --> 00:05:32.474
ディーエルの直接の子がディーティーとディーディーになっていて、フラグメント用の要素が増えていないことも確認しましょう。

70
00:05:32.474 --> 00:05:37.224
読み込みが速い環境では、待機表示は一瞬で目に見えないことがあります。

71
00:05:37.224 --> 00:05:43.512
ネットワークの低速設定とキャッシュの無効化を使うと、初回の読み込みを観察しやすくなります。

72
00:05:43.512 --> 00:05:51.756
なお、開発サーバーと本番ビルドでは配信されるファイルの構成が違うため、最終的な分割はビルド成果物でも確認してください。

73
00:05:51.756 --> 00:05:54.915
最後に、役割を取り違えやすい注意点です。

74
00:05:54.915 --> 00:05:59.970
サスペンスは、あらゆる通信を自動で見つける仕組みではありません。

75
00:05:59.970 --> 00:06:08.183
ユースエフェクトの中でフェッチしただけでは、その通信を検出してフォールバックを表示することはありません。

76
00:06:08.183 --> 00:06:13.554
今回使っているのは、正式に対応しているレイジーのコード読み込みです。

77
00:06:13.554 --> 00:06:16.081
もう一つ、待機と失敗は別物です。

78
00:06:16.081 --> 00:06:20.583
フォールバックは待っている間の表示であり、読み込みが失敗したときの表示は、

79
00:06:20.583 --> 00:06:25.084
エラーバウンダリーなどで別に用意します。

80
00:06:25.084 --> 00:06:29.191
この例には、失敗時の再試行の画面は含まれていません。

81
00:06:29.191 --> 00:06:39.616
また、再び開くときは読み込み済みのモジュールが再利用できますが、閉じる際に取り外したコンポーネントのステートまで残るとは限りません。

82
00:06:39.616 --> 00:06:40.611
まとめです。

83
00:06:40.611 --> 00:06:46.912
部品の構造にはフラグメント、開発時の検証にはストリクトモード、遅れて読み込むにはレイジー、

84
00:06:46.912 --> 00:06:53.213
待機中の表示にはサスペンス、と役割で選ぶのがこの回の学びです。

85
00:06:53.213 --> 00:06:57.524
今回、記事のコードそのままをタイプスクリプトの厳密な型チェックにかけて、

86
00:06:57.524 --> 00:07:01.835
エラーがないことを確認しました。

87
00:07:01.835 --> 00:07:08.800
用語データや開閉の仕組みに関する計算も、ノード・ジェーエスで実行して確かめています。

88
00:07:08.800 --> 00:07:16.759
一方、ブラウザー上で遅延読み込みの表示切り替えを目で確認する作業は、実行環境の制約で未実施です。

89
00:07:16.759 --> 00:07:23.392
次回は、独自関数ノーマライズタイトルで、文字列の整形を部品化する方法を学びます。

90
00:07:23.392 --> 00:07:24.884
お疲れさまでした。