Laravel8のBladeでComponentsを使ってみる
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の３つのプロパティを書いて、コンストラクタに渡すようにしました。
引数にはそれぞれ初期値を指定していますが、指定していない場合は必須パラメータになって、ない場合はエラーになるので注意が必要です。
ここで渡されて、プロパティに設定された値が、コンポーネントの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的な感じで書いていけそうですね…
コメント