5.
Blade
Bladeとは
テンプレートエンジン
テンプレートエンジンとは、プログラム処理したデータをView（ビュー）と結合して表示する仕組みです。View は HTMLやテキストなどを指します。
テンプレートエンジンのメリット
テンプレートエンジンを利用するメリットは、データ処理とViewを分離することで、プログラムを管理しやすく効率化できることにあります。
PHPのテンプレートエンジン
PHPのテンプレートエンジンには、Smarty, Twig, Bladeなどがあります。
Bladeテンプレートエンジン
Bladeファイル
Blade（ブレード） は、Laravel標準搭載のテンプレートエンジンです。テンプレート（View）ファイルはBladeファイルといい、拡張子は .blade.php です。
管理フォルダ
Bladeファイルの管理フォルダはresouces/views/で、この中にフォルダやBladeファイルを配置します。
Bladeファイル作成
make:viewコマンドでBladeファイルを作成できます。ファイルパスは、拡張子 .blade.php を除いたファイル名で指定します。フォルダは . で区切るルールになっています。
ターミナル
php artisan make:view フォルダ.ファイル名
レンダリング
view()
プログラムでViewを表示することをレンダリングといいます。Bladeファイルのレンダリングは、view() を利用します。
view(Bladeファイルのパス)
return で返す
view() を返すと、Bladeファイルがレンダリングされます。
以下は、resouces/views/home/index.blade.phpをレンダリングします。
Route::get('/', function () {
return view("home.index");
}
トップページのBlade
ファイル構成
/
├── home/
│ ├── index.blade.php
│ └── about.blade.php
├── product/
│ ├── show.blade.php
│ └── search.blade.php
トップページ
プロジェクト作成時に、トップページのルーティングとBladeファイルが自動作成されています。
Bladeファイル
このトップページのViewファイルは、「resouces/views/welcome.blade.php」です。
トップページのルーティング
GETリクエスト / にルーティングすると、「welcome.blade.php」をレンダリングしています。
web.php
Route::get('/', function () {
return view('welcome');
});
makeコマンド
テンプレートファイル作成
artisanのmakeコマンドで、いろいろなテンプレートファイルを自動作成できます。
ターミナル
php artisan make:オプション ファイル名
主なオプション
makeコマンドの代表的なオプションです。
| コマンド例 | 主な役割 |
|---|---|
controller |
コントローラーファイルの作成。ビジネスロジックはできるだけModelやServiceに分離するとよい |
model |
データベースのテーブルと対応するクラス。Eloquent ORMを通じてレコードの取得・保存・更新・削除を担当 |
migration |
データベースの定義ファイル作成や、マイグレートの |
request |
フォームやAPIリクエストのバリデーションや権限チェックを集中管理するクラス |
seeder |
初期データやテストデータをDBに投入するためのクラス。php artisan db:seed で実行 |
View作成
ルーティングとビュー
| ページ | ルーティング | ビュー |
|---|---|---|
| トップ | / | resouces/views/home/index.blade.php |
| About | /about | resouces/views/home/about.blade.php |
| 商品トップ | /product | resouces/views/product/index.blade.php |
| 検索 | /search | resouces/views/product/search.blade.php |
トップページ
Bladeファイル作成
make:viewコマンドで home/index.blade.php ファイルを作成します。
php artisan make:view home.index
resouces/views/home/index.blade.php が作成されます。
BladeファイルにHTMLを記述します。
resources/views/home/index.blade.php
<div>
<h1>Home</h1>
</div>
ビューレンダリング
ルーティング / に対してresouces/views/home/index.blade.php をレンダリングします。
routes/web.php
Route::get('/', function() {
return view('home.index');
});
動作確認
http://localhost:8000/ にアクセスして、HTMLが表示できるか確認してみましょう。
Aboutページ
make:viewコマンドで home/about.blade.php ファイルを作成します。
ターミナル
php artisan make:view home.about
resouces/views/home/about.blade.php が作成されます。
BladeファイルにHTMLを記述します。
resouces/views/home/about.blade.php
<div>
<h1 class="text-xl font-bold mb-4">About</h1>
<p>これはアバウトページです。</p>
</div>
ビューレンダリング
ルーティング /about に対して resouces/views/home/about.blade.php をレンダリングします。
routes/web.php
Route::get('/', function() {
return view('home.about');
});
動作確認
http://localhost:8000/about/ にアクセスして、HTMLが表示できるか確認してみましょう。
Productページ
make:viewコマンドで product/index.blade.php ファイルを作成します。
php artisan make:view product.index
resources/views/product/index.blade.php
<div>
<h1>Product</h1>
</div>
ビューレンダリング
ルーティング /product に対して resouces/views/product/index.blade.php をレンダリングします。
routes/web.php
Route::get('/product', function() {
return view('product.index');
});
動作確認
http://localhost:8000/product/ にアクセスして、HTMLが表示できるか確認してみましょう。
データバインディング
データバインディングの基本
view() の第2引数にデータを代入すると、Viewにデータをバインディングできます。
view(Bladeファイルのパス, データ);
連想配列のバインド
/product/serach のルーティングで、Viewにデータバインディングします。
| キー | 値 |
|---|---|
| keyword | $request->keyword |
routes/web.php
Route::get('/product/search', function (Request $request) {
$data = [
'keyword' => $request->keyword,
];
return view('product.search', $data);
});
Bladeファイル作成
make:viewコマンドで product/search.blade.php ファイルを作成します。
php artisan make:view product.search
データの表示
{{ }} は、Bladeでデータを出力するための構文です。内部的にはHTMLエンティティエンコーディングが実行されます。
{{ 変数 }}
Bladeでデータ表示
product/search.blade.php にバインドしたデータ $keyword を表示します。
resources/views/product/search.blade.php
<div>
<h2>検索キーワード</h2>
<p>{{ $keyword }}</p>
</div>
- 連想配列のキーが変数名になる
クエリパラメータkeywordを指定して、ブラウザでデータ確認してみましょう。
結果
http://localhost:8000/search?keyword=東京
