Laravel Bladeテンプレートの使い方と実践的なTips

こんにちは！

今回はLaravelのBladeテンプレートについて解説していきたいと思います。

Bladeテンプレートは、Laravelが持つ強力なテンプレートエンジンです。
Bladeテンプレートを使うことで、より効率的に保守性の高いコードでビューを作ることができます。
また、最近ではコンポーネントの概念が導入され、コンポーネントの再利用によってより効率的に開発が行えるようになりました。

このような理由のため、LaravelではBladeテンプレートを使うことがほとんど必須となっています。Laravel学習者は必須で学んでおきましょう。

読者

「LaravelのBladeテンプレートの使い方は？」

「LaravelのBladeテンプレートについて、実務で使われるところだけサクッと教えてほしい」

このようにお考えの方は参考になる内容かと思います。

本記事では、Bladeテンプレートの基本的な使い方から実践的なTipsなどをご紹介していきます。

それでは、みていきましょう！

Bladeテンプレートの基本
Bladeテンプレートの実践的なTips
- コードの可読性向上のためのテクニック
まとめ
参考

Bladeテンプレートの基本

Bladeテンプレートの作成方法

LaravelのBladeテンプレートは「resources/views」ディレクトリに配置されます。Bladeテンプレートというのは、画面の見た目を作るためのファイルのことです。また、Bladeテンプレートの拡張子は「.blade.php」となります。

そのため、Bladeテンプレートを作成する場合は、以下のように作成します。

$ touch resources/views/sample.blade.php

作成したBladeテンプレートをお好みのエディタで開き、以下のように編集します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>This is a Blade template file.</p>
</body>
</html>

これで画面を作ることができます。ただし、これだと普通のHTMLファイルでBladeテンプレートの良さが出ていません。

Bladeテンプレートでは、PHPの変数を使って動的にコンテンツを生成することができます。一例としては、以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
</head>
<body>
    <h1>Welcome, {{ $username }}!</h1>
    <p>Your email address is: {{ $email }}</p>
</body>
</html>

Bladeテンプレートでは、このように{{ 変数名 }}という形で変数を埋め込むことができるようになっています。覚えなくても良いですが、この書き方はマスタッシュ構文と呼ばれています。

上記の例では、ユーザー名とメールアドレスを変数化して利用しているユーザーに応じて表示を動的に変えています。

少し発展的な説明を加えると、このマスタッシュ構文を使うことでXSS（クロスサイトスクリプティング）という攻撃を自動的に防いでおり、セキュリティの対策もできています。

ディレクティブの基本

ディレクティブというのは、Bladeテンプレート内でPHPの構文を使うための特別な構文のことを言います。以下に、基本的なディレクティブをご紹介します。

@ifディレクティブ

@ifディレクティブを使うことで、Bladeテンプレート内でPHPのif文を使うことができます。

@if($age >= 18)
    <p>You are an adult.</p>
@elseif($age >= 13)
    <p>You are a teenager.</p>
@else
    <p>You are a child.</p>
@endif

@foreachディレクティブ

@foreachディレクティブも同様に、Bladeテンプレート内でPHPのforeach文を使うことができます。

@foreach($users as $user)
    <p>{{ $user->name }}</p>
@endforeach

@switchディレクティブ

@swtichディレクティブも同様に、Bladeテンプレート内でPHPのswitch文を使うことができます。

@switch($role)
    @case('admin')
        <p>You are an admin.</p>
        @break

    @case('user')
        <p>You are a regular user.</p>
        @break

    @default
        <p>Your role is undefined.</p>
@endswitch

レイアウトの構築方法

レイアウト構築の方法は、実は2種類あります。

継承レイアウト・・・レイアウト専用のBladeテンプレートを用意し、各ページで変更する箇所だけ各ページのBladeファイルで記述する
コンポーネント・・・レイアウトコンポーネントを作成し、各ページでレイアウトコンポーネントを読み込む

継承レイアウトは古くから使われているレイアウトの構築方法で、コンポーネントは最近になって導入されたレイアウト構築方法です。

コンポーネントについては後ほど解説しますが、レイアウトの構築に関しては継承レイアウトの方を説明していきます。

共通レイアウトの作成

最初に、共通レイアウト用のBladeテンプレートを作成します。

$ touch resources/views/layouts/app.blade.php

共通レイアウトは以下のように編集します。

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <!-- ヘッダーのコンテンツ -->
    </header>

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

    <footer>
        <!-- フッターのコンテンツ -->
    </footer>
</body>
</html>

@yieldディレクティブを使うことで、動的なコンテンツが挿入される場所を指定することができます。
各ページはこの共通レイアウトを継承することになりますが、@yieldディレクティブを使っている箇所のコンテンツは下層ページで作成していきます。

サブビューの作成

次に、共通レイアウトを拡張するBladeテンプレート（サブビュー）を作成します。

$ touch resources/views/sample.blade.php

Bladeテンプレートを編集します。

<!-- views/sample.blade.php -->

@extends('layouts.app')

@section('title', 'Welcome')

@section('content')
    <h1>Welcome to my website!</h1>
    <p>This is the home page.</p>
@endsection

@extendsディレクティブで継承元の共通レイアウト名を指定します。

また、共通レイアウトの方で@yieldディレクティブを指定していた箇所には、サブビューでは@sectionディレクティブでコンテンツを挿入します。
@sectionディレクティブの第一引数には、@yieldディレクティブで指定した名前を入れます。
挿入されるコンテンツは第二引数に入れるか、@sectionディレクティブで囲むことでコンテンツを作成します。

共通レイアウトを作成することで、同じレイアウトのページを1ページ1ページ作成する必要がなくなり、開発効率が高まる＆一貫性のあるデザインになります。

コンポーネントの作成と利用方法

コンポーネントを利用することで、ビューをモジュール性が高く再利用しやすいコンポーネントとして扱うことができます。以下に具体的な作成方法などを説明していきます。

コンポーネントの作成

以下のコマンドからコンポーネントを作成することができます。

$ php artisan make:component Header

コマンドを実行すると、「app/View/Components」ディレクトリにコンポーネントクラスが作成され、「resources/views/components」ディレクトリにBladeテンプレートを作成することができます。

基本的には作成されたコンポーネントを編集し、コンポーネントを使いたいところで呼び出す、といった形になります。

コンポーネントファイルを編集してみましょう。

<!-- resources/views/components/header.blade.php -->

<header>
    <h1>{{ $title }}</h1>
</header>

このコンポーネントを呼び出したい場合は、以下のように書きます。

<!-- views/welcome.blade.php -->

<x-header title="Welcome to my website!" />

タグ名は「x-コンポーネント名」となります。

データの受け渡し

データの受け渡しは、呼び出し側で変数を渡し、コンポーネント側で受け取った変数を表示できます。
また、データを渡す際にPHPの変数や式を渡す場合は以下のようになります。

<!-- views/welcome.blade.php -->

<x-header title="Welcome to my website!" :message="$message" />

ただし、コンポーネントが持つデータはコンポーネントクラスで定義する必要があります。

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Header extends Component
{
    public $title
    public $message
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($title, $message)
    {
        $this->title = $title;
        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.header');
    }
}

スロット

スロットを使えば、コンポーネントに動的なコンテンツを挿入することもできます。

例えば、コンポーネント側を以下のように編集します。

<!-- resources/views/components/card.blade.php -->

<div class="card">
    <div class="card-header">
        {{ $title }}
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

コンポーネントを呼び出す側は以下のようにします。

<!-- views/welcome.blade.php -->

<x-card title="Welcome Message">
    <p>Welcome to my website! This is the home page.</p>
</x-card>

コンポーネント内に書かれているコンテンツはコンポーネント側の$slotに挿入されることになります。

コンポーネントメソッド

コンポーネントはプロパティだけではなく、メソッドを持つこともできます。
コンポーネントクラスで以下のように定義します。

/**
 * 指定したオプションが現在選択されているオプションであるか判別
 *
 * @param  string  $option
 * @return bool
 */
public function isSelected($option)
{
    return $option === $this->selected;
}

コンポーネント側で以下のように利用することができます。

<option {{ $isSelected($value) ? 'selected' : '' }} value="{{ $value }}">
    {{ $label }}
</option>

フォームの作成方法

最初にBladeテンプレートを使ったフォームのサンプルコードを載せておきます。

{{-- フォームの開始 --}}
<form action="/submit" method="POST">
    {{-- CSRFトークン --}}
    @csrf
    
    {{-- バリデーションエラーメッセージ --}}
    @error('username')
        <div class="error">{{ $message }}</div>
    @enderror

    {{-- フォームのコンテンツ --}}
    {{-- テキスト入力フィールド --}}
    <input type="text" name="username" value="{{ old('username') }}">
    
    {{-- テキストエリア --}}
    <textarea name="content">{{ old('content') }}</textarea>
    
    {{-- ドロップダウンリスト --}}
    <select name="category">
        <option value="1">Category 1</option>
        <option value="2">Category 2</option>
        <!-- 他のオプションをここに追加 -->
    </select>

    {{-- フォームの送信ボタン --}}
    <button type="submit">Submit</button>
</form>

Laravelの場合、クロスサイトリクエストフォージェリという攻撃を防ぐためにCSRFトークンを一緒にリクエストとして送信します。
CSRFトークンを送信するためには、以下のように@csrfディレクティブを使えばOKです。

{{-- CSRFトークン --}}
@csrf

また、oldヘルパーを使うことで、バリデーションエラーになった際にもフォームの値を保持することができます。
例えば、エラーになった際にフォームが空になってしまうと、ユーザーからするとまた入力するのは面倒ですよね。
oldヘルパーを使うことで、このようなことを防ぐことができます。

<input type="text" name="username" value="{{ old('username') }}">

@errorディレクティブを使うことで、指定したname属性のフォームにエラーがあるかどうかを簡単に判別することができます。

{{-- バリデーションエラーメッセージ --}}
@error('username')
    <div class="error">{{ $message }}</div>
@enderror

エラーがある場合は、$messageからエラーメッセージを取り出すことができます。

Bladeテンプレートの実践的なTips

さて、ここからはBladeテンプレートをより実践的に活用するためのTipsをご紹介していきます。

コードの可読性向上のためのテクニック

コードの可読性というのは、コードが読みやすく理解しやすいということです。ここでご紹介するのは、Bladeに限らず一般的に良いとされるコードを書く上でのテクニックです。

コメントの活用

複雑なBladeテンプレートを構築するような場合は、コメントを積極的に使ってコードを読みやすくしていきましょう。

以下は、一例です。

{{-- ユーザーが管理者かどうかをチェック --}}
@if(Auth::user()->isAdmin())
    {{-- 管理者向けの特別なコンテンツを表示 --}}
    <div class="admin-panel">
        <!-- 管理者用のメニューなどをここに配置 -->
    </div>
@endif

説明変数の活用

説明変数というのは、変数名がその変数自体の説明になっている変数のことです。一言で言うと、誰がみてもわかりやすい変数名にしましょう、ということです。

極端な例ですが、以下の変数名は非常にわかりにくいです。

<body>
    <h1>Welcome, {{ $u }}</h1>
    <p>Your email is: {{ $e }}</p>
</body>

以下の変数名は、誰がみても誤解がなくわかりやすいです。

<body>
    <h1>Welcome, {{ $username }}</h1>
    <p>Your email is: {{ $email }}</p>
</body>

インデントと整形

コードを読みやすくするために、インデントを活用しましょう。

{{-- ネストされた条件分岐の例 --}}
@if($condition1)
    @if($condition2)
        {{-- 条件1と条件2が両方成立する場合の処理 --}}
        <p>Condition 1 and Condition 2 are both true.</p>
    @else
        {{-- 条件1は成立するが条件2は成立しない場合の処理 --}}
        <p>Condition 1 is true but Condition 2 is false.</p>
    @endif
@else
    {{-- 条件1が成立しない場合の処理 --}}
    <p>Condition 1 is false.</p>
@endif