【Laravel】 bladeの基礎的な書き方

Viewでは、値に応じて表示するかしないかをif文で決定したり、foreachで情報を列挙するなどが可能です。

コントローラから渡した値の表示

コントローラから渡した値は、{{ $var }}のようにして表示できます。

public function index ()
{
    $hoge = 100;
    $fuga = "abc";

    return view('index', [
        'hoge' => $hoge,
        'fuga' => $fuga,
    ]);
}

<p>{{ $hoge }}</p>
<p>{{ $fuga }}</p>

HTMLをそのまま表示したい場合

{{ }}を使用したデータの表示では、セキュリティの都合 (XSS防止) で自動的にHTMLがエスケープされます。 (裏でhtmlspecialcharsが実行される)

<div>
    {{ $sampleHtml }}
</div>

<div>
    &lt;p&gt;&lt;span style="color: red;"&gt;赤色の文字&lt;/span&gt;&lt;/p&gt;
</div>

もしHTMLをそのまま表示したい場合、{!! !!}で囲みます。

<div>
    {!! $sampleHtml !!}
</div>

<div>
    <p><span style="color: red;">赤色の文字</span></p>
</div>

ディレクティブ

ディレクティブとは、Viewの中で利用できる構文です。例えばループや条件分岐などを行うことができます。

配列、連想配列の列挙 (foreach)

bladeを用いたテンプレートでは、foreachやifなどを利用できます。配列を列挙する場合はforeachを利用します。

<div>
    <!-- @foreach ($ary as $v) でも良い -->
    @foreach ($ary as $k => $v)
        <p>配列のキー: {{ $k }}</p>
        <p>配列の値: {{ $v }}</p>
    @endforeach

    @foreach ($ary2 as $k => $v)
        @for ($i = 0; $i < 5; $i++)
            <p>多重ループ</p>
        @endfor
    @endforeach
</div>

@foreach ($ary as $k => $v)
    @if ($v == 10)
        <!-- このループから抜ける -->
        @break
    @endif
@endforeach

@foreach ($ary as $k => $v)
    <!-- 省略した書き方 -->
    @break($v == 10)
@endforeach

また、foreachする際にデータが空の配列だった場合の表示を切り分けたい場合、@forelseと@emptyを使用することで、ifを使わずに楽に切り分けることができます。

<div>
    @forelse ($ary as $k => $v)
        <p>配列のキー: {{ $k }}</p>
        <p>配列の値: {{ $v }}</p>
    @empty
        <p>データがありません</p>
    @endforelse
</div>

特定回数のループ (for)

特定の個数だけループしたい場合は、普通のforを使用します。

<div>
    @for ($i = 0; $i < 5; $i++)
        <p>{{ $i }}</p>
    @endfor
</div>

条件分岐 (if)

PHPと同じ感覚でifディレクティブを書くことができます。

<div>
    @if ($hoge == 3)
        <p>hogeは3</p>
    @elseif (count($ary) == 3)
        <p>aryの要素数は3</p>
    @else
        <p>それ以外</p>
    @endif
</div>

Javascriptフレームワークと競合しないようにする

よくあるパターンとして、Javascriptのフレームワークで値を表示する際に{{ varname }}のように書きます。しかし、これはbladeの構文と重複します。そのため、そのまま書いてしまうと変数がないなどでエラーとなります。

そこで、その構文をそのまま置いておくための目印として、@を波括弧の前に付与します。

<p>Vueで表示する値: @{{ hoge }}</p>

ディレクティブをエスケープする場合、@@ifのように書きます。

@if ($a = 10)
    <p>bladeが処理するif</p>
@endif

<!-- bladeが処理しないif -->
<!-- blade処理後は@が1つ消えて @if(a = 10) になる -->
@@if (a = 10) ...

@を省略したい場合

bladeの構文を使用しない区画があり、vueやreactのJavascriptで処理するだけの場合、いちいち@{{ ... }}や@@ifのように@を追加する必要はありません。

@verbatimディレクティブを使用することでその範囲を明示できます。

<div>
    <!-- ここはbladeの構文が使える -->
    <p>{{ $hoge }}</p>
    @foreach (...)
        <p>...</p>
    @endforeach

    <!-- ここはbladeの構文の処理をしない -->
    @verbatim
        <!-- @{{ hoge }} としなくてもフレームワークの書き方をそのまま行える -->
        <p>vueの値 {{ hoge }}</p>
    @endvervatim
</div>

コメント

{{-- コメント --}}のように書きます。HTMLのコメントと異なるのは、bladeのコメントはHTMLのソースに含まれないという点です。

{{-- ↓ 記事タイトル --}}
<h1>title</h1>

まとめ

特に@foreachと@ifの使用頻度は高いです。他にもログイン中かどうかを見る@auth @endauth、@guest @endguest、開発環境によって表示を切り分ける@productionなど、様々なディレクティブがあります。使用頻度は少なくとも知っておくと開発で冗長なコードを書かずに済むので、追々把握しておきましょう。