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の教科書 (Laravel9版)】をご活用ください。

Laravelの教科書は、Laravelの使い方を学びつつ、会員制のフォーラムサイトを作成していける学習サイトです。コンポーネントも、フォーラムサイトを作成する中で使っていきます。

ご興味あれば、下記ボタンを押してリンク先のご案内を読んでくださいね。

Junko
Junko

現在、基礎編部分を無料でプレゼント中です♪

Laravelの教科書について詳しく知る

Laravel Breeze

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

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

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

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

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

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

「Laravelで業務効率化用のWebアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravelを使ったWebアプリ開発のご相談承り中
Zoomでのお打ち合わせも承っています♪
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

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