前回との接続と、この講義の役割
前回のI-07では、画面の描画そのものではなく、外部システムとの同期を担うEffectを学びました。ここまでで、部品・データ・操作・同期という、画面を動かす道具がひととおりそろっています。今回は視点を少し上げて、複数の画面をどうつなぐか、どのURLでどの画面を出すかという、アプリ全体の骨組みを扱います。H章で設計した画面の地図を、実際のアプリの構造へ落とし込む回です。
このスライドのポイント
- I-07: 描画そのものではなく外部システムとの同期を担うEffectを学んだ
- ここまでで、部品・データ・操作・同期という画面を動かす道具がそろった
- 今回は視点を上げ、複数の画面をどうつなぐか、どのURLでどの画面を出すかという全体の骨組みを扱う
ルーティング・Next.js・レイアウトの定義
ルーティングとは、URL、つまりD-02で学んだパスと、どの画面を表示するかの対応規則のことです。Next.jsは、Reactでアプリを作るためのフレームワークで、本講座の参照スタックです。その特徴は、B-04で学んだフォルダ構成が、そのままURLの構造に対応することです。あるフォルダを作ると、それに対応するURLの画面ができあがります。レイアウトとは、複数のページで共通する外枠、たとえばヘッダーやメニューを、1箇所でまとめて定義する仕組みを指します。
このスライドのポイント
- ルーティング＝URL（D-02のパス）と、どの画面を表示するかの対応規則
- Next.js＝Reactでアプリを作るためのフレームワーク（参照スタック）
- 特徴: フォルダ構成（B-04）が、そのままURL構造に対応する
- レイアウト＝複数ページで共通する外枠（ヘッダー・メニュー）を1箇所で定義する仕組み
- 記法の細部はバージョンで変わりうるため、正確な書き方は公式ドキュメントで確認する
なぜ必要か
この仕組みを知らないと、なぜこのURLでこの画面が出るのかが読めず、AIが生成した構造を評価できません。また、H-03で設計した画面遷移を、実装へ落とし込む道筋が見えなくなります。さらに、共通のヘッダーを全ページに1つずつコピーしているような冗長な構造を、AIが作っても見抜けません。URLと画面、そして共通部分の扱いを理解しておくことが、アプリ全体の骨組みを正しく指示する土台になります。
このスライドのポイント
- 知らないと: なぜこのURLでこの画面が出るのかが読めず、AI生成の構造を評価できない
- H-03で設計した画面遷移を、実装へ落とし込む道筋が見えない
- 共通ヘッダーを全ページにコピーする冗長な構造を、AIが作っても見抜けない
構造（フォルダ・URL・レイアウトの関係）
構造を図で押さえます。左側にフォルダのツリーがあり、右側にそれぞれが対応するURLが並びます。フォルダを深く掘るほど、URLも深くなる、という素直な対応です。そしてレイアウトは、その下にあるページ全体を包む外枠として働きます。ヘッダーやメニューをレイアウトに1度書けば、その下のどのページを開いても同じ外枠が表示されます。ページごとに変わる中身と、共通で変わらない外枠を、この入れ子の関係で分けて考えます。
このスライドのポイント
- 左にフォルダのツリー、右に対応するURL。フォルダを深く掘るほどURLも深くなる
- レイアウトは、その下にあるページ全体を包む外枠として働く
- ヘッダーやメニューをレイアウトに1度書けば、下のどのページでも同じ外枠が表示される
- 変わる中身（ページ）と、変わらない外枠（レイアウト）を入れ子の関係で分ける
処理の流れ・具体例
具体例で見ます。H-03で描いた、一覧から新規作成、確認へと進む画面遷移図を思い出してください。この遷移図が、ほとんどそのままフォルダの構成になります。一覧の画面はexpensesフォルダ、新規作成の画面はその下のnewフォルダ、という形で対応します。設計図の箱の1つが、フォルダの1つに対応するわけです。現代のフレームワークの利点は、こうして設計から実装への翻訳が機械的にできる点にあります。頭の中の画面の地図を、そのままフォルダの地図へ写し取れます。
このスライドのポイント
- H-03の遷移図（一覧→新規→確認）が、ほとんどそのままフォルダ構成になる
- 一覧の画面はexpensesフォルダ、新規作成の画面はその下のnewフォルダ
- 設計図の箱の1つが、フォルダの1つに対応する
- 現代フレームワークの利点: 設計から実装への翻訳が機械的にできる
技術サンプルカード（フォルダ⇄URLの対応）
サンプルは、フォルダ構成とURLの対応を示した図です。目的は、どのフォルダがどのURLになり、レイアウトがどこまでを包むのかを、一目で確認することです。図を読むと、expensesフォルダがスラッシュexpensesというURLに、その下のnewフォルダがスラッシュexpensesスラッシュnewというURLに対応しているのがわかります。いちばん上のlayoutが、その下の全ページを共通の外枠で包んでいます。フォルダを掘ることと、URLが深くなることが一致している点が読みどころです。AIには「この遷移図を実現するフォルダ構成を提案してください」と頼めます。
混同しやすい概念（ページとレイアウト）
混同しやすいのは、ページとレイアウトの違いです。ページは、URLごとに変わる中身のことです。レイアウトは、複数のページで共通する外枠のことです。もしAIが生成したコードで、同じヘッダーが各ページに1つずつ書き込まれていたら、それはレイアウトにまとめるべきサインです。中身は変わり、外枠は変わらない、という役割の違いで見分けてください。
このスライドのポイント
- ページ＝URLごとに変わる中身
- レイアウト＝複数ページで共通する外枠
- 同じヘッダーが各ページに1つずつ書き込まれていたら、レイアウト化のサイン
- 見分け方: 中身は変わり、外枠は変わらない
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIに画面の追加を頼むときは、「そのURLはどうなりますか。どのレイアウトの下に置きますか」を必ず確認してください。この2つを一緒に伝えるために、H-03で描いた画面遷移図と、URLの設計をセットにしてAIへ渡すとよいです。URLの構造は、後から変えると影響が広いため、追加のたびに位置づけを確かめる習慣をつけましょう。
このスライドのポイント
- AIに画面追加を頼むときは「そのURLはどうなりますか。どのレイアウトの下に置きますか」を確認
- H-03の遷移図とURL設計をセットにしてAIへ渡す
- URL構造は後から変えると影響が広い。追加のたびに位置づけを確かめる
一問一答・まとめ・次回へ
最後に一問一答です。Next.jsでURLの構造を決めているものは何でしょうか。（間）答えは、フォルダの構成です。フォルダを作り、掘り下げることが、そのままURLの形になります。30秒でまとめます。ルーティングはURLと画面の対応規則、レイアウトは共通の外枠を1箇所で定義する仕組みで、Next.jsではフォルダ構成がURLを決めます。次回は、サーバーで動く部品とブラウザで動く部品の境界を扱います。関連資料は「Webアプリ構築 完全ワークフロー」と「Vercel公開 完全手順書」です。
このスライドのポイント
- 一問一答:「Next.jsでURL構造を決めるのは何？」→答: フォルダ構成
- 30秒まとめ: ルーティング＝URLと画面の対応規則、レイアウト＝共通の外枠を1箇所で定義、Next.jsではフォルダ構成がURLを決める
- 次回: サーバーで動く部品とブラウザで動く部品の境界へ
- 関連資料: 「Webアプリ構築 完全ワークフロー」「Vercel公開 完全手順書」
