第32回: Bladeテンプレート — Viewを「読みやすく・再利用しやすく」組み立てる

(Updated: )
1 min read

章: 第4章: Laravelフレームワーク

HTMLの中にPHPを直書きして、View ファイルが読みにくくなっていませんか？

<?php if (...): ?> <?php foreach (...): ?> を素のPHPで書くと、HTMLとロジックが混在してレビューしにくくなります。BladeはLaravel標準のテンプレートエンジンで、繰り返し・条件分岐・レイアウト継承を明快な構文で書けます。

Bladeを使わないと何が起きるか

素のPHPテンプレートでは、XSSのエスケープを開発者が毎回手動で行う必要があります。また、共通レイアウトの再利用もコピーペーストになりがちです。Bladeは {{ }} で自動エスケープ、@extends/@section でレイアウト継承を提供します。

Bladeの良い書き方・悪い書き方

観点 悪い例 良い例
出力 <?= $user->name ?> {{ $user->name }} （自動エスケープ）
繰り返し @foreach + 空チェックを自前 @forelse / @empty で空状態を宣言的に書く
レイアウト 共通HTMLをコピーペースト @extends + @section で継承
生HTML出力 {!! $html !!} を気軽に使う 信頼できるHTML生成のみに限定する

チェックポイント: {!! !!} は信頼できるサーバー生成のHTMLのみに使い、ユーザー入力を絶対に渡さないようにしましょう。Bladeの {{ }} はデフォルトで htmlspecialchars を通すため、通常の値出力は必ず {{ }} を使います。

コードサンプル


{{-- resources/views/posts/index.blade.php --}}
@extends('layouts.app')
@section('content')
    <h1>記事一覧</h1>
    @forelse ($posts as $post)
        <div>
            <a href="{{ route('posts.show', $post) }}">{{ $post->title }}</a>
        </div>
    @empty
        <p>記事がまだありません。</p>
    @endforelse
@endsection

まとめ & 次のステップ

  • {{ }} はXSSエスケープ付きで、ユーザー入力の出力には常に使いましょう
  • @forelse / @empty を使うとリストが空のときの表示を宣言的に書けます
  • @extends と @section でレイアウトを継承し、共通部分の重複をなくしましょう
  • コンポーネント（@component / <x-button>）を活用するとUIパーツを再利用できます
  • @csrf を忘れずにフォームに追加し、CSRF攻撃を防ぎましょう

次回は フォームリクエストクラス を学びます。バリデーションと認可をコントローラから切り出す設計を整理しましょう。

Related Articles