Laravel10で改善されたBladeコンポーネントについて

Bladeコンポーネントは、Laravel10で改善された機能の一つです。Bladeコンポーネントを使用することで、再利用可能なHTML要素を作成することができます。また、コンポーネントを継承することで、親コンポーネントの機能を引き継ぎながら、特定の要素だけを変更することができます。

本記事では、Bladeコンポーネントの改善点と、具体的な使い方について、ソースコードを交えながら解説します。

Bladeコンポーネントの改善点
Bladeコンポーネントの使い方
関連記事

Bladeコンポーネントの改善点

Laravel10では、Bladeコンポーネントに以下の改善点が導入されました。

コンポーネントのタグ名をカスタマイズできるようになった。
コンポーネントに属性を追加できるようになった。
コンポーネントのスロットを無名関数で定義できるようになった。
コンポーネントのスロットを省略できるようになった。

これらの改善点により、Bladeコンポーネントの利便性が向上し、より柔軟な使い方が可能になりました。

Bladeコンポーネントの使い方

それでは、Bladeコンポーネントの具体的な使い方について、ソースコードを交えながら解説します。

まずは、コンポーネントを作成するために、以下のコードを記述します。

<!-- resources/views/components/alert.blade.php -->
<div class="alert alert-{{ $type }}" role="alert">
    {{ $slot }}
</div>

上記のコードでは、alert.blade.phpという名前のファイルを作成し、alertという名前のBladeコンポーネントを作成しています。コンポーネントの中では、$type変数と$slot変数を使用しています。$type変数は、コンポーネントの属性として渡された値を取得し、CSSクラスを設定するために使用されます。$slot変数は、コンポーネントのスロットを表示するために使用されます。

タグ名をカスタマイズしたコンポーネント

Bladeコンポーネントの改善点により、コンポーネントをより柔軟に使うことができるようになりました。例えば、以下のように、タグ名をカスタマイズしたコンポーネントを作成することができます。

<!-- resources/views/components/my-alert.blade.php -->
<div class="alert alert-{{ $type }}" role="alert">
    {{ $slot }}
</div>

上記のコードでは、my-alertというタグでalertコンポーネントを呼び出すことができます。例えば、以下のように使うことができます。

<!-- resources/views/welcome.blade.php -->
<x-my-alert type="warning">
    Laravel10 is coming soon!
</x-my-alert>

属性を追加してコンポーネント機能を拡張

また、Bladeコンポーネントに属性を追加することで、コンポーネントの機能を拡張することができます。例えば、以下のように、アイコンを表示する機能を追加したコンポーネントを作成することができます。

<!-- resources/views/components/icon-alert.blade.php -->
<div class="alert alert-{{ $type }}" role="alert">
    <i class="fas fa-{{ $icon }}"></i>
    {{ $slot }}
</div>

上記のコードでは、$icon変数を使用して、フォントアイコンを表示する機能を追加しています。例えば、以下のように使うことができます。

<!-- resources/views/welcome.blade.php -->
<x-icon-alert type="info" icon="info-circle">
    Laravel10 is now available!
</x-icon-alert>

さらに、Bladeコンポーネントのスロットを無名関数で定義することで、コンポーネントの使い方を柔軟にすることができます。例えば、以下のように、ボタンを表示するコンポーネントを作成することができます。

スロットを無名関数で定義

<!-- resources/views/components/button.blade.php -->
<button class="btn btn-{{ $type }}" type="button">
    {{ $slot() }}
</button>

上記のコードでは、スロットを無名関数で定義しています。これにより、スロット内に任意のコードを記述することができるようになります。例えば、以下のように使うことができます。

<!-- resources/views/welcome.blade.php -->
<x-button type="primary">
    {{ __('Click me!') }}
</x-button>

<x-button type="success">
    {{ __('Click me too!') }}
</x-button>

スロットの省略

最後に、Bladeコンポーネントのスロットを省略することもできます。この場合、コンポーネントの中身が表示されます。例えば、以下のように使うことができます。

<!-- resources/views/welcome.blade.php -->
    <x-alert type="danger">
        <strong>Whoops!</strong> Something went wrong.
    </x-alert>

上記のコードでは、x-alertというタグでdangerコンポーネントを呼び出しています。type属性にはdangerを渡しています。コンポーネント内では、CSSクラスalert-dangerが設定されます。

daigoro

大阪のエンジニアが書いているブログ。