副業におすすめなサイトを見る→

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

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

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

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

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

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

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

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

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

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については、以下の記事で詳しく解説しています。

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

【まとめ】LaravelのBlade構文で使える書き方

今回は、LaravelのBlade内で使える構文の書き方と+αとして覚えておくべきPHPの関数を紹介しました。

PHPの組み込み関数を用いるとさらにレイアウト表示の幅が広がるのでぜひ参考にしてみてくださいね。

このブログでは他にも実務で役立つLaravelの記事を書いているので、合わせてチェックしてください。

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

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

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

スキルを売り買いするならココナラ

コメント

コメントする

CAPTCHA


Contents
閉じる