LaravelのViewテンプレートBladeで使う基本のディレクティブまとめ

Laravel2021.11.21

最終更新日：2021.11.22 Update!!

Laravelでは画面を描画するときにBladeというテンプレートエンジンを使いますが、その中ではディレクティブという独自の構文が用意されています。これを用いることでHTML上にさまざまな処理を効率よく組み込んでいくことができます。このディレクティブにはさまざまなものがあるのですが、今回はよく使われる基本的な部分についてまとめてみたいと思います。

1. 変数・コメントの出力

PHPで扱う変数を画面上に出力するときには下記のように、二重の波括弧で変数を囲むことで値を出力することができます。このときに特殊文字についてはデフォルトでエスケープされるようになっていますが、文字列として出力した場合は異なる記述方法になります。コメントについてはHTMLで扱われる書き方も使えますが、Bladeのみに有効となる書き方も合わせて覚えておきたいですね。

// 変数出力
{{ $variable }}

// 特殊文字をエスケープさせない
{!! $variable !!}

// コメント出力
{{-- コメント --}}

また、変数出力時にJavaScriptでマスタッシュ記法と併用する場合は先頭に＠をつけることで、二重の波括弧と変数をそのまま文字列として扱うことができます。Vue.jsではデフォルトでデリミタが二重波括弧になるので、そのままBladeテンプレート内で使うとエラーが発生します。そのような場合にはこちらの対応を行います。

@{{ variable }}

2. PHPの処理

Bladeテンプレート内ではそのままPHPのプログラムを書くこともできます。そのときに通常通りの記述をすることもできますが、下記のように「@php 〜 @endphp」で囲む専用のディレクティブを使うことをお勧めします。

@php
  $message = 'Hello world!';
  echo $message;
@endphp

3. 条件分岐

BladeのディレクティブにはPHPで扱われる基本的な処理はショートハンドとして用意されています。条件分岐はよく使われる処理の1つですのでいろんなケースで扱われます。 @if() 〜 @else(), @elseif() 〜 @endif その中でもif文を使った条件分岐は基本になります。こちらも通常の書き方と形は似ているので覚えやすいですね。「@if()」と「@endif」で囲むように記述します。

@if( $fruits === 'orange' )
  ミカンです
@elseif( $fruits === 'apple' )
  リンゴです
@else
  その他の果物です
@endif

@switch 〜 @case(), @break, @default 〜 @endswitch 条件の分岐が多くなる場合にif文ではどうしても長くなり見通しも悪くなります。そのような場合にはswitch文が便利です。Bladeにはswitch文のディレクティブも用意されています。

@switch($fruits)
  @case('orange')
    ミカンです
      @break
  @case('apple')
    リンゴです
      @break
  @default
    果物です
@endswitch

@isset() 〜 @endisset, @empty() 〜 @endempty 変数の値の有無で処理を切り分けたい場合にはisset()関数やempty()関数が条件分岐と合わせて使われますが、これらも専用のディレクティブがあります。if文とメソッド部分が合わせて1つのディレクティブで完結できるので、よりスッキリとコードを書くことができます。

@isset( $variable )
  // 変数に値が入っているときの処理
@endisset

@empty( $variable )
  // 変数が空のときの処理
@endempty

@auth 〜 @endauth, @guest 〜 @endguest ウェブアプリケーションを開発していると、認証機能を実装することもありますが、認証されているかどうかで分岐ができるディレクティブも用意されています。ログインユーザーと通常ユーザーと表示を変えるときなどに便利です。

@auth
  // 認証されているときの処理
@endauth

@guest
  // 認証されていないときの処理
@endguest

4. 繰り返し処理

条件分岐と合わせてよく使われるのが繰り返し処理です。Bladeのディレクティブには繰り返し処理のものも用意されており、通常の書き方に近い形で記述することができます。 @for() 〜 @endfor 繰り返す回数が固定であったり予め決まっている場合にはfor文が用いられることが多いですが、ディレクティブを使うときもこのように記述することで同じ結果を出すことができます。

@for( $index = 1; $index < 5; $index++ )
  {{ $index }} 回目の繰り返しです
@endfor

@while() 〜 @endwhile 繰り返す回数が決まっていない、あるいは状況によって変化する場合にはwhile文が使われます。while文の場合には条件によってループを抜けるようにしておかないと無限ループになってしまう恐れがありますので注意します。ループを抜ける場合には「@break」を使います。

@while( true )
  @if( $day === '日曜日' )
　　　　  お休みです
      @break
  @endif
    営業中
@endwhile

@foreach() 〜 @endforeach 配列に対してそれぞれの値に繰り返し処理を行う場合にはforeach文が使われます。ディレクティブでも通常の書き方に近い形で記述できます。

@foreach( $posts as $post )
  タイトル：{{ $post->title }}
  投稿日：{{ $post->date }}
  カテゴリ：{{ $post->category }}
@endforeach

また、Bladeの繰り返し処理のディレクティブの中では「$loop」という専用の変数を扱うことができます。この変数の中では、最初と最後の繰り返しをチェックできたり、インデックス番号や、現在何回繰り返しているかの回数も下記のように取得できます。

@foreach( $posts as $post )
  @if ( $loop->first )
    【最初の記事】
　　 @elseif ( $loop->last )
　　　　  【最後の記事】
　　 @else
　　　　  【{{ $loop->iteration }}件目の記事】
　　　　  タイトル：{{ $post->title }}
　　　  　投稿日：{{ $post->date }}
　　　  　カテゴリ：{{ $post->category }}
@endforeach

$loop変数の主な使い方としては下記のようなものがあります。本来は個別に計算したりする必要があるものも、これを使うことで簡単に繰り返しに合わせた処理を作ることができますね。

$loop->first	最初のループ処理かどうかをチェックする
$loop->last	最後のループ処理かどうかをチェックする
$loop->index	ループのインデックスを取得
$loop->iteration	現在までに繰り返した数を取得
$loop->remaining	残りの繰り返し処理数を取得
$loop->count	繰り返す配列要素の値の数を取得

5. レイアウト・テンプレート

Bladeは画面を描画するためのテンプレートエンジンですので、HTML上でのレイアウトやテンプレート化など、画面を効率よく作ることができるようにするためのディレクティブも用意されています。 @extend(), @section() 〜 @sectionend ＆ @yield() 「@extend()」はレイアウトを継承することができるディレクティブです。主にページの大枠に利用されることが多いです。これはPugでも似たようなも（過去記事：Pugでページテンプレートの作成にextendsとblockを活用する）のがありますので普段Pugを使っている場合にはイメージしやすいかもしれません。下記のようにlayoutディレクトリの中に継承元のHTMLを用意します。【resources/views/layouts/layout.blade.php】

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    @yield( 'content' )
  </body>
</html>

継承元のHTMLには、継承対象のファイルのコンテンツを呼び出す場所へ「@yield」ディレクティブを使って指定します。引数には後述で紹介しますが、対応する「@section」ディレクティブで指定した名前を指定します。そして継承先のHTMLも作成していきます。主にページごとの中身とイメージするとわかりやすいかと思います。まず最初に「@extend」で継承するレイアウトを指定します。そして「@section」と「@endsection」で囲まれた範囲内に継承元のレイアウト内で展開するコンテンツ内容を記述していきます。【resources/views/index.blade.php】

@extend( 'layouts.layout' )

@section( 'content' )
  <header></header>
  <main></main>
  <footer></footer>
@sectionend

@include

続いて、各ページ用に静的な共通パーツとして呼び出すことができるのが「@include」ディレクティブです。これらのパーツはサブビューと呼ばれ、共通部分をテンプレートパーツ化していく際によく使われます。まずは下記のようにサブビューにあたる部分を別ファイルで管理していきます。

// resources/views/layouts/header.blade.php
<header></header>

// resources/views/layouts/footer.blade.php
<footer></footer>

そしてこれらを必要な場所で読み込んでいきますが、@includeディレクティブは単純に呼び出したい共通パーツ部分が含まれるファイルのパスを以下のように引数に指定するだけでOKです。【resources/views/index.blade.php】

@extend( 'layouts.layout' )

@section( 'content' )
  @include( 'layouts.header' )
  <main></main>
  @include( 'layouts.footer' )
@sectionend

@push() 〜 @endpush ＆ @stack() また、Bladeには「@push」と「@stack」というものがあります。これは@sectionや@includeとよく似ているのですが、複数の出力内容をまとめる場合にはこちらを使います。例えば下記のように、head内に記述するスタイルやスクリプト、meta情報や、body終了の直前で追加するスクリプトなどの出力に使われたりします。継承元でこのように出力させる箇所に「@stack」ディレクティブを設置し、引数には呼び出される内容に対応する名前を設定します。【resources/views/layouts/layout.blade.php】

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @stack( 'style' )
    @stack( 'head_script' )
  </head>
  <body>
    @yield( 'content' )
    @stack( 'body_script' )
  </body>
</html>

呼び出される側の方には、「@push」ディレクティブを使い出力内容を「@endpush」との間に囲まれるように記述していきます。【resources/views/index.blade.php】

@extend( 'layouts.layout' )

@push( 'style' )
  <link rel="stylesheet" href="/css/style.css">
@endpush

@push( 'head_script' )
  <script>
    alert('Hello world');
  </script>
@endpush

@section( 'content' )
  @include( 'layouts.header' )
  <main></main>
  @include( 'layouts.footer' )
@sectionend

@push( 'body_script' )
  <script src="/js/main.js"></script>
@endpush

このようにそれぞれの部位をテンプレート化させることで、効率よく画面やページを構築していくことができます。

今回はBladeでよく使われる基本的なディレクティブについてまとめてみましたが、これ以外にもたくさん専用のディレクティブは用意されており、必要に応じて上手く活用し効率よく画面を描画するViewの処理を作成していきたいですね。