基本的なビューの表示方法
概要
routes/viewsディレクトリー下かそのサブディレクトリー下にビューファイルを置き、ルーティングでそれを指定する。
ビューファイル名には.blade.phpが付加され、HTML以外にLaravelの機能を持たせるための記述を含む、Bladeテンプレートとして扱われる。
- ビューファイルは
resources/viewsディレクトリー下、あるいはそのサブディレクトリー下に置く- ファイル名は
[ビュー名].blade.phpにする
- ルーティングでビューファイルを指定するときは
- 無名関数の処理内容を
return view('ビュー名');とする
- ビュー名はビューファイル名から
.blade.phpを除いたもの
- ビューファイルをサブディレクトリー下に配置した場合、
resources/viewより下のパスを、デリミターを'.'として記述する
例1
Laravelプロジェクト生成直後に表示される”Laravel”の初期ページ。ルーティングファイルに以下だけ記述されている。
|
|
Route::get('/', function () { return view('welcome'); }); |
また、resource/viewsディレクトリーにはwelcome.blade.phpファイルのみ準備されている。
|
|
[vagrant@localhost laravel_tutorial]$ ls resources/views welcome.blade.php |
内容は以下のとおり。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet"> <!-- Styles --> <style> ..... </style> </head> <body> <div class="flex-center position-ref full-height"> ..... <div class="content"> <div class="title m-b-md"> Laravel </div> <div class="links"> <a href="https://laravel.com/docs">Docs</a> <a href="https://laracasts.com">Laracasts</a> <a href="https://laravel-news.com">News</a> <a href="https://blog.laravel.com">Blog</a> <a href="https://nova.laravel.com">Nova</a> <a href="https://forge.laravel.com">Forge</a> <a href="https://vapor.laravel.com">Vapor</a> <a href="https://github.com/laravel/laravel">GitHub</a> </div> </div> </div> </body> </html> |
例2
resourcesディレクトリーの下にsamplesディレクトリーをつくり、その中にview_sample.blade.phpというファイル名で以下の内容のファイルを作成する。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>はじめてのView</title> <title>簡単なView</title> </head> <body> <h1>簡単なView</h1> <p> Viewファイルはルーティングファイル(web.php)から呼ばれて表示される。 </p> </body> </html> |
routes/web.phpファイルに以下のルーティングを追加する。
|
|
Route::get('/view_sample', function() { return view('samples.view_sample'); }); |
サーバーが起動している状態でブラウザーからドメイン/view_sampleにアクセスすると、view_sample.blade.phpがパースされて表示される。
この場合のビューファイルとview()メソッドでの指定の仕方は以下のとおり。
- ビューファイルを
viewsディレクトリーのサブディレクトリーsamples下に作成
views/samples/view_sample.blade.php
view()メソッドで呼び出すときは'.blade.php'を除き、パスのデリミターを'.'にした形で指定
URIの/view_sampleとファイル名のview_sample.blade.phpは必ずしも同じである必要はない。
変数の展開
概要
ビューファイル内に、PHPの変数を埋め込んで内容を反映させることができる。
- ビューに対して変数を渡すときは、
[変数名]=>[内容]を要素とする連想配列で渡す
- ビュー側では、連想配列のキーが変数名、値が内容として解釈される
- ビュー内で
{{ 変数 }}とすると変数の内容が展開され、HTMLに埋め込まれる
例
resources/samplesディレクトリー下に、ファイル名blade_sample.blade.phpで以下の内容のファイルを作成する。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="with=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>{{ $head }}</title> </head> <body> <h1>{{ $head }}</h1> <ul> <li>{{ $mechanism1 }}</li> <li>{{ $mechanism2 }}</li> </ul> </body> </html> |
このビューに対して、routes/web.php内で以下の様にルーティングを設定。
|
|
Route::get('blade_sample', function() { $assoc_array = [ 'head' => 'bladeテンプレートでの変数展開', 'mechanism1' => '連想配列をview()の第2引数に渡す', 'mechanism2' => 'それを受け取ったビューでは、キーが変数名、値が変数の内容となる', ]; return view('samples.blade_sample', $assoc_array); }); |
ビューファイルのパース時に変数が展開され、内容がHTMLに埋め込まれるため、ブラウザーでの表示結果は以下のようなイメージになる。
|
bladeテンプレートでの変数展開
- 連想配列をview()の第2引数に渡す
- それを受け取ったビューでは、キーが変数名、値が変数の内容となる
|
出力エスケープ
変数埋め込みで内容を展開する際、HTML特殊文字はエンティティーに変換されるが、エスケープを抑制してHTML特殊文字をそのまま出力する方法もある。
概要
- ビューで
{{ ... }}とするとHTMLの特殊文字はLaravelによってエスケープされる
{!! ... !!}とするとHTMLの特殊文字はエスケープされず、HTMLとして機能する
例
ルーティングファイルweb.phpに以下の2行を追加する。
|
|
Route::get('blade_sample', function() { $assoc_value = '変数内容になる値は、リテラルでも任意の前の変数でもよい'; $assoc_array = [ 'head' => 'bladeテンプレートでの変数展開', 'mechanism1' => '連想配列をview()の第2引数に渡す', 'mechanism2' => 'それを受け取ったビューでは、キーが変数名、値が変数の内容となる', 'escaped' => 'HTML特殊文字は<strike>自動的に</strike>エスケープされる', 'unescaped' => '{{...}}}ではなく{!!...!!}で囲むとエスケープ<strike>される</strike>されない', ]; return view('samples.blade_sample', $assoc_array); }); |
また、先に作成したビューファイルblade_sample.blade.phpに以下の2行を追加する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="with=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>{{ $head }}</title> </head> <body> <h1>{{ $head }}</h1> <ul> <li>{{ $mechanism1 }}</li> <li>{{ $mechanism2 }}</li> </ul> <p>{{ $escaped }}</p> <p>{!! $unescaped !!}</p> </body> </html> |
この場合のブラウザーの表示結果は以下のイメージ。
|
bladeテンプレートでの変数展開
- 連想配列をview()の第2引数に渡す
- それを受け取ったビューでは、キーが変数名、値が変数の内容となる
HTML特殊文字は<strike>自動的に</strike>エスケープされる
{{…}}}ではなく{!!…!!}で囲むとエスケープされるされない |
コメント
Bladeテンプレート内にコメントを書くことができ、HTMLへのパース時にはコメント行は無視される。
概要
- Bladeテンプレートのコメントは
{{-- ... --}}で記述する
- Bladeのコメントはパース後のHTMLには現れない
例
最初に使ったview_sample.blade.phpファイルに以下の2行を追加する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>はじめてのView</title> <title>簡単なView</title> </head> <body> <h1>簡単なView</h1> {{-- Blade用のコメント文はパース時に無視される --}} <!-- HTML用のコメントはHTMLソースに残る --> <p> Viewファイルはルーティングファイル(web.php)から呼ばれて表示される。 </p> </body> </html> |
これがパースされた後のHTMLソースは以下の様になり、Blade用のコメントはソースに反映されていない。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>はじめてのView</title> <title>簡単なView</title> </head> <body> <h1>簡単なView</h1> <!-- HTML用のコメントはHTMLソースに残る --> <p> Viewファイルはルーティングファイル(web.php)から呼ばれて表示される。 </p> </body> </html> |
ディレクティブ
概要
Bladeテンプレート内に条件分岐やループなどを行うディレクティブを書くことができる。
- ディレクティブはBladeテンプレートに記述し、ロジック制御やレイアウト処理などPHPとしての処理を埋め込む
- ディレクティブは
@キーワード...のように記述する
例
まず、ルーティングでビューに配列を渡す。
|
|
Route::get('/directive_sample', function() { $dreams = ['一富士', '二鷹', '三茄子']; return view('samples.directive_sample', [ 'head' => '初夢', 'dreams' => $dreams]); }); |
ビューでは、配列の要素を一つずつ取り出して表示させている。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="with=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>{{ $head }}</title> </head> <body> <h1>{{ $head }}</h1> <ol> @foreach($dreams as $dream) <li>{{ $dream }}</li> @endforeach </ol> </body> </html> |
ここで使われている@foreachや@endforeachがディレクティブで、ビューの中でPHPの処理・制御をしたり、レイアウトを扱ったりすることができる。
ディレクティブの詳細はこちら。
レイアウト
レイアウトに関するディレクティブを使って、ファイルの共通のレイアウトをまとめることができる。
概要
- 共通レイアウトのビューを親とする
- プレースホルダーとして
@yieldディレクティブを書く
@yieldごとにその場所に入るべきセクション名を指定
- 共通レイアウトを利用するビューを子とする
- 親とするレイアウトビューを
@extendsディレクティブで指定する
- 親の各
@yieldに対応するセクションを@sectionディレクティブで定義し、その内容を記述する
例
共通のレイアウトとして、views/layouts/common.blade.phpを以下の内容で準備する。
titlle要素に'title'セクションの内容を反映main要素に'content'セクションの内容を反映header要素の部分は、このページが変わっても同じ内容が表示される
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>@yield('title')</title> </head> <body> <header style="background-color: #ccc"> 共通レイアウトに各ページ共通のヘッダーなどを置けます </header> <main> @yield('content') </main> </body> </html> |
この共通レイアウトを使うページを、views/samples/layout_sample.blade.phpとして以下の内容で準備する。
@extendsディレクティブで、レイアウトとして使うビューを指定している- 1つ目の
@sectionディレクティブでtitleセクションに反映させる内容を$title変数で与えている
- 2つ目の
@sectionディレクティブでcontentsセクションに反映させる内容を記述している
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{{-- レイアウトファイルを指定 --}} @extends('layouts.common') {{-- @yield('title') の内容 --}} @section('title', $title) {{-- @yield('content') の内容--}} @section('content') <h1>{{ $title }}</h1> @for ($i = 1; $i <= 10; $i++) @if ($i % 3 == 0) <p>{{ $i }}は3の倍数</p> @elseif ($i % 5 == 0) <p>{{ $i }}は5の倍数</p> @endif @endfor @endsection |
これらについて以下のルーティングを設定し、ブラウザーからアクセスする。
|
|
Route::get('/layout_sample', function() { return view('samples.layout_sample', [ 'title' => 'レイアウトの例', ]); }); |
出力イメージは以下の様になる。
|
共通レイアウトに各ページ共通のヘッダーなどを置けます
bladeテンプレートでの変数展開
3は3の倍数
5は5の倍数
6は3の倍数
9は3の倍数
10は5の倍数 |
スタイル
概要
publicディレクトリー下、あるいはそのサブディレクトリー下にCSSファイルを配置する- linkタグでCSSファイルを指定する
publicディレクトリー以下に配置されたファイルをlinkタグで指定するには、以下の様に記述する。
|
|
<link rel="stylesheet" href="{{ asset('publicより下のパス') }}"> |
例
たとえばpublicディレクトリー下にcssディレクトリーを作成し、その下にstayles.cssを作成、CSSを記述したとする。
このファイルをビューから呼び出すには、以下の様に記述する。
|
|
<link rel="stylesheet" href="{{ asset('css/styles.css') }}"> |