【Laravel初心者向け】Bladeテンプレートの基本と使い方まとめ

はじめに

Laravelの開発で欠かせないのが「Bladeテンプレート」。

PHPの中でも特に見やすく、柔軟にHTMLを組み立てられるテンプレートエンジンです。今回は「Bladeってなに？」「どう使えばいいの？」という初心者の方向けに、基本の文法と実践的な使い方をわかりやすく解説していきます！

やりたいこと

1. Bladeテンプレートの基礎文法を理解する

2. よく使うディレクティブ（@if, @foreachなど）をマスターする

3. レイアウトの継承を使って効率的な開発を目指す

4. コンポーネントやスロットの基本を知る

準備するもの

ライブラリ

• Laravel（BladeはLaravel標準のテンプレートエンジンなので別途インストール不要）

インポート手順

Laravelプロジェクトを作成すればすぐにBladeが使えます。

composer create-project laravel/laravel blade-sample

このライブラリの説明

BladeはLaravelに標準搭載されているテンプレートエンジンで、PHPとHTMLを簡潔に組み合わせることができます。if文やforeachなどをHTMLタグ内で自然に書けるのが特徴です。

ディレクトリ構成（一部抜粋）

resources/
└── views/
├── layout.blade.php
├── home.blade.php
└── components/
└── alert.blade.php

コードスクリプト

コードスクリプトの概要

ここではBladeの基本構文から、レイアウト継承・コンポーネントの使い方まで段階的に紹介します。

基本文法（埋め込みとエスケープ）

{{-- 変数を出力 --}}
こんにちは、{{ $name }}さん！
{{-- エスケープしない出力 --}}
{!! $htmlContent !!}

条件分岐

@if($isAdmin)
<p>管理者ユーザーです</p>
@else
<p>一般ユーザーです</p>
@endif

ループ

@foreach($users as $user)
<li>{{ $user->name }}</li>
@endforeach

コンポーネントの例

<div class="alert alert-{{ $type }}">
{{ $slot }}
</div>

呼び出し側

<x-alert type="danger">
これはエラーメッセージです。
</x-alert>

コード解説

• @extends：テンプレートの親ファイルを指定する

• @section / @yield：親子間で内容を埋め込むための構文

• {{ }}：変数のエスケープ出力

• {!! !!}：HTMLタグをそのまま表示したい場合に使う

• <x-alert>：カスタムBladeコンポーネントの呼び出し（Laravel 7以降対応）

注意点

• Bladeで使う変数はControllerから渡す必要があります（return view('home', ['name' => '太郎'])など）

• @csrfディレクティブはフォーム内でトークンを挿入するために必須

• コンポーネント名とBladeファイル名は一致させる必要あり（例：x-alert → alert.blade.php）

まとめ

Bladeテンプレートを使えば、LaravelでのWebページ作成が驚くほどスムーズになります。PHPのコードを最小限に抑えて、読みやすく保守性の高いHTMLを書くことが可能です。最初は@ifや@foreachだけでも十分便利に使えるので、ぜひ触ってみてください！