【laravel】ビューとコンポーネント

概要

コンポーネントとは独立して用意される部品のようなテンプレートで、大元のテンプレート（以下ビュー）と組み合わせて使用することができます。
例えばbodyタグ内をheaderタグ、mainタグ、footerタグで区分する場合、各タグごとにテンプレートを作成して大元のテンプレートに反映させるというイメージです。

１．前置き

ここではビューのindex.blade.phpとコンポーネントテンプレート（以下コンポーネントのfooter.blade.phpを使用します。
解説にfooterを例にしているのは、各ページで共通しているため解説に適してると判断したからです
index.blade.phpは表示させたいページのビューのため準備できていることを前提とします。

動作としては、index.blade.phpにfooter.blade.phpを読み込むするディレクティブを記述することでfooter.blade.phpを呼び出して表示させます。

footer.blade.phpとindex.blade.phpの2つのファイルを使用するため、以下のようにタイトルで区別して解説していきます。

footer

// コンポーネントテンプレートのヘッダーのファイル
// resources\views\components\footer.blade.php

index

// ビューのファイル
// resources\views\sample\index.blade.php

２．コンポーネントの準備

veiwsフォルダ内にcomponentsフォルダを作成して、直下にfooter.blade.phpファイルを作成します。
個人的な感覚ですが、viewsフォルダ内は機能ごとに分類した方が見やすいと感じるためコンポーネントも分類して階層分けしています。
コンポーネントを使用するためにフォルダ名もファイル名も指定されているわけではありません。
※以下より.blade.phpを省略

views
├─ sample
│  ├─ index.blade.php
|
├─ components
|   ├─ footer.blade.php

３．コンポーネントの作成

footerの中身にコードを記述します。
ビューでコンポーネントファイルと変数を指定して読み込むためコンポーネントファイルでは特別なディレクティブは使用しません。
コンポーネントで記述したcssはコンポーネントを読み込んだビューの全てに反映されるため、コンポーネント内のみで反映させるようにクラス指定を忘れないように注意しましょう。

footer

<style>
  .footer li {
    list-style: square;
  }
</style>

<div class="footer">
  <p>{{$footerg_title}}</p>
  <ul>{{$footer_content}}</ul>
</div>

４．ビューの編集

footerを読み込めるようにビューとなるindexを編集します。

index

@component('components.footer')
  @slot('footer_title')
    footer
  @endslot

  @slot('footer_content')
    <li>aaa</li>
    <li>bbb</li>
  @endslot
@endcomponent

５．ディレクティブの解説

ここでは＄footer_titleと＄footer_contentの2つの変数を用意しました。
最初に＠componentで表示場所を設定します。
この2つの変数に値を渡すために＠componentで表示場所を設定し、＠slotで変数に値を渡します

＠component

ビューでコンポーネントの表示箇所を指定するディレクティブです。
＠component(’ファイル名．フォルダ名’)～＠endcomponentで記述します。

index

@component('components.footer')
@endcomponent
// 記述方法：@component('フォルダ名．ファイル名') ～ @endcomponent

＠slot

＠slot('変数名')～＠endslotでビューから変数に値を渡します。

footer

<p>{{$footerg_title}}</p>
<ul>{{$footer_content}}</ul>
// 記述方法：<タグ>{{変数名}}</タグ>

index

@component('components.footer')
  @slot('footer_title')
    footer
  @endslot

  @slot('footer_content')
    <li>aaa</li>
    <li>bbb</li>
  @endslot
@endcomponent
// 記述方法：＠slot('変数名')～＠endslot

出力イメージ

footer
■ aaa
■ bbb

サブビュー（＠include）

サブビューでは＠slotの概念がなく＠includeの引数を渡します。
＠includeの引数は('フォルダ名．ファイル名'、'配列')なのでシンプルですが複雑な操作は苦手となります。

１．前置き

サブビューテンプレート（以下サブビュー）はコンポーネントで使用していたfooterファイルの一部を読み込みます。
このように、存在するテンプレートの一部を読み込む機能をサブビューと呼びます。
また、サブビューで使用する＠includeでは配列の値を取得するため、コンポーネントで使用するテンプレートが用意されていれば特別な準備は必要ありません。

サブビューもコンポーネントと同じようにfooter.blade.phpとindex.blade.phpの2つのファイルを使用するため、以下のようにタイトルで区別して解説していきます。

heaser

// コンポーネントテンプレートのヘッダーのファイル
// resources\views\components\footer.blade.php

index

// ビューのファイル
// resources\views\sample\index.blade.php

２．サブビューの準備

特別な準備は必要ないと上記しましたが、コンポーネントで作成したfooterを修正して例にします。
修正の理由はサブビューではリストタグに値を渡すのが手間だからです。
サブビューでリストに値を渡すなら他の機能を利用して手軽に作業を進めたいという考えです。

footer

<div class="footer">
  <p>{{$footerg_title}}</p>
  <p>{{$footer_content}}</p>
</div>

３．ビューの編集

footerに存在する変数を読み込めるようにビューとなるindexを編集します。
ファイル名は###.blade.phpとすることを忘れないでください。

index

@include('components.footer',[
  'footer_title'=>'footer',
  'footer_content'=>'フッターコンテンツ'
])

４．ディレクティブの解説

＠includeの呼び出しに関わる部分を抜き出してどのような表示になるか確認します。

＠include

＠include('ファイル名．フォルダ名','配列')で値を渡します。

footer

<div class="footer">
  <p>{{$footerg_title}}</p>
  <p>{{$footer_content}}</p>
</div>

index

@include('components.footer',[
  'footer_title'=>'footer',
  'footer_content'=>'フッターコンテンツ'
])
// 記述方法：＠include('ファイル名．フォルダ名','配列')

出力イメージ

footer
フッターコンテンツ

コレクションビュー（＠each）

リストやテーブルのように繰り返し表示させたい内容について、配列を用いて順に値を取得して指定のテンプレートで出力する記述方法です。

１．前置き

コレクションビューテンプレート（以下コレクションビュー）を使用するにはビュー、コレクションの中身を記述するコントローラー、コレクションビューのテンプレートと3つのファイルが必要になります。
大元のテンプレート（index.blade.php）とコントローラーのファイルは存在するものとして、コレクションビュー用のテンプレートを新規に作成する例とします。

コレクションビューではeach.blade.phpとindex.blade.phpとcontroller.blade.phpの3つのファイルを使用するため、以下のようにタイトルで区別して解説していきます。

each

// コレクションビュー
// resources\views\components\each.blade.php

index

// 大元テンプレート
// resources\views\sample\index.blade.php

controller

// コントローラー
// app\Http\Contollers\contoller.blade.php

２．コレクションビューの準備

componentsファイル内にeach.blade.phpをファイルを作成します。
コンポーネントと異なる使い方ですが、部品の一つなのでcomponentsに配置するのがわかりやすいと思いこの配置にしました。

views
├─ sample
│  ├─ index.blade.php
|
├─ components
|  ├─ each.blade.php

３．コレクションビューの作成

作成したファイルに繰り返し出力したい内容を記述します。
ここではリストタグを例に作成します。
ulで囲っていないのはビューを見た際にどのようなタグで囲っているかをわかりやすくするためです。
.blade.phpのためタグ内での出力は{{ }}で囲います。

each

<li>{{$item['name']}} : {{$item['mail']}}</li>
// 記述方法：変数名[配列]

４．ビューの編集

ビューで＠each('ファイル名．フォルダ名','配列','変数名')で値を渡します。
配列の中身はコントローラーで記述します。

index

@section('content')
  <p>コンテンツ</p>
  <ul>
    @each('components.each','$data','$item')
  </ul>
@endsection
// 記述方法：@each('ファイル名．フォルダ名','配列','変数名')

５．コントローラーの編集（コレクショの作成）

コントローラーの中身は二次元配列を書いてるだけなので解説は割愛します。
強いて言えば、取得する値を複数にしているため二次元配列で記述しているという点くらいです。

controller

Class SampleController extends Controller {
  public function index() {
    $data = [
      ['name'=>'aaa','mail'=>'aaa@mail'],
      ['name'=>'bbb','mail'=>'bbb@mail'],
      ['name'=>'ccc','mail'=>'ccc@mail'],
    ];
    return view('sample.index',['data'=>$data]);
  }

６．ディレクティブの解説

＠eachの呼び出しに関わる部分を抜き出してどのような表示になるか確認します。

＠each

@each('ファイル名．フォルダ名','配列','変数名')で値を渡します。

each

<li>{{$item['name']}} : {{$item['mail']}}</li>
// 記述方法：変数名[配列]

index

@each('layouts.each','$data','$item')
// 記述方法：@each('ファイル名．フォルダ名','配列','変数名')

controller

return view('sample.index',['data'=>$data]);
// 記述方法：view('ファイル名．フォルダ名','配列')

出力イメージ

・aaa:aaa@mail
・bbb:bbb@mail
・ccc:ccc@mail