SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 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フォルダ内の階層構造をそのまま「.」(ドット)でつなぐだけでいいです。

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

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

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

次のページ
条件分岐の記述方法

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
人気のPHPフレームワークLaravelを習得しよう連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。Web系製作会社のシステム部門、SI会社を経てフリーランスとして独立。屋号はSarva(サルヴァ)。HAL大阪の非常勤講師を兼務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11455 2019/03/27 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング