【Laravel】フッターやヘッダーを共通パーツ化する方法

【Laravel】フッターやヘッダーを共通パーツ化する方法 Laravel

Laravelでは、ヘッダーやフッターを共通パーツ化することで、サイト全体の保守性・拡張性を大幅に向上させることができます。この記事では、具体的な手順とコード例を交えながら、わかりやすく解説します。

共通レイアウトファイルを作成する

まず、共通で使用するレイアウトファイルを作成します。
resources/views/layouts フォルダに、app.blade.php というファイルを作成しましょう。

<!-- resources/views/layouts/app.blade.php -->

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>@yield('title', 'デフォルトタイトル')</title>
</head>
<body>

  <!-- ヘッダー読み込み -->
  @include('partials.header')

  <!-- メインコンテンツ -->
  <main>
    @yield('content')
  </main>

  <!-- フッター読み込み -->
  @include('partials.footer')

</body>
</html>

ここでは、@include ディレクティブを使って、別ファイルとして分割したヘッダー・フッターを読み込んでいます。
また、@yield(‘title’) と @yield(‘content’) を使用して、各ページごとに動的な内容を差し込めるようにしています。

ヘッダーとフッターのパーツファイルを作成する

次に、ヘッダーとフッターのパーツファイルをそれぞれ作成します。
resources/views/partials フォルダに、以下のファイルを作成しましょう。

ヘッダーファイル

<!-- resources/views/partials/header.blade.php -->
<header>
  <h1>サイトのヘッダー</h1>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
    </ul>
  </nav>
</header>

フッターファイル

<!-- resources/views/partials/footer.blade.php -->
<footer>
  <p>© 2025 サイト名 All rights reserved.</p>
</footer>

このように共通部分をパーツ化しておくことで、デザイン変更があった場合も、1箇所修正するだけで全ページに反映されるようになります。

各ページで共通レイアウトを使用する

個別のページファイルでは、共通レイアウトを継承して、中身だけを差し込むようにします。
例えば、トップページ用に resources/views/home.blade.php を作成すると、次のようになります。

<!-- resources/views/home.blade.php -->

@extends('layouts.app')

@section('title', 'ホームページ')

@section('content')
  <h2>ようこそ!</h2>
  <p>ここがホームページです。</p>
@endsection

@extends(‘layouts.app’) で共通レイアウトを指定し、@section(‘title’) と @section(‘content’) で、それぞれタイトルと本文コンテンツを定義しています。

まとめ

Laravelでは、Bladeテンプレートエンジンを活用して、簡単にヘッダーやフッターを共通化することができます。
サイト全体の統一感を保ちつつ、効率よく管理できるようになるので、ぜひ積極的に取り入れていきましょう。