View - iruma-tea/laravel-base-11 GitHub Wiki
LaravelではBladeというテンプレートエンジンを採用している。
テンプレートエンジンとはHTMLを穴あきにして、穴の部分をプログラムよって、
動的に出力する仕組みのことをいう。
- {{ }}
- で囲まれた部分がテンプレートエンジンの穴。中に変数や式を記述することによって、内容が評価されHTMLに出力される仕組み。自動的にエスケープされる。
- {{!! !!}}
- エスケープしない場合は、{{!! !!}}を使用する。ユーザーが入力する値をエスケープしない場合、クロスサイトスクリプティング脆弱性のリスクがある。
@から始まるキーワードはディレクティブと呼ばれ、条件分岐によってHTMLを書き換えたり、
繰り返しによって複数回出力を行ったり、出力内容の制御を行います。よく利用されるものを以下に示す。
ディレクティブ | 説明 |
---|---|
@if(条件) ~ @endif | 条件がtrueのとき@if ~ @endifまでの内容を出力する |
@unless(条件) ~ @endunless | 条件がtrueのとき@unless ~ @endunlessまでの内容を出力する |
@while(条件) ~ @endwhile | 条件がtrueの間、@while ~ @endwhileまでの内容を繰り返し出力する |
@foreach($collection as $element) ~ @endforeach | $collectionの要素を1つずつ$elementに代入しながら、@foreach ~ @encforeachまでの内容を繰り返し出力する |
@continue | 繰り返し構造の途中で、強制的に次の繰り返しを実行する |
@break | 繰り返し構造の途中で、強制的に繰り返しを終了する |
@auth ~ @endauth | 認証済みのとき、@auth ~ @endauthまでの内容を出力する |
@guest ~ @endguest | 未認証のとき、@guest ~ @endguestまでの内容を出力する |
@error(キー名) ~ enderror | キー名のフィールドにエラーがあるとき、@error ~ @enderrorまで出力する |
@csrf | CSRFトークンを生成し、hidden属性で出力する |
@foreachを使用する場合、あわせてLoop変数を使用することができる。
繰り返しのインデックスの参照や、繰り返しの最初と最後の判定などができます。
プロパティ | 説明 |
---|---|
$loop->index | 繰り返しのインデックスを参照する(0始まり) |
$loop->iteration | 繰り返しの回数を参照する(1始まり) |
$loop->first | 最初の繰り返しかどうかを参照する |
$loop->last | 最後の繰り返しかどうかを参照する |
$loop->even | 奇数回数目の繰り返しかどうかを参照する |
$loop->odd | 偶数回目の繰り返しかどうかを参照する |
$loop->parent | @foreachがネストされているとき、親の繰り返しLoop変数を参照する |
属性を追加するディレクティブには次のようなものがある。
ディレク李ティブ | 説明 |
---|---|
@selected(条件) | 条件がtrueのとき、selected属性を追加する |
@checked(条件) | 条件がtrueのとき、checked属性を追加する |
@disabled(条件) | 条件がtrueのとき、disabled属性を追加する |
@readonly(条件) | 条件がtrueのとき、readonly属性を追加する |
@required(条件) | 条件がtrueのとき、required属性を追加する |
Bladeにはコンポーネントという仕組みが用意されている。
コンポーネントとは、ビューの一部を別ファイルとして書き出す、仕組みのこと。
別ファイルにすることで、作業や責任を分担しコンポーネントを複数のビューで共有できたりする。
Laravelのコンポーネントには、クラスコンポーネントと匿名コンポーネントの2種類がある。
書籍登録画面のエラーメッセージ部分をコンポーネント化する。
コンポーネントを作成するには、以下のコマンドを実行する
php artisan make:component ErrorMessages
ErrorMessagesはコンポーネント名です。、クラスコンポーネントは、クラスとビューの2つ1組で生成される。
- resources/views/components/error-messages.blade.php
- app/View/Components/ErrorMessages.php
作成したコンポーネントを画面に埋め込むには、頭に**x-**を付けたコンポーネント名をタグとして記述する。
また、タグには「:属性名="$value"」と記述することで、コンポーネントのコンストラクタに$valueを渡すことができる。
匿名コンポーネントはクラスの実装を省略したコンポーネントです。
より簡単にコンポーネントを作成できる。コマンドに --view オプションを付与することで作成が可能
php artisan make:component BookTable --view
:属性値="value"を使用していましたが、コンポーネントタグの子要素を渡すこともできる。
エラーメッセージや完了メッセージに色付きの枠を付けるAlertコンポーネントを作成する。
php artisan make:component Alert --view
スロットの仕組みを使うことで、ページ全体のレイアウトを共通化することもできる。
例えば、書籍一覧、書籍登録画面で共通のヘッダーとフッターを表示させたいとする。
そのようなときは、ヘッダーとフッターの間にスロットを挿入してコンポーネントを作成する。
php artisan make:component layouts/BookManager --view
$attributesを使用すると、属性そのものをコンポーネント側で受け取ることができる。
コンポーネントの {{attributes}} で、タグに指定された属性を取得することが可能。
$attributesはclass属性以外にも、コンポーネントタグに記述されたすべての属性の情報を持ちます。
特定の属性情報だけほしい場合は、**$attributes->get('属性名')**で取得することが可能。
<div class="{{$attributes->get('class')}}"></div>