[Laravel8] BladeでComponentsを使ってみる

Laravel

Laravel8がリリースされたということで、リリースノートを見てみました。
するとbladeでコンポーネントが作れるようになっているようだったので使ってみました。

公式のこちらの内容になります。

Components(コンポーネント)を作成する

コンポーネントを作成するときは、下記のコマンドを実行します。

php artisan make:component [コンポーネント名]

TestButtonというコンポーネントを作成してみました。
汎用的にボタンを表示するコンポーネントのイメージで作ってみたいと思います。

$ php artisan make:component TestButton
Component created successfully.

作成されたコンポーネント初期

app/View/Componentsの直下に付けた名前でComponentを継承したクラスができています。

app/View/Components/TestButton.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class TestButton extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.test-button');
    }
}

renderメソッドのviewヘルパーでbladeファイルと紐づけているようですね..
bladeのファイルはresources/views/components直下に配置されました。初期状態では下記のように作られています。

resources/views/components/test-button.blade.php

<div>
    <!-- I begin to speak only when I am certain what I will say is not better left unsaid - Cato the Younger -->
</div>

作成されたコンポーネント修正

コンポーネントを下記のように修正してみました。

app/View/Components/TestButton.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class TestButton extends Component
{
    public $type;

    public $label;

    public $btnClass;

    public function __construct($type = 'primary', $label = null, $btnClass = '')
    {
        $this->type = $type;
        $this->label = $label;
        $this->btnClass = $btnClass;
    }

    public function render()
    {
        return view('components.test-button');
    }
}

修正内容としては、$type、$label、$btnClassの3つのプロパティを書いて、コンストラクタに渡すようにしました。
引数にはそれぞれ初期値を指定していますが、指定していない場合は必須パラメータになって、ない場合はエラーになるので注意が必要です。

ここで渡されて、プロパティに設定された値が、コンポーネントのblade内で引数として使用できます。

bladeのほうは下記のように修正してみました。

resources/views/components/test-button.blade.php

@if($label)
    <label>{{$label}}</label>:
@endif
<button class="btn btn-{{ $type }} {{ $btnClass }}">
    {{ $slot }}
</button>

$labelが渡されていたら、ラベルを表示するようにしています。
$typeはbootstrap4のボタンのタイプを指定するようにしました。(info, warning, primaryなど)
$btnClassは他に指定したいクラスがあれば、指定できるようにしています。

$slotには呼び出し元のタグに書かれた内容が表示されます。

コンポーネントを呼び出してみる

最初に$typeだけ指定して呼び出してみました。

<x-test-button type="warning">
   ワーニングなボタン
</x-test-button>

表示されました。

次に$typeはprimaryにして、$labelにtestを指定してみました。

<x-test-button type="primary" label="test">
    ラベル付きのボタン
</x-test-button>

表示されました!

次に$typeはinfoで$btnClassにbtn-blockを指定してみました。
$btnClassみたいにキャメルケースで書いている場合はbladeから指定するときに「btn-class」のようにハイフンで繋ぐようです。

<x-test-button type="info" btn-class="btn-block">
    infoでblockなボタン
</x-test-button>

表示されました!!

コンポーネント呼び出し時に、変数を渡したい場合

コンポーネントの引数として変数を渡したい場合は下記のようにします。

@php
    $label = "hagehoge"
@endphp
<x-test-button type="primary" :label="$label">
    ラベル付きのボタン
</x-test-button>

直前で$labelという変数に文字列を入れて、コンポーネントに渡してみました。
渡すときは:変数名=”$変数”で渡します。これでコンポーネントに変数の内容が展開されて渡されます。

終わりに

公式の内容を全て試せた訳ではないですが、すごく使えそうだなーと思いました。
bladeでもatomic design的な感じで書いていけそうですね…

コメント

タイトルとURLをコピーしました