VIDEO LESSON

Layoutのprops：childrenとparamsで共通画面を組み立てるの解説動画

再生時間 7:09動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00今回はレイアウトのプロップスです。
0:03アップルーターでは、複数のページで共通する画面の枠組みをレイアウトが担当します。
0:09そのレイアウトが受け取るのが、チルドレンとパラムスという二つのプロップスです。
0:15チルドレンには内側のページが入り、パラムスには動的ルートの値が入ります。
0:20記事の例で、チームごとの共通画面を組み立てる流れを確認し、あわせて、レイアウトがサーチパラムスを受け取らない理由も学びます。
0:30前回はルートハンドラーズでエーピーアイを作りましたが、今回は画面の共通化がテーマです。
0:36まずレイアウトの役割です。
0:38レイアウトは、ヘッダーやサイドバーなど、複数のページで共通する部分を表示するコンポーネントで、
0:43ファイル名はレイアウト・ティーエスエックスです。
0:48置いたフォルダーより内側のページや、さらに内側のレイアウトを包み込む形で使います。
0:54この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方で、
0:58タイプスクリプト五・二以降を前提にします。
1:03ネクストジェイエス十六ではキャッシュコンポーネンツを有効にしない構成を前提としています。
1:09ページズルーターとは配置も実行場所も違うため、ルーターとバージョンを先に確認してください。
1:16アプリ直下のルートレイアウトと、階層ごとに置くレイアウトは役割が違い、今回は階層ごとのレイアウトが対象です。
1:23一つ目のプロップス、チルドレンです。
1:26チルドレンは、レイアウトの内側にあるページやレイアウトが入る表示領域で、
1:30型はリアクトノードです。
1:34レイアウト自身が作る共通部分と、ページごとに変わる部分を分けるための仕組みと考えてください。
1:41チルドレンを戻り値のどこに置くかで、ページが画面のどこに現れるかが決まります。
1:47共通の見出しの下に置けば、すべてのページで見出しの下に内容が表示されます。
1:53サイドバーの横に置けば、内容は横の領域に表示されます。
1:57つまりチルドレンの位置を決めることは、画面の構造を決めることと同じです。
2:03二つ目のプロップス、パラムスです。
2:05角括弧で書く動的ルートのフォルダーにレイアウトを置くと、パラムスには、その階層までに決まった動的パラメーターが入ります。
2:14たとえばワークスペースの下のチームという階層なら、チーム名が文字列で届きます。
2:20ネクストジェイエス十五以降では、パラムスはプロミス形式で渡されるため、値を読む前にアウェイトで解決する必要があります。
2:28レイアウトを非同期関数にするのはそのためです。
2:31下の階層で初めて決まる値は、このレイアウトのパラムスには含まれない点にも注意してください。
2:38受け取れる範囲は、置いた階層までです。
2:40記事のコードです。
2:42ファイルは、アプリ、ワークスペース、角括弧チームというフォルダーのレイアウト・ティーエスエックスです。
2:48プロップスの型は、チルドレンがリアクトノード、パラムスがチームという文字列を持つプロミスです。
2:55チームレイアウトという非同期関数が二つを受け取り、まずアウェイトでパラムスを解決してチーム名を取り出します。
3:02戻り値では、セクションの中にヘッダーを置き、チーム名を表示して、その後にチルドレンを配置しています。
3:09共通のヘッダーと、ページごとの中身が、一つの戻り値の中で組み合わさっている点を確認してください。
3:15チーム内の複数ページに共通するサイドバーなどへも、同じ考え方で応用できます。
3:20中身になるページです。
3:22同じ階層のページ・ティーエスエックスに、チームホームというコンポーネントを置きます。
3:28見出しと説明文だけのシンプルな内容ですが、このページ全体が、先ほどのレイアウトのチルドレンとして渡されます。
3:35サーバー実行環境で、スラッシュ・ワークスペース・スラッシュ・デザインを開くと、
3:40デザインというチーム名の共通表示の下に、このページが入って表示されます。
3:46なお前提として、アプリ直下のルートレイアウトが別途あり、エイチティーエムエルとボディを定義している必要があります。
3:54階層ごとにレイアウトが重なり、一番内側にページが入るイメージです。
3:58つまずきやすい点です。
4:00共通ヘッダーだけを返してチルドレンを配置し忘れると、内側のページは表示されません。
4:07エラーにならず、ただ中身が出ないため、原因に気づきにくい失敗です。
4:12レイアウトを書くときは、チルドレンをどの領域へ入れるかを、エイチティーエムエルの構造と一緒に先に決めてください。
4:20記事の確認課題でも、ページへ見出しを置き、チルドレンを一時的に外したときの違いを確認することが勧められています。
4:29外す前と外した後を見比べると、チルドレンの役割がはっきり分かります。
4:34共通部分だけが残って画面が寂しく見えたら、まずチルドレンの配置を疑ってください。
4:40もう一つの大切な違いです。
4:42レイアウトには、サーチパラムスというプロップスがありません。
4:46共有レイアウトは画面遷移のときに維持され、作り直されないため、変わり続ける検索条件を受け取る場所には向いていないのです。
4:53現在の検索条件が必要な場合は、ページで受け取るか、小さなクライアントコンポーネントでユーズサーチパラムスを使って読みます。
5:00パラムスは階層までのルートの値、サーチパラムスはアドレスの疑問符以降の条件、
5:04と置き場所が最初から分かれていると覚えてください。
5:08次回学ぶページのプロップスとの違いにもつながります。
5:11実務上の注意です。
5:12パラムスで受け取ったチーム名を画面に表示できたとしても、それはそのチームへのアクセス許可を意味しません。
5:20アドレスを書き換えれば、誰でも別のチーム名を開けてしまうためです。
5:24データを取得する側で、利用者がそのチームに所属しているか、権限があるかを必ず確認してください。
5:31確認のときは、アドレスを直接開く場合と、画面内のリンクから遷移する場合、
5:35値がない場合と不正な値の場合を分けて試します。
5:40型が文字列であることだけでは、防げない入力の問題があるためです。
5:44表示の仕組みと、守る仕組みは分けて設計する、という意識を持ってください。
5:49静的出力での扱いです。
5:51チルドレン自体は静的なサイトでも使えます。
5:54しかしチームのように値が変わる動的ルートでは、どのチームのページを生成するかを、
5:58このレイアウトだけでは決められません。
6:03静的出力では、ジェネレートスタティックパラムスで動的なチームの候補を生成対象として列挙する必要があります。
6:10候補にないアドレスは生成されないため、公開後にページが見つからない場合は、
6:14この列挙漏れも疑ってください。
6:18本番用に組み立てた状態と公開先でも、直接アドレスを開いて確認しておくことが大切です。
6:24開発サーバーで見えることと、静的出力で生成されることは別だという点も覚えておきましょう。
6:31まとめです。
6:32レイアウトのプロップスは二つです。
6:34チルドレンは内側のページが入る表示領域で、型はリアクトノード、配置し忘れるとページが見えなくなります。
6:42パラムスは、その階層までの動的パラメーターで、プロミス形式のためアウェイトして読みます。
6:48サーチパラムスはレイアウトでは受け取らず、ページ側で読みます。
6:53同じチーム配下に二ページを作り、共通部分とページ固有の部分がどこか説明できるようになれば、
6:57この回の目標は達成です。
7:02これでレイアウトのプロップスは完了です。
7:05お疲れさまでした。
7:06次回はページのプロップスを学びます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

layout.tsxのchildrenとparamsの役割を解説します。共有レイアウトが維持される仕組みと、searchParamsを受け取らない理由も学びます。

解説記事・サンプルコードを読む：Layoutのprops：childrenとparamsで共通画面を組み立てる →