![見出し画像](https://assets.st-note.com/production/uploads/images/51987951/rectangle_large_type_2_b1f5e6734139724dab889e5b52f6e515.png?width=1200)
[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 : 何回目の繰り返しか(1から始まる)
$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ファイルのレイアウトを確認していきます。
この記事が気に入ったらサポートをしてみませんか?