1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

Bladeの子ビューの使い方

Pocket

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

簡単な例を示します。

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

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

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

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

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

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

—ここまで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キーワードの中身に入れ替わりますので、ブラウザに表示される内容は、

になります。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る