laravel-blade

Laravel Blade テンプレートを扱います。匿名コンポーネントとクラスベースコンポーネント、 名前付きスロットと属性バッグ（$attributes->merge()）、レイアウト（コンポーネントベースと @extends/@section 継承）、ディレクティブ（@if、@foreach、@auth、@can、および @once/@use/@inject/@switch/スタックなどの高度なもの）、カスタムディレクティブ （Blade::if、Blade::directive）、セキュリティ（XSS/CSRF エスケープ）、Vite アセット 統合、フォーム/バリデーションヘルパー（@error）、および HTMX スタイルの部分更新のためのフラグメントを網羅します。

Laravel Blade

エージェントワークフロー（必須）

いかなる実装の前に、3 つのエージェントを並列で起動してください。それぞれ name を指定した Agent 呼び出しを 1 回ずつ行います。

1. fuse-ai-pilot:explore-codebase - 既存のビュー、コンポーネント構造を確認する
2. fuse-ai-pilot:research-expert - Context7 経由で最新の Blade ドキュメントを検証する
3. mcp__context7__query-docs - 特定のパターン（コンポーネント、スロット）をクエリする

実装後、検証のために fuse-ai-pilot:sniper を実行してください。

---

概要

Blade は Laravel のテンプレートエンジンです。ビュー内で PHP を扱うためのクリーンな構文を提供しつつ、パフォーマンスのために純粋な PHP にコンパイルされます。

Component Type	When to Use
Anonymous	Simple UI, no logic needed
Class-based	Dependency injection, complex logic
Layout	Page structure, reusable shells
Dynamic	Runtime component selection

---

重要なルール

1. 常に出力をエスケープする - どうしても必要な場合を除き、{!! !!} ではなく {{ }} を使用してください
2. @props を使用する - 期待される props を明示的に宣言してください
3. 属性をマージする - $attributes->merge() で class/属性の上書きを許可してください
4. 匿名を優先する - ロジックが必要な場合にのみクラスコンポーネントを使用してください
5. 名前付きスロットを使用する - 複数のコンテンツ領域を持つ複雑なレイアウトに使用してください
6. フォームに CSRF を含める - フォームには常に @csrf を含めてください

---

意思決定ガイド

コンポーネントタイプの選択

Need dependency injection?
├── YES → Class-based component
└── NO → Anonymous component
    │
    Need complex props logic?
    ├── YES → Class-based component
    └── NO → Anonymous component

レイアウト戦略

Simple page structure?
├── YES → Component layout (<x-layout>)
└── NO → Need fine-grained sections?
    ├── YES → @extends/@section
    └── NO → Component layout

---

主要な概念

Concept	Description	Reference
@props	Declare component properties	components.md
$attributes	Pass-through HTML attributes	slots-attributes.md
x-slot	Named content areas	slots-attributes.md
@yield/@section	Traditional layout inheritance	layouts.md
$loop	Loop iteration info	directives.md

---

リファレンスガイド

概念（WHY とアーキテクチャ）

Topic	Reference	When to Consult
Components	components.md	Class vs anonymous, namespacing
Slots & Attributes	slots-attributes.md	Data flow, $attributes bag
Layouts	layouts.md	Page structure, inheritance
Directives	directives.md	@if, @foreach, @auth, @can
Security	security.md	XSS, CSRF, escaping
Vite	vite.md	Asset bundling
Advanced Directives	advanced-directives.md	@once, @use, @inject, @switch, stacks
Custom Directives	custom-directives.md	Blade::if, Blade::directive
Advanced Components	advanced-components.md	@aware, shouldRender, index
Forms & Validation	forms-validation.md	@error, form helpers
Fragments	fragments.md	@fragment, HTMX integration

テンプレート（完全なコード）

テンプレート	使用する場面
ClassComponent.php.md	ロジック/DI を伴うコンポーネント
AnonymousComponent.blade.md	シンプルで再利用可能な UI
LayoutComponent.blade.md	ページレイアウト構造
FormComponent.blade.md	バリデーション付きフォーム
CardWithSlots.blade.md	名前付きスロットのパターン
DynamicComponent.blade.md	実行時コンポーネント
AdvancedDirectives.blade.md	@once、@use、@inject、@switch
CustomDirectives.php.md	カスタムディレクティブの作成
AdvancedComponents.blade.md	@aware、shouldRender、index
Fragments.blade.md	HTMX の部分更新

---

クイックリファレンス

匿名コンポーネント

{{-- resources/views/components/alert.blade.php --}}
@props(['type' => 'info', 'message'])

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

クラスコンポーネント

// app/View/Components/Alert.php
class Alert extends Component
{
    public function __construct(
        public string $type = 'info',
        public string $message = ''
    ) {}

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

名前付きスロット

<x-card>
    <x-slot:header class="font-bold">
        Title
    </x-slot>

    Content goes here

    <x-slot:footer>
        Footer content
    </x-slot>
</x-card>

属性のマージ

@props(['disabled' => false])

<button {{ $attributes->merge([
    'type' => 'submit',
    'class' => 'btn btn-primary'
])->class(['opacity-50' => $disabled]) }}
    @disabled($disabled)
>
    {{ $slot }}
</button>

---

ベストプラクティス

推奨

• @props を使って期待される props を文書化する
• 柔軟性のために $attributes->merge() を使用する
• シンプルな UI には匿名コンポーネントを優先する
• 複雑なレイアウトには名前付きスロットを使用する
• コンポーネントを焦点を絞った再利用可能なものに保つ

非推奨

• サニタイズせずに {!! !!} を使用する
• フォームで @csrf を忘れる
• Blade テンプレートにビジネスロジックを入れる
• 深くネストしたコンポーネント階層を作る
• クラスをハードコードする（オーバーライドを許可する）

---

Laravel 13 の注意点

コントローラーの属性 #[Middleware] と #[Authorize]

Laravel 13 は、コントローラーのクラスおよびメソッドに PHP 属性を付けてミドルウェアと認可を宣言できます（__construct のミドルウェアボイラープレートを置き換えます）。

use Illuminate\Routing\Attributes\Controllers\Middleware;
use Illuminate\Routing\Attributes\Controllers\Authorize;

#[Middleware(['auth', 'verified'])]
final class PostController extends Controller
{
    #[Authorize('viewAny', Post::class)]
    public function index() { return view('posts.index'); }

    #[Middleware('throttle:60,1')]
    #[Authorize('create', Post::class)]
    public function store(StorePostRequest $request) { /* ... */ }
}

属性で宣言されたミドルウェアは、グループ/ルートのミドルウェアとマージされ（13.8+）、子コントローラーに継承されます（13.5+）。#[Middleware('log', only: ['index'])] / except: および #[WithoutMiddleware(...)]（13.20+）が利用できます。#[Authorize] は can ミドルウェアの省略記法です（ポリシーが拒否した場合は 403）。

@fonts ディレクティブ（13.7+）

laravel-vite-plugin の fonts オプションで生成されたセルフホストフォントを挿入します（[[laravel-vite]] を参照）。