Laravelのビュー〜Bladeとは

Laravelのビュー作成にはHTMLではなくBladeが使われる。書き方のベースはHTMLなのだが、加えてBlade固有の様々な機能が使えるらしい。

公式ドキュメントより（一部抜粋）

BladeはシンプルながらパワフルなLaravelのテンプレートエンジンです。他の人気のあるPHPテンプレートエンジンとは異なり、ビューの中にPHPを直接記述することを許しています。全BladeビューはPHPへコンパイルされ、変更があるまでキャッシュされます。つまりアプリケーションのオーバーヘッドは基本的に０です。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で自分固有のパーツを定義する。

これらが「基本のキ」となる。

ルーティングとビュー

少し話題が逸れるが、先日紹介したルーティングでは下記のような記述がされていた。

routes/web.php

<?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の記述を、下記の内容だけにする。たったこれだけである。

welcome.blade.php

@extends('common.layout')

@section('child')
    <p>表示したい内容<p>
@endsection

１つ１つ構文を説明する。

@extends('common.layout')で、commonディレクトリのlayout.blade.phpを親ビューとして継承する。
@section('child')で、welcome.blade.php固有のパーツをchildという名前で定義する。
@endsectionで、セクションの定義を終了する。

次にlayout.blade.phpだが、こちらは先程子ビューで定義したセクション<p>表示したい内容<p>を表示したい位置に、以下の内容を記述する。@yield('child')を記述した場所に@section('child')の内容がそのまま反映される仕組みだ。

layout.blade.php

@yield('child')

以上の記述があれば、welcome.blade.phpにアクセスされた時、layout.blade.phpをベースとしたレイアウトにwelcome.blade.php固有のパーツが組み込まれて表示される。

Bladeのコメントアウト

Bladeのコメントは{{-- コメントの内容 --}}と記述しよう。

今回はここまで。

【Laravel入門】ビューとBladeと継承