[Laravel] BladeのComponent Aliasesを便利に使う方法

Laravel5.6がリリースされましたが、目玉の一つとしてBladeコンポーネントが大きくアップデートされました。

Bladeをより便利に使うために、コンポーネントとしての利用方法を紹介します。

Component Aliases

コンポーネント化されたviewファイルの呼び出しにエイリアスが利用できます。

以下のファイルを作成します。

<!-- /resources/views/components/alert.blade.php -->

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

    {{ $slot }}
</div>

@includeを利用した呼び出し

引数に/resources/views以下のパス(ドット)と、Blade内で利用する変数を配列で渡します。

@include('components/alert, ['title' => 'タイトル', 'slot' => 'メッセージ'])

@componentを利用した呼び出し

引数に/resources/views以下のパス(ドット)を渡して、@endcomponentの間に記述した内容が$slotとして展開されます。

また、@slot()を記述することにより、引数に渡した文字列の変数に展開されます。

@includeの呼び出しに対して、より動的な値や、HTMLタグを用いることが用意になります。

@component('alert')
    @slot('title')
        タイトル
    @endslot

    メッセージ
@endcomponent

Blade::component()を利用した呼び出し

作成したBladeファイルにオリジナルの名前をつけて利用することができるようになります。

サービスプロバイダ等で登録することにより、より柔軟な利用が可能になりました。

use Illuminate\Support\Facades\Blade;

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

上記によりエイリアスとして登録され、@alertディレクティブとして/resources/views/components/alert.blade.phpが利用可能になります。

@alert(['title' => 'タイトル'])
    メッセージ
@endalert

Blade::include()を利用した呼び出し

Blade::component()と似ていますが、こちらもエイリアスを利用した呼び出しが可能になります。

ただしこちらは@includeをより簡単にしたもので、slotを利用することは出来ません。

<!-- /resources/views/includes/input.blade.php -->

<input type="{{ $type ?? 'text' }}">

サービスプロバイダで登録します。

use Illuminate\Support\Facades\Blade;

// ドット記法の最後の単語がエイリアスとして登録されます
Blade::includes('includes.input');

// オリジナルのエイリアスを指定することも出来ます
Blade::include('includes.input', 'textinput');

登録が終われば、@inputディレクティブとして/resources/views/includes/input.blade.phpが利用可能になります。

@input(['type' => 'email'])

番外編

特定の条件によって、表示の有無を切り替える必要があることもあります。

@ifディレクティブやPolicyを利用することでコントロール可能ですが、@includeWhenディレクティブの利用でよりスマートに記述できます。

// @ifを利用した書き方
@if ($user->ownsPost($post)
    @include('post.edit', ['post' => $post])
@endif

// @includeWhenを利用した書き方
@includeWhen($user->ownsPost($post), 'post.edit', ['post' => $post])

Blade Component Aliasesをより詳しく学ぶためにも、公式のドキュメントを確認して起きましょう。