Laravelのビュー〜Bladeとは
Laravelのビュー作成にはHTMLではなくBlade
が使われる。書き方のベースはHTMLなのだが、加えてBlade固有の様々な機能が使えるらしい。
公式ドキュメントより(一部抜粋)
BladeはシンプルながらパワフルなLaravelのテンプレートエンジンです。他の人気のあるPHPテンプレートエンジンとは異なり、ビューの中にPHPを直接記述することを許しています。全BladeビューはPHPへコンパイルされ、変更があるまでキャッシュされます。つまりアプリケーションのオーバーヘッドは基本的に0です。Bladeビューには.blade.phpファイル拡張子を付け、通常はresources/viewsディレクトリの中に設置します。
つまり
- Laravelのビュー作成にはBladeテンプレートエンジンが使われ、結果Bladeビューとなる。
- ビューの中にPHPが直接記述できる。
- Laravelのビューは
resources/viewsディレクトリ
にある。 - 拡張子は
.blade.php
となる。
特に、ビューの中にPHPが直接記述できる
のは魅力的だ。
Bladeの記述にはディレクティブ
と呼ばれる機能が使われる。ほんの一部ではあるが、ビューに関するディレクディブをこれから紹介していく。
ビューの継承
ビューの作成には、主に継承
が使われるようだ。親の持っている機能を子が使う
というイメージである。
公式ドキュメントより(一部抜粋)
Bladeを使用する主な利点は、テンプレートの継承とセクションです。
ご覧の通り、典型的なHTMLマークアップで構成されたファイルです。しかし、@sectionや@yieldディレクティブに注目です。@sectionディレクティブは名前が示す通りにコンテンツのセクションを定義し、一方の@yieldディレクティブは指定したセッションの内容を表示するために使用します。
子のビューを定義するには、「継承」するレイアウトを指定する、Blade @extendsディレクティブを使用します。Bladeレイアウトを拡張するビューは、@sectionディレクティブを使用し、レイアウトのセクションに内容を挿入します。前例にあるようにレイアウトでセクションを表示するには@yieldを使用します。
ここで登場した@extends
、@section
、@yield
がディレクティブと呼ばれる機能だ。ビューの作成では主にこれらが使われる。具体的な流れと各ビューで必要なディレクティブはこうだ。
- 各ページで共通して使用したいレイアウトがあるが、固有の部分を継ぎ足しながらそれぞれ作成するのは大変だ。
- なので、共通レイアウトを
親ビュー
として、各ページで異なる部分だけを子ビュー
として作成すれば良いじゃないか。 - 子ビューに
今から親ビューを継承するよ、と宣言
させれば、親ビューの持っているレイアウトがそのまま反映される。 - 子ビューには、親ビューの中で使いたい
自分固有のパーツ
を書いておく。 - 親ビューでは
各子ビュー固有のパーツをどこで反映させたいか
を書いておく。 - これで、各ページにアクセスがあれば
親ビューをベースとした各子ビュー固有の画面
が表示される!
親ビューですべきこと
-
@yield
で各子ビュー固有のパーツをどこで反映させたいか
を記述する。
子ビューですべきこと
-
@extends
で今から親ビューを継承するよ、と宣言
する。 -
@section
で自分固有のパーツ
を定義する。
これらが「基本のキ」となる。
ルーティングとビュー
少し話題が逸れるが、先日紹介したルーティングでは下記のような記述がされていた。
<?php
Route::get('/', function () {
return view('welcome');
});
そして公式ドキュメント(一部抜粋)
Bladeビューはグローバルなviewヘルパを使用し、ルートから返すことができます。
ルーティングでviewヘルパ
が使われていたので、view('welcome')
の記述でwelcome.blade.php
が表示されていたのだ。
実演
現在トップページにアクセスするとwelcome.blade.php
が表示されるが、これを親ビューと子ビューに分けたいと思う。
実際に表示されるのは子ビューなので、これをwelcome.blade.php
とする。親ビューはresources/viewsディレクトリ内
にcommonディレクトリ
を作成し、その中にlayout.blade.php
を作成することにした。
まずはwelcome.blade.php
の内容を全てlayout.blade.php
にコピーする。これが親ビューとしての土台となる。
そしてwelcome.blade.php
の記述を、下記の内容だけにする。たったこれだけである。
@extends('common.layout')
@section('child')
<p>表示したい内容<p>
@endsection
1つ1つ構文を説明する。
-
@extends('common.layout')
で、commonディレクトリのlayout.blade.php
を親ビューとして継承する。 -
@section('child')
で、welcome.blade.php
固有のパーツをchild
という名前で定義する。 -
@endsection
で、セクションの定義を終了する。
次にlayout.blade.php
だが、こちらは先程子ビューで定義したセクション<p>表示したい内容<p>
を表示したい位置に、以下の内容を記述する。@yield('child')
を記述した場所に@section('child')
の内容がそのまま反映される仕組みだ。
@yield('child')
以上の記述があれば、welcome.blade.php
にアクセスされた時、layout.blade.php
をベースとしたレイアウトにwelcome.blade.php
固有のパーツが組み込まれて表示される。
Bladeのコメントアウト
Bladeのコメントは{{-- コメントの内容 --}}
と記述しよう。
今回はここまで。