【Laravel】レイアウトの作成

こちらの記事は以下の書籍を参考に執筆しました

- [PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)



Bladeには例アンツを継承してテンプレをセクションとして組み合わせてレイアウトを作成する機能がある。
#レイアウトの作成
##レイアウトの定義と継承
多くのページがあるサイトでは共通したデザインが表示される。
サイト全体を統一したデザインでレイアウトするためにBladeには継承とセクションがある。

###継承とは
PHPのクラスの継承と同じ。
既存のテンプレを継承して新しいテンプレを作ること

###セクションとは
継承でページをデザインするとき、ページ内の要素として活用されてるもの。

##@secsionと@yield
セクション利用のための2つのディレクティブ

- @section
- @yield

###@section
レイアウトで様ざなま区画を定義する。

```php5
@section(名前)
...表示内容...
@endsection
```
これで指定した名前でセクションが用意される。
セクションは同じ名前の@yieldにはめ込まれ表示される。

###@yield
セクション内容をはめ込んで表示する。

```php
@yield(名前)
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)


@yieldは記載場所を示すもので**@endyieldはない**。

##ページレイアウトを作成する
例を見てみる。
resources/views/layoutでhelloapp.balde.phpを作成する。
そこに書いていく

```php5:helloapp.balde.php
<html >
  <head>
    <title>@yield('title')</title>
    <style>
    body{
      font-size:16pt;color:#999;margin:5px;
    }
    h1{
      font-size:50px;
      text-align:right;
      color:#f6f6f6f6;
      margin:-20px 0px -30px 0px;
      letter-spacing:-4pt;
    }
    ul{
      font-size:12pt;
    }
    hr{
      margin:25px 100px;
      border-top:1px dashed #ddd;
    }
      .menutitle{
        font-size:14px;
        font-weight:bold;
        margin:0px;
      }
      .content{
        margin:10px;  
      }
      .footer{
        text-align:right;
        font-size:10pt;
        margin:10px;
        border-bottom:solid 1px #ccc;
        color:#ccc
      }
    
    </style>
  </head>
  <body>
    <h1>@yield('title')</h1>
    @section('menubar')
    <h2 class="menutitle">メニュー</h2>
    <ul>
      <li>@show</li>
    </ul>
    <hr size="1">
    <div class="content">
      @yield('content')
    </div>
    <div class="footer">
      @yield('footer')
    </div>
  </body>
</html>
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)



ここでいくつかのディレクティブが設定されている。

```php5
@section('menubar')
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)


これはメニュー表示の区画。

セクションは玖珂を定義するものだが、一番土台とアンルレイアウトで@sectionを用意する場合は。@endsectionではなく**@showでセクションを終わりにする。**

##継承レイアウトの作成

```php5:index.balde.php
@extends('layouts.helloapp')

@section('title','Index')

@section('menubar')
  @parent
  インデックスページ
@endsection

@section('content')
  <p>ここが本文のコンテンツ</p>
  <p>必要なだけ記述ができる</p>
@endsection

@section('footer')
  copyright 2020 tuyano.
@endsection
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)


HTMLらしくない表記になった。
###@extendsについて

```php5
@extends('layouts.helloapp')
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)


layoutsフォルダのhelloapp.blade.indexファイルをロードし、親レイアウトとして継承する。

###@sectionの書き方
2つの方法がある。


####単純に表示させるだけ
```php5
@section('title','Index')
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)


'title'という名前のセクションに'Index'というテキスト値を設定。
####@endsectionを併用した書き方
```php5
@section('menubar')
  @parent
  インデックスページ
@endsection
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)


親レイアウトに'menubar'という@yieldがあればそこにはめ込まれて表示されるわけだが、
**親レイアウトに'menubar'という@yieldはなく、@sectionがある。**
この場合@sectionは上書きされる。

@parentは親レイアウトのセクションを示す。
@sectionの上書きがされるとき、親のセクションも残したい場合は@parentで親のセクションをはめ込んで表示できる。

これで表示してみるとhelloapp.blade.phpに、index.blade.phpに用意したセクションがはめ込まれて表示されていることが確認できる。

このようにレイアウトを継承するkとで子にはセクションに表示する内容だけを書けばいいことになり、お暗示レイアウトでページが表示される。

##コンポ−ネントについて
継承を利用することで全体を同じデザインにすることができるが、時には一部を切り離したいこともある。

コンポ−ネントは1つのテンプレとして独立して用意されるレイアウト用の部品。

###@componentディレクティブ
コンポーネントは普通のテンプレとして作成する。書き方に違いはない。
作成したコンポーネントは@componentで表示場所を設定できる。

```php5
@component(名前)
...コンポ−ネネントの表示内容
@component
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)


名前はviewsフォルダのファイル名で指定される。
/views/components/ok.blade.php
なら`components.ok`で指定できる。


##コンポーネントを作成する

```PHP5:message.blade.php
<style media="screen">
    .message {
        border: double 4px #ccc;
        margin: 10px;
        padding: 10px;
        background-color: #fafafa;
    }

    .msg_title {
        margin: 10px 20px;
        color: #999;
        font-size: 16pt;
        font-weight: bold;
    }

    .msg_content {
        margin: 10px 20px;
        color: #aaa;
        font-size: 12pt;
    }
</style>
<div class="message">
    <p class="mes_title">{{$msg_title}}</p>
    <p class="msg_content">{{$msg_content}}</p>
</div>
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)



###コンポーネントを読み込む
messageコンポーネントをテンプレにに読み込んで表示する。
@section('content')の部分を修正

```php5:index.blade.php
@section('content')

  <p>ここが本文のコンテンツ</p>
  <p>必要なだけ記述できる</p>
  
  @component('components.message')
    @slot('msg_title')
    CAUTION!
    @endslot
    
    @slot('msg_content')
    これはメッセージの表示
    @endslot
  @endcomponent

@endsection
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)



###スロットについて
\$msg_titleや\$msg_contentに値を送っているのがスロット
{{}}で指定した変数に値を設定する。

```php5
@slot(名前)
...設定する内容
#endslot
```
>出典：[PHPフレームワークLaravel入門 第2版](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=tmm_hrd_title_0?_encoding=UTF8&qid=1595991312&sr=1-2)