はじめに

Laravel Breeze を使ってプロジェクトを生成すると、Bladeファイル内に次のようなタグが出てきます。

<x-app-layout>
    <x-slot name="header">
        <h2>ダッシュボード</h2>
    </x-slot>

    <div class="py-12">
        コンテンツがここに表示されます。
    </div>
</x-app-layout>

このって何？どこに定義されているの？
最初は戸惑うかもしれませんが、これは Laravelの Blade コンポーネント機能を使ったレイアウトコンポーネントです。

① x-app-layoutは何者？

これは Laravel の Blade コンポーネントです。
Breeze や Jetstream をインストールすると、自動的に以下のファイルが作成されます：

resources/views/components/app-layout.blade.php

このファイルがの実体です。

②中身

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

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- CSSやJSの読み込みなど -->
</head>
<body>
    <div class="min-h-screen bg-gray-100">
        @include('layouts.navigation') <!-- ナビゲーションバー -->

        <!-- ヘッダーの表示 -->
        @if (isset($header))
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4">
                    {{ $header }}
                </div>
            </header>
        @endif

        <!-- メインコンテンツ -->
        <main>
            {{ $slot }}
        </main>
    </div>
</body>
</html>

注目ポイント:

{{ $slot }} → コンポーネント内に書いたメインの中身がここに挿入される
{{ $header }} → によって渡された内容がここに表示される

③x-slot name="header" とは？

Blade コンポーネントに　名前付きの領域（スロット） を渡すための機能です。

使い方:

<x-app-layout>
    <x-slot name="header">
        <h2>マイページ</h2>
    </x-slot>

    <div>
        本文コンテンツ
    </div>
</x-app-layout>

この場合、

マイページ

が $header に渡されて、レイアウト内の {{ $header }} の位置に表示されます。

④どんな時に使える？

レイアウトを統一したいとき
複数ページで同じヘッダー／ナビゲーションを使いまわしたいとき
冗長なHTMLを共通部品として切り出したいとき

Laravel Breeze は最初からこの構成を取り入れているので、自然と「コンポーネント志向の開発」が身に付きます。

⑤カスタマイズも簡単です

レイアウトにヘッダーやフッターを追加したいときは、
resources/views/components/app-layout.blade.php を編集するだけ。

<!-- フッターを追加 -->
<footer class="text-center py-4 text-gray-500 text-sm">
    &copy; 2025 MyApp
</footer>

⑥まとめ

Blade コンポーネントを活用すれば、ビューの再利用性が格段にアップします。
Laravel Breeze を通して、この便利な仕組みをどんどん活用していきましょう！