PHP WEB上級コース
付録

Blade構文一覧

目次
  • 解説
  • 1. はじめに
  • 2. データ表示
  • 3. 基本構文
  • 4. フォーム
  • 5. サブビューの読み込み
進捗を変更する


このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！


@section / @yield@show@parent@component@slot{{ $変数名 }}{!! $変数名 !!}@verbatim@if@isset@empty@auth@guest@switch@for@foreach@forelse @while @break @continue $loop @php@csrf@method@error@include@each

解説

1. はじめに

このページは、Bladeでのデータの表示の仕方、基本構文などをまとめたチートシートです。
構文は目次下のタグに表示されており、クリックすることで該当の構文にスクロールします。

2. データ表示

@section / @yield　レイアウトの定義

Bladeを使用する主な利点は、テンプレートの継承とセクションです。
「@section（セクション）」コンテンツのセクションを定義し、「@yeld（イールド）」ディレクティブは指定したセクションの内容を表示するために使用します。

<!-- resources/views/layouts/parent.blade.php -->

<html lang="ja">
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

「継承」するにはレイアウトを指定する、「@extends（エクステンズ）」ディレクティブを使用します。
Bladeレイアウトを拡張するビューは、「@section」ディレクティブを使用し、
レイアウトのセクションに内容を挿入します。

<!-- resources/views/child.blade.php -->

@extends('layouts.parent')

@section('content')
    <p>コンテント</p>
@endsection

結果

<html lang="ja">
    <head></head>
    <body>
        <div class="container">
            <p>コンテント</p>
        </div>
    </body>
</html>

@show　親テンプレートのセクション終了宣言

親テンプレートで使う際は記述方法が異なり、「@endsection」ではなく「@show（ショウ）」でセクションの終わりを宣言します。
親テンプレートで「@section〜@show」を使用した場合は、子テンプレートに同名の
「@section〜@endsection」部分があれば親sectionを子sectionが上書きします。

<!-- resources/views/layouts/parent.blade.php -->

<html lang="ja">
    <body>
        <div class="container">
            @section('content')
            親コンテント
            @show
        </div>
    </body>
</html>
<!-- resources/views/child.blade.php -->

@extends('layouts.app')
@section('content')
    <p>コンテント</p>
@endsection

結果

<html lang="ja">
    <head></head>
    <body>
        <div class="container">
            <p>コンテント</p>
        </div>
    </body>
</html>

@parent　親の内容の引き継ぎ

上書きの際に親の内容も引き継ぎたい時は子section側に「@parent（ペアレント）」ディレクティブを設置します。

<!-- resources/views/child.blade.php -->

@extends('layouts.app')
@section('content')
 　　　　　　@parent
    <p>コンテント</p>
@endsection

結果

<html lang="ja">
    <head></head>
    <body>
        <div class="container">
            <p>親コンテント</p>
            <p>コンテント</p>
        </div>
    </body>
</html>

@component　コンポーネントの表示箇所を指定するディレクティブ

コンポーネントとは独立して用意される部品のようなテンプレートで、大元のテンプレートと組み合わせて使用することができます。
「@component（コンポーネント）」で表示箇所を指定できます。

<!-- resources/views/component.blade.php -->

<div class="container">
  <h3>{{ $title }}</h3>
</div>

<!-- resources/views/view.blade.php -->

@component('component')
  @slot('title')
    digskill
  @endslot
@endcomponent

結果

<div class="container">
  <h3>digskill</h3>
<div>

@slot　渡された値を表示

「＠slot（スロット）」～「＠endslot（エンドスロット）」で変数に値を渡します。

<!-- resources/views/component.blade.php -->

@component('components')
  @slot('title')
    ここがタイトルです
  @endslot
@endcomponent

結果

<div class="container">
  <h3>ここがタイトルです</h3>
</div>

{{ $変数名 }}　HTMLエスケープを行う

Bladeビューに渡されたデータは、波括弧で変数を囲い、表示することができます。

<!-- routes/web.php -->

 Route::get('/home', function () {
    return view('home', ['name' => 'digskill']);
});

<!-- resources/views/content.blade.php -->

<div class="container">
  <p>{{ $name }}</P>
</div>

結果

<div class="container">
  <p>digskill</p>
</div>

{!! $変数名 !!}　HTMLエスケープを行わない

データをエスケープしたくない場合に使用します。

<!-- routes/web.php -->

 Route::get('/home', function () {
    return view('home', ['name' => '<p>digskill</p>']);
});

<!-- resources/views/content.blade.php -->

<div class="container">
  {!! $name !!}
</div>

結果

<div class="container">
  <p>digskill</p>
</div>

@verbatim　JavaScript変数を表示する

テンプレートの広い箇所でJavaScript変数を表示する場合は、HTMLを「@verbatim（バーベイタム）」ディレクティブで囲みます。

<!-- resources/views/component.blade.php -->

@verbatim
    <div class="container">
        Hello, {{ name }}
    </div>
@endverbatim

結果

<div class="container">
  Hello, {{ name }}
</div>

3. 基本構文

@if　if構文

Blade内のif文の構文には「@if」「@elseif」「@else」「@endif」ディレクティブを使用します。これらの使い方はPHPの構文と同じです。

<!-- Http/Controllers/Controller.blade.php -->

   return view('home',['count' => 1]);

<!-- resources/views/home.blade.php -->

@if ($count  === 1)
    <p>1人です</p>
@elseif($count > 1)
    <p>複数人です</p>
@else
    <p>誰もいません</P>
@endif

結果

<p>1人です</p>

@isset　定義されているか確認

「@isset（イズセット）」構文は値が定義されていて、かつnullではない時にtrueを返します。

<!-- Http/Controllers/Controller.blade.php -->

   return view('home',['name' => 'digskill']);

<!-- resources/views/home.blade.php -->

@isset( $name )
    <p>{{ $name }}</p>
@endisset

結果

 <p>digskill</p>

@empty　空か確認

「@empty（エンプティ）」構文は値が空の時にtrueを返します。ここでいう空というのは、空文字、null、0、 "0"、 false、 空の配列です。

<!-- Http/Controllers/Controller.blade.php -->

   return view('home',['name' => null]);

<!-- resources/views/home.blade.php -->

@empty( $name )
    <p>何か定義してください</p>
@endempty

結果

<p>何か定義してください</p>

@auth　認証されているか確認

「@auth（オース）」構文は現在のユーザーが認証されているか判定するために使用します。

@auth
    echo('認証済です')
@endauth

@guest　ゲストであるか確認

「@guest（ゲスト）」構文は現在のユーザーがゲストであるか判定するために使用します。

@guest
    echo('ゲストです')
@endguest

@switch　switch文

Blade内のswitch構文には「@switch」「@case」「@break」「@default」「@endswitch」ディレクティブを使用し、switch文を構成します。

<!-- Http/Controllers/Controller.blade.php -->

   return view('home',['name' => 'digskill']);

<!-- resources/views/home.blade.php -->

@switch($name)
    @case('digskill')
        <p>digskillで学習する</p>
        @break
    @case('java')
        <p>javaを学習する</p>
        @break
    @default
        <p>プログラミングを学習する</p>
@endswitch

結果

<p>digskillで学習する</p>

@for　繰り返し文

for文による繰り返し処理をすることができます。

<div>
  @for ($i = 0; $i < 10; $i++)
    人数は　：　{{ $i }}人です
  @endfor
</div>

結果

<div>
  <p>人数は　：　0人です</p>
  <p>人数は　：　1人です</p>
  <p>人数は　：　2人です</p>
</div>

@foreach　繰り返し文

foreach文による繰り返し処理をすることができます。

<?php 
  $users = ['ユーザー１','ユーザー2','ユーザー　3'];
?>
<div>
    @foreach ($users as $user)
        <p>{{ $user }}です</p>
    @endforeach
</div>

結果

<div>
  <p>ユーザー１です</p>
  <p>ユーザー2です</p>
  <p>ユーザー3です</p>
</div>

@forelse 繰り返し文

foreach文に空の時の場合の処理を加えた繰り返し処理をすることができます。

<?php 
  $users = [];
?>
<div>
  @forelse ($users as $user)
     <p>{{ $user }}です</p>
  @empty
    <p>ユーザーなし</p>
  @endforelse
</div>

結果

<div>
  <p>ユーザーなし</p>
</div>

@while 繰り返し文

while文による繰り返し処理をすることができます。

<?php $count = 0; ?>
<div>
    @while($count<=3)
        人数は　：　{{ $count }}人です
        <?php $count++; ?>
    @endwhile
</div>

結果

<div>
  <p> 人数は　：　0人です</p>
  <p> 人数は　：　1人です</p>
  <p> 人数は　：　2人です</p>
  <p> 人数は　：　3人です</p>
</div>

@break 繰り返し終了

繰り返し文を終了させることができます。

<?php 
  $users = ['ユーザー１','ユーザー2','ユーザー　3'];
?>
<div>
  @foreach ($users as $user)
    <p>{{ $user }}です</p>
    @if($user == 'ユーザー2')
      @break
    @endif
  @endforeach
</div>

結果

<div>
  <p>ユーザー１です</p>
  <p>ユーザー2です</p>
</div>

@continue 繰り返しをスキップ

繰り返し処理をスキップさせることができます。

<?php 
  $users = ['ユーザー１','ユーザー2','ユーザー3'];
?>
<div>
    @foreach ($users as $user)
    @if($user == 'ユーザー2')
        @continue
    @endif
        <p>{{ $user }}です</p>
    @endforeach
</div>

結果

<div>
  <p>ユーザー１です</p>
  <p>ユーザー3です</p>
</div>

$loop ループ変数

繰り返し中は、「$loop（ループ）」変数が使用できます。現在のループインデックスや繰り返しの最初／最後なのかなど、繰り返しによる情報にアクセスできます。

プロパティ名意味
$loop->index現在のループのインデックス（初期値0）
$loop->iteration現在の繰り返し数（初期値1）
$loop->remaining繰り返しの残り数
$loop->count繰り返し中の配列の総アイテム数
$loop->firstループの最初の繰り返しか判定
$loop->lastループの最後の繰り返しか判定
$loop->even偶数回目の繰り返しか判定
$loop->odd奇数回目の繰り返しか判定
$loop->depth現在のループのネストレベル
$loop->parentループがネストしている場合、親のループ変数
<?php 
  $users = ['ユーザー１','ユーザー2','ユーザー3'];
?>
<div>
    @foreach ($users as $user)
      @if ($loop->first)
        <p>最初の繰り返し</p>
      @endif
        <p>{{ $user }}です</p>
    @endforeach
</div>

結果

<div>
  <p>最初の繰り返し</p>
  <p>ユーザー１です</p>
  <p>ユーザー2です</p>
  <p>ユーザー3です</p>
</div>

@php　プレーンなPHP

Bladeの「@php」ディレクティブを使えば、テンプレートの中でプレーンなPHPブロックを実行できます。

<div>
    @php
        $users = ['ユーザー１','ユーザー2','ユーザー3'];
    @endphp
    @foreach ($users as $user)
        <p> {{ $user }}です。</p>
    @endforeach
</div>

結果

<div>
  <p>ユーザー１です</p>
  <p>ユーザー2です</p>
  <p>ユーザー3です</p>
</div>

4. フォーム

@csrf　CSRFトークンフィールドの生成

HTMLフォームを定義する場合、CSRF保護ミドルウェアを検査できるようにするため、CSRFトークンフィールドを含める必要があります。このトークンフィールドを生成するには、「@csrf(クロスサイト・リクエスト・フォージェリ)」Bladeディレクティブを使用します。

<form method="POST" action="/profile">
    @csrf

    ...
</form>

@method　Methodディレクティブ

HTMLフォームでは、「PUT」、「PATCH」、「DELETE」リクエストを作成できないため、「@method（メソッド）」Bladeディレクティブでこのフィールドを生成できます。

<form action="/foo/bar" method="POST">
    @method('PUT')

    ...
</form

@error　バリデーションエラー

「＠error」ディレクティブを使用すると、指定したname属性のバリデーションエラーメッセージが存在するかを簡単に判断することができます。

エラーメッセージがある場合は、「＠error」から「＠enderror」内のコードが実行されます。
また、「＠error」内では、「$message」という変数を出力することで、エラーメッセージを表示させることができます。

@error('name属性の値')
    <p>{{ $message }}</p>
@enderror

5. サブビューの読み込み

@include　ビューを取り込み

Bladeの「@include（インクルード）」ディレクティブを使えば、ビューの中から簡単に他のBladeビューを取り込めます。読み込み元のビューで使用可能な変数は、取り込み先のビューでも利用可能です。

ディレクディブ用途
@includeIf存在しているかどうかわからないビューを取り込みたい場合は、「@includeIf」ディレクティブを使います。
@includeWhen論理条件が「true」の場合に＠includeしたい場合は、
「@includeWhen」ディレクティブを使用します。
@includeUnless論理条件が「false」の場合に＠includeしたい場合は、「@includeUnless」ディレクティブを使用します。
@includeFirst指定するビューの配列から、最初に存在するビューを読み込むには、「@includeFirst」ディレクティブを使用します。
<!-- resources/views/layouts/parent.blade.php -->

@include('parent',['title'=>'digskill'])

<!-- resources/views/child.blade.php -->

<div>
  <p>{{ $title }}</p>
</div>

結果

<p>digskill</p>

@each ループとビューの組み合わせ

Bladeの「@each（イーチ）」ディレクティブを使い、ループとビューの読み込みを組み合わせることが可能です。

<!-- resources/views/layouts/parent.blade.php -->
<?php
  $users = ['ユーザー1','ユーザー1','ユーザー1']; 
?>

@each('parent',$users,'user')

<!-- resources/views/child.blade.php -->

<div>
  <p>{{ $user }}</p>
</div>

結果

<div>
  <p>ユーザー１</p>
  <p>ユーザー2</p>
  <p>ユーザー3</p>
</div>