Laravelのテンプレート継承の使い方（@extends, @section, @yield）
生徒
「Laravelで同じデザインのページを何度も作るとき、毎回同じHTMLを書かない方法はありますか？」
先生
「ありますよ。LaravelのBladeテンプレートには『テンプレート継承』という仕組みがあり、基本のレイアウトを作っておいて、ページごとの内容だけを差し替えられます。」
生徒
「具体的にはどうやって使うんですか？」
先生
「主に3つのディレクティブを使います。@extendsで親テンプレートを指定し、@sectionで内容を定義、そして親テンプレートの@yieldが子テンプレートの内容を受け取る仕組みです。」
生徒
「それぞれの使い方を詳しく教えてください！」
先生
「では順番に説明しますね。」
1. テンプレート継承とは？
テンプレート継承とは、Webサイトの共通部分（ヘッダーやフッターなど）を「親テンプレート」にまとめ、ページごとに異なる内容だけを「子テンプレート」で差し替える仕組みです。これにより、重複したHTMLを書く手間が省け、修正も簡単になります。
例えば、新聞や雑誌の「レイアウト枠」は同じで、記事だけ違うようなイメージです。
2. @extendsとは？親テンプレートを指定する
@extendsは、子テンプレートの一番最初に書いて、どの親テンプレートを使うか指定します。
@extends('layouts.app')
上記は、resources/views/layouts/app.blade.phpという親テンプレートを使うという意味です。
3. @sectionとは？親テンプレートの中身を差し替える部分を作る
@sectionは、親テンプレートの指定した場所に差し込む内容を定義するために使います。
@section('title', 'トップページ')
@section('content')
<h1>ようこそ！</h1>
<p>これはトップページです。</p>
@endsection
上の例では、titleとcontentという名前の場所に内容を入れています。
4. @yieldとは？親テンプレートの差し込み場所を決める
@yieldは、親テンプレートの中で子テンプレートの内容が入る場所を決めるディレクティブです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>@yield('title') - Laravelサイト</title>
</head>
<body>
<header>
<h1>サイトのヘッダー</h1>
</header>
<main>
@yield('content')
</main>
<footer>
<p>サイトのフッター</p>
</footer>
</body>
</html>
親テンプレートの@yield('title')や@yield('content')の部分に子テンプレートの@sectionで書いた内容が入ります。
5. 具体的な親テンプレートと子テンプレートの例
まず、親テンプレート（layouts/app.blade.php）はこんな感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>@yield('title') - Laravelサイト</title>
</head>
<body>
<header>
<h1>共通ヘッダー</h1>
</header>
<main>
@yield('content')
</main>
<footer>
<p>共通フッター</p>
</footer>
</body>
</html>
次に子テンプレート（例えばhome.blade.php）はこう書きます。
@extends('layouts.app')
@section('title', 'ホーム')
@section('content')
<h2>ホームページへようこそ！</h2>
<p>ここがホームのコンテンツです。</p>
@endsection
このようにすると、ホームページのタイトルと本文だけが変わり、ヘッダーやフッターは親テンプレートのまま表示されます。
6. @sectionの短縮形も使える
タイトルのように一行だけの内容は、@section('title', 'ホーム')のようにカンマの後に直接書けます。長い内容は@section('content')～@endsectionで囲みます。
まとめ
LaravelのBladeテンプレート継承は、開発を進めていくうえで欠かせない重要な仕組みです。
特に、多数のページを作成するプロジェクトや、共通デザインを持つサイトでは、
この仕組みをうまく活用することで作業効率が大きく向上します。
今回の記事で取り上げた@extends・@section・@yieldの３つは、
それぞれが役割をしっかり持っていて、組み合わせることで柔軟かつ一貫性のあるレイアウトを実現できます。
親テンプレートにはヘッダー・フッター・共通レイアウトといった全ページに共通する部分をまとめて配置し、 子テンプレートではページ固有のコンテンツだけを書けるため、コードの重複が大幅に減ります。 また、複数人で開発するケースでも「どこを編集すればよいか」が明確になるため、 チーム全体の効率も自然と高まります。
よくある例として、「全ページのタイトルフォントを変えたい」「共通ヘッダーに新しいリンクを追加したい」 という場面がありますが、テンプレート継承を使っていれば、親テンプレート１か所を変更するだけで すべてのページに反映されます。これは実務において非常に便利で、保守性・拡張性の面でも大きな強みになります。
以下に今回の内容を踏まえて作成した、少し応用的なテンプレート例をまとめておきます。 Bladeテンプレート継承の全体像がよりつかみやすくなるはずです。
■ 親テンプレート（layouts/base.blade.php）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>@yield('title') ｜ サンプルサイト</title>
</head>
<body>
<header>
<h1>共通ヘッダー</h1>
</header>
<nav>
<ul>
<li><a href="/home">ホーム</a></li>
<li><a href="/about">概要</a></li>
<li><a href="/contact">問い合わせ</a></li>
</ul>
</nav>
<main>
@yield('content')
</main>
<footer>
<p>© 2025 Sample Laravel Site</p>
</footer>
</body>
</html>
■ 子テンプレート（pages/about.blade.php）
@extends('layouts.base')
@section('title', 'このサイトについて')
@section('content')
<h2>このサイトについて</h2>
<p>このページでは、サンプルサイトの目的や機能について紹介しています。</p>
@endsection
上記のように、親テンプレートに共通部分を集約し、子テンプレートでは必要な内容だけを差し替えることで、 Laravel特有の見通しの良い設計が実現できます。ページ追加もスムーズで、 コードの整理整頓が自然とできるようになります。 特にページ数が増えるプロジェクトほど、このテンプレート設計が威力を発揮します。
また、テンプレート継承は@yieldで柔軟に差し込み位置を管理できるため、
「特定ページだけスクリプトを追加したい」「ページ固有のスタイルを読み込みたい」
といったケースにも適しています。親テンプレート側に@yield('scripts')や
@yield('styles')を定義しておき、必要な子テンプレートだけ@sectionで書き足す、という運用方法もよく使われます。
生徒
「テンプレート継承のおかげで、ページ作成がかなり楽になることがわかりました！」
先生
「そうですね。LaravelのBladeはとても柔軟で、日本語のサイト作りにも向いていますよ。」
生徒
「@extends と @section と @yield がどう連携するのか、今回の例でようやく理解できました！」
先生
「それは良かったです。テンプレート継承を使いこなすと、Laravelの開発効率が一気に上がります。」
生徒
「レイアウト統一がこんなにスムーズにできるとは思っていませんでした。次はもっと複雑な継承にも挑戦してみたいです！」
先生
「ぜひやってみてください。Bladeは拡張性が高いので、どんどん応用していけますよ。」
