あっぽログ
← 記事一覧に戻る
LaravelBladePHP

LaravelのBladeテンプレートエンジン入門：コンポーネント・レイアウト・ディレクティブを使いこなす

Bladeとは何か

LaravelにはBladeと呼ばれる独自のテンプレートエンジンが標準搭載されています。PHPのコードをそのまま書くことも可能ですが、Bladeを使うと簡潔な構文でビューを記述でき、テンプレートの継承やコンポーネントの再利用も簡単に行えます。

Bladeファイルは resources/views/ 以下に .blade.php という拡張子で配置します。

レイアウトの継承

大規模なアプリでは、ヘッダーやフッターなど共通のHTMLを一か所にまとめておきたいものです。Bladeのレイアウト継承を使うとこれを簡潔に実現できます。

親レイアウトを作る

まず共通レイアウトファイルを作成します。

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>@yield('title', 'マイアプリ')</title>
</head>
<body>
    <header>
        <h1>共通ヘッダー</h1>
    </header>

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

    <footer>
        <p>&copy; 2026 マイアプリ</p>
    </footer>
</body>
</html>

@yield('content') は子テンプレートが差し込む場所を定義します。第2引数にはデフォルト値を設定できます。

子テンプレートで継承する

{{-- resources/views/posts/index.blade.php --}}
@extends('layouts.app')

@section('title', '記事一覧')

@section('content')
    <h2>記事一覧</h2>
    <ul>
        @foreach($posts as $post)
            <li>{{ $post->title }}</li>
        @endforeach
    </ul>
@endsection

@extends で親レイアウトを指定し、@section / @endsection でコンテンツを定義します。{{ }} は変数をHTMLエスケープしながら出力するBladeの基本構文です。

主要なディレクティブ

Bladeには @ で始まるディレクティブが多数用意されています。

条件分岐

@if($user->isAdmin())
    <p>管理者ユーザーです</p>
@elseif($user->isModerator())
    <p>モデレーターユーザーです</p>
@else
    <p>一般ユーザーです</p>
@endif

{{-- 認証状態のチェックも簡単 --}}
@auth
    <p>ログイン中: {{ auth()->user()->name }}</p>
@endauth

@guest
    <a href="/login">ログイン</a>
@endguest

ループ処理

@foreach($posts as $post)
    <div>
        <h3>{{ $post->title }}</h3>
        <p>{{ $post->body }}</p>
    </div>
@endforeach

{{-- $loop変数でループ情報にアクセス --}}
@foreach($items as $item)
    @if($loop->first)
        <p>最初のアイテム</p>
    @endif
    <p>{{ $loop->iteration }} / {{ $loop->count }}: {{ $item->name }}</p>
@endforeach

@foreach 内では $loop という特殊な変数が自動で使えます。$loop->first や $loop->last、$loop->iteration（現在の番号）など便利なプロパティが揃っています。

コンポーネント

Laravel 7以降ではコンポーネント機能が強化され、UIパーツを独立したファイルとして管理できます。

コンポーネントを作成する

Artisanコマンドで雛形を生成します。

php artisan make:component Alert

これにより app/View/Components/Alert.php と resources/views/components/alert.blade.php が作成されます。

コンポーネントクラスを編集する

// app/View/Components/Alert.php
namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public function __construct(
        public string $type = 'info',
        public string $message = ''
    ) {}

    public function render()
    {
        return view('components.alert');
    }
}

コンポーネントのビューを編集する

{{-- resources/views/components/alert.blade.php --}}
<div class="alert alert-{{ $type }}">
    {{ $message }}
    {{ $slot }}
</div>

$slot にはコンポーネントタグの内側に書いたHTMLが入ります。

コンポーネントを使う

{{-- props（属性）で値を渡す --}}
<x-alert type="success" message="保存しました！" />

{{-- slotを使う --}}
<x-alert type="danger">
    <strong>エラー:</strong> 入力内容を確認してください。
</x-alert>

コンポーネントは <x-コンポーネント名> という形式で呼び出します。属性として渡した値はコンポーネントクラスのコンストラクタに自動でバインドされます。

PHPコードを直接書く場合

どうしてもBladeディレクティブでは対応できない処理は @php ディレクティブを使います。

@php
    $formattedDate = now()->format('Y年m月d日');
@endphp

<p>今日は {{ $formattedDate }} です</p>

ただし、複雑なロジックはコントローラやViewModelに切り出すのがベストプラクティスです。

まとめ

機能構文
変数の出力{{ $variable }}
レイアウト継承@extends / @section / @yield
条件分岐@if / @elseif / @else / @endif
ループ@foreach / @endforeach
コンポーネント<x-コンポーネント名>

Bladeはシンプルな構文ながら、レイアウト継承・コンポーネント・豊富なディレクティブにより保守性の高いビューを構築できます。まずはレイアウト継承とよく使うディレクティブから慣れていくと、Laravelの開発がぐっとスムーズになるでしょう。

← 記事一覧に戻る