はじめに
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">
© 2025 MyApp
</footer>
⑥まとめ
Blade コンポーネントを活用すれば、ビューの再利用性が格段にアップします。
Laravel Breeze を通して、この便利な仕組みをどんどん活用していきましょう！