WEBVTT

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

2
00:00:00.903 --> 00:00:03.462
今回はレイアウトのプロップスです。

3
00:00:03.462 --> 00:00:09.484
アップルーターでは、複数のページで共通する画面の枠組みをレイアウトが担当します。

4
00:00:09.484 --> 00:00:15.355
そのレイアウトが受け取るのが、チルドレンとパラムスという二つのプロップスです。

5
00:00:15.355 --> 00:00:20.774
チルドレンには内側のページが入り、パラムスには動的ルートの値が入ります。

6
00:00:20.774 --> 00:00:30.107
記事の例で、チームごとの共通画面を組み立てる流れを確認し、あわせて、レイアウトがサーチパラムスを受け取らない理由も学びます。

7
00:00:30.107 --> 00:00:36.580
前回はルートハンドラーズでエーピーアイを作りましたが、今回は画面の共通化がテーマです。

8
00:00:36.580 --> 00:00:38.407
まずレイアウトの役割です。

9
00:00:38.407 --> 00:00:43.394
レイアウトは、ヘッダーやサイドバーなど、複数のページで共通する部分を表示するコンポーネントで、

10
00:00:43.394 --> 00:00:48.382
ファイル名はレイアウト・ティーエスエックスです。

11
00:00:48.382 --> 00:00:54.143
置いたフォルダーより内側のページや、さらに内側のレイアウトを包み込む形で使います。

12
00:00:54.143 --> 00:00:58.849
この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方で、

13
00:00:58.849 --> 00:01:03.556
タイプスクリプト五・二以降を前提にします。

14
00:01:03.556 --> 00:01:09.738
ネクストジェイエス十六ではキャッシュコンポーネンツを有効にしない構成を前提としています。

15
00:01:09.738 --> 00:01:16.061
ページズルーターとは配置も実行場所も違うため、ルーターとバージョンを先に確認してください。

16
00:01:16.061 --> 00:01:23.648
アプリ直下のルートレイアウトと、階層ごとに置くレイアウトは役割が違い、今回は階層ごとのレイアウトが対象です。

17
00:01:23.648 --> 00:01:26.509
一つ目のプロップス、チルドレンです。

18
00:01:26.509 --> 00:01:30.323
チルドレンは、レイアウトの内側にあるページやレイアウトが入る表示領域で、

19
00:01:30.323 --> 00:01:34.138
型はリアクトノードです。

20
00:01:34.138 --> 00:01:41.448
レイアウト自身が作る共通部分と、ページごとに変わる部分を分けるための仕組みと考えてください。

21
00:01:41.448 --> 00:01:47.647
チルドレンを戻り値のどこに置くかで、ページが画面のどこに現れるかが決まります。

22
00:01:47.647 --> 00:01:53.527
共通の見出しの下に置けば、すべてのページで見出しの下に内容が表示されます。

23
00:01:53.527 --> 00:01:57.818
サイドバーの横に置けば、内容は横の領域に表示されます。

24
00:01:57.818 --> 00:02:03.540
つまりチルドレンの位置を決めることは、画面の構造を決めることと同じです。

25
00:02:03.540 --> 00:02:05.968
二つ目のプロップス、パラムスです。

26
00:02:05.968 --> 00:02:14.537
角括弧で書く動的ルートのフォルダーにレイアウトを置くと、パラムスには、その階層までに決まった動的パラメーターが入ります。

27
00:02:14.537 --> 00:02:20.108
たとえばワークスペースの下のチームという階層なら、チーム名が文字列で届きます。

28
00:02:20.108 --> 00:02:28.534
ネクストジェイエス十五以降では、パラムスはプロミス形式で渡されるため、値を読む前にアウェイトで解決する必要があります。

29
00:02:28.534 --> 00:02:31.819
レイアウトを非同期関数にするのはそのためです。

30
00:02:31.819 --> 00:02:38.246
下の階層で初めて決まる値は、このレイアウトのパラムスには含まれない点にも注意してください。

31
00:02:38.246 --> 00:02:40.960
受け取れる範囲は、置いた階層までです。

32
00:02:40.960 --> 00:02:42.159
記事のコードです。

33
00:02:42.159 --> 00:02:48.956
ファイルは、アプリ、ワークスペース、角括弧チームというフォルダーのレイアウト・ティーエスエックスです。

34
00:02:48.956 --> 00:02:55.219
プロップスの型は、チルドレンがリアクトノード、パラムスがチームという文字列を持つプロミスです。

35
00:02:55.219 --> 00:03:02.416
チームレイアウトという非同期関数が二つを受け取り、まずアウェイトでパラムスを解決してチーム名を取り出します。

36
00:03:02.416 --> 00:03:09.079
戻り値では、セクションの中にヘッダーを置き、チーム名を表示して、その後にチルドレンを配置しています。

37
00:03:09.079 --> 00:03:15.476
共通のヘッダーと、ページごとの中身が、一つの戻り値の中で組み合わさっている点を確認してください。

38
00:03:15.476 --> 00:03:20.540
チーム内の複数ページに共通するサイドバーなどへも、同じ考え方で応用できます。

39
00:03:20.540 --> 00:03:22.094
中身になるページです。

40
00:03:22.094 --> 00:03:28.028
同じ階層のページ・ティーエスエックスに、チームホームというコンポーネントを置きます。

41
00:03:28.028 --> 00:03:35.657
見出しと説明文だけのシンプルな内容ですが、このページ全体が、先ほどのレイアウトのチルドレンとして渡されます。

42
00:03:35.657 --> 00:03:40.955
サーバー実行環境で、スラッシュ・ワークスペース・スラッシュ・デザインを開くと、

43
00:03:40.955 --> 00:03:46.253
デザインというチーム名の共通表示の下に、このページが入って表示されます。

44
00:03:46.253 --> 00:03:54.306
なお前提として、アプリ直下のルートレイアウトが別途あり、エイチティーエムエルとボディを定義している必要があります。

45
00:03:54.306 --> 00:03:58.968
階層ごとにレイアウトが重なり、一番内側にページが入るイメージです。

46
00:03:58.968 --> 00:04:00.672
つまずきやすい点です。

47
00:04:00.672 --> 00:04:07.023
共通ヘッダーだけを返してチルドレンを配置し忘れると、内側のページは表示されません。

48
00:04:07.023 --> 00:04:12.135
エラーにならず、ただ中身が出ないため、原因に気づきにくい失敗です。

49
00:04:12.135 --> 00:04:20.810
レイアウトを書くときは、チルドレンをどの領域へ入れるかを、エイチティーエムエルの構造と一緒に先に決めてください。

50
00:04:20.810 --> 00:04:29.485
記事の確認課題でも、ページへ見出しを置き、チルドレンを一時的に外したときの違いを確認することが勧められています。

51
00:04:29.485 --> 00:04:34.752
外す前と外した後を見比べると、チルドレンの役割がはっきり分かります。

52
00:04:34.752 --> 00:04:40.948
共通部分だけが残って画面が寂しく見えたら、まずチルドレンの配置を疑ってください。

53
00:04:40.948 --> 00:04:42.509
もう一つの大切な違いです。

54
00:04:42.509 --> 00:04:46.113
レイアウトには、サーチパラムスというプロップスがありません。

55
00:04:46.113 --> 00:04:53.319
共有レイアウトは画面遷移のときに維持され、作り直されないため、変わり続ける検索条件を受け取る場所には向いていないのです。

56
00:04:53.319 --> 00:05:00.646
現在の検索条件が必要な場合は、ページで受け取るか、小さなクライアントコンポーネントでユーズサーチパラムスを使って読みます。

57
00:05:00.646 --> 00:05:04.430
パラムスは階層までのルートの値、サーチパラムスはアドレスの疑問符以降の条件、

58
00:05:04.430 --> 00:05:08.213
と置き場所が最初から分かれていると覚えてください。

59
00:05:08.213 --> 00:05:11.336
次回学ぶページのプロップスとの違いにもつながります。

60
00:05:11.336 --> 00:05:12.629
実務上の注意です。

61
00:05:12.629 --> 00:05:20.099
パラムスで受け取ったチーム名を画面に表示できたとしても、それはそのチームへのアクセス許可を意味しません。

62
00:05:20.099 --> 00:05:24.840
アドレスを書き換えれば、誰でも別のチーム名を開けてしまうためです。

63
00:05:24.840 --> 00:05:31.592
データを取得する側で、利用者がそのチームに所属しているか、権限があるかを必ず確認してください。

64
00:05:31.592 --> 00:05:35.829
確認のときは、アドレスを直接開く場合と、画面内のリンクから遷移する場合、

65
00:05:35.829 --> 00:05:40.067
値がない場合と不正な値の場合を分けて試します。

66
00:05:40.067 --> 00:05:44.664
型が文字列であることだけでは、防げない入力の問題があるためです。

67
00:05:44.664 --> 00:05:49.836
表示の仕組みと、守る仕組みは分けて設計する、という意識を持ってください。

68
00:05:49.836 --> 00:05:51.447
静的出力での扱いです。

69
00:05:51.447 --> 00:05:54.523
チルドレン自体は静的なサイトでも使えます。

70
00:05:54.523 --> 00:05:58.845
しかしチームのように値が変わる動的ルートでは、どのチームのページを生成するかを、

71
00:05:58.845 --> 00:06:03.166
このレイアウトだけでは決められません。

72
00:06:03.166 --> 00:06:10.929
静的出力では、ジェネレートスタティックパラムスで動的なチームの候補を生成対象として列挙する必要があります。

73
00:06:10.929 --> 00:06:14.738
候補にないアドレスは生成されないため、公開後にページが見つからない場合は、

74
00:06:14.738 --> 00:06:18.547
この列挙漏れも疑ってください。

75
00:06:18.547 --> 00:06:24.699
本番用に組み立てた状態と公開先でも、直接アドレスを開いて確認しておくことが大切です。

76
00:06:24.699 --> 00:06:31.144
開発サーバーで見えることと、静的出力で生成されることは別だという点も覚えておきましょう。

77
00:06:31.144 --> 00:06:32.047
まとめです。

78
00:06:32.047 --> 00:06:34.607
レイアウトのプロップスは二つです。

79
00:06:34.607 --> 00:06:42.286
チルドレンは内側のページが入る表示領域で、型はリアクトノード、配置し忘れるとページが見えなくなります。

80
00:06:42.286 --> 00:06:48.910
パラムスは、その階層までの動的パラメーターで、プロミス形式のためアウェイトして読みます。

81
00:06:48.910 --> 00:06:53.578
サーチパラムスはレイアウトでは受け取らず、ページ側で読みます。

82
00:06:53.578 --> 00:06:57.869
同じチーム配下に二ページを作り、共通部分とページ固有の部分がどこか説明できるようになれば、

83
00:06:57.869 --> 00:07:02.160
この回の目標は達成です。

84
00:07:02.160 --> 00:07:05.171
これでレイアウトのプロップスは完了です。

85
00:07:05.171 --> 00:07:06.526
お疲れさまでした。

86
00:07:06.526 --> 00:07:09.236
次回はページのプロップスを学びます。