Laravel Breeze:Componentの使い方を図入りで分かりやすく説明しました

Laravel Breeze

Laravel Breezeで、Componentを使って共通部分を作成する方法と、データを受け渡す方法を説明します。

「コンポーネントって、良く分からない」

「データの受け渡し方を知りたい」

と思ったら、参考にしてくださいね。

Junko
Junko

これまでの@extendsを使う方法のほうがシンプルで分かりやすい!と正直思います。ただ、これもこれで、良いところはあります。

まずは構造を理解していきましょう♪

Laravel Breeze:Componentの使い方とデータを受け渡す方法

Laravel Breezeのプロジェクトの作り方は下記を参考にしてください。

今回はプロジェクトがすでにあるという前提で、解説していきます。

LaravelのComponentってなに?

まずそもそもcomponentとは何かを解説します。

componentは、構成部分とか部品といった意味。

component = 構成部分 ・部品

Laravelの中で使う時は、ヘッダやフッタなど、複数のページにわたって使う共通部分を component化して、組み込んでいきます。

Junko
Junko

図にすると、こんな感じです。

【コンポーネントの大まかな図】

ビューファイルにコンポーネントを埋め込むときは、<x-コンポーネントのファイル名>タグで囲みます。

【コンポーネントをビューファイルに組み込む方法】

各コンポーネント<x-コンポーネントのファイル名>タグで囲んだ中に、各ファイルごとの情報をいれる場合があります。この部分をスロットといいます。

【スロットの説明】

デフォルトである components/button.blade.phpファイルを使う場合、ビューファイルには次のように記述します。

【components/button.blade.phpファイルを埋め込むコード例】

LaravelのComponentをいちから作る方法

Componentを作る方法はふたつあります。

ひとつめが王道の方法、ふたつめがよりシンプルで分かりやすい方法です。

それぞれ解説します。

LaravelのComponentをいちから作る方法①

まずは王道の方法から。

Componentを作るために、下記コマンドを実行します。

php artisan make:component コンポーネント名
Messageというコンポーネントを作成する場合は、下記を実行します。

これによって、app/View/Componentsの中にコンポーネントファイルができます。

さらにresources/views/componentsの中にコンポーネントのビュー用のファイルができます。

Junko
Junko

ファイルが2つできるのがポイント!

app/View/Componentsの中のコンポーネントファイルを通じて、resources/views/componentsの中にあるビュー用のコンポーネントファイルが表示されます。

このコンポーネントファイルを呼び出したいときは、ビューファイルに下記のように入れればOKです。

LaravelのComponentをいちから作る方法②

2つファイルを編集するのって、結構面倒ですよね。

コンポーネントは実は、resources/views/componentsの中に直接コンポーネントビューファイルを作ってしまうことも可能です。

こうすると、app/View/Components の中にコンポーネントファイルがなしで、ファイルひとつですみます。

このようにビュー側にだけ作ったときのコンポーネントを「匿名コンポーネント」と呼びます。

以下は、Laravelの公式マニュアルでの「匿名コンポーネント」に関する説明です。

匿名コンポーネントは単一のビューファイルを利用し、関連するクラスはありません。匿名コンポーネントを定義するには、resources/views/componentsディレクトリ内にBladeテンプレートを配置するだけで済みます。

引用元 Laravel8 マニュアル:https://readouble.com/laravel/8.x/ja/blade.html

たとえば resources/views/componentsの中に text.blade.phpファイルを作り、この中にコンポーネント部分を作るとします。

このコンポーネントファイルを呼び出したいときは、ビューファイルに下記のように入れればOKです。

LaravelのComponentでデータを受け渡す方法

次に、今作ったファイルを使って、データを受け渡す方法を解説します。

こちらも2つの方法を説明します。

LaravelのComponentでデータを受け渡す方法①

まずは、「LaravelのComponentをいちから作る方法①」でファイルを作った場合の方法。

この場合は、コンポーネントファイルとビュー用のコンポーネントファイル、そしてビューファイルの3つを編集します。

例として、簡単なメッセージを表示する方法を説明します。

app/View/Components/Message.phpを開きます。たとえば $text を受け渡す時は、次のようにします。

【app/View/Components/Message.php】

次に resources/views/components/message.blade.phpファイルを編集します。

お好きなように $text を入れてください。

【resources/views/components/message.blade.php】

最後に、このコンポーネントを組み込むビューファイルを変数します。

今回は $textに「今日は良い天気です」というメッセージを入れて、これを表示するようにします。

【message.blade.phpを組み込むビューファイル】

以上です。

ブラウザに表示すると、「今日は良い天気です」というメッセージが表示されます。

LaravelのComponentでデータを受け渡す方法②

次に、「LaravelのComponentをいちから作る方法②」でファイルを作った場合のデータの受け渡し方を説明します。

この場合は、ビュー用のコンポーネントファイルとビューファイルの2つを編集します。

例として、こちらも、簡単なメッセージを表示する方法を説明します。

resources/views/components/message.blade.phpファイルを次のように編集します。

【resources/views/components/text.blade.php】

@props でデータを定義しています。

次に、このコンポーネントを組み込みたいファイルにを編集します。

【text.blade.phpを組み込むビューファイル】

以上です。

匿名コンポーネントを使う方が大分ラクな感じがしますね。

さいごに

コンポーネント、何となく「こんなものかな」とご理解いただけたら嬉しいです。

上記はすごくシンプルな例ですが、コントローラーからメッセージを受け渡して表示させたりできます。

コンポーネントに条件ごとに異なるCSSを入れておき、条件に合わせてスタイルを変えることもできます。

Laravel Breeze

【Laravelの教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック
【LaravelでWebアプリ開発します】

「会員制サイトを作ってほしい」「開発の時間がないから頼みたい!」

こんなご要望承り中。オンラインミーティングでも、ご相談承ります。

サンプルやお見積もり目安を見てみる

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました