(Laravel) bladeのレイアウトの使い方

本記事では、Laravelのbladeのレイアウトの使い方について紹介していく。

なお、bladeの使い方以前に、laravelのビューの基本については以下の記事にて使い方を紹介しているため、こちらも参考にして欲しい。

合わせて読みたい

関連記事(Laravel) ビューの役割・使い方を解説

2022.09.03

bladeの「レイアウト」とは

bladenの「レイアウト 」とは、
viewにあらかじめ決めておく、大まかな表示内容や区画のことだ。

bladeの「継承」と「セクション」

bladeのレイアウトを理解する上で重要な概念が、「継承」と「セクション」だ。
両者について具体的に説明していく。

bladeの「継承」とは

bladeの継承とは、
既存のテンプレートのレイアウトを継承して新しいテンプレートを作成することだ。継承した新しいテンプレートでは、継承元にない要素を追加するだけでテンプレートを作成することができる。

親レイアウトを継承する書式

継承をするためには、子レイアウトから、親レイアウトを読み込む必要がある。
継承を行う書式は下記。

# 子レイアウト（.blade.php）の始めに記述する。

@extends('親レイアウト名')

bladeの「セクション」とは

bladeのセクションとは、テンプレートに用意した区画のことだ。

継承元（親レイアウト）にセクションを用意しておいて、継承した子のテンプレートではセクションの中身を書いていけば、同じようなレイアウトのテンプレートを簡単に作ることができる。

レイアウトに使用するディレクティブ

では次に、レイアウトに使用するディレクティブというものについて、解説していく。

ディレクティブとはある特定の機能を持った範囲を明示する機能のことだが、
ディレクティブ自体はblade特有の機能ではなく、laravel全体で様々なディレクティブが存在する。ディレクティブについての理解は以下の記事を参考にして欲しい。

合わせて読みたい

関連記事(Laravel) bladeのディレクティブの使い方を解説

2022.03.02

そんなディレクティブの中から、bladeに関連するディレクティブのみを紹介しますというお話になる。

@yieldディレクティブ

@yieldディレクティブは、親レイアウトに指定するディレクティブで、
子レイアウトで記述するセクションの内容が埋め込まれる場所を示す。子レイアウトのどのセクションを埋め込むかは、セクション名を指定しておくことで判別する。

#親レイアウト

@yield(‘セクション名A’)  #子レイアウトの「「セクション名A」のセクションが埋め込まれる場所

@yield(‘セクション名B’)  #子レイアウトの「「セクション名B」のセクションが埋め込まれる場所

@yield(‘セクション名C’)  #子レイアウトの「「セクション名C」のセクションが埋め込まれる場所

@sectionディレクティブ

@sectionディレクティブは、子レイアウトに指定するディレクティブで、
親レイアウトに対応する＠yield(‘セクション名’)のディレクティブ名があった場合、そこに埋め込まれて表示される内容を記述するセクションだ。

#子レイアウト


@section(‘セクション名’)　　　　#親の@yield('セクション名')の場所に埋め込まれる

    //表示内容

@endsection

以下のような書き方も可能だ。

@section(’セクション名’, 表示内容 )

ちなみに親レイアウトに同じセクション名の@sectionディレクティブが存在した場合、子レイアウトのsectionで内容が上書きされる

bladeのレイアウトまとめ