itLinkedInPocketCopyこんにちは。今回はLaraevelのBladeでコンポーネントを作成する方法を、簡単なサンプルを作りながら解説していきます。繰り返し使用するUIはコンポーネントにしておくと、再利用することができてとても便利です。それでは見ていきましょう。関連コンポーネントとはLaravelのBladeテンプレートが提供している、UIパーツを部品化できる機能です。作成した部品のことをコンポーネントと呼んでいます。UIパーツとは、ある機能を持ったHTMLの要素群です。小さいものだと、「ボタン」や「テキストボックス」などの単一要素から成るもの。大きいものだと「テーブル」や「ナビゲーションメニュー」などの複数のHTML要素から成るものです。UIパーツはアプリケーションのいたるところで使われるので、同じHTMLを何度も記述することになります。何ヵ所にも同じHTMLを記述すると、変更が入った場合に多くの個所を修正しなければならないという問題が起きます。そこで役に立つのが今回紹介するコンポーネントです。コンポーネントは使いまわす予定のUIを一つの部品として1か所に定義し、それを呼び出して使用します。変更が起きた際にはコンポーネントのみを修正すればよいので、変更に強いプログラムとなります。コンポーネントを呼び出すだけで多くの機能を実装できるので生産性の向上が期待できるでしょう。コンポーネントの概要を説明しました。次からいよいよコンポーネントを実際に作成していきましょう。コンポーネントを作成するここからはコンポーネントを作成する手順を解説します。今回作成するのはリストから選択する形式のコントロールです。通常selectタグを使用して作成しますが、今回はこれをコンポーネントとして作成します。コンポーネント名はSelectBoxにします。make:componentコマンドでコンポーネントのひな型を作ります。以下のコードを実行しましょう。コンポーネント名はアッパーキャメルケースで指定するのがポイントです。SelectBox実行すると、以下の2ファイルがセットで作成されます。コンポーネントのロジックを処理するビハインドコード。2つのファイルはビューとモデルのような関係で役割分担されています。今後、この2つのファイルに処理を記述し、コンポーネントを完成させます。コンポーネントの見た目(View)を作るまずはコンポーネントの見た目(ビュー)の部分を作って、画面に表示させてみましょう。select-box.bladeの中身を以下のように記述します。値はベタ書きですが後で直しますので気にせず記述します。</select></div>作成したSelectBoxコンポーネントを画面に表示してみましょう。適当なBladeを作成し、そこから呼び出します。コンポーネントは呼び出しルールが定められていますので、ルールに従って記述します。接頭辞にxを付与するケバブケース今回作成したSelectBoxは上記のルールを適用するとx-select-boxで呼び出すことができます。--><x-select-box/>呼び出しに成功すると以下のようなページが表示されます。データを渡す無事にコンポーネントの作成、呼び出しまでできるようになりました。ここからはより汎用的なコンポーネントに仕上げていく作業を行います。先ほど作成したコンポーネントには汎用性という点で一つ問題点があります。リストに表示する果物の名前を直接コンポーネントに書き込んでいるところです。これでは果物専用でしか使うことができません。様々な用途で使えるように、リストに表示するデータは呼び出し側から渡すよう修正します。呼び出し側のコードから修正します。コンポーネントに渡すデータを用意しましょう。$fruit変数にリストに表示する値を配列形式で定義します。次にx-select-boxに作成した$fruit変数を渡します。options属性に先ほど作成した$fruit変数を渡しています。:options="$fruit"/>このように通常のHTMLの属性を指定する書き方と同じようにデータを渡すことができます。optionsという属性については後述しますので、まずはデータの渡し方を覚えてください。次に値を受け取るコンポーネント側の修正を行います。コンポーネント側の修正は2つに分けて説明していきます。コンポーネントにプロパティを追加する。プロパティを用いてViewを描画する。コンポーネントにプロパティを追加するコンポーネントにデータを渡すために、データを受け取るプロパティをコンポーネントに作る必要があります。リストに表示する値を配列形式で受け取りたいので、optionsプロパティをコンポーネントに追加します。optionsはpublicなクラス変数として定義し、コンストラクタで値を渡すようにします。このようにpublicなクラス変数として定義することにより、コンポーネントの属性として値を渡すことができるようになります。optionsはpublicなクラス変数として定義し、コンストラクタで値を渡すようにします。このようにpublicなクラス変数として定義することにより、コンポーネントの属性として値を渡すことができるようになります。コンポーネントのbladeテンプレート内で$optionsで値を参照して使うことができるようになります。}プロパティを用いてViewを描画するデータを渡す準備が整ったところで、最後にBlade側を修正しましょう。先ほど追加した$optionsプロパティをforeachでループさせ、option要素を作成するように修正します。修正点:optionの値を$options変数に入れ、foreachでループさせて表示します。</select></div>最後にSelectBoxを呼び出す部分のコードをもう一度解説します。作成したoptions属性にPHPの変数を渡しています。このときoptions属性の冒頭に:を付与する必要があります。渡す値がPHPの場合は:を付与するルールになっているからです。:を記述し忘れるとエラーになりますのでご注意ください。:options="$fruit"/>まとめ今回はBladeコンポーネントの基礎を解説しました。解説したのは以下の点です。make:componentで作成するコンポーネントを呼び出す。(接頭辞にx-を付与する)コンポーネントにデータを渡す。ここまでわかると、簡単な汎用コンポーネントを作ることができると思います。使うUI部品をすこしずつコンポーネントにするところから始めてみてください。ある程度使って効果が実感できるようになると、UIコンポーネントをどのように作るべきかがわかってくると思います。envで特定の環境で運用されていることを表示するPrev関連記事Laravelのstorageフォルダで画像を管理するこんにちは。...【Laravel】stdClassの中身をログ出力するこんにちは。...【Laravel】メンテナンスモードが便利すぎるので広めたい!10分でマスターできます。今回はLaravelのメンテナンスモードを説明したいと思います。Eloquentの日付Castでより表現力豊かなモデルを作るこんにちは。RBAC方式のアクセス制御を簡単に実現できる優れたツールこんにちは。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。一覧画面に検索条件、フィルターを設置するこんにちは。モデルの準備と一覧表示画面こんにちは。Filamentのインストール手順こんにちは。UncategorizedWindowsにComposer2をインストールする方法こんにちは。