Bladeコンポーネントの使い方（Laravel）

LaravelのView（Blade）では、画面の部品を Bladeコンポーネント として切り出すことができます。ボタン・フォーム・カードなどのUI部品を再利用可能な単位で管理できるため、Viewの可読性と保守性が大きく向上します。

本記事では、Bladeコンポーネントの基本的な使い方について、次の内容を解説します。

Bladeコンポーネントとは？

Bladeコンポーネントとは、Viewの一部を部品化して再利用できる仕組みです。

たとえば、次のようなUIは複数画面で共通化されがちです。

これらをBladeファイルとして切り出し、
というタグ形式で呼び出せるようにしたものがコンポーネントです。

以下のコマンドでコンポーネントを作成します。

php artisan make:component PrimaryButton

作成されるファイルは次の2つです。

app/View/Components/PrimaryButton.php
resources/views/components/primary-button.blade.php

※ 表示だけで完結する場合は、Bladeファイルのみ使用しても問題ありません。

🔽 resources/views/components/primary-button.blade.php

<button class="px-4 py-2 bg-blue-600 text-white rounded">
    {{ $slot }}
</button>

$slot には、コンポーネントタグで囲んだ中身が入ります。

任意のViewから、次のように使用できます。

<x-primary-button>
    保存する
</x-primary-button>

この記述は、HTML上では buttonタグとして展開されます。

Blade側で @props を使って値を受け取ります。

@props([
    'type' => 'button',
])

<button type="{{ $type }}" class="px-4 py-2 bg-blue-600 text-white rounded">
    {{ $slot }}
</button>

<x-primary-button type="submit">
    登録する
</x-primary-button>

動的な値を渡す場合は : を付けます。

<x-primary-button :type="$buttonType">
    送信
</x-primary-button>

コンポーネント側で $attributes を使うと、
呼び出し元から指定されたHTML属性をそのまま引き継げます。

<button {{ $attributes->merge(['class' => 'px-4 py-2 rounded']) }}>
    {{ $slot }}
</button>

呼び出し側：

<x-primary-button class="bg-red-500">
    削除
</x-primary-button>

classは自動的にマージされます。

「ページ構造」 か 「部品」 かで使い分けるのが基本です。

BreezeやJetstreamのViewを見ると、
多くのコンポーネントが使われていることが確認できます。

コンポーネントは 「表示ロジック」に限定する のが原則です。