View - iruma-tea/laravel-base-11 GitHub Wiki

6. Viewについて

6.1. Blade

LaravelではBladeというテンプレートエンジンを採用している。
テンプレートエンジンとはHTMLを穴あきにして、穴の部分をプログラムよって、
動的に出力する仕組みのことをいう。

  • {{ }}
    • で囲まれた部分がテンプレートエンジンの穴。中に変数や式を記述することによって、内容が評価されHTMLに出力される仕組み。自動的にエスケープされる。
  • {{!! !!}}
    • エスケープしない場合は、{{!! !!}}を使用する。ユーザーが入力する値をエスケープしない場合、クロスサイトスクリプティング脆弱性のリスクがある。

6.1.1. Bladeディレクリブ

@から始まるキーワードはディレクティブと呼ばれ、条件分岐によって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属性を追加する

6.2. コンポーネント

Bladeにはコンポーネントという仕組みが用意されている。
コンポーネントとは、ビューの一部を別ファイルとして書き出す、仕組みのこと。
別ファイルにすることで、作業や責任を分担しコンポーネントを複数のビューで共有できたりする。
Laravelのコンポーネントには、クラスコンポーネント匿名コンポーネントの2種類がある。

6.2.1. クラスコンポーネント

書籍登録画面のエラーメッセージ部分をコンポーネント化する。
コンポーネントを作成するには、以下のコマンドを実行する

  • php artisan make:component ErrorMessages

ErrorMessagesはコンポーネント名です。、クラスコンポーネントは、クラスとビューの2つ1組で生成される。

  • resources/views/components/error-messages.blade.php
  • app/View/Components/ErrorMessages.php

作成したコンポーネントを画面に埋め込むには、頭に**x-**を付けたコンポーネント名をタグとして記述する。
また、タグには「:属性名="$value"」と記述することで、コンポーネントのコンストラクタに$valueを渡すことができる。

6.2.2. 匿名コンポーネント

匿名コンポーネントはクラスの実装を省略したコンポーネントです。
より簡単にコンポーネントを作成できる。コマンドに --view オプションを付与することで作成が可能

  • php artisan make:component BookTable --view

6.2.3. スロット

:属性値="value"を使用していましたが、コンポーネントタグの子要素を渡すこともできる。
エラーメッセージや完了メッセージに色付きの枠を付けるAlert
コンポーネントを作成する。

  • php artisan make:component Alert --view

6.2.4. レイアウトコンポーネント

スロットの仕組みを使うことで、ページ全体のレイアウトを共通化することもできる。
例えば、書籍一覧、書籍登録画面で共通のヘッダーとフッターを表示させたいとする。   そのようなときは、ヘッダーとフッターの間にスロットを挿入してコンポーネントを作成する。

  • php artisan make:component layouts/BookManager --view

6.2.4. アトリビュート

$attributesを使用すると、属性そのものをコンポーネント側で受け取ることができる。   コンポーネントの {{attributes}} で、タグに指定された属性を取得することが可能。
$attributesはclass
属性以外にも、コンポーネントタグに記述されたすべての属性の情報を持ちます。
特定の属性情報だけほしい場合は、**$attributes->get('属性名')**で取得することが可能。

<div class="{{$attributes->get('class')}}"></div>

⚠️ **GitHub.com Fallback** ⚠️