テンプレートエンジンとは
Bladeの具体的な使い方を紹介する前に、そもそもテンプレートエンジンとは何か、といったことから話を始めましょう。
HTMLコードを分離できるテンプレートエンジン
PHPやRuby、Java(Servlet/JSP)といったサーバサイドプログラミングの基本は、HTTPリクエストの内容に応じてHTTPレスポンスを返すことです。そのHTTPレスポンスの内容は、JSONやXMLの場合もありますが、やはりHTMLが一番多いでしょう。しかも、これまで扱ってきたサンプルのように単にh1タグを記述しただけのシンプルなHTMLではなく、もっと複雑なHTMLであることが通常です。
そういった複雑なHTML表示をPHPソースの中に混在させると、それだけで可読性が下がります。ましてや、Laravelのように、コールバック関数中にHTMLを表示させる処理を記述しなければならないとなると、なおさらです。
さらに、別のPHP処理でほぼ同様な画面を表示したい場合にも、いちいち同じHTMLコードを記述しておく必要があります。つまり画面の再利用ができません。
そこで登場するのが「テンプレートエンジン」です。HTMLコードを記述したファイルを別に用意しておきます。このファイルのことを「テンプレート」と呼びます。一方で、PHP側でそのテンプレートに埋め込むデータを用意しておきます。テンプレートエンジンはそれらを統合してHTMLレスポンスを生成する仕組みです(図1)。
テンプレートエンジンを利用することで、PHP処理が書かれたファイルとHTMLコードが書かれたファイルを分離でき、PHPコード、HTMLコードそれぞれの可読性が向上します。さらに、HTMLコードの再利用が可能になります。
PHPでのテンプレートエンジン
こうしたテンプレートエンジンの考え方は、何もPHP言語、さらに言えばサーバサイドプログラミングにおけるHTMLレスポンスの生成だけのものではありません。それぞれの言語、それぞれの開発環境で用意されているものもあります。それを、PHP言語に限定するならば、現在主流で使われているものは3個あります。
まず、なんと言っても老舗はSmartyです。さらに、Symfonyプロジェクトの1つとして作られたTwigがあります。それから、今回紹介するLaravelに同梱されている「Blade」です。
Bladeの使い方の基本
それでは、早速そのBladeの使い方を見ていきましょう。
基本はファイルの用意とreturn view()
LaravelでBladeを利用する手順は以下の通りです。
- テンプレートファイルをresources/viewsディレクトリに作成する。
- ルーティング登録のコールバック関数でview()関数(の戻り値)をreturnする。
それぞれ、具体的に見ていきましょう。
まず、手順1です。ここでは、テンプレートファイルをresources/viewsディレクトリに作成します。その際、拡張子は「.blade.php」とします。拡張子は.phpですが、内容は通常のHTMLファイルと同じように作成します。例えば、リスト1のファイルです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Bladeによるこんにちは</title> </head> <body> <h1>こんにちは! Blade!</h1> </body> </html>
このテンプレートを表示させるルーティングを登録します。ここでは/helloBladeというルーティングパターンで登録するとします。その場合のコードはリスト2のようになります。
Route::get("/helloBlade", function() { return view("hello"); // (1) });
ここでのポイントは(1)です。手順1で用意したテンプレートファイルを表示させるには、(1)のようにview()関数を実行し、その戻り値をリターンします。これが手順2です。そのview()関数の引数として渡すのが手順1で作成したテンプレートファイルのファイル名から拡張子「.blade.php」を取り除いた部分です。リスト2では、テンプレートファイル名がhello.blade.phpなので、引数として"hello"を渡します。この状態で以下のURLにアクセスします。
- http://localhost/firstlaravel/public/helloBlade
すると、無事リスト1を表示した図2の画面が表示されます。
テンプレートにデータを渡すには
これで、無事テンプレートが使えるようになりました。とはいえ、これでは、単に静的なHTMLを表示させているのと変わりません。PHPから渡されたデータを埋め込んでこそのテンプレートエンジンです。そのためには、view()関数の第2引数を活用します。例えば、以下のような形です。
Route::get("/helloBladeWithData", function() { $data["name"] = "武者小路"; // (1) return view("helloWithData", $data); // (2) });
リスト2のview()の使い方と違い、リスト3の(2)では第2引数が増えています。この第2引数としてテンプレートに渡すデータを連想配列の形で渡します。リスト3では、テンプレートに渡すデータの連想配列をあらかじめ(1)で生成しています。
では、テンプレートの方はどのように記述するのでしょうか。例えば、リスト4のようになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>データを埋め込んだテンプレート</title> </head> <body> <h1>こんにちは! {{$name}}さん!</h1> </body> </html>
h1タグの行に注目してください。{{$…}}という記述が見えます。これが受け取ったデータを表示させている部分です。この{{$…}}にview()の第2引数で渡された連想配列のキーを記述することで、その値が表示される仕組みです。
実際に、以下のURLにアクセスしてみます。
- http://localhost/firstlaravel/public/helloBladeWithData
すると、図3の画面が表示され、無事、PHPコードから渡されたデータが埋め込まれて表示されているのがわかります。
なお、この{{…}}は<?= … ?>と同じだと考えてください。ということは、この中に、簡単なPHPコードを記述できます。例えば、以下のようなものです。
<p>現在の値: {{$num + 1}}</p>
さらに、以下のように関数も記述できます。
<p>現在の日時: {{date("Y/m/d H:i:s")}}</p>
なお、この{{}}による表示の場合、htmlspecialchars()関数によるHTMLエスケープが自動で施されていますので、注意してください。
viewディレクトリ内の階層構造への対応
実際のアプリ開発では、何十枚というHTML画面が使われるのが普通です。となると、viewディレクトリ内にサブディレクトリを作成して、階層構造でテンプレートを管理したくなります。その場合のview()メソッドの第1引数はどのようになるのでしょうか。例えば、テンプレートファイルが以下のファイルパスだとします。
- resources/views/chap3/hello.blade.php
このテンプレートを利用するルーティング登録コードはリスト5のようになります。
Route::get("/chap3/helloToSomeone", function() { $data["name"] = "中野"; return view("chap3.hello", $data); // (1) });
リスト5の(1)のように、viewフォルダ内の階層構造をそのまま「.」(ドット)でつなぐだけでいいです。
テンプレート内のコメント
この節の最後にテンプレートファイル内にコメントを記述する方法を紹介します。テンプレートファイル内にコメントを記述するには以下の書式を使います。
{{-- コメント --}}