これまでLaravelのbladeで複雑な画面を開発した経験がなかったのですが、近々開発することになりそうなので、コンポーネントの使い方を調べてみました。
自分用の備忘録です。
Laravel7以降でbladeコンポーネントが使いやすくなったらしい
Laravel7以降、本記事に記載のように「x-」から始まるタグ名で呼び出せるようになったり、2種類のファイル（phpのコンポーネントクラスとblade）で実装できるようになりました。
ということで、本記事はLaravel7以降のbladeコンポーネントの使い方になります。
コンポーネントの作成
コンポーネントは２種類のファイルから出来ています。
1. 関連ファイルの作成
php artisan make:component ComponentTest
これで以下の２つのファイルが作成されます。
-
/app/View/ComponentsにComponentTest.php -
/resources/views/componentsにcomponent-test.blade.php
2. ComponentTest.phpを編集
- パラメータをpublicプロパティとして準備する
- コンストラクタでパラメータを初期化
- renderメソッドでbladeファイルのビューを返す
{
public string $testTitle;
public function __construct(string $testTitle)
{
$this->testTitle = $testTitle;
}
public function render()
{
return view('components.component-test');
}
}
3. component-test.blade.phpを編集
ここは普通のbladeファイルと同じイメージで作成すれば良いです。
コンポーネントを呼び出すbladeファイルから渡されるテキストは$slotで受け取ることができます。
<div>
<h1>{{ $testTitle }}</h1>
<p>{{ $slot }}</p>
</div>
コンポーネント呼び出し
コンポーネントを呼び出すbladeファイルでは、タグ形式でコンポーネントを呼び出します。
タグ名はコンポーネント名をケバブケースにして頭に「x-」をつけたものになります。
（例：コンポーネント名がComponentTestの場合、タグ名はx-component-test）
パラメータは属性として渡しますが、属性名もケバブケースで表現します。
（例：コンポーネント側のパラメータ名がtestTitleの場合、属性名はtest-title）
test.blade.php
<x-component-test test-title="title">
これはコンポーネントのテストです。
</x-component-test>
また、上記のように属性名にコロンが付いていない場合にはパラメータには文字列のtitleが渡されますが、下記のようにコロンを付けた場合には変数の$titleが渡されます。
（この変数$titleはコントローラーから渡された変数です。）
test.blade.php
<x-component-test :test-title="$title">
これはコンポーネントのテストです。
</x-component-test>
結果
結果的には以下のようになります。（testTitleに文字列の"title"を渡した場合）
<div>
<h1>title</h1>
<p>これはコンポーネントのテストです。</p>
</div>
呼び出し側でタグの間に記載したテキストが$slotに渡されていることが分かります。
$slotで渡したテキストもプロパティとして準備することも可能ですが、あんまり長い場合は属性として渡すのは現実的ではなさそうです。
調べてみて
普段はフロント開発はVue(Nuxt)で行なっているのですが、bladeのコンポーネントの使い方も似たところがあるなと思いました。
その反面で、やっぱりVueって便利だなと改めて感じました。
Vueの場合はComponentTest.phpとcomponent-test.blade.phpがひとつのファイルで完結するイメージですね。
間違っているところがありましたらご指摘いただけますと幸いです。
参考
速習Laravel改訂2版 速習シリーズ（山田祥寛）
https://wings.msn.to/index.php/-/A-03/WGS-PHP-002/