前回は LaravelのController を解説しました。
Controllerでは
- 処理を行う
- データを用意する
ところまでを担当しました。
次に必要になるのが
画面表示です。
Laravelでは画面表示に
Blade（ブレード）テンプレート
を使います。
この記事では次の内容を解説します。
- Bladeとは
- 基本的な書き方
- 変数の表示
- 条件分岐
- ループ
- レイアウト（共通テンプレート）
Bladeとは
BladeはLaravel専用の
テンプレートエンジン
です。
テンプレートエンジンとは
HTMLにデータを埋め込む仕組みです。
通常のHTML
<h1>Hello</h1>Bladeでは
<h1>{{ $name }}</h1>のように書けます。
Bladeファイルの場所
Bladeファイルは次のディレクトリに配置します。
resources/views/例
resources/views/users/index.blade.phpControllerからViewを呼ぶ
ControllerでViewを返します。
return view('users.index');対応するファイル
resources/views/users/index.blade.php変数の表示
Bladeでは変数を次のように表示します。
{{ $name }}例
Controller
return view('users.index', [
'name' => 'Taro'
]);Blade
<h1>{{ $name }}</h1>結果
TaroHTMLエスケープ
Bladeの {{ }} は自動でエスケープされます。
つまり
安全に表示されます。
生HTMLの表示
エスケープしない場合
{!! $html !!}※注意
XSS対策が必要です。
条件分岐
Bladeでは条件分岐が書けます。
@if ($age >= 20)
<p>成人</p>
@else
<p>未成年</p>
@endifループ（foreach）
配列のループ
@foreach ($users as $user)
<p>{{ $user->name }}</p>
@endforeachfor文
@for ($i = 0; $i < 5; $i++)
<p>{{ $i }}</p>
@endforコメント
Bladeコメント
{{-- コメント --}}HTMLには出力されません。
レイアウト（共通テンプレート）
実務では
ヘッダー
フッター
共通デザインをまとめます。
レイアウト作成
例
resources/views/layouts/app.blade.php<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<header>Header</header>
@yield('content')
<footer>Footer</footer>
</body>
</html>子テンプレート
@extends('layouts.app')
@section('title', 'Users')
@section('content')
<h1>User List</h1>
@endsection@yield と @section
@yield → 表示位置
@section → 内容コンポーネント
再利用可能なUI
<x-button>Click</x-button>include
部分テンプレート
@include('partials.header')実務での使い方
Bladeは次の用途で使われます。
- 管理画面
- シンプルなWebサイト
- フォーム画面
React / Vueとの違い
Blade
サーバーサイド描画React / Vue
クライアントサイド描画Bladeのメリット
- シンプル
- PHPと相性が良い
- 学習コストが低い
よくあるミス
ファイル名ミス
index.blade.phpview指定ミス
view('users.index')変数名ミス
{{ $username }}まとめ
この記事では Bladeテンプレート を解説しました。
重要なポイント
- Bladeはテンプレートエンジン
- {{ }} で変数表示
- @if / @foreach が使える
- レイアウトが重要
Bladeを理解すると
画面作成ができるようになります。
次の記事
次回は
Eloquent ORM（データベース操作）
を解説します。
ここでは
- モデル
- データ取得
- 保存処理
など、Laravelの強力な機能を紹介します。
コメント