LaravelのBlade構文で使える書き方！テンプレで覚える

2023 10/31

2021年10月30日 2023年10月31日

LaravelのBlade構文で使える書き方って色々あるらしいけど、実際にどうやって使って、どのように画面を制御できるのかわからないなぁ….

こんな疑問を解決します。

この記事では、LaravelのBlade構文で使える書き方を一覧で書き、例を用いて解説します。

レイアウトの表示に困ったら参考にしていただけると嬉しいです。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】この記事ではココナラに似てる副業サイトを11こ紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。本記事のゴールココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

Contents

動作環境

Docker 20.10.7
PHP 7.4.22
Laravel 8.53.1
mySQL 5.7
データベースのツール　phpmyadmin

LaravelのBlade構文で使える一覧

Blade構文を用いれば、画面に表示したい内容を制御できます。変数が空の時、セットされている時、配列を扱う時、要素が1つ以上ある時…などphpの関数とも組み合わせてレイアウトを表示できるのでぜひblade構文をマスターしましょう！

// エスケープ処理される
{{  }}

// エスケープ処理したくない
{{!! 値や変数 !!}}

エスケープ処理とは、簡単に言えばコードを別の文字列に置き換えることです。理由はセキュリティ対策で、エスケープ処理していないと悪意のある利用者にコードを埋め込まれてしまう危険があります。
これをXSS(クロスサイトスクリプティング)と呼びます。
訪問者が知らずにクリックしたら、予期しない悪意のある動作が実行されてしまったり…あるのでエスケープ処理はしておきましょう。

項目	説明
@if (条件) …. @endif	条件がtrueの時に画面を表示
@if (条件) …. @elseif (条件) … @else … @endif	複数の条件分岐がある場合に用いる
@isset (変数) … @endisset	変数が定義されており、変数の値がnullではない場合に表示
@empty (変数) … @endempty	変数が空,null,0の場合に表示
@for (初期値; 条件; 後処理) …繰り返し表示 @endfor	PHPのfor文に該当する
@foreach ($配列 as $変数) …繰り返し表示 @endforeach	PHPのforeach文に該当する
@php …PHP文 @endphp	PHPの関数などが使えて、変数などを定義できる
@component (名前) … @endcomponent	コンポーネントを作成する

@if..@endif

最も使うと思いますが、if構文に該当します。

// $fooの値が1の時にhello!が表示される
@if ($foo === 1)
  <p>hello!</p>
@endif

@if..@elseif…@else…@endif

複数の条件分岐の時に活用します。

// %は、演算子
// $fooの値が2で割り切れる時(偶数)、helloを表示
// $fooの値が5で割り切れる時、(5の倍数)、goodを表示
// それ以外の時、thanksが読まれる。
@if ($foo % 2 === 0)
  <p>hello</p>
@elseif ($foo % 5 === 0)
  <p>good</p>
@else
  <p>thanks</p>
@endif

@if..@elseif…@else…@endif

複数の条件分岐の時に活用します。

// %は、演算子
// $fooの値が2で割り切れる時(偶数)、helloを表示
// $fooの値が5で割り切れる時、(5の倍数)、goodを表示
// それ以外の時、thanksが読まれる。
@if ($foo % 2 === 0)
  <p>hello</p>
@elseif ($foo % 5 === 0)
  <p>good</p>
@else
  <p>thanks</p>
@endif

@isset…@endisset

変数が定義されており、変数の値がnullではない場合に画面を表示します。

// $foo = 1;など値がある時、表示成功が画面に出力される
// $foo = 0は表示
// $foo = '';空の時も表示
// $foo = null;の時は表示されない

@isset ($foo)
  <div>{{ '表示成功' }}</div>
@endisset

@empty…@endempty

変数の値が空,null,0の場合に表示します。

// $foo = nullまたは、''または、0の時に表示成功が表示される
// $foo = 1など値がセットされている時は、表示されない
@empty ($foo)
  <div>{{ '表示成功' }}</div>
@endempty

@for…@endfor

PHPのfor構文に該当します。

// フォームが3つ作成される
@for ($i=0; $i<3; $i++)
  <div class="form-group">
    <input type="text" class="form-control">
  </div>
@endfor

@foreach…@endforeach

PHPのforeach構文に該当し、よく使います。データベースから取得した配列を1つずつ取り出して表示させます。

// $books = Book::get();
<table class="table table-striped book-list-table">
  <thead>
    <tr>
      <th>ブックナンバー</th>
      <th>ブック名</th>
    </tr>
  </thead>
  <tbody>
    @foreach ($books as $book)
    <tr>
      <td>{{ $book->book_id }}</td>
      <td>{{ $book->book_name }}</td>
    </tr>
    @endforeach
  </tbody>
</table>

@php…@endphp

PHPの構文をBlade内で使うことができ、関数を定義したりできます。

// 現在時刻を定義
@php
    $foo = \Carbon\Carbon::now();
@endphp
// 2021-10-30 18:17:35
<p>{{ $foo }}</p>
// 2021-10-30
<p>{{ $foo->format('Y-m-d') }}</p>

PHPの構文を使えるので、Bladeでdd関数を行いデバッグもできます。

// 現在時刻を定義
@php
    $foo = \Carbon\Carbon::now();
    dd($foo);
@endphp

@component…@endcomponent

レイアウトを使い回すときに便利です。

componentについては、以下の記事で詳しく解説しています。

あわせて読みたい

Laravelでレイアウトを再利用する方法！componentsを使うんだ Laravelで同じレイアウトを何度も書くのが面倒だな…ビューをどこかにまとめて使い回す方法があれば教えて欲しいなぁ… こんな疑問を解決します。画面のレイアウトを…

Blade内でPHPの関数を組み合わせてさらに画面を制御する

Blade内で使える構文を例とともに見てきましたが、PHPの関数を組み合わせるとさらに画面の制御に役立ちます。

PHPの関数の前に&&や||などの演算子も覚えておくといいでしょう。
&&はかつ、||はまたはを表します。
例えば、変数1 && 変数2は変数1かつ変数2の条件の時にtrueとなり、
変数1 || 変数2は変数1または変数2の条件の時にtrueとなります。

// $foo = 1かつ$hoge = 1の時に画面に成功！が表示される。
// $foo = 1,$hoge = 2などどちらか条件が一致しないと表示されない
@if ($foo === 1 && $hoge === 1)
    <p>{{ '成功！' }}</p>
@endif

// $foo = 1または$hoge = 1の時に成功！が表示
// $foo = 1,$hoge = 2でもどちらかの条件に一致しているのでこれも表示
@if ($foo === 1 || $hoge === 1)
    <p>{{ '成功！' }}</p>
@endif

また、!は否定の意味になります。
例えば、isset($foo)は$foo値がセットされている時を調べますが、
!isset($foo)とすると、否定になるので$fooの値がセットされていない時となります。

項目	説明
count(変数) > 0	要素が1つ以上あれば表示
in_array( ‘調べる値’ ,配列)	配列に調べる値があれば表示

count(変数) > 0

要素が1つ以上あれば表示します。

// $foo = [];の時、要素は0なので表示されない
// $foo = ['Laravel']の時、要素数は0より大きいので画面上に成功！が表示
@if (count($foo) > 0)
    <p>{{ '成功！' }}</p>
@endif

in_array( ‘調べる値’ ,配列)

配列に調べる値があれば表示します。

// $foo = ['PHP', 'Laravel'];の時、配列にPHPがあるので成功！が表示
// $foo = ['Laravel', 'Java']の時、配列にPHPがないので表示されない

@if (in_array('PHP', $foo))
    <p>{{ '成功！' }}</p>
@endif