Laravel Breezeで、Componentを使って共通部分を作成する方法と、データを受け渡す方法を説明します。
「コンポーネントって、良く分からない」
「データの受け渡し方を知りたい」
と思ったら、参考にしてくださいね。
これまでの@extendsを使う方法のほうがシンプルで分かりやすい！と正直思います。ただ、これもこれで、良いところはあります。
まずは構造を理解していきましょう♪
Laravel Breeze：Componentの使い方とデータを受け渡す方法
Laravel Breezeのプロジェクトの作り方は下記を参考にしてください。
今回はプロジェクトがすでにあるという前提で、解説していきます。
LaravelのComponentってなに？
まずそもそもcomponentとは何かを解説します。
componentは、構成部分とか部品といった意味。
Laravelの中で使う時は、ヘッダやフッタなど、複数のページにわたって使う共通部分を component化して、組み込んでいきます。
図にすると、こんな感じです。
【コンポーネントの大まかな図】
ビューファイルにコンポーネントを埋め込むときは、<x-コンポーネントのファイル名>タグで囲みます。
【コンポーネントをビューファイルに組み込む方法】
各コンポーネント<x-コンポーネントのファイル名>タグで囲んだ中に、各ファイルごとの情報をいれる場合があります。この部分をスロットといいます。
【スロットの説明】
デフォルトである components/button.blade.phpファイルを使う場合、ビューファイルには次のように記述します。
【components/button.blade.phpファイルを埋め込むコード例】
|
1 |
<x-button>送信する</x-button> |
LaravelのComponentをいちから作る方法
Componentを作る方法はふたつあります。
ひとつめが王道の方法、ふたつめがよりシンプルで分かりやすい方法です。
それぞれ解説します。
LaravelのComponentをいちから作る方法①
まずは王道の方法から。
Componentを作るために、下記コマンドを実行します。
|
1 |
php artisan make:component Message |
これによって、app/View/Componentsの中にコンポーネントファイルができます。
さらにresources/views/componentsの中にコンポーネントのビュー用のファイルができます。
ファイルが２つできるのがポイント！
app/View/Componentsの中のコンポーネントファイルを通じて、resources/views/componentsの中にあるビュー用のコンポーネントファイルが表示されます。
このコンポーネントファイルを呼び出したいときは、ビューファイルに下記のように入れればOKです。
|
1 |
<x-message>送信する</x-message> |
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です。
|
1 |
<x-text>送信する</x-text> |
LaravelのComponentでデータを受け渡す方法
次に、今作ったファイルを使って、データを受け渡す方法を解説します。
こちらも２つの方法を説明します。
LaravelのComponentでデータを受け渡す方法①
まずは、「LaravelのComponentをいちから作る方法①」でファイルを作った場合の方法。
この場合は、コンポーネントファイルとビュー用のコンポーネントファイル、そしてビューファイルの3つを編集します。
例として、簡単なメッセージを表示する方法を説明します。
app/View/Components/Message.phpを開きます。たとえば $text を受け渡す時は、次のようにします。
【app/View/Components/Message.php】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php namespace App\View\Components; use Illuminate\View\Component; class Message extends Component { public $text; public function __construct($text) { $this->text = $text; } // この部分は編集不要 public function render() { return view('components.message'); } } |
次に resources/views/components/message.blade.phpファイルを編集します。
お好きなように $text を入れてください。
【resources/views/components/message.blade.php】
|
1 2 3 |
<div class="border px-4 py-3 rounded relative"> {{$text}} </div> |
最後に、このコンポーネントを組み込むビューファイルを変数します。
今回は $textに「今日は良い天気です」というメッセージを入れて、これを表示するようにします。
【message.blade.phpを組み込むビューファイル】
|
1 2 3 4 5 |
@php $test="今日は良い天気です。"; @endphp <x-message :text="$test" /> |
以上です。
ブラウザに表示すると、「今日は良い天気です」というメッセージが表示されます。
LaravelのComponentでデータを受け渡す方法②
次に、「LaravelのComponentをいちから作る方法②」でファイルを作った場合のデータの受け渡し方を説明します。
この場合は、ビュー用のコンポーネントファイルとビューファイルの２つを編集します。
例として、こちらも、簡単なメッセージを表示する方法を説明します。
resources/views/components/message.blade.phpファイルを次のように編集します。
【resources/views/components/text.blade.php】
|
1 2 3 4 5 6 7 |
@props([ 'text', ]) <div class="border px-4 py-3 rounded relative"> {{$text}} </div> |
@props でデータを定義しています。
次に、このコンポーネントを組み込みたいファイルにを編集します。
【text.blade.phpを組み込むビューファイル】
|
1 2 3 4 5 |
@php $test="今日は良い天気です。"; @endphp <x-text :text="$test" /> |
以上です。
匿名コンポーネントを使う方が大分ラクな感じがしますね。
さいごに
コンポーネント、何となく「こんなものかな」とご理解いただけたら嬉しいです。
上記はすごくシンプルな例ですが、コントローラーからメッセージを受け渡して表示させたりできます。
コンポーネントに条件ごとに異なるCSSを入れておき、条件に合わせてスタイルを変えることもできます。
なお「コンポーネントを実際のプロジェクトで使ってみたい！」「でも、前後の処理とかよく分からない」という場合には、【Laravelの教科書 （Laravel9版）】をご活用ください。
Laravelの教科書は、Laravelの使い方を学びつつ、会員制のフォーラムサイトを作成していける学習サイトです。コンポーネントも、フォーラムサイトを作成する中で使っていきます。
ご興味あれば、下記ボタンを押してリンク先のご案内を読んでくださいね。
現在、基礎編部分を無料でプレゼント中です♪
