MENU
  1. ホーム
  2. PHP
  3. Laravel
  4. Bladeテンプレート

Bladeテンプレート

Laravel
2024.08.12
記事の内容

概要

Bladeは、Laravelに含まれているシンプルでありながら強力なテンプレートエンジンです。

拡張子

.blade.php拡張子のファイルにHTMLとBlade独自の構文を組み合わせて記述します。
※テンプレートの継承、データ表示、条件分岐などをシンプルに行うことが可能

データ表示(エスケープあり)

変数を中括弧で囲むことにより、Bladeビューに渡すデータを表示できます。

【ファイル先】resources/views/sample.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'デフォルトタイトル' }}</title>
</head>
<body>
    <header>
        <h1>{{ $heading }}</h1>
    </header>

    <main>
        <p>{{ $content }}</p>
    </main>

    <footer>
        <p>著作権 © {{ date('Y') }}</p>
    </footer>
</body>
</html>

{{ }}エコー文は、XSS攻撃を防ぐために、PHPのhtmlspecialchars関数を通して自動的に送信

データ表示(エスケープなし)

変数を中括弧で囲むことにより、Bladeビューに渡すデータを表示できます。

【ファイル先】resources/views/blog/post.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $post->title }}</title>
</head>
<body>
    <article>
        <header>
            <h1>{{ $post->title }}</h1>
            <p>投稿日: {{ $post->created_at->format('Y年m月d日') }}</p>
        </header>

        <section>
            <!-- サニタイズ済みのHTMLコンテンツを安全に表示 -->
            {!! $sanitizedContent !!}
        </section>

        <footer>
            <p>著者: {{ $post->author->name }}</p>
        </footer>
    </article>
</body>
</html>

親子関係

yield

親テンプレートで使用され、子テンプレートから提供されたコンテンツを挿入する場所を指定します。

【ファイル先】resources/views/layouts/master.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- ここに子テンプレートのコンテンツが挿入される -->
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <!-- 共通のヘッダー -->
    </header>

    <main>
        <!-- ここに子テンプレートのコンテンツが挿入される -->
        @yield('content')
    </main>

    <footer>
        <!-- 共通のフッター -->
    </footer>
</body>
</html>

section

子テンプレートで使用され、親テンプレートの@yieldディレクティブに対応するセクションを定義します。

【ファイル先】resources/views/pages/home.blade.php

@extends('layouts.master')

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

@section('content')
    <h1>ホームページへようこそ！</h1>
    <p>ここがメインのコンテンツです。</p>
@endsection

再利用(インクルード)

別のBladeビュー（部分ビュー）を現在のビューに挿入するために使用されます。
※ヘッダー、フッター、ナビゲーションバーなどを簡単に再利用が可能

無条件

include

指定した部分ビューを無条件でインクルードします。

再利用元のファイル

【ファイル先】resources/views/partials/header.blade.php

<header>
    <h1>ウェブサイトのタイトル</h1>
    <nav>
        <ul>
            <li><a href="/">ホーム</a></li>
            <li><a href="/about">アバウト</a></li>
            <li><a href="/contact">コンタクト</a></li>
        </ul>
    </nav>
</header>
再利用先のファイル

【ファイル先】resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ウェルカムページ</title>
</head>
<body>
    <!-- ヘッダーをインクルード -->
    @include('partials.header')

    <main>
        <h2>メインコンテンツ</h2>
        <p>これはウェルカムページのコンテンツです。</p>
    </main>
</body>
</html>

条件付き

includeIf

指定したビューが存在し、かつ条件が真の場合にビューをインクルードします。

【ファイル先】resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>メインビュー</title>
</head>
<body>
    <!-- ヘッダーが存在する場合のみインクルード -->
    @includeIf('partials.header')

    <main>
        <p>メインコンテンツ</p>
    </main>
</body>
</html>

includeWhen

条件が真である場合にビューをインクルードします。

【ファイル先】resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>メインビュー</title>
</head>
<body>
    <!-- $showHeaderがtrueの場合のみインクルード -->
    @includeWhen($showHeader, 'partials.header')

    <main>
        <p>メインコンテンツ</p>
    </main>
</body>
</html>

includeUnless

条件が偽である場合にビューをインクルードします。

【ファイル先】resources/views/welcome.blade.php

<!-- resources/views/main.blade.php -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>メインビュー</title>
</head>
<body>
    <!-- $hideHeaderがfalseの場合にインクルード -->
    @includeUnless($hideHeader, 'partials.header')

    <main>
        <p>メインコンテンツ</p>
    </main>
</body>
</html>

優先

includeFirst

指定した複数のビューの中から、最初に存在するビューをインクルードします。

【ファイル先】resources/views/welcome.blade.php

<!-- resources/views/main.blade.php -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>メインビュー</title>
</head>
<body>
    <!-- 最初に存在するビューをインクルード -->
    @includeFirst(['partials.custom-header', 'partials.default-header'])

    <main>
        <p>メインコンテンツ</p>
    </main>
</body>
</html>

条件分岐

基本的な条件分岐

if条件分岐

特定の条件が真である場合に実行されます。

@if ($value === 1)
    <p>値は1です。</p>
@endif

if-else条件分岐

条件が真の場合と偽の場合で異なる処理を実行します。

@if ($value === 1)
    <p>値は1です。</p>
@else
    <p>値は1ではありません。</p>
@endif

if-elseif-else条件分岐

複数の条件を順番に評価して、それぞれに応じた処理を実行します。

@if ($value === 1)
    <p>値は1です。</p>
@elseif ($value === 2)
    <p>値は2です。</p>
@else
    <p>値は1でも2でもありません。</p>
@endif

isset条件分岐

変数が設定されている場合に実行されます。

@if (isset($value))
    <p>値がセットされています。</p>
@endif

empty条件分岐

変数が空の場合に実行されます。

@if (empty($value))
    <p>値が空です。</p>
@endif

unless条件分岐

条件が偽の場合に実行されます。

@unless ($value === 1)
    <p>値は1ではありません。</p>
@endunless

switch条件分岐

複数の条件に基づいて異なる処理を実行します。

@switch($value)
    @case(1)
        <p>値は1です。</p>
        @break

    @case(2)
        <p>値は2です。</p>
        @break

    @default
        <p>値は1でも2でもありません。</p>
@endswitch

テンプレート関連の条件分岐

hasSection条件分岐

特定のセクションが定義されている場合に実行されます。

@if (hasSection('sidebar'))
    <div class="sidebar">
        @yield('sidebar')
    </div>
@endif

認証関連の条件分岐

auth条件分岐

ユーザーが認証されている場合に実行されます。

@auth
    <p>ユーザーは認証されています。</p>
@endauth

guest条件分岐

ユーザーがゲストである場合に実行されます。

@guest
    <p>ユーザーはゲストです。</p>
@endguest

環境関連の条件分岐

env条件分岐

特定の環境で実行される処理を定義します。

@env('local')
    <p>ローカル環境です。</p>
@endenv

production条件分岐

本番環境でのみ実行される処理を定義します。

@production
    <p>本番環境です。</p>
@endproduction

繰り返し

foreach

配列やコレクションの各要素をループ処理するために使用されます。

<ul>
    @foreach ($items as $item)
        <li>{{ $item }}</li>
    @endforeach
</ul>

continue / break

ループ処理の中で特定の条件に応じて、現在のループをスキップしたり、ループ全体を終了させたりします。

@continue : 現在の反復をスキップし次の反復に進む
@break : ループを完全に終了

<ul>
    @foreach ($items as $item)
        @if ($item === 'skip')
            @continue
        @endif

        <li>{{ $item }}</li>

        @if ($item === 'stop')
            @break
        @endif
    @endforeach
</ul>

for

指定した回数ループ処理を行うために使用されます。

<ul>
    @for ($i = 0; $i < 5; $i++)
        <li>アイテム {{ $i + 1 }}</li>
    @endfor
</ul>

while

条件が真である間ループ処理を行うために使用されます。

<?php $count = 0; ?>
<ul>
    @while ($count < 5)
        <li>カウント: {{ $count }}</li>
        <?php $count++; ?>
    @endwhile
</ul>

forelse

配列やコレクションが空でない場合にループ処理を行い、空の場合には別の処理を行います。

<ul>
    @forelse ($items as $item)
        <li>{{ $item }}</li>
    @empty
        <li>アイテムがありません。</li>
    @endforelse
</ul>

その他

セキュリティ関連

@csrf

HTMLフォーム内でCSRF（クロスサイトリクエストフォージェリ）トークンを生成します。
このトークンはフォーム送信時に自動的に含まれ、セキュリティを強化します。

<form method="POST" action="/submit">
    @csrf
    <!-- フォームフィールド -->
</form>

@method

フォーム内でHTTPメソッドを指定します。
通常のPOST以外のメソッド（PUT, DELETEなど）をフォームで使用するために利用します。

<form method="POST" action="/update">
    @csrf
    @method('PUT')
    <!-- フォームフィールド -->
</form>

フォーム属性制御

@checkbox

チェックボックスやラジオボタンがチェックされている状態を制御するために使用します。
条件が真であればchecked属性が追加されます。

<input type="checkbox" name="remember" value="1" @checked(old('remember'))>

@disabled

フォーム要素が無効化されている（操作できない）状態を制御するために使用します。
条件が真であればdisabled属性が追加されます。

<input type="text" name="username" @disabled($isReadonly)>

@selected

ドロップダウンリストの選択肢が選択されている状態を制御するために使用します。
条件が真であればselected属性が追加されます。

<option value="1" @selected($value == 1)>Option 1</option>

@required

フォーム要素が必須入力フィールドであることを示すために使用します。
条件が真であればrequired属性が追加されます。

<input type="text" name="email" @required($isEmailRequired)>

@readonly

フォーム要素が読み取り専用であることを示すために使用します。
条件が真であればreadonly属性が追加されます。

<input type="text" name="username" @readonly($isReadonly)>

@multiple

<select>要素に対して複数選択可能な状態を示すために使用します。
条件が真であればmultiple属性が追加されます。

<select name="options[]" @multiple($isMultiple)>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

その他

生PHP

このディレクティブの中に書かれたコードは、そのままPHPとして実行されます。

@php
    $greeting = "こんにちは、Laravel!";
    $currentTime = date('Y-m-d H:i:s');
@endphp

<p>{{ $greeting }}</p>
<p>現在の時刻: {{ $currentTime }}</p>

@error

特定のフィールドにバリデーションエラーがある場合に、そのエラーを表示するために使用します。

@error('email')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

@once

ブレードテンプレート内でコードを一度だけ実行するために使用します。
これにより、ループ内での重複を避けることができます。

@once
    <p>この内容は一度だけ表示されます。</p>
@endonce
Laravel
記事の内容
閉じる