LaravelのクラスベースのCoponents整理 / 使い方解説

クラスベースのCoponentsの使い方を解説していきます。

readoubleでも解説されています。わかりやすく解説されていますが、もう少し単純化して整理していきます。https://readouble.com/laravel/8.x/ja/blade.html

①：クラスベースComponentsを使うまでのSTEP

大きく分けて下記の４STEPに分かれると思います。

・Comonetsを追加する

・Comonetsを記述する

・Comonetsを呼び出す

・Comonetsにデータを渡す

②：登場人物 ( ファイル )

②-1：app>View>Componets>XXXX.php

②-2：app>resources>componets>YYYY.blade.php

②-3：app>resources>ZZZZ.blade.php

②-3：app>resources>ZZZZ.blade.php　は実際に描画で利用しているbladeです。

③：クラスベースのCoponentsの使い方

それでは、実際にSTEPに沿いながら、登場人物をどうやって使うのかを解説していきます。

③−1：Comonetsを追加する

下記のコマンドを実行することで、

php artisan make:component XXXX

②-1：app>View>Componets>XXXX.phpが生成されます。それと同時に②-2：app>resources>componets>YYYY.blade.phpも生成されます。（同時に生成されないためには、オプションに–inlineを追加）

③−2：Componetsを記述する

②-2：app>resources>componets>YYYY.blade.php

ここには、Componentとして利用したい塊を記述します。

例えば、{{$category}}　という変数を受け取り、
下記のような２つの<div>に囲まれたHTMLを使うことを想定しています。（複数の場所で、複数の$categoryに応じて、記述したい場合に、毎回HTMLを記述していくのは大変ですね。）

<div class="title">
 {{$category}}のランキング
</div>

<div class="description">
 {{$category}}がお気に入りの登録数に応じてランク付けされています。
</div>

②-1：app>View>Componets>XXXX.php

<?php
namespace App\View\Components;
use Illuminate\View\Component;

class Ranking extends Component
{

    /**
     * カテゴリー
     *
     * @var 
     */
    public $category;

    public function __construct($category)
    {
        $this->category = $category;
    }

    public function render()
    {
        return view('components.YYYY');//②-2：app>resources>componets>YYYY.blade.phpで生成されたファイル
    }
}

$categoryで受け取った変数を、②-2：app>resources>componets>YYYY.blade.phpに渡します。

③−3：Comonetsを呼び出す

②-3：app>resources>ZZZZ.blade.php

blade内で、作成したCoponentsを呼び出してみます。

呼び出す際には、②-1：app>View>Componets>XXXX.phpで生成したファイル名を参照にして呼び出します。

コンポーネントのレンダー
コンポーネントを表示するために、Bladeテンプレート１つの中でBladeコンポーネントタグを使用できます。Bladeコンポーネントタグは、文字列x-で始まり、その後にコンポーネントクラスのケバブケース名を続けます。

https://readouble.com/laravel/8.x/ja/blade.html

②-1：app>View>Componets>XXXX.phpの場合は、
（ややこしいので、②-1：app>View>Componets>Ranking.php　とします。）

<x-ranking></x-ranking>

で呼び出すことが出来ます。

④：Comonetsにデータを渡す

③で、Componentsを呼び出しましたが、これでは$category 変数を渡すことが出来ていません。これを渡すには、$categoryを指定します。　Contollerから$categoryデータを受け取った場合に、このままComponetsに渡せます。

<x-ranking :category="$category"></x-ranking>

⑤：複数の変数をComponetsに渡す

app>View>Componets>XXXX.php

<?php
namespace App\View\Components;
use Illuminate\View\Component;

class Ranking extends Component
{

    /**
     * カテゴリー
     *
     * @var 
     */
    public $category;
    public $tag; //追加

    public function __construct($category, $tag) //追加
    {
        $this->category = $category;
        $this->tag = $tag; //追加
    }

    public function render()
    {
        return view('components.YYYY');
    }
}

app>resources>ZZZZ.blade.php

<x-ranking :category="$category" :tag="$tag"></x-ranking>

⑥：Unresolvable dependency resolving [Parameter #0 [ {$YYYY} ]] in class App\View\Components{XXXX}　のエラーが出た場合

下記にて解説しています。

Unresolvable dependency resolving [Parameter #0 [ {$YYYY} ]] in class AppViewComponents{XXXX}