[lavavel8] viewの基礎

ユーザーのブラウザで表示されるHTMLで構成されるviewを見ていきます。

viewファイル

laravelで使われるテンプレートのファイルは

resources/views/

のディレクトリの下に保存されています。

Laravelをインストールした直後には

resources/views/welcome.blade.php

が自動的に作られます。

基本的にはここのディレクトリにあるファイルが、あなたのサイトを見にきたユーザーが見るページになります。

すでに気づいているかもしれないですが、viewのファイルは

welcome.phpではなくwelcome.blade.phpになります。

もちろんwelcome.phpでも使えるのですが、laravelのテンプレートエンジンのbladeを最大限利用するために .blade.phpをつけています。

例えばphpの文字力の出力は

<?= $title; ?>

もしくは

<?php echo $title; ?>

と書きますが、bladeでは

{{ $title }}

と簡潔に書くことができます。

Laravelではbladeが使われると~.blade.phpのファイルはバニラphp(素のphpのみの)ファイルにコンパイルされます。

laravelのプロジェクトの

storage/framework/views

のディレクトリを見てみるとコンパイルされたviewのテンプレートが保存されています。

エスケープ

上で示した変数の出力方法

{{ $title }}

は、$titleはエスケープされて表示されます。この理由は$titleの変数にjavascriptのタグなど開発者が望んでいない変数が入ってきても対処できるようにです。

例を見てみましょう。

$title = '<script>alert("alert....");</script>';

<h1>{{ $title }}</h1>

としてブラウザで見るとどうなるでしょうか？

javascriptのalertが発せられるわけではなく、エスケープされ文字列として出力されていますね。

laravelではデフォルトでこの機能が付いています。

しかし、ユーザーにタグを入力してもらいそれを表示させたい時もあります。

たとえばブログのエディターを作って、<p>のタグを入力された時も

このようにエスケープを望んでいない時もエスケープされてしまいます。

laravelではエスケープしないで出力させる時も想定されていて、以下のようにして使用することができます。

{!! $title !!}

{{ }} の代わりに {!! !!} を使用することでエスケープしないで文字列を出力させることができます。

bladeディレクティブ

Laravelではbladeのファイルの中で使えるbladeディレクティブと呼ばれるIf文やループの構文のようなものがあります。

ここではよく使われるいくつかのbladeディレクティブを確認します。

@if

@if(条件)
　条件がtrueの時に出力される
@endif

もちろん elseも使えます。

@if(条件)
　条件がtrueの時に出力される
@else
　条件がfalseの時に出力される
@endif

@unless

@ifの真逆のunless

@unless(条件)
　条件がfalseの時に出力される
@endif

@foreach

例えばブログ記事の一覧を表示する時にも使います。

$posts に記事の一覧が入っているとして

@foreach($posts as $post)
 　処理
@endforeach

などと記述し、それぞれの記事を表示したりできます。

また foreachでは$loop変数も準備されていて、

@foreach($posts as $post)
 　@dd($loop)
@endforeach

としてみるとよくわかります。

ここのddディレクティブはlaravelでよくデバッグに使われるdd関数です。　　　ddはdump and dieの意味でデバッグで変数の中身などを出力し、その場で実行を止めて確認する場合などにとても便利です。

上の$loopは

{#999 ▼
 +"iteration": 1
 +"index": 0
 +"remaining": 0
 +"count": 1
 +"first": true
 +"last": true
 +"odd": true
 +"even": false
 +"depth": 1
 +"parent": null
}

$loop->iteration : 何回目の繰り返しか(１から始まる)

$loop->index : 元の配列またはコレクションのindex

$loop->remaining : あと何回繰り返しが残っているか

$loop->count : 元の配列またはコレクションの要素数

$loop->first : 最初の繰り返しかどうか (boolean)

$loop->last : 最後の繰り返しかどうか (boolean)

$loop->odd : iterationが奇数かどうか(boolean)

$loop->even: iterationが偶数かどうか(boolean)

$loop->depth : 繰り返しのネスト数

$loop->parent : ネストしている時、親の繰り返しのループ変数を示す

このloop変数を使用すれば、例えばブログの記事の一つおきに背景の色を変更するなどもできます。

    @foreach($posts as $post)
       <article class="{{ $loop->even ? 'greyColor' : '' }}">

       </article>
   @endforeach

最後に

今回はlaravelのviewの基本的なところを確認しました。次回はviewファイルのレイアウトを確認していきます。