実践的Web開発メソッド

TOP / Laravel / Laravel Bladeテンプレートの使い方まとめ

Laravel Bladeテンプレートの使い方まとめ

LaravelではBladeテンプレートエンジンが使われています。

Bladeテンプレートは、他のテンプレートエンジンとは異なり、以下の特徴があります。

  • ビューに、PHPを直接記述できる。
  • PHPへコンパイルされ、変更されるまでキャッシュされており、高速に動作する。

今回は、Bladeの使い方についてまとめました。

個人的には、PHPのテンプレートエンジンはBladeが一番使いやすいなと思います。

Bladeの構文一覧

Bladeで利用できる構文の一覧です。

オプション内容
{{ $var }}変数展開
{{– コメント –}}コメント
@php
@endphp		PHPの記述
@extends(‘layout’)ビューの継承
@yield(‘content’)

@section(‘content’)
@endsection

コンテンツの挿入
@include(file)
@include(file, [‘value’ => ‘value’])		外部ファイルの読み込み
@if($flag)
@elseif($flag)
@else
@endif		if文
@foreach($array as $key => $val)
@endforeach		foreach繰り返し
@while($condition)
@endwhile		while繰り返し
@each(‘file’, $posts, ‘post’, ‘empty-posts’)コレクションの表示
@lang(‘file.key’)翻訳文字列を展開
@csrfCSRFトークンフィールドの追加
@method(‘PUT’)_methodフィールドの追加
@jsonJSONの埋め込み
{!! nl2br(e( $comment )) !!}改行表示

変数展開

{{ }} で括った結果を展開します。
中にPHPの構文を記述することができます。
また、XSS攻撃を防ぐため、htmlspecialchars関数を通されます。

@php
$str = 'hello<br />hello';
@endphp

{{ $str }}

# → 「hello<br />hello」と表示される

@php
$val = 10;
@endphp

{{ $val % 2 === 0 ? '偶数' : '奇数' }}

# → 「偶数」と表示される

コメント

Bladeでコメントを使うには、{{-- --}}で括ります。

{{-- コメント --}}
# → 何も表示されない

extends, yield, section

これらは主にレイアウトを共通化してビューを構築するために利用します。

以下の例は、親のビューにヘッダーやフッターなどの共通部分までを定義して、ページ毎にコンテンツを差し替えます。

# layout.blade.php

<html>
    <head>
        <title>アプリ名 - @yield('title')</title>
    </head>
    <body>
        <header>
            ヘッダー
        </header>

        <main>
            @yield('content')
        </main>

        <footer>
            フッター
        </footer>
    </body>
</html>

# top.blade.php

@extends('layout')

@section('title', 'Page Title')

@section('content')
    <div>
        コンテンツ
    </div>
@endsection

sectionの中身がyieldに置き換えられます。

if

if文で条件分岐するには、下記のように使います。

@php
$number = 2;
@endphp

@if($number === 1)
numberは1です。
@elseif($number === 2)
numberは2です。
@else
numberは1,2以外です。
@endif

# → 「numberは2です。」が表示される。

foreach, for, while

繰り返し文です。
foreachはコレクションの繰り返しにも使えます。

@php
$fruit = ['apple', 'orange'];
@endphp

@foreach($fruit as $index => $name)
{{ "{$index}: {$name}" }}
@endforeach

# → 「0: apple 1: orange」と表示される。

# コレクションの例
@foreach($posts as $post)
{{ $post->title }}
@endforeach

@for ($i = 0; $i <= 3; $i += 1)
{{ $i }}
@endfor

# → 「0 1 2 3」

@php
$count = 0;
@endphp

@while($count < 10)
{{ $count }}
<!--?php $count += 1; ?-->
@endwhile

# → 「0 1 2 3 4 5 6 7 8 9」

include

外部ファイルを取り込みます。
ヘッダーやフッターなどの共通部分は、親のビューに記述しますが、
includeでは、一部のページで利用される共通ビューを取り込んだりします。

# 例. ページネーションを表示。第二引数に読み込み先で利用する変数を渡せる。
@include('pagination', ['pagination' => $pagination])

each

コレクションの表示に利用します。

下の例では、$itemsを繰り返し$item変数をfilenameビューに渡してビューを生成します。
$itemsが空の場合は、empty-filenameビューを使って空の場合のビューを表示します。

@each('filename', $items, 'item', 'empty-filename')

lang

翻訳文字列を展開します。

下の例では、filenameで指定するファイルにkeyで定義されている文言を表示します。

@lang('filename.key')

csrf

フォームに、CSRFトークンフィールドを追加します。
Laravelは、VerifyCsrfTokenミドルウェアがCSRFトークンのチェックを行なっていますので、フォームにCSRFトークンフィールドを追加する必要があります。

以下のように@csrfをフォーム内に記述すると、CSRFトークンフィールドが追加されます。

<form method="POST" action="...">
    @csrf

    ...
</form>

method

HTMLのフォームでは、PUT, PATCH, DELETEなどのリクエストが出来ないため、
Laravelでは、_methodフィールドにメソッドを定義することで、リクエストを判別して処理します。

以下の例は、DELETEリクエストを送る例です。フォーム内に@method('DELETE')を定義するだけで_methodフィールドが追加されます。

<form method="POST" action="...">
    @method('DELETE')

    ...
</form>

改行の表示

bladeの構文ではないですが、Bladeで改行の表示方法です。（nl2brはPHPの関数です。）
{!! !!}で括るとエスケープせずに出力します。

@php
$texts = "1行目\n2行目";
@endphp

{!! nl2br(e( $texts )) !!}

Javascriptの利用

HTMLと同様に、scriptタグを使います。

<script>
    var str = 'hello world';
    console.log(str);
</script>

変数をJavascriptに渡すには、変数展開して渡します。

@php
$str = 'hello world';
@endphp

<script>
    var str = '{{ $str }}';
    console.log(str);
</script>

配列や連想配列の値をJavascriptに渡すには、@jsonを使います。

@php
$data = [
'field1' => 'value1',
'field2' => 'value2',
];
@endphp

<script>
    var data = @json($data);
    console.log(data);
</script>

この記事と関連している記事