5.
Blade
Bladeとは
テンプレートエンジン
テンプレートエンジンとは、プログラムで処理したデータをHTMLやテキストなどのView（ビュー）と結合して表示するファイルです。
テンプレートエンジンのメリット
テンプレートエンジンを利用するメリットは、データ処理とViewを分離することで、プログラムを管理しやすく効率化できることにあります。
PHPのテンプレートエンジン
各プログラム言語によって、たくさんのテンプレートエンジンがあります。PHPにもいくつかのテンプレートエンジンがあります。
- Smarty
- Twig
- Blade
Bladeテンプレートエンジン
Bladeファイル
Blade（ブレード） は、Laravel標準搭載のテンプレートエンジンです。テンプレート（View）ファイルはBladeファイルといい、拡張子は .blade.php です。
管理フォルダ
Bladeファイルの管理フォルダは「resouces/views/」で、この中にフォルダやBladeファイルを配置します。
Bladeの基本
Bladeファイル作成
make:viewコマンドでBladeファイルを作成できます。Bladeファイルのパスは、拡張子「.blade.php」を除いたファイル名で指定します。フォルダは「 . 」で区切るルールになっています。
ターミナル
php artisan make:view フォルダ.ファイル名
レンダリング
view()
プログラムでViewを表示することをレンダリングといいます。Bladeファイルのレンダリングは、view() を利用します。
view(Bladeファイルのパス)
return で返す
return でview() を返すと、Bladeファイルがレンダリングされます。 例えば「resouces/views/home/index.blade.php」をレンダリングする場合です。
Route::get('/home/', function () {
return view("home.index");
}
トップページのBlade
トップページ
プロジェクト作成時に、トップページのルーティングとBladeファイルが自動作成されています。
Bladeファイル
このトップページのViewファイルは、「resouces/views/welcome.blade.php」です。
トップページのルーティング
GETリクエスト / にルーティングすると、「welcome.blade.php」をレンダリングしています。
web.php
Route::get('/', function () {
return view('welcome');
});
View作成
Bladeファイル作成
make:viewコマンドで「about.blade.php」ファイルを作成します。
php artisan make:view about
結果
HTMLの記述
BladeファイルにHTMLを記述します。
<h2>About</h2>
<p>This is about page.</p>
Bladeファイルのレンダリング
Bladeファイル「resouces/views/about.blade.php」をレンダリングしてみましょう。
Routingの設定
「web.php」の「/about」ルーティングを設定します。view() メソッドの引数に「about」を記述します。
Route::get('/about', function() {
return view('about');
});
動作確認
http://localhost:8000/about/ にアクセスして、HTMLが表示できるか確認してみましょう。
Bladeのデータ
データ受け渡し
view() の第2引数にデータ
view() の第2引数にデータを代入すると、Viewにデータが受け渡せます。
view(Bladeファイルのパス, データ);
連想配列のバインド
受け渡すデータは連想配列にします。「/serach」で、レスポンスからデータを取得し、Viewにデータを渡します。
HomeController.php
Route::get('/search', function (Request $request) {
$data = [
'keyword' => $request->keyword,
];
return view('search', $data);
});
- キー： keyword
- 値： $request->keyword
Bladeで表示
データの表示
{{ }} は、Bladeでデータを出力するための構文です。内部的にはHTMLエンティティエンコーディングが実行されます。
{{ 変数 }}
Bladeでデータ表示
「search.blade.php」にバインドしたデータ「$keyword」を表示します。
search.blade.php
<h2>検索キーワード</h2>
<p>{{ $keyword }}</p>
- 連想配列のキーが変数名になる
クエリパラメータ「keyword」を指定して、ブラウザでデータ確認してみましょう。
結果
http://localhost:8000/search?keyword=東京
