Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

PHPフレームワーク「Laravel」におけるビューの使い方を理解しよう

人気のPHPフレームワークLaravelを習得しよう 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/03/27 11:00

 本連載ではPHPフレームワークのひとつであるLaravelを紹介していきます。Laravelは、「Web職人のためのフレームワーク」というキャッチコピーのもと、ここ数年で人気がうなぎ上りのフレームワークです。連載を通して、その人気の秘密を味わっていただこうと思います。第2回の前回は、Laravelの動作原理とルーティングの仕組みを解説しました。今回は、Laravelで本格的なHTML画面を表示させるための仕組みであるテンプレートエンジンBladeを紹介します。

目次

テンプレートエンジンとは

 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)。

図1:テンプレートエンジンとは
図1:テンプレートエンジンとは

 テンプレートエンジンを利用することで、PHP処理が書かれたファイルとHTMLコードが書かれたファイルを分離でき、PHPコード、HTMLコードそれぞれの可読性が向上します。さらに、HTMLコードの再利用が可能になります。

PHPでのテンプレートエンジン

 こうしたテンプレートエンジンの考え方は、何もPHP言語、さらに言えばサーバサイドプログラミングにおけるHTMLレスポンスの生成だけのものではありません。それぞれの言語、それぞれの開発環境で用意されているものもあります。それを、PHP言語に限定するならば、現在主流で使われているものは3個あります。

 まず、なんと言っても老舗はSmartyです。さらに、Symfonyプロジェクトの1つとして作られたTwigがあります。それから、今回紹介するLaravelに同梱されている「Blade」です。

Bladeの使い方の基本

 それでは、早速そのBladeの使い方を見ていきましょう。

基本はファイルの用意とreturn view()

 LaravelでBladeを利用する手順は以下の通りです。

  1. テンプレートファイルをresources/viewsディレクトリに作成する。
  2. ルーティング登録のコールバック関数でview()関数(の戻り値)をreturnする。

 それぞれ、具体的に見ていきましょう。

 まず、手順1です。ここでは、テンプレートファイルをresources/viewsディレクトリに作成します。その際、拡張子は「.blade.php」とします。拡張子は.phpですが、内容は通常のHTMLファイルと同じように作成します。例えば、リスト1のファイルです。

[リスト1]resources/views/hello.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Bladeによるこんにちは</title>
</head>
	<body>
		<h1>こんにちは! Blade!</h1>
	</body>
</html>

 このテンプレートを表示させるルーティングを登録します。ここでは/helloBladeというルーティングパターンで登録するとします。その場合のコードはリスト2のようになります。

[リスト2]routes/web.php
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の画面が表示されます。

図2:リスト2が表示された画面
図2:リスト2が表示された画面

テンプレートにデータを渡すには

 これで、無事テンプレートが使えるようになりました。とはいえ、これでは、単に静的なHTMLを表示させているのと変わりません。PHPから渡されたデータを埋め込んでこそのテンプレートエンジンです。そのためには、view()関数の第2引数を活用します。例えば、以下のような形です。

[リスト3]routes/web.php
Route::get("/helloBladeWithData", function() {
	$data["name"] = "武者小路";  // (1)
	return view("helloWithData", $data);  // (2)
});

 リスト2のview()の使い方と違い、リスト3の(2)では第2引数が増えています。この第2引数としてテンプレートに渡すデータを連想配列の形で渡します。リスト3では、テンプレートに渡すデータの連想配列をあらかじめ(1)で生成しています。

 では、テンプレートの方はどのように記述するのでしょうか。例えば、リスト4のようになります。

[リスト4]resources/views/helloWithData.blade.php
<!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コードから渡されたデータが埋め込まれて表示されているのがわかります。

図3:リスト4が表示された画面
図3:リスト4が表示された画面

 なお、この{{…}}は<?= … ?>と同じだと考えてください。ということは、この中に、簡単な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のようになります。

[リスト5]routes/web.php
Route::get("/chap3/helloToSomeone", function() {
	$data["name"] = "中野";
	return view("chap3.hello", $data);  // (1)
});

 リスト5の(1)のように、viewフォルダ内の階層構造をそのまま「.」(ドット)でつなぐだけでいいです。

テンプレート内のコメント

 この節の最後にテンプレートファイル内にコメントを記述する方法を紹介します。テンプレートファイル内にコメントを記述するには以下の書式を使います。

{{-- コメント --}}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きた...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:人気のPHPフレームワークLaravelを習得しよう
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5