Bladeコンポーネントで部品化する

前の単元では、ページ全体の「土台」を共通化しました。この単元では、もっと小さな部品——たとえば「お知らせ枠」や「ボタン」——を再利用する方法を学びます。これを Blade では コンポーネント と呼びます。

コンポーネントとは

同じ見た目の部品を、いろいろなページで何度も使いたいことがあります。たとえば「黄色いお知らせ枠」を、トップページにもマイページにも出したい、というように。

その部品を1つのファイルに切り出して名前をつけ、<x-名前> という短いタグで呼び出せるようにしたものがコンポーネントです。HTML の自作タグを作るイメージです。

コンポーネントを作る

ここでは、設定ファイルが不要で手軽な 匿名コンポーネント を使います。resources/views/components/ の中にファイルを置くだけで使えます。

resources/views/components/alert.blade.php を作ります。

<div style="border: 1px solid #f5c000; background: #fff8e1; padding: 1rem;">
    {{ $slot }}
</div>

{{ $slot }}（スロット）は、呼び出すときにタグの中に書いた内容がここに入る、という穴です。

コンポーネントを使う

作った部品は、ファイル名 alert に x- を付けて <x-alert> として呼び出します。

<x-alert>
    保存が完了しました。
</x-alert>

<x-alert> と </x-alert> ではさんだ「保存が完了しました。」が、先ほどの {{ $slot }} の位置に入ります。これで、同じお知らせ枠を好きなページで何度でも使えます。

値を渡す（属性）

部品に「外から値を渡したい」こともあります。たとえばタイトルを変えたいとき。コンポーネント側で @props を使って受け取り口を用意します。

{{-- resources/views/components/alert.blade.php --}}
@props(['title' => 'お知らせ'])

<div style="border: 1px solid #f5c000; background: #fff8e1; padding: 1rem;">
    <strong>{{ $title }}</strong>
    <div>{{ $slot }}</div>
</div>

呼び出すときは、HTML の属性のように値を渡します。

<x-alert title="エラー">
    入力に誤りがあります。
</x-alert>

title="エラー" が $title に入り、見出しが「エラー」になります。title を指定しなければ、@props で決めた初期値「お知らせ」が使われます。

{{-- … --}} は Blade のコメントです。画面には出力されません。

レイアウトとの使い分け

• レイアウト（前の単元）…ページ全体の土台（ヘッダー・フッターなど大きな枠）。
• コンポーネント（この単元）…ボタンやお知らせ枠など、ページの中で使う小さな部品。

役割が違うので、両方を組み合わせて使います。

まとめ

• コンポーネントは、繰り返し使う見た目の部品を切り出して再利用する仕組み。
• resources/views/components/ にファイルを置き、<x-ファイル名> で呼び出す（匿名コンポーネント）。
• タグではさんだ中身は {{ $slot }} に入る。
• 外から値を渡すには @props で受け取り、属性（title="..."）で渡す。
• これで第3章は完了です。次の章からは、いよいよデータベースを扱います。