本文へ移動
Laravel Tips

Blade コンポーネントとレイアウト

何度も使う画面の部品（Blade コンポーネント）の作り方と、スロット・属性の渡し方、名前を付けない部品、レイアウトの作り方を説明します。

コンポーネントは、何度も使う画面の部品です。たとえば「警告の枠」や「ボタン」を1か所に作っておけば、あちこちのページで同じ見た目のまま使えます。直したいときも、1か所を直すだけで済みます。

作り方は2つあります。PHP のクラスと組み合わせる「クラスのコンポーネント」と、テンプレートのファイル1つだけで作る「名前を付けない（匿名の）コンポーネント」です。このページでは、そのあとに、ページ全体の枠（レイアウト）の作り方も説明します。Blade の基本は Blade テンプレートのページにあります。

クラスのコンポーネント#

クラスのコンポーネントは、make:component という Artisan コマンド（php artisan で動かすコマンド）で作ります。ここでは Alert（警告の枠）という部品を作ってみます。クラスは app/View/Components に置かれます。

bash
php artisan make:component Alert

このコマンドは、部品の見た目を書くビューも作ります。ビューは resources/views/components に置かれます。自分のアプリで作った部品は、app/View/Components と resources/views/components から自動で見つけてくれるので、ふつうは登録の作業が要りません。

フォルダを分けて作ることもできます。

bash
php artisan make:component Forms/Input

この場合、Input クラスは app/View/Components/Forms に、ビューは resources/views/components/forms に置かれます。

パッケージのコンポーネントを手で登録する#

自分のアプリの部品は自動で見つかります。しかし、Blade のコンポーネントを使う「パッケージ」（ほかの人にも配るための部品の集まり）を作るときは、クラスと HTML のタグの別名を、自分で登録します。パッケージのサービスプロバイダ（アプリの起動のときに、道具箱へ道具を登録する場所）の boot メソッドで登録するのがふつうです。

php
use Illuminate\Support\Facades\Blade;

/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Blade::component('package-alert', Alert::class);
}

登録すると、別名のタグで表示できます。

blade
<x-package-alert/>

componentNamespace メソッドを使うと、決まった名前の付け方にそって、部品のクラスを自動で見つけさせられます。たとえば Nightshade というパッケージに、Calendar と ColorPicker があり、Nightshade\Views\Components の中にあるとします。

php
use Illuminate\Support\Facades\Blade;

/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
}

こうすると、パッケージ名:: の形で、パッケージの部品を使えます。

blade
<x-nightshade::calendar />
<x-nightshade::color-picker />

Blade は、部品の名前を、先頭を大文字にした形（パスカルケース）にして、対応するクラスを探します。サブフォルダも、ドット . で書けます。

部品を表示する#

部品を表示するには、Blade のテンプレートに、コンポーネントのタグを書きます。タグは x- で始まり、そのあとにクラスの名前を、小文字とハイフンでつないだ形（ケバブケース）で書きます。

blade
<x-alert/>

<x-user-profile/>

クラスが app/View/Components の下のフォルダにあるときは、. でフォルダを表します。たとえば app/View/Components/Inputs/Button.php なら、次のとおりです。

blade
<x-inputs.button/>

条件で表示するかどうかを決めたいときは、クラスに shouldRender メソッドを作ります。false を返すと、その部品は表示されません。

php
use Illuminate\Support\Str;

/**
 * Whether the component should be rendered
 */
public function shouldRender(): bool
{
    return Str::length($this->message) > 0;
}

まとめ役の部品（インデックスのコンポーネント）#

関係のある部品を、1つのフォルダにまとめたいことがあります。たとえば、「カード」の部品が、次のクラスでできているとします。

text
App\View\Components\Card\Card
App\View\Components\Card\Header
App\View\Components\Card\Body

Card フォルダの中の Card なので、<x-card.card> と書く必要がありそうです。しかし、ファイルの名前とフォルダの名前が同じときは、Laravel がそれを大元の部品と考えます。そのため、フォルダの名前をくり返さずに書けます。

blade
<x-card>
    <x-card.header>...</x-card.header>
    <x-card.body>...</x-card.body>
</x-card>

部品へデータを渡す#

データは、HTML の属性で渡します。決まった文字や数字は、ふつうの属性で渡せます。PHP の式や変数を渡すときは、属性の名前の前に : を付けます。

blade
<x-alert type="error" :message="$message"/>

部品が受け取るデータは、すべてクラスのコンストラクタ（クラスを作るときに最初に動く部分）に書きます。クラスの public なプロパティ（クラスの中の変数）は、自動でビューの中で使えます。render メソッドで、ビューにデータを渡す必要はありません。

php
<?php

namespace App\View\Components;

use Illuminate\View\Component;
use Illuminate\View\View;

class Alert extends Component
{
    /**
     * Create the component instance.
     */
    public function __construct(
        public string $type,
        public string $message,
    ) {}

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View
    {
        return view('components.alert');
    }
}

ビューの中では、名前を書くだけで、その値を表示できます。

blade
<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

大文字と小文字の書き分け#

コンストラクタの引数は camelCase（2語目以降の頭を大文字にする）で書きます。HTML の属性で書くときは、kebab-case（小文字をハイフンでつなぐ）にします。

php
/**
 * Create the component instance.
 */
public function __construct(
    public string $alertType,
) {}

この $alertType は、次のように渡します。

blade
<x-alert alert-type="danger" />

属性の短い書き方#

属性の名前と変数の名前が同じことが多いので、短く書く方法があります。

blade
{{-- Short attribute syntax... --}}
<x-profile :$userId :$name />

{{-- Is equivalent to... --}}
<x-profile :user-id="$userId" :name="$name" />

属性を Blade に処理させない#

Alpine.js など、: で始まる属性を使う JavaScript のしくみがあります。それを Blade に処理させたくないときは、::（コロン2つ）にします。

blade
<x-button ::class="{ danger: isDeleting }">
    Submit
</x-button>

Blade は、次の HTML を出します。

blade
<button :class="{ danger: isDeleting }">
    Submit
</button>

部品のメソッドを使う#

public な変数だけでなく、public なメソッドも、ビューの中から呼べます。たとえば、isSelected というメソッドがあるとします。

php
/**
 * Determine if the given option is the currently selected option.
 */
public function isSelected(string $option): bool
{
    return $option === $this->selected;
}

ビューでは、メソッドと同じ名前の変数を、関数のように呼びます。

blade
<option {{ $isSelected($value) ? 'selected' : '' }} value="{{ $value }}">
    {{ $label }}
</option>

クラスの中で属性とスロットを使う#

render メソッドの中で、部品の名前・属性・スロット（部品に渡す中身）を使いたいときは、render から関数（クロージャ）を返します。

php
use Closure;

/**
 * Get the view / contents that represent the component.
 */
public function render(): Closure
{
    return function () {
        return '<div {{ $attributes }}>Components content</div>';
    };
}

この関数は、引数として $data という配列を受け取れます。部品の情報が入っています。

php
return function (array $data) {
    // $data['componentName'];
    // $data['attributes'];
    // $data['slot'];

    return '<div {{ $attributes }}>Components content</div>';
};
要素 説明
componentName x- のあとのタグの名前（<x-alert /> なら alert）
attributes タグに書かれたすべての属性
slot スロットの中身を持つ Illuminate\View\ComponentSlot

注意

$data の中身を、render が返す Blade の文字列へ、そのまま埋めこまないでください。悪意のある属性の中身で、外から勝手にプログラムを動かされるおそれがあります。

関数は文字列を返します。その文字列と同じ名前のビューがあれば、そのビューが表示されます。なければ、その文字列が Blade のテンプレートとして使われます。

ほかの道具を受け取る#

サービスコンテナから道具（依存するクラス）を受け取りたいときは、コンストラクタで、データの引数より前に書きます。自動で渡されます。

php
use App\Services\AlertCreator;

/**
 * Create the component instance.
 */
public function __construct(
    public AlertCreator $creator,
    public string $type,
    public string $message,
) {}

一部をビューへ出さない#

public なメソッドやプロパティのうち、ビューで使えるようにしたくないものは、$except という配列に入れます。

php
<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * The properties / methods that should not be exposed to the component template.
     *
     * @var array
     */
    protected $except = ['type'];

    /**
     * Create the component instance.
     */
    public function __construct(
        public string $type,
    ) {}
}

部品の属性#

部品が動くために要るデータとは別に、class のような HTML の属性を渡したいことがあります。そういう属性は、部品のいちばん外側の要素へ渡すのがふつうです。たとえば、次のように使います。

blade
<x-alert type="error" :message="$message" class="mt-4"/>

コンストラクタで受け取らなかった属性は、全部「属性の入れ物（アトリビュートバッグ）」に入ります。ビューの中では $attributes という変数で使えます。表示すると、全部の属性が出ます。

blade
<div {{ $attributes }}>
    <!-- Component content -->
</div>

注意

コンポーネントのタグの中で、@env のようなディレクティブは、いまのところ使えません。たとえば <x-alert :live="@env('production')"/> は、変換されません。

初期値と、あとから足す値#

属性の初期値を決めたり、渡された値に足したりしたいときは、merge メソッドを使います。いつも付けておきたい CSS のクラスを決めるのに便利です。

blade
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

次のように使うと、

blade
<x-alert type="error" :message="$message" class="mb-4"/>

できあがる HTML は、こうなります。

blade
<div class="alert alert-error mb-4">
    <!-- Contents of the $message variable -->
</div>

条件でクラスを足す#

条件が true のときだけクラスを足したいときは、class メソッドを使います。配列のキーに付けたいクラス、値に条件を書きます。キーが数字の要素は、いつでも付きます。

blade
<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>
    {{ $message }}
</div>

ほかの属性も足したいときは、class のあとに merge をつなげます。

blade
<button {{ $attributes->class(['p-4'])->merge(['type' => 'button']) }}>
    {{ $slot }}
</button>

補足

属性を受け取らない普通の HTML の要素で、条件つきのクラスを付けたいときは、@class ディレクティブを使います。

class 以外の属性の足し方#

class 以外の属性に merge を使うと、渡した値は「初期値」になります。そして class とちがい、外から渡された値が来ると、足されずに、置きかわります。たとえば、ボタンの部品は次のように書けます。

blade
<button {{ $attributes->merge(['type' => 'button']) }}>
    {{ $slot }}
</button>

使うときに type を渡せば、それが使われます。渡さなければ button になります。

blade
<x-button type="submit">
    Submit
</x-button>

できあがる HTML は、こうなります。

blade
<button type="submit">
    Submit
</button>

class 以外でも、初期値と渡された値をつなげたいときは、prepends メソッドを使います。次の例では、data-controller が必ず profile-controller で始まり、渡された値がそのあとに続きます。

blade
<div {{ $attributes->merge(['data-controller' => $attributes->prepends('profile-controller')]) }}>
    {{ $slot }}
</div>

属性を取り出す・しぼりこむ#

属性の入れ物には、次のメソッドがあります。

メソッド 説明
merge 初期値を決める。class は渡された値とつなげる
class 条件で class を足す
prepends 初期値を先頭に置き、渡された値をあとにつなげる
filter 関数が true を返した属性だけ残す
whereStartsWith キーが、指定した文字で始まる属性だけ取り出す
whereDoesntStartWith キーが、指定した文字で始まらない属性だけ取り出す
first 最初の属性を取り出す
has 属性があるか調べる（配列で渡すと、全部あるか）
hasAny 指定した属性のどれかがあるか調べる
get 指定した属性の値を取り出す
only 指定したキーの属性だけ取り出す
except 指定したキー以外の属性を取り出す
blade
{{ $attributes->filter(fn (string $value, string $key) => $key == 'foo') }}
blade
{{ $attributes->whereStartsWith('wire:model') }}
blade
{{ $attributes->whereDoesntStartWith('wire:model') }}
blade
{{ $attributes->whereStartsWith('wire:model')->first() }}
blade
@if ($attributes->has('class'))
    <div>Class attribute is present</div>
@endif

has に配列を渡すと、全部の属性があるかを調べます。

blade
@if ($attributes->has(['name', 'class']))
    <div>All of the attributes are present</div>
@endif
blade
@if ($attributes->hasAny(['href', ':href', 'v-bind:href']))
    <div>One of the attributes is present</div>
@endif
blade
{{ $attributes->get('class') }}
blade
{{ $attributes->only(['class']) }}
blade
{{ $attributes->except(['class']) }}

使えない名前#

次の名前は、Blade が部品を表示するために使っています。部品の public なプロパティやメソッドの名前には、使えません。

  • data
  • render
  • resolve
  • resolveView
  • shouldRender
  • view
  • withAttributes
  • withName

スロット#

部品には、タグの中の内容を「スロット」として渡せます。部品の中では、$slot 変数を表示します。たとえば、alert の部品が次のようなとき、

blade
<!-- /resources/views/components/alert.blade.php -->

<div class="alert alert-danger">
    {{ $slot }}
</div>

次のように、タグの中に書いた内容が、スロットに入ります。

blade
<x-alert>
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

部品の中の別々の場所に、別々の中身を出したいことがあります。たとえば「title」というスロットを足します。

blade
<!-- /resources/views/components/alert.blade.php -->

<span class="alert-title">{{ $title }}</span>

<div class="alert alert-danger">
    {{ $slot }}
</div>

名前の付いたスロットの中身は、x-slot タグで書きます。x-slot の外に書いた内容は、$slot に入ります。

xml
<x-alert>
    <x-slot:title>
        Server Error
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

スロットに中身があるかは、isEmpty メソッドで調べられます。

blade
<span class="alert-title">{{ $title }}</span>

<div class="alert alert-danger">
    @if ($slot->isEmpty())
        This is default content if the slot is empty.
    @else
        {{ $slot }}
    @endif
</div>

hasActualContent は、HTML のコメントではない、本当の中身があるかを調べます。

blade
@if ($slot->hasActualContent())
    The scope has non-comment content.
@endif

スロットから部品のデータを使う#

Vue のような JavaScript のしくみに、部品のデータをスロットの中で使える「スコープ付きスロット」があります。Laravel でも、似たことができます。部品に public なメソッドやプロパティを作り、スロットの中で $component 変数から使います。次の例では、x-alert に formatAlert メソッドがあるとします。

blade
<x-alert>
    <x-slot:title>
        {{ $component->formatAlert('Server Error') }}
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

スロットの属性#

スロットにも、CSS のクラスなどの属性（前の節の「部品の属性」）を付けられます。

xml
<x-card class="shadow-sm">
    <x-slot:heading class="font-bold">
        Heading
    </x-slot>

    Content

    <x-slot:footer class="text-sm">
        Footer
    </x-slot>
</x-card>

スロットの属性は、スロットの変数の attributes プロパティで使います。使い方は、部品の属性と同じです。

blade
@props([
    'heading',
    'footer',
])

<div {{ $attributes->class(['border']) }}>
    <h1 {{ $heading->attributes->class(['text-lg']) }}>
        {{ $heading }}
    </h1>

    {{ $slot }}

    <footer {{ $footer->attributes->class(['text-gray-700']) }}>
        {{ $footer }}
    </footer>
</div>

クラスの中に見た目を書く（インラインのビュー）#

とても小さな部品では、クラスとビューの2つを管理するのが面倒です。そのときは、render メソッドから、見た目の HTML を直接返せます。

php
/**
 * Get the view / contents that represent the component.
 */
public function render(): string
{
    return <<<'blade'
        <div class="alert alert-danger">
            {{ $slot }}
        </div>
    blade;
}

この形の部品を作るには、make:component に --inline オプションを付けます。

bash
php artisan make:component Alert --inline

動くときに部品を決める（動的なコンポーネント）#

どの部品を表示するか、動くときまで分からないことがあります。そのときは、Laravel に入っている dynamic-component を使い、変数の値で部品を決めます。

blade
// $componentName = "secondary-button";

<x-dynamic-component :component="$componentName" class="mt-4" />

部品を手で登録する#

注意

ここから先の手での登録は、おもに、部品を含む Laravel のパッケージを作る人向けです。パッケージを作らないなら、読まなくてかまいません。

自分のアプリの部品は、app/View/Components と resources/views/components から、自動で見つかります。

しかし、パッケージを作るときや、決まりとはちがう場所に部品を置くときは、クラスと HTML のタグの別名を登録して、Laravel に場所を教えます。パッケージのサービスプロバイダの boot メソッドで登録するのがふつうです。

php
use Illuminate\Support\Facades\Blade;
use VendorPackage\View\Components\AlertComponent;

/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Blade::component('package-alert', AlertComponent::class);
}

登録したあとは、別名のタグで表示できます。

blade
<x-package-alert/>

パッケージの部品をまとめて見つけさせる#

componentNamespace メソッドを使うと、決まった名前の付け方にそって、部品のクラスを自動で見つけさせられます。

php
use Illuminate\Support\Facades\Blade;

/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
}

パッケージ名:: の形で、部品を使えます。

blade
<x-nightshade::calendar />
<x-nightshade::color-picker />

Blade は、部品の名前をパスカルケースにして、対応するクラスを探します。サブフォルダは、ドット . で書けます。

名前を付けない部品（匿名コンポーネント）#

匿名コンポーネントは、クラスを持たず、ビューのファイル1つだけでできた部品です。resources/views/components に Blade のテンプレートを置くだけで作れます。たとえば resources/views/components/alert.blade.php を作ったら、次のように表示できます。

blade
<x-alert/>

components の下のフォルダにあるときは、. でフォルダを表します。たとえば resources/views/components/inputs/button.blade.php なら、次のとおりです。

blade
<x-inputs.button/>

Artisan で作るときは、make:component に --view を付けます。

bash
php artisan make:component forms.input --view

このコマンドは resources/views/components/forms/input.blade.php を作ります。<x-forms.input /> で表示できます。

まとめ役の匿名の部品#

たくさんのテンプレートでできた部品を、1つのフォルダにまとめたいことがあります。たとえば「アコーディオン」の部品が、次のようになっているとします。

text
/resources/views/components/accordion.blade.php
/resources/views/components/accordion/item.blade.php

こうすれば、次のように使えます。

blade
<x-accordion>
    <x-accordion.item>
        ...
    </x-accordion.item>
</x-accordion>

ただ、この形では、大元の部品を x-accordion と書くために、accordion.blade.php を accordion フォルダの外に置く必要があります。

そこで、Blade では、フォルダと同じ名前のファイルを、フォルダの中に置けます。あれば、それが大元の部品として表示されます。書き方は同じまま、置き場所だけ変えられます。

text
/resources/views/components/accordion/accordion.blade.php
/resources/views/components/accordion/item.blade.php

データと属性を分ける#

匿名コンポーネントにはクラスがないので、どれがデータ（変数）で、どれが属性の入れ物に入る属性か、分けたくなります。

テンプレートの先頭で @props を使うと、データとして扱う属性を決められます。それ以外の属性は、属性の入れ物に入ります。初期値を決めたいときは、配列のキーに変数の名前、値に初期値を書きます。

blade
<!-- /resources/views/components/alert.blade.php -->

@props(['type' => 'info', 'message'])

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

この部品は、次のように使えます。

blade
<x-alert type="error" :message="$message" class="mb-4"/>

親のデータを使う#

子の部品の中で、親の部品のデータを使いたいことがあります。そのときは @aware ディレクティブを使います。たとえば、親の <x-menu> と、子の <x-menu.item> でできたメニューを考えます。

blade
<x-menu color="purple">
    <x-menu.item>...</x-menu.item>
    <x-menu.item>...</x-menu.item>
</x-menu>

<x-menu> は、次のように作れます。

blade
<!-- /resources/views/components/menu/index.blade.php -->

@props(['color' => 'gray'])

<ul {{ $attributes->merge(['class' => 'bg-'.$color.'-200']) }}>
    {{ $slot }}
</ul>

color は親の <x-menu> にだけ渡したので、<x-menu.item> の中では使えません。@aware を使うと、子でも使えるようになります。

blade
<!-- /resources/views/components/menu/item.blade.php -->

@aware(['color' => 'gray'])

<li {{ $attributes->merge(['class' => 'text-'.$color.'-800']) }}>
    {{ $slot }}
</li>

注意

@aware で使えるのは、親へ HTML の属性としてはっきり渡した値だけです。親に渡さなかった、@props の初期値は、@aware では使えません。

匿名の部品を置く場所を足す#

匿名の部品は、ふつう resources/views/components に置きます。それとは別の場所も、登録できます。

anonymousComponentPath メソッドの1つ目の引数は場所（パス）で、2つ目の引数は、部品に付ける「名前空間」（呼ぶときの前置き）です。サービスプロバイダの boot メソッドで呼ぶのがふつうです。

php
/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Blade::anonymousComponentPath(__DIR__.'/../components');
}

前置きを付けずに登録すると、部品も前置きなしで表示できます。たとえば、その場所に panel.blade.php があれば、次のとおりです。

blade
<x-panel />

2つ目の引数に、前置きを付けられます。

php
Blade::anonymousComponentPath(__DIR__.'/../components', 'dashboard');

前置きがあるときは、部品の名前の前に、前置きを付けて表示します。

blade
<x-dashboard::panel />

レイアウトを作る#

たいていの Web アプリは、どのページも、だいたい同じ枠（ヘッダーなど）を使っています。ページごとに枠の HTML を全部書くのは、大変で、直すのも面倒です。そこで、枠を1つの部品として作り、どのページでも使います。

コンポーネントでレイアウトを作る#

レイアウトの部品を作る#

たとえば、「やることリスト」のアプリを作るとします。layout という部品を、次のように作れます。

blade
<!-- resources/views/components/layout.blade.php -->

<html>
    <head>
        <title>{{ $title ?? 'Todo Manager' }}</title>
    </head>
    <body>
        <h1>Todos</h1>
        <hr/>
        {{ $slot }}
    </body>
</html>

レイアウトの部品を使う#

部品を作ったら、それを使うビューを作ります。ここでは、やることの一覧を出す、かんたんなビューにします。

blade
<!-- resources/views/tasks.blade.php -->

<x-layout>
    @foreach ($tasks as $task)
        <div>{{ $task }}</div>
    @endforeach
</x-layout>

部品の中に書いた内容は、layout の $slot に入ります。また、この layout は $title スロットがあればそれを使い、なければ初期のタイトルを出します。タイトルを変えたいときは、ふつうのスロットの書き方を使います。

blade
<!-- resources/views/tasks.blade.php -->

<x-layout>
    <x-slot:title>
        Custom Title
    </x-slot>

    @foreach ($tasks as $task)
        <div>{{ $task }}</div>
    @endforeach
</x-layout>

最後に、ルートから tasks のビューを返します。

php
use App\Models\Task;

Route::get('/tasks', function () {
    return view('tasks', ['tasks' => Task::all()]);
});

テンプレートの継承でレイアウトを作る#

レイアウトは、「テンプレートの継承」でも作れます。土台になる枠のテンプレートを決めておき、子のテンプレートが中身だけを入れる書き方です。コンポーネントが登場する前は、これが主な作り方でした。

枠を作る#

まず枠のビューを、1つ作ります。

blade
<!-- resources/views/layouts/app.blade.php -->

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

ふつうの HTML ですが、@section と @yield に注目してください。@section は、中身の「区画」を決めます。@yield は、その区画の中身を表示します。

ディレクティブ 説明
@section 区画（セクション）を決める
@show 区画を決めて、その場ですぐ表示する
@endsection 区画を決めるだけで、表示はしない
@yield 区画の中身を表示する（2つ目の引数は、無いときの初期値）
@extends どの枠を引きつぐか決める
@parent 枠にある中身のあとへ、足して表示する
@props 匿名の部品で、データとして扱う属性を決める
@aware 子の部品の中で、親の部品のデータを使う

枠を引きつぐ#

子のビューでは、@extends で、どの枠を引きつぐか決めます。そして @section で、枠の区画に中身を入れます。区画の中身は、枠の @yield で表示されます。

blade
<!-- resources/views/child.blade.php -->

@extends('layouts.app')

@section('title', 'Page Title')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

この例の sidebar では、@parent を使って、枠にある中身を消さずに、あとへ足しています。@parent は、表示のときに枠の中身に置きかわります。

補足

先の枠の例の sidebar は @show で終わっていましたが、ここでは @endsection で終わっています。@endsection は区画を決めるだけです。@show は、区画を決めて、その場ですぐ表示します。

@yield の2つ目の引数に、初期値を書けます。その区画が無いときに表示されます。

blade
@yield('content', 'Default content')

関連するページ#

公式ドキュメント（英語）

2026年10月5日時点の内容をもとに、日本語でまとめています。

ページの一覧