Bladeの子ビューの使い方

公開日：2017-5-21 最終更新日：2017-5-19
プロナビTOP / プログラミング初心者向け技術系ノウハウ・まとめ

Laravelの標準テンプレートであるBladeには、子ビューというものがあります。
オブジェクト指向の継承と似たような概念となります。つまり、親のビューを継承する機能です。

簡単な例を示します。

まず、親のビュー（resources/views/example_parent.blade.phpファイル）を用意します。

—ここからexample_parent.blade.phpファイルの中身—

<html>
<head>
<title>タイトルは@yield('title')</title>
</head>
<body>
<div>
@yield('contents')
</div>
</body>
</html>

<html>

<head>

<title>タイトルは@yield('title')</title>

</head>

<body>

<div>

@yield('contents')

</div>

</body>

</html>

—ここまでexample_parent.blade.phpファイルの中身—

シンプルなhtmlですが、内部にhtmlタグ以外の@yieldというキーワードが入っています。
@yieldは、Bladeテンプレート特有のキーワードです。
この部分を、継承先の子ビュー上で埋め込んでいきます。

それでは、子ビュー（resources/views/example_child.blade.phpファイル）を作成してみましょう。
子ビューでは、
・　継承したいビューの指定
・　@yieldのキーワード内部の埋め込み
などを行います。

—ここからexample_child.blade.phpファイルの中身—

@extends('example_parent')

@section('title', '子ビューのサンプル')

@section('contents')
<p>埋め込みの中身</p>
<p>埋め込みの中身２行目</p>
<div>
<span>子ビュー側で埋め込んだdiv部分です。</span>
</div>
@endsection

@extends('example_parent')

@section('title', '子ビューのサンプル')

@section('contents')

<p>埋め込みの中身</p>

<p>埋め込みの中身２行目</p>

<div>

<span>子ビュー側で埋め込んだdiv部分です。</span>

</div>

@endsection

—ここまでexample_child.blade.phpファイルの中身—

@extendsキーワードで、継承したい親ビューの名前を指定します。
今回は、”example_parent”になります。

次に、親のビュー内部の@yield部分の内容を、子ビュー側で記述します。
親の@yieldキーワードに対応するキーワードが子の@sectionキーワードです。
今回の例では、

親の@yield(‘title’)キーワードと、
子の@section(‘title’)キーワード
が対応します。

同様に、
親の@yield(‘contents’)キーワードと、
子の@section(‘contents’)キーワード
が対応します。

@sectionの中身が文字列などのシンプルな内容の場合は、

@section(‘キーワード’, ‘中身’)

と一行で記載します。
複数行にわたる場合や、内容にhtmlタグを含む場合などは、

@section(‘キーワード’)
中身
@endsection

といったように、@section～@endsectionの間に記述します。

最終的に、コントローラ側で、以下のように子ビューを呼び出した場合、

return view(‘example_child’);

親の@yieldキーワードの中身が子の@sectionキーワードの中身に入れ替わりますので、ブラウザに表示される内容は、

<html>
<head>
<title>タイトルは子ビューのサンプル</title>
</head>
<body>
<div>
<p>埋め込みの中身</p>
<p>埋め込みの中身２行目</p>
<div>
<span>子ビュー側で埋め込んだdiv部分です。</span>
</div>
</div>
</body>
</html>