Laravel PR

Laravelでページ毎にページtitleを変える4つの方法

記事内に商品プロモーションを含む場合があります

Laravelは非常に柔軟かつ強力なPHPフレームワークであり、ウェブアプリケーションの開発を効率的かつ容易にします。このフレームワークでは、ビューとコントローラを使用して、ページ毎に異なるタイトルを設定することが可能です。では、その具体的に4つの方法をご紹介します。

コントローラからビューへデータを渡す

ベースとなる構造

まず、LaravelのMVC(Model-View-Controller)アーキテクチャに基づく動作を理解することが基本となります。コントローラがデータ処理を担い、ビューがユーザーインターフェースを制御します。それでは、ページのタイトルを動的に変更する一般的なステップを見ていきましょう。

コントローラの作成と設定

コントローラを作成する場合、以下のコマンドを使用します。

php artisan make:controller PageController

 
次に、PageController内で各ページに渡すデータを定義します。ここではタイトルを動的に設定する方法を探ります。

例えば、

public function home()
{
    $title = 'Home Page';
    return view('home', compact('title'));
}

public function about()
{
    $title = 'About Us';
    return view('about', compact('title'));
}

 
上記のメソッドでは、それぞれのページ(homeとabout)に固有のタイトルを$title変数としてビューに渡しています。

ルーティングの定義

次に、routes/web.phpで各メソッドへのルートを定義します。

use App\Http\Controllers\PageController;

Route::get('/home', [PageController::class, 'home']);
Route::get('/about', [PageController::class, 'about']);

 
ここでは、各URLに対してコントローラ内の特定のメソッドが指定されています。

ビューの作成

次に、ビューを作成します。resources/viewsディレクトリ内にhome.blade.phpとabout.blade.phpを作成し、それぞれのページのHTMLを定義します。タイトルは動的に表示するため、以下のようにします。

<!-- resources/views/home.blade.php -->
<html>
<head>
    <title>{{ $title }}</title>
</head>
<body>
    <!-- Page content -->
</body>
</html>

 
{{ $title }}構文はBladeテンプレートエンジンが変数をエスケープして出力するシンタックスです。これにより、コントローラから渡された$title変数がページタイトルとして表示されます。

ページの拡張とレイアウトの使用

さらに効率的な設計のため、レイアウトビューを使用して、ページ毎のコンテンツを動的に読み込む構造を作ります。これによって、ヘッダーやフッターの共通部分を一元管理し、コンテンツのみを各ページビューで定義できます。

<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
    <title>{{ $title }}</title>
</head>
<body>
    <div class="content">
        @yield('content')
    </div>
    <!-- More layout... -->
</body>
</html>

 
各コンテンツページでは、このレイアウトを拡張し、contentセクションを上書きします。

<!-- resources/views/home.blade.php -->
@extends('layouts.app')

@section('content')
    <!-- Home page content -->
@endsection

 

ページタイトルなどのメタデータは、さまざまな手法で渡すことができますが、基本的な考え方としては、コントローラからビューへデータを渡し、それを表示する、という流れが一般的です。上記の説明は、シンプルながらも基本的な手法をカバーしており、さまざまなバリエーションや拡張が可能です。

この知識をもとに、もっと高度なことや、他のデータをビューに渡す方法、ビューコンポーザやビューサービスプロバイダを使ったグローバルなデータ共有のテクニックなど、さまざまなシチュエーションでのLaravelの応用が可能となります。

 
その他、ビューだけを使用してページごとにtitleを変更するための方法も複数存在します。以下にその手法を示します。

単一のビューでコンディショナルなタイトルを設定

もし、ルートの数が少なく、各ページでタイトルが単純に異なるだけであれば、ビュー内でURLをチェックして、それに基づいてタイトルを設定することができます。

以下はBladeテンプレート内で現在のURLに基づいてページタイトルを変更する基本的な例です。

<!-- resources/views/app.blade.php -->
<html>
<head>
    <title>
        @switch(request()->path())
            @case('home')
                Home Page
                @break
            @case('about')
                About Us
                @break
            @default
                My Website
        @endswitch
    </title>
</head>
<body>
    <!-- ... body contents ... -->
</body>
</html>

 
このコードでは、request()->path()を使って現在のURLパスを取得し、@switchディレクティブを使用してパスに基づいて異なるタイトルを出力します。

パーシャルビューと変数を使用

別のアプローチとして、headタグ(タイトルタグを含む)を別のビューファイルとして分け、各ビューで異なるタイトルを定義する方法もあります。

まず、head部分を分離してパーシャルビューとして保存しましょう。

<!-- resources/views/partials/head.blade.php -->
<head>
    <title>{{ $title ?? 'Default Title' }}</title>
    <!-- other head elements... -->
</head>

 
そして、各ページビューでタイトルを定義し、headパーシャルをインクルードします。

<!-- resources/views/home.blade.php -->
@php
    $title = 'Home Page';
@endphp

@include('partials.head')
<body>
    <!-- Home Page Content -->
</body>
</html>

<!-- resources/views/about.blade.php -->
@php
    $title = 'About Us';
@endphp

@include('partials.head')
<body>
    <!-- About Page Content -->
</body>
</html>

 
ここでは、各ビュー(home.blade.phpやabout.blade.php)でタイトルをPHP変数$titleとして定義し、head.blade.php内でその変数を出力しています。タイトルが定義されていない場合、デフォルトのタイトルを出力します。

スタックを使用

LaravelのBladeテンプレートエンジンはスタックを使って、親ビューに対してセクションの追加を許可しています。これを利用してタイトルを動的に変更することも可能です。

<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
    <title>@stack('title') | My Website</title>
</head>
<body>
    <div class="content">
        @yield('content')
    </div>
</body>
</html>

 
各ビューで、このスタックにプッシュしてタイトルを定義することができます。

<!-- resources/views/home.blade.php -->
@extends('layouts.app')

@push('title')
    Home Page
@endpush

@section('content')
    <!-- Home Page Content -->
@endsection

 
上記のいずれかの方法を選択し、プロジェクトのニーズに最も適したアプローチを使用してください。これらの手法は互いに排他的ではないので、状況や要件によっては複数の手法を組み合わせることも考慮に入れると良いでしょう。

 
 
※流用される場合は自己責任でお願いします。