【Laravel】bladeの基礎（include,yield,extends,section）

2024.04.28

Image by 165106 from Pixabay

1 はじめに
2 環境
3 書き方
- 3.1 コンポーネントを呼び出す：include
- 3.2 テンプレートに親子関係を定義する：yield, section
4 使ってみる

はじめに

この記事では、bladeの基礎的な使い方として以下４つの使い方をまとめています。

■コンポーネントを呼び出す。
include：子コンポーネントを呼び出す

■テンプレートに親子関係を定義する
yield：親に記述する。子から要素を受取る
extends：子に記述する。使用する親テンプレートの指定
section：子に記述する。親のyieldに値を渡す

環境

OS：Windows11 Pro/WSL2(Ubuntu 22.04.4)
PHP：8.3.2
Laravel：11.2.0

書き方

include, yield, sectionの書き方はそれぞれ以下の通りです。

コンポーネントを呼び出す：include

@include('パス')：子コンポーネントを呼び出す

　例）@include('layouts.header')
 　　※resources/views/layouts/header.blade.phpを呼び出す例

テンプレートに親子関係を定義する：yield, section

■yield：親に記述する。子から要素を受取る

@yield('キーワード')：子テンプレートから要素を受け取る。
　例）@yield('page_title')

■extends：子に記述する。使用する親テンプレートの指定

どのテンプレートを親テンプレートとして使うかを指定します。

@extends('パス')
例）@extends('layouts.base')
    ※resources/view/layouts/base.blade.phpを指定する例

■section：子に記述する。親のyieldに値を渡す
親のyieldに渡す値を設定する@sectionの使い方は2通りあります。

【使い方⓵】

@section('キーワード', 値)：親のyieldに渡す値を設定
例）@(section('page_title', 'ユーザー一覧画面')

　

【使い方⓶】

@section('キーワード')
 　親のyieldに渡すHTML要素
@endsection

使ってみる

以下の様にViewファイル３つを作成します。

～～
├resources
    ～～
    ├views
      ├layouts
        ├base.blade.php
        ├header.blade.php
      ├users
        ├index.blade.php

次に作成した３つのファイルにそれぞれ以下を記述してください。

■base.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @yield('page_meta')

        <title>Laravel | @yield('page_title')</title>

        @yield('page_css')

        @yield('page_js')
    </head>
    <body class="font-sans antialiased dark:bg-black dark:text-white/50">

        <!-- header.blade.phpの呼び出し -->
        @include('layouts.header')

        <!-- 子に記述した「@section('content')」の値を受取る -->
        @yield('content')
    </body>
</html>

　@yield(‘page_meta’)、@yield(‘page_css’)、@yield(‘page_js’)など今回の例では不要なものも記述していますが、開発の際にはあると便利なので書いておきます。

■header.blade.php

<header>
    ヘッダーです
</header>

■index.blade.php

<!-- 親テンプレートの指定　※extendsは必ず一番上に書く！ -->
@extends('layouts.base')

<!-- 親に記述された「@yield('page_title')」に値を渡す -->
@section('title', 'users/index')

@section('page_meta')
@endsection

@section('page_css')
@endsection

@section('page_js')
@endsection

<!-- 親に記述された「@yield('content')」に値を渡す -->
@section('content')
    <div>users/indexです！</div>
@endsection

bladeの基礎については以上です。