Laravelにおけるレイアウト（@section @yield @component）について

Laravelのレイアウトについて記事にしたいと思います。

Laravel入門(青本)のP85〜P95あたりまでのことです。青本の説明めちゃくちゃわかりにくい。。。

この記事の目標は青本よりはわかりやすく書くこと！

Laravelにおけるレイアウトの基本は@sectionと@yieldの二つで、簡単にいうと@yield部分に@sectionで記述した内容がはめ込まれて表示されます。

まずレイアウトの雛形を作る

viewフォルダの配下にlayoutsフォルダを新規作成し、ファイル名をtakoyakiapp.blade.phpにして、以下のコードを記述します。

<html>
  <head>
    <title>@yield('title')</title>
  </head>
  <body>
    <h1>@yield('title')</h1>
    <div class="header">
      @yield('header')
    </div>
    <div class="content">
      @yield('content')
    </div>
    <div class="footer">
      @yield('footer')
    </div>
  </body>
</html>

わかりやすく、header、content、footerに分けています。

@yield('文字列')で文字列に対応する@sectionがはめ込まれて表示されることになります。

では次に@section部分を作成します。

@section部分を作る

前回作成したtakoyaki_calculation.blade.phpを以下のように修正します。

@extends('layouts.takoyakiapp')

@section('title', 'たこ焼き')

@section('header')
    <p>最適温度</p>
@endsection

@section('content')
    {{$kekka}}
    <form action="/takoyaki_calc" method="post">
        {{ csrf_field() }}
        <input type="text" name="msg" value="{{$temperature}}">
        <input type="submit">
    </form>
    <a href="{{route('takoyaki_calc')}}">
        <button type="button">リセット</button>
    </a>
    @component('components.message')
        @slot('msg_title')
        なぜ温度が大事か
        @endslot

        @slot('msg_content')
        最適な温度であれば、外はカリ！、中はトロ！を実現できるから
        @endslot
    @endcomponent
@endsection

@section('footer')
    <p>copyright 2020 o-ya</p>
@endsection

@extends('layouts.takoyakiapp')で@sectionをはめ込むベースとなるレイアウトを指定します。今回は先ほど作成したlayoutsフォルダに作成したtakoyakiappです。

続いて@sectionを記述していきますが、書き方は大きく２つあります。

@section( セクション名, 値 )

単純にテキストや数値をセクションに表示させる時に使います。

今回は「@section('title', 'たこ焼き')」と記述しているので、ベースとなるtakoyakiappで「@yield('title')」の部分に「たこ焼き」という文字列がはめ込まれます。

@section( セクション名 ) 〜 @endsection

@sectionから@endsectionまでの内容がセクションの内容になります。

複数行に渡ってき記述したい場合やパラメータを使いたい場合はこちらを使いましょう。

@section('content')の内容は前回作成したビューと全く同じ内容を記述しています。

↓前回記事

oyaoya1123.hatenablog.com

最後に@componetsについて解説します。

@componentsの使い方

@yieldと@sectionの関係はベースとなるレイアウトを決めてそこに記述された@yieldに@sectionの内容をはめ込むものでした。

@componentsを使うと、外部から@sectionに組み込むことができるようになります。

今回は「@component('components.message')」という記述をしていますが、これはcomponetsフォルダにあるmessage.blade.phpの内容を組み込んでいますということです。

message.blade.phpは以下のように記述しています。

<div>
  <p>タイトル：{{$msg_title}}</p>
  <p>コンテンツ：{{$msg_content}}</p>
</div>

$msg_titleと$msg_contentというパラメータがあると思います。ここにはめ込む値をcomponetsの中のslotで定義します。

今回はmsg_tilteに「なぜ温度が大事か」を定義したので、画面の表示としては「タイトル：なぜ温度が大事か」となります。

コンテンツも同様です。

以上により以下のような画面となりました。

f:id:oyaoya1123:20200820232646p:plain

CSSを一切適用していないので見た目は悪いですが、タイトル、ヘッダー、コンテンツ、フッターと一応そろっています。

まとめ

@section、@yield、@componentについて解説しました。

@yieldに@sectionで記述した内容がはめ込まれる
extendsで@yieldで記述したベースレイアウトを読み込んでから@sectionを書く
@componentを使えば外部から組み込みもできる

以上になります。

迷い人

日々勉強。勉強の先に何か見つかるといいなぁ