【Laravel】Bladeでcomponentを利用する

コンポーネントを利用することで多くの場所から呼ばれる共通部品を簡単に実装することができます。
例えば、アラートメッセージを表示する部品を作成してみます。

基本的な使い方

まず以下のようにファイルを用意します。
resources/views/test.blade.php
resources/views/components/alert.blade.php

component/alert.blade.phpは以下とします。

<div class="alert-danger">
    <div class="title">{{ $title }}</div>
    <div class="message">
        {{ $slot }}
    </div>
</div>

test.blade.phpは以下とします(@componentディレクティブ以外は省略)。

@component('components.alert')
@slot('title')
コンポーネントのテストタイトル
@endslot
コンポーネントのテスト本文
ああああああああああ
いいいいいいいいいい
@endcomponent

test.blade.phpのページを開くと@component部分は以下のように{{ $title }}部分は@slot(‘title’)で定義した「コンポーネントのテストタイトル」に置き換えられ、{{ $slot }}部分には@componentの@slot以外の部分が置き換えられます。

<div class="alert-danger">
    <div class="title">コンポーネントのテストタイトル</div>
    <div class="message">
        コンポーネントのテスト本文
ああああああああああ
いいいいいいいいいい
    </div>
</div>

@slotがなければ@component内すべてを{{ $slot }}に置き換えるだけとなります。

エイリアスの設定

コンポーネントにはエイリアスを設定できます。
何回も@component(‘xxx’)・・・と書くのは手間になるので、よく使うコンポーネントはエイリアスを設定しておくと簡単に呼び出せるようになるのでとても便利です。
エイリアスの設定は以下の手順で設定できます。
今回はmyalertというエイリアスを設定します。

まず「app/Providers/AppServiceProvider.php」のbootメソッドに以下を追加します。
第1引数はテンプレート名、第2引数はエイリアス名です。

Blade::component('components.alert', 'myalert');

これだけです。
あとは利用したいところで以下のように記述します。

@myalert
@slot('title')
コンポーネントのテストタイトル
@endslot
コンポーネントのテスト本文
ああああああああああ
いいいいいいいいいい
@endmyalert

簡単ですね。
うまく利用すれば再利用コードをすっきり表現することができます。