レイアウト ― 共通の枠を1か所にまとめる

導入

ヘッダー・サイドメニュー・フッターは、どのページでも同じ。毎ページ書くのは無駄で、直すのも大変です。Blazorのレイアウトを使えば、共通の枠を1つのコンポーネントにまとめ、各ページはその「中身」だけを担当できます。

説明

LayoutComponentBaseを継承したコンポーネントを作り、@Bodyにページの中身を差し込みます。

@* --- MainLayout.razor --- *@
@inherits LayoutComponentBase

<div class="page">
    <NavMenu />                @* サイドメニュー *@
    <main>
        @Body                  @* 各ページの中身がここに入る *@
    </main>
</div>

各ページは@layoutで使うレイアウトを指定します（アプリ全体の既定はApp.razor／Routes.razorで指定）。

@page "/about"
@layout MainLayout

<h1>このサイトについて</h1>

flowchart TB
    L["MainLayout（共通の枠）"] --> N["NavMenu（メニュー）"]
    L --> B["@Body（ページの中身）"]
    B --> P1["Home"]
    B --> P2["Counter"]

• レイアウトは@inherits LayoutComponentBase＋@Bodyで「中身の差し込み口」を作る
• ページ側は@layout MainLayoutで使うレイアウトを指定（既定は全体設定でまとめて）
• レイアウトは入れ子にできる（全体の枠→セクションごとの枠）
• 共通部分の変更が1か所で済む＝保守が楽

まとめ

• 共通の枠はレイアウト（LayoutComponentBase＋@Body）にまとめる
• ページは@layoutで使う枠を選ぶ
• ヘッダー・メニューなどの重複がなくなり、変更も1か所

次回: 第5章。ユーザー入力を扱うフォームと検証に進みます。