【Laravel講座】ViewとBlade

ViewとBlade

※この記事は「2021年5月1日」に更新しました。

前回は、コントローラについて、紹介しました。

コントローラ

【Laravel講座】コントローラ

2019年6月15日

今回は、View(ビュー)についてです。

ぱそた
SE、Web制作、販売を経験した管理人が解説します。



View とは

前回は、単純に文字列だけブラウザに表示させるという内容だったのですが、実際に複雑な内容を表示させるためには View という仕組みを使います。

View は、画面表示を担当する部分で、簡単にわかりやすくつくれるようにテンプレートが採用されています。

Blade について

Laravel では、Blade(ブレード)という独自のテンプレートエンジンが用意されています。

PHP のスクリプトファイルをそのままテンプレートとして使うこともできますが、今回紹介する Blade を使うと効率的にコードを書くことができます。

独自の構文も用意されていたり、オブジェクト指向的な感覚で、既にあるテンプレートを継承して、新しいテンプレートを作成したりすることができます。

それでは、ルーティングの記事のときに紹介した、デフォルトで用意されている、welcome.blade.php(デモページ)のソースコードを見てみましょう。

このファイルは、resouces\viewsフォルダ内にあります。

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <!-- 長すぎるので省略します。スタイルシートとか書かれてます。 -->
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif

            <div class="content">
                <!-- 省略。タイトルやメニューなど表示されているものです。 -->
            </div>
        </div>
    </body>
</html>

コメントアウトで省略している部分が気になる方は実際にソースコードをご確認下さい。

ディレクティブ

先程の welcome.blade.php で @ から始まる見慣れない構文があるかと思います。

これは、Blade 独自のもので、ディレクティブというものです。

次に代表的なディレクティブを紹介します。

php

PHP のスクリプトを埋め込むときに使えます。

@php
ここにPHPのスクリプトを埋め込む
@endphp

< や > を使っていないので、HTML と混在していても見やすいかと思います。

if

条件分岐です。

@if (条件)
条件が真ならば、出力
@endif

if~else

もちろん、if~else も使えます。

@if (条件)
条件が真ならば、出力
@else
条件が偽ならば、出力
@endif

if~elseif

if~elseif です。複数の条件を指定するときに。

@if (条件1)
条件1が真ならば、出力
@elseif (条件2)
条件2が真ならば、出力
@else
条件1が偽かつ条件2も偽ならば、出力
@endif

while

繰り返し文です。

@while (条件)
繰り返し表示する内容
@endwhile

注意してほしいのが、while は、条件が真である限り、ループし続けるので、ディレクティブ内で条件を変化させる処理が必要だということです。

for、foreach

条件付きの繰り返し文です。

@for (初期化; 条件の判定; 条件の変化)
繰り返し表示する内容
@endfor

また、配列の要素だけ繰り返す foreach も使えます。

@foreach ($配列 as $変数)
繰り返し表示する内容
@endforeach

section

既にあるテンプレートを継承して新しいテンプレートを作成するときに使えます。

セクションは、レイアウト内に用意される区画のことです。

継承とセクションを使うことで、ベースとなるレイアウトから同じようなページを量産することができます。

section は、区画を定義するために使われます。

@section
表示内容
@endsection

yield

こちらもレイアウトで使うディレクティブです。

@yield (名前)

yield で指定した名前のセクションがあると、そのセクションが埋め込まれます。

extends

基本的に PHP でクラスを扱う感覚と似ているのですが、既存のテンプレートを継承して、新しいページをつくることができます。

@extends (Blade テンプレート名など)

例えば、resouces\viewsフォルダ内に layouts というフォルダを作成します。

次に、親テンプレートである test.blade.php というファイルを作成したとします。

そして、子テンプレートを resouces\viewsフォルダの直下に作成したとすると継承の書き方は下記のようになります。

@extends (layouts.test)

値の表示

Blade では、変数などをテンプレートに埋め込むことができます。

{{ 変数、値、関数など }}

このような感じで書くことで中身の文が返す値を表示させることができるのです。

最後に

いかがでしょうか。

中々の長文になってしまいました。

次回は、Blade を使ったコーディングについて。

Bladeを使ったコーディング

【Laravel講座】Bladeを使ったコーディング

2019年6月25日

実際に Blade を使って適当なページを作成する予定です。