Laravelでレイアウトを共通化する方法（layoutsディレクトリの活用）
生徒
「Laravelで複数のページを作るとき、毎回ヘッダーやフッターを同じように書くのは大変です。何か簡単に共通化できる方法はありますか？」
先生
「はい、あります。LaravelのBladeテンプレートにはレイアウトという仕組みがあって、よく使うページの枠組みをまとめて使い回せるんです。」
生徒
「レイアウトって具体的にどういうものですか？」
先生
「レイアウトは例えばヘッダー、フッター、メニューなどの共通部分を1つのファイルにまとめて、ページごとに変わる内容だけ差し込む仕組みです。これでコードの重複を減らせますよ。」
生徒
「実際にどうやって作るんですか？」
先生
「それでは、Laravelでのレイアウト共通化の方法をわかりやすく説明しますね！」
1. レイアウトとは？
レイアウトは、ウェブページで共通して使う部分（ヘッダー、フッター、メニューなど）を1つのファイルにまとめたものです。これにより、複数のページで同じ部分を毎回書く必要がなくなります。
たとえば、家の設計図のように、家の共通の骨組みを決めておいて、部屋の中の家具や飾りだけ変えるイメージです。
2. layoutsディレクトリの役割
Laravelのビュー（HTMLのテンプレート）は resources/views フォルダにあります。その中に layouts というフォルダを作り、レイアウト用のファイルを置くのが一般的です。
この layouts フォルダは、複数のページで共通して使うレイアウトテンプレートを管理する場所です。
3. レイアウトファイルの作り方
まずは resources/views/layouts/app.blade.php というファイルを作ります。ここに共通のHTML枠組みを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravelアプリ</title>
</head>
<body>
<header>
<h1>ここはヘッダーです</h1>
</header>
<main>
@yield('content')
</main>
<footer>
<p>ここはフッターです</p>
</footer>
</body>
</html>
ここで使っている @yield('content') は、「ここに各ページごとの中身を差し込んでね」という意味です。
4. ページごとにレイアウトを使う方法
例えば resources/views/home.blade.php というページを作る場合、次のように書きます。
@extends('layouts.app')
@section('content')
<h2>ホームページの内容</h2>
<p>ここにホームページの説明を書きます。</p>
@endsection
@extends('layouts.app') で先ほど作ったレイアウトを読み込み、 @section('content') の中身がレイアウトの @yield('content') に差し込まれます。
5. レイアウト共通化のメリット
レイアウトを共通化すると、ヘッダーやフッターを1か所で管理できるので、変更があってもすぐに全ページに反映されます。
また、ページごとのコードがスッキリして見やすくなり、作業効率がアップします。
6. ポイント整理
Laravelでレイアウトを共通化する基本はとてもシンプルです。resources/views/layouts に共通の枠となるレイアウトファイルを用意して、レイアウト側に @yield で「差し込み場所」を作り、各ページ側で @extends と @section を使って中身を入れます。
初心者は「毎回書くヘッダーやフッターはレイアウトへ、ページごとに変わる本文だけを各ページへ」と覚えると迷いにくいです。これだけでHTMLの重複が減り、修正も一か所で済むようになります。
たとえば、次のようにページ側に本文だけを書けば、レイアウトの @yield('content') に自動で合体します。
@extends('layouts.app')
@section('content')
<h2>はじめてのページ</h2>
<p>本文だけを書けば、ヘッダーとフッターは自動で付きます。</p>
@endsection
この仕組みを使うと、ページ数が増えても構造が崩れにくく、Laravelのビュー管理がぐっと楽になります。まずは1つだけページを作って、差し込みが動く流れを体感してみてくださいね。
まとめ
Laravelでレイアウトを共通化する考え方の振り返り
ここまで、Laravelでレイアウトを共通化する方法について、layoutsディレクトリの役割やBladeテンプレートの基本構文を中心に学んできました。LaravelでWebアプリケーションを開発していくと、ページ数が増えるにつれて、ヘッダーやフッター、ナビゲーションメニューなどの共通部分を何度も書く必要が出てきます。このような状態が続くと、コードの修正漏れや管理の手間が増え、保守性が下がってしまいます。
そこで役立つのが、LaravelのBladeテンプレート機能を活用したレイアウトの共通化です。layoutsディレクトリに共通レイアウト用のファイルを用意し、各ページからそれを読み込むことで、Webサイト全体の構造を一元管理できるようになります。これにより、デザインや構成を変更したい場合でも、レイアウトファイルを修正するだけで全ページに反映できるため、作業効率が大幅に向上します。
Bladeテンプレートの基本構文の重要性
レイアウト共通化の中心となるのが、@extends、@yield、@section といったBlade独自のディレクティブです。@yield はレイアウト側で「差し込み口」を定義し、@section は各ページ側でその中身を指定します。この仕組みを理解することで、Laravelのビュー構成が一気に分かりやすくなります。
初心者のうちは、HTMLとBladeの書き方が混ざって戸惑うこともありますが、役割を意識すると理解しやすくなります。レイアウトファイルはページ全体の枠組みを担当し、個別ページは内容だけを書く、という考え方を身につけることが大切です。
実務を意識したレイアウト共通化のサンプル
ここで、実際のWebサイト制作をイメージした、少し実務寄りのレイアウト例を見てみましょう。ナビゲーションメニューを含んだレイアウトのサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>共通レイアウト</title>
</head>
<body>
<header>
<nav>
<ul>
<li>ホーム</li>
<li>サービス</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>
<main>
@yield('content')
</main>
<footer>
<p>© サンプルサイト</p>
</footer>
</body>
</html>
このようなレイアウトを用意しておけば、ページごとにナビゲーションやフッターを書く必要がなくなり、コンテンツ部分の作成に集中できます。Laravelでの開発に慣れてくると、このレイアウト共通化は欠かせないテクニックになるでしょう。
生徒
「レイアウトを共通化すると、ページを増やしても管理が楽になる理由がよく分かりました。」
先生
「その通りです。Laravelでは、最初にレイアウトをしっかり作っておくことで、後の作業がとてもスムーズになります。」
生徒
「@yieldと@sectionの関係も、差し込み口と中身だと考えると理解しやすいですね。」
先生
「良い視点ですね。その考え方が身につけば、Bladeテンプレート全体が読みやすくなります。」
生徒
「これからは、ページを作る前にレイアウト設計を意識してみます。」
先生
「ぜひ実践してみてください。LaravelでのWeb開発が、もっと楽しく、効率的になりますよ。」
