Laravel Bladeでコンポーネント作成

こんにちは。今回はLaraevelのBladeでコンポーネントを作成する方法を、簡単なサンプルを作りながら解説していきます。繰り返し使用するUIはコンポーネントにしておくと、再利用することができてとても便利です。それでは見ていきましょう。

コンポーネントとは

LaravelのBladeテンプレートが提供している、UIパーツを部品化できる機能です。作成した部品のことをコンポーネントと呼んでいます。

UIパーツとは、ある機能を持ったHTMLの要素群です。小さいものだと、「ボタン」や「テキストボックス」などの単一要素から成るもの。大きいものだと「テーブル」や「ナビゲーションメニュー」などの複数のHTML要素から成るものです。UIパーツはアプリケーションのいたるところで使われるので、同じHTMLを何度も記述することになります。

何ヵ所にも同じHTMLを記述すると、変更が入った場合に多くの個所を修正しなければならないという問題が起きます。そこで役に立つのが今回紹介するコンポーネントです。コンポーネントは使いまわす予定のUIを一つの部品として１か所に定義し、それを呼び出して使用します。変更が起きた際にはコンポーネントのみを修正すればよいので、変更に強いプログラムとなります。また、コンポーネントを呼び出すだけで多くの機能を実装できるので生産性の向上が期待できるでしょう。

コンポーネントの概要を説明しました。次からいよいよコンポーネントを実際に作成していきましょう。

コンポーネントを作成する

ここからはコンポーネントを作成する手順を解説します。今回作成するのはリストから選択する形式のコントロールです。通常selectタグを使用して作成しますが、今回はこれをコンポーネントとして作成します。コンポーネント名はSelectBoxにします。

artisan make:componentコマンドでコンポーネントのひな型を作ります。以下のコードを実行しましょう。コンポーネント名はアッパーキャメルケースで指定するのがポイントです。

$php artisan make:component SelectBox

実行すると、以下の２ファイルがセットで作成されます。

  • resources/views/components/select-box.blade.php … コンポーネントのビューを記述するBlade
  • app/Views/Components/SelectBox.php … コンポーネントのロジックを処理するビハインドコード。

２つのファイルはビューとモデルのような関係で役割分担されています。今後、この２つのファイルに処理を記述し、コンポーネントを完成させます。

コンポーネントの見た目（View）を作る

まずはコンポーネントの見た目（ビュー）の部分を作って、画面に表示させてみましょう。

select-box.bladeの中身を以下のように記述します。値はベタ書きですが後で直しますので気にせず記述します。

<div>
    <select class="form-select" aria-label="Default select example">
        <option selected>果物を選択してください</option>
        <option value="apple">りんご</option>
        <option value="orange">みかん</option>
        <option value="banana">バナナ</option>
    </select>
</div>

作成したSelectBoxコンポーネントを画面に表示してみましょう。適当なBladeを作成し、そこから呼び出します。コンポーネントは呼び出しルールが定められていますので、ルールに従って記述します。

  • 接頭辞にxを付与する
  • ケバブケース

今回作成したSelectBoxは上記のルールを適用するとx-select-boxで呼び出すことができます。

<!-- コンポーネントの呼び出し -->
<x-select-box/>

呼び出しに成功すると以下のようなページが表示されます。

データを渡す

無事にコンポーネントの作成、呼び出しまでできるようになりました。ここからはより汎用的なコンポーネントに仕上げていく作業を行います。

先ほど作成したコンポーネントには汎用性という点で一つ問題点があります。リストに表示する果物の名前を直接コンポーネントに書き込んでいるところです。これでは果物専用でしか使うことができません。様々な用途で使えるように、リストに表示するデータは呼び出し側から渡すよう修正します。

呼び出し側のコードから修正します。まずはコンポーネントに渡すデータを用意しましょう。$fruit変数にリストに表示する値を配列形式で定義します。次にx-select-boxに作成した$fruit変数を渡します。options属性に先ほど作成した$fruit変数を渡しています。

@php
// セレクトボックスに渡す配列
$fruit = [
    'apple' => 'りんご',
    'orange' => 'みかん',
    'banana' => 'バナナ'   
];
@endphp

<!-- options要素にデータを渡す -->
<x-select-box :options="$fruit"/>

このように通常のHTMLの属性を指定する書き方と同じようにデータを渡すことができます。optionsという属性については後述しますので、まずはデータの渡し方を覚えてください。

次に値を受け取るコンポーネント側の修正を行います。コンポーネント側の修正は２つに分けて説明していきます。

  • コンポーネントにプロパティを追加する。
  • プロパティを用いてViewを描画する。

コンポーネントにプロパティを追加する

コンポーネントにデータを渡すために、データを受け取るプロパティをコンポーネントに作る必要があります。リストに表示する値を配列形式で受け取りたいので、optionsプロパティをコンポーネントに追加します。

optionsはpublicなクラス変数として定義し、コンストラクタで値を渡すようにします。このようにpublicなクラス変数として定義することにより、コンポーネントの属性として値を渡すことができるようになります。また、コ optionsはpublicなクラス変数として定義し、コンストラクタで値を渡すようにします。このようにpublicなクラス変数として定義することにより、コンポーネントの属性として値を渡すことができるようになります。また、コンポーネントのbladeテンプレート内で$optionsで値を参照して使うことができるようになります。 

    public array $options; // ←追加

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct(array $options) // ←追加
    {
        $this->options = $options; // ←追加
    }

プロパティを用いてViewを描画する

データを渡す準備が整ったところで、最後にBlade側を修正しましょう。先ほど追加した$optionsプロパティをforeachでループさせ、option要素を作成するように修正します。

<div>
    <select class="form-select" aria-label="Default select example">
        <option selected>果物を選択してください</option>
        <!-- 修正点：optionの値を$options変数に入れ、foreachでループさせて表示します。 -->
        @foreach($options as $key => $value)
            <option value="{{$key}}">{{$value}}</option>
        @endforeach
    </select>
</div>

最後にSelectBoxを呼び出す部分のコードをもう一度解説します。作成したoptions属性にPHPの変数を渡しています。このときoptions属性の冒頭に:を付与する必要があります。渡す値がPHPの場合は:を付与するルールになっているからです。:を記述し忘れるとエラーになりますのでご注意ください。

<!-- options要素にデータを渡す -->
<x-select-box :options="$fruit"/>

まとめ

今回はBladeコンポーネントの基礎を解説しました。解説したのは以下の点です。

  • コンポーネントをartisan make:componentで作成する
  • コンポーネントを呼び出す。（接頭辞にx-を付与する）
  • コンポーネントにデータを渡す。

ここまでわかると、簡単な汎用コンポーネントを作ることができると思います。まずはよく使うUI部品をすこしずつコンポーネントにするところから始めてみてください。ある程度使って効果が実感できるようになると、UIコンポーネントをどのように作るべきかがわかってくると思います。まずは少しずつ使ってみてください。

Laravel

Posted by kobainmac