Laravel 10以降で追加されたBladeディレクティブの新機能まとめ

概要

Laravel 10がリリースされてからBladeテンプレートエンジンにも便利な新機能が追加されています。
今回はLaravel 10以降で追加された新しいディレクティブを実際の使用例とともに紹介します。

※Laravel 12では新しいBladeディレクティブの追加は確認できませんでした。

@use ディレクティブ (Laravel 10.38+)

PHPのuseステートメントをBlade内で直接書けるようになりました。

これまでの書き方

@php
use App\Models\User;
use Carbon\Carbon;
use App\Enums\UserStatus;
@endphp

{{ User::find(1)->name }}
{{ Carbon::now()->format('Y-m-d') }}

Laravel 10.38以降の書き方

@use('App\Models\User')
@use('Carbon\Carbon')
@use('App\Enums\UserStatus')

{{ User::active()->count() }}
{{ Carbon::now()->format('Y年m月d日') }}

エイリアスも使える

@use('Carbon\Carbon', 'Date')
@use('App\Services\UserService', 'US')

{{ Date::now()->addDays(7)->toDateString() }}
{{ US::getActiveUsers() }}

複数のモデルやサービスクラスを使うビューファイルがスッキリ書けるようになりました。

参考: Laravel 10.38 Release Notes

@session ディレクティブ (Laravel 10.30+)

セッション値の存在チェックと表示を一度に行えるようになりました。

従来の実装

@if (session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
@endif

@if (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

Laravel 10.30以降の実装

@session('status')
    <div class="alert alert-success">
        {{ $value }}
    </div>
@endsession

@session('error')
    <div class="alert alert-danger">
        {{ $value }}
    </div>
@endsession

$value変数に自動的にセッション値が入るので、フラッシュメッセージの表示が簡潔になります。

参考: Laravel 10.30 Release Notes

@style ディレクティブ (Laravel 10.9+)

条件付きでインラインスタイルを適用できるディレクティブです。

従来の書き方

<div style="{{ $isImportant ? 'font-weight: bold;' : '' }} {{ $isHidden ? 'display: none;' : '' }}">
    コンテンツ
</div>

Laravel 10.9以降の書き方

<div @style([
    'background-color: red',
    'font-weight: bold' => $isImportant,
    'display: none' => $isHidden,
    'opacity: 0.5' => $isDisabled,
])>
    コンテンツ
</div>

動的な値の使用例

<span @style([
    'color: ' . $user->theme_color,
    'font-size: 1.5rem' => $user->is_premium,
    'text-decoration: line-through' => $item->is_sold_out,
])>
    {{ $item->name }}
</span>

@classディレクティブと同様の記法でインラインスタイルを管理できます。

参考: Laravel 10.9 Release Notes

@fragment ディレクティブ (Laravel 10.23+)

特定の部分だけを返すことができるディレクティブです。
HTMXやTurboなどとの組み合わせで部分的なページ更新が実現できます。

ビューファイルの実装

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

@section('content')
    <h1>ユーザー一覧</h1>
    
    @fragment('user-list')
        <ul id="users">
            @foreach ($users as $user)
                <li>
                    {{ $user->name }}
                    <span class="badge">{{ $user->posts_count }} posts</span>
                </li>
            @endforeach
        </ul>
    @endfragment
    
    <button hx-get="/users?fragment=user-list" 
            hx-target="#users"
            hx-swap="outerHTML">
        更新
    </button>
@endsection

コントローラー側の実装

public function index(Request $request)
{
    $users = User::withCount('posts')->get();
    
    // fragmentパラメータがあったら、その部分だけ返す
    if ($request->has('fragment')) {
        return view('users.index', compact('users'))
            ->fragment('user-list');
    }
    
    // 通常は全体を返す
    return view('users.index', compact('users'));
}

SPAのような動的な更新が簡単に実装できるようになりました。

参考: Laravel Fragments Documentation

@class ディレクティブの拡張 (Laravel 10+)

Laravel 9で追加された@classディレクティブがさらに使いやすくなりました。

実装の最適化ポイント

ソース：Laravel Blade Templates Documentation

Laravel 10以降での改善：

パフォーマンスの向上 - コンパイル時の処理が最適化
Tailwind CSS修飾子の確実な処理 - hover:、dark:、disabled:などの擬似クラスがより確実に動作
複雑な条件式の処理改善 - ネストした条件や論理演算子を含む式の処理が改善

より柔軟な条件指定

<button @class([
    'btn',
    'btn-primary' => $isPrimary,
    'btn-lg' => $size === 'large',
    'disabled:opacity-50' => $isDisabled,  // Tailwindの修飾子も使える
    'hover:scale-105 transition-transform' => $hasAnimation,
])>
    クリック
</button>

配列変数との組み合わせ

@php
$baseClasses = [
    'px-4 py-2 rounded',
    'bg-blue-500' => !$isDanger,
    'bg-red-500' => $isDanger,
];
@endphp

<div @class($baseClasses)>
    アラート
</div>

その他の改善点

@once の入れ子対応改善

Laravel 10では@onceディレクティブの入れ子での動作が改善されました。

@foreach ($items as $item)
    @once
        @push('scripts')
            {{-- ループ内でも一度だけ追加される --}}
            <script src="/item-handler.js"></script>
        @endpush
    @endonce
    
    <div class="item">{{ $item->name }}</div>
@endforeach

エラーメッセージの改善

開発環境でのBladeエラーメッセージがより詳細になり、デバッグが容易になりました。
エラーの発生箇所が明確に表示されるようになったので、問題の特定が素早くできます。

実際の使用例

新機能を組み合わせた実装例を紹介します。

{{-- 新機能を活用した実装例 --}}
@use('App\Models\Product')
@use('Carbon\Carbon', 'Date')

@session('import_success')
    <div class="alert alert-success mb-4">
        {{ $value }}
    </div>
@endsession

<div @class([
    'product-grid',
    'featured-grid' => $featured,
]) @style([
    'grid-template-columns: repeat(3, 1fr)',
    'opacity: 0.7' => $maintenance_mode,
])>
    @fragment('product-list')
        @foreach ($products as $product)
            <div class="product-card">
                <h3>{{ $product->name }}</h3>
                <p class="price">¥{{ number_format($product->price) }}</p>
                <small>{{ Date::parse($product->created_at)->diffForHumans() }}</small>
            </div>
        @endforeach
    @endfragment
</div>

まとめ

Laravel 10以降で追加されたBladeディレクティブの新機能を紹介しました。

特に便利な機能：

@use - PHPのuseステートメントを簡潔に記述
@session - セッションメッセージの表示を簡略化
@style - 条件付きインラインスタイルの管理
@fragment - 部分的なビューのレンダリング

これらの新機能を活用することで、より効率的でメンテナンスしやすいBladeテンプレートが書けるようになります。
ぜひプロジェクトで試してみてください。

参考リンク