テンプレート（ビュー）

ビューの基本

○ 命名規則

{任意の名前}.blade.php
例）
hoge.blade.php

○ 変数の出力

Laravelではビューの作成に「Blade」というテンプレートエンジンを用いています。
Bladeではコントローラから受け取った変数を画面に出力するために以下の様な書式を用います。

{{ 変数名 }}	タグ等の特殊文字列をエスケープしてデコード
{!! 変数名 !!}	タグ等の特殊文字列をエスケープせずにデコード
{{-- コメント --}}	コメント扱いとなり、何も出力しません

○ 制御構文

条件分岐等の制御構文を使用する事ができ、以下の様な制御が可能です。

@if( $hoge == '' )
@elseif( $foo != '' )
@else
@endif

@foreach( $array as $elem )
    @continue                                          // スキップも使用できる
    {{ $loop->iteration }} 回目             // カウントも集計できる
@endforeach

@isset( $hoge )
    // if文っぽく使える
@endisset

@empty( $hoge )
    // if文っぽく使える
@endempty

○ [styleSheet][JavaScript]へのリンク

ビューの構造

画面の内部構造は当然「HTML」で記述するため、以下の様な構造となります。

ビューの構造

<!DOCTYPE HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
        サンプル画面
    </BODY>
</HTML>

この構文を毎画面記述していきます。
少しピンとこないかもですが、通常よくある画面だと「共通ヘッダ」「共通フッタ」などが良く存在します。
イメージとしては以下となります。

共通ヘッダ・フッタ

<!DOCTYPE HTML>
    <HEAD>
        <TITLE>サンプル</TITLE>
    </HEAD>
    <BODY>
        {{-- 共通ヘッダ --}}
        <div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
            共通ヘッダ<BR />
            ここに共通の内容を記述します
        </div>
        サンプル画面
        {{-- 共通フッタ --}}
        <div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
            共通フッタ
            ここに共通の内容を記述します
        </div>
    </BODY>
</HTML>

単純な「ヘッダ」「フッタ」にもかかわらず、この内容を毎画面に記述するのは、
面倒くさくないですか？

という訳で「ヘッダ」「フッタ」を共通部品として作成してみましょう。
ディレクトリ名やファイル名は任意ですが、以下３ファイルを作成します。

○ ～\resources\views\layout\base.blade.php
○ ～\resources\views\layout\header.blade.php
○ ～\resources\views\layout\footer.blade.php

まずは「base.blade.php」を以下の様に作成します。

base.blade.php

<!DOCTYPE HTML>
    <HEAD>
        <TITLE>サンプル</TITLE>
    </HEAD>
    <BODY>
        @section('header')
            @include('layouts.header')
        @show

        @yield('content')

        @section('footer')
            @include('layouts.footer')
        @show
    </BODY>
</HTML>

このファイルを《親画面》とします。
「@section('header') ～ @show」がセットとなり「@show」の場合は、挟まれた内容を即座に表示する構文となります。
挟まれた内容は「@include('layouts.header')」となり、これは引数で設定したファイルを読込みます。
つまり『～\resources\views\layout\header.blade.php』『～\resources\views\layout\footer.blade.php』となります。

header.blade.php

{{-- 共通ヘッダ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通ヘッダ
ここに共通の内容を記述します
</div>

footer.blade.php

{{-- 共通フッタ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通フッタ
ここに共通の内容を記述します
</div>

『@yield('content')』は逆に《子画面》で定義された「@section('content') ～ @endsection」の内容を表示します。
よって子画面（ここでは[index.blade.php]とします）の内容を以下の様にします。

index.blade.php

@extends('layouts.base')
@section('content')
子画面本文
@endsection

『index.blade.php』にアクセスしてみてください。
どうですか？
こんな４行だけのファイルにアクセスしただけで『ヘッダ』『フッタ』が表示されています!!

変数のアサイン

『ビューの構造』では、画面を描画する際に合計以下４ファイルを使いました。

○ ～\resources\views\layout\base.blade.php        子画面のレイアウトとなる親画面
○ ～\resources\views\layout\header.blade.php   親画面から呼ばれるヘッダ画面
○ ～\resources\views\layout\footer.blade.php     親画面から呼ばれるヘッダ画面
○ ～\resources\views\hoge\index.blade.php         親画面から呼ばれるヘッダ画面

この構造の利点は共通部品を全て一括管理できる事です。
ただし、よく考えると共通過ぎて完全に「静的画面」となっています。
要望としては以下の様に「動的画面」にしたいです。
　① タブ名を変更したい
　② ヘッダにはユーザー名を表示したい
　③ フッタには次ページのリンクを表示したい

そのためにはコントローラから変数をアサインする必要があり、以下の様に記述してみましょう。

任意のコントローラ

public function index(Request $request) {
$link = 'https://www.yahoo.co.jp/';
return view('hoge/index', ['title' => 'ほげ', 'user' => 'hoge_user', 'link' => $link]);
}

ビューへのアサインは、対象コントローラから連想配列で設定します。
変数を受け取ったビューは以下の様に設定します。

base.blade.php

<!DOCTYPE HTML>
    <HEAD>
        <TITLE>{{ $title }}</TITLE>
    </HEAD>
    <BODY>
        @section('header')
            @include('layouts.header')
        @show

        @yield('content')

        @section('footer')
            @include('layouts.footer', ['yahoo' => $link])
        @show
    </BODY>
</HTML>

header.blade.php

{{-- 共通ヘッダ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通ヘッダ<BR />
ようこそ {{ $user }} さん
</div>

footer.blade.php

{{-- 共通フッタ --}}
<div style="height:100px;width:100%;text-align:center;background-color:#AAA;">
共通フッタ<BR />
<a href="{{ $yahoo }}">Yahoo</a>
</div>

各変数の振舞いは以下の様になります。

$title	そのまま親画面に指定できます
$user	親画面が呼出しているヘッダ画面にも直接指定できます
$yahoo	本来は直接「$link」で指定できますが、別の指定方法として「@include」から変数を渡す事も可能です

目次

テンプレート（ビュー）

ビューの基本

ビューの構造

変数のアサイン