レイアウトの共通化 — 継承とセクション

全ページで共通するヘッダーやフッターを1か所にまとめ、各ページは中身だけを書く「レイアウトの継承」を学びます。

Webサイトの多くのページは、ヘッダー・フッター・メニューなど同じ部分を共有しています。これを毎ページにコピペすると、修正のたびに全ページを直すことになり大変です。Blade では、共通部分を1か所のレイアウトにまとめ、各ページは「中身」だけを書けます。

問題：同じHTMLを何度も書きたくない

たとえば、どのページにも同じヘッダーとフッターがあるとします。ページごとに全部書くと、ヘッダーを少し変えたいだけで全ページを修正……これは現実的ではありません。

解決：土台（レイアウト）を1つ作る

まず、共通の枠組みを レイアウト として用意します。resources/views/layouts/app.blade.php を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
</head>
<body>
    <header>共通のヘッダー</header>

    <main>
        @yield('content')
    </main>

    <footer>共通のフッター</footer>
</body>
</html>

ポイントは @yield('title') と @yield('content') です。これは**「ここに、各ページの中身が入ります」という穴**だと思ってください。@yield('名前') で穴をあけ、後でページ側からその穴を埋めます。

各ページは「中身」だけ書く

次に、実際のページを作ります。resources/views/about.blade.php を見てみましょう。

@extends('layouts.app')

@section('title', 'このサイトについて')

@section('content')
    <h1>このサイトについて</h1>
    <p>ここに本文が入ります。</p>
@endsection

@extends('layouts.app') … 「layouts/app を土台として使います」という宣言。
@section('title', '...') … @yield('title') の穴を、この文字で埋める。
@section('content') … @endsection … @yield('content') の穴を、この中身で埋める。

これで、ヘッダーとフッターは共通のまま、ページごとに中身だけが切り替わります。ヘッダーを直したいときは layouts/app.blade.php の1か所を直すだけで、全ページに反映されます。

イメージ図

layouts/app.blade.php（土台）
┌─────────────────────────┐
│ 共通ヘッダー              │
│ ┌─────────────────────┐ │
│ │ @yield('content')   │ │ ← ここに各ページの中身が入る
│ └─────────────────────┘ │
│ 共通フッター              │
└─────────────────────────┘

まとめ

共通部分は レイアウト（例: layouts/app.blade.php）に1か所だけ書く。
レイアウト側は @yield('名前') で穴をあける。
各ページは @extends('layouts.app') で土台を指定し、@section('名前') … @endsection で穴を埋める。
修正は1か所でOK。コピペが減り、保守がぐっと楽になる。
次の単元では、ボタンや見出しなど小さな部品を再利用する「コンポーネント」を学びます。