はじめに
Laravelを使用し、画面をReact、Vueのようにコンポーネント対応ができるようになっているので、今一度整理しました。
1.レイアウトでのコンポーネントの使用($slotの使用)
2.1にコンポーネントの入れ込み
3.コントローラから画面のコンポーネントにデータセット
1.レイアウトでのコンポーネントの使用
x-app-layoutコンポーネントを作成します。
このコンポーネントは、Bladeコンポーネントを作成し、テンプレートとして使用することで、アプリケーション全体のレイアウトを統一する目的で使用されます。
AppLayout コンポーネントの作成
まず、app-layoutコンポーネントを作成する必要があります。以下は、その手順です。
-
コンポーネントファイルの作成
resources/views/components/app-layout.blade.phpに以下の内容を追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Application</title>
</head>
<body>
<header>
{{ $header }}
</header>
<main>
{{ $slot }}
</main>
<footer>
{{ $footer }}
</footer>
</body>
</html>
2. 使用するBladeファイルの作成
次に、このレイアウトコンポーネントを使用するBladeテンプレートを作成します。例えば、resources/views/welcome.blade.phpに以下の内容を追加します。
<x-app-layout>
<x-slot name="header">
<h1 style="margin-left: 20px;">Welcome to My Application</h1>
</x-slot>
<p style="margin-left: 20px;">This is the content of the welcome page.</p>
<x-slot name="footer">
<p style="margin-left: 20px;">Custom Footer Content</p>
</x-slot>
</x-app-layout>
これにより、welcome.blade.phpで定義されたheader、footer、および主要コンテンツがapp-layoutコンポーネントの適切な場所に挿入されます。
<x-slot>ディレクティブを使用して、$headerと$footerの内容を定義し、$slotには名前が指定されていないコンテンツ（ここでは<p>タグの内容）が自動的に挿入されます。
その他
Laravel 8以降では、コンポーネントは自動的に検出されますが、以前のバージョンを使用している場合は、コンポーネントを手動で登録する必要がありました。
AppServiceProviderで次のように登録していました。
use Illuminate\Support\Facades\Blade;
public function boot()
{
Blade::component('app-layout', App\View\Components\AppLayout::class);
}
これにより、<x-app-layout>として使用できるようになっていたとのことです。
2.コンポーネントの入れ込み
php artisan make:component Alertコマンドを使用してコンポーネントを作成することはよくあります。このコマンドは、Bladeコンポーネントを簡単に作成するためのものです。
以下は、Alertコンポーネントを作成する具体的な手順です。
コンポーネントの作成
-
コンポーネントの作成コマンドの実行
ターミナルで以下のコマンドを実行します。
php artisan make:component Alert
このコマンドにより、以下の2つのファイルが作成されます：
-
app/View/Components/Alert.php(コンポーネントクラス) -
resources/views/components/alert.blade.php(コンポーネントのビュー)
-
コンポーネントクラスの編集
app/View/Components/Alert.phpファイルを編集して、必要なプロパティやメソッドを追加します。
namespace App\View\Components;
use Illuminate\View\Component;
class Alert extends Component
{
public $type;
public $message;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($type, $message)
{
$this->type = $type;
$this->message = $message;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.alert');
}
}
-
コンポーネントのビューの編集
resources/views/components/alert.blade.phpファイルを編集して、コンポーネントのHTMLを定義します。
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>
-
コンポーネントの使用
作成したコンポーネントをBladeテンプレートで使用します。例えば、resources/views/welcome.blade.phpファイルで以下のように使用できます。
<x-app-layout>
<x-slot name="header">
<h1 style="margin: 20px;">Welcome to My Application</h1>
</x-slot>
<p style="margin: 20px;">This is the content of the welcome page.</p>
<x-alert type="success" message="Operation successful!" />
<x-alert type="error" message="There was an error." />
<x-slot name="footer">
<p style="margin: 20px;">Custom Footer Content</p>
</x-slot>
</x-app-layout>
これにより、Alertコンポーネントが生成され、指定されたプロパティに応じた表示が行われます。
3.コントローラから画面のコンポーネントにデータセット
バックエンドからBladeコンポーネントに変数を渡す例を記載します。
コントローラからビューに変数を渡し、その変数をBladeコンポーネントに渡す形で実現できます。
以下に、具体的な手順を示します。
1. コントローラで変数を渡す
まず、コントローラでビューに変数を渡します。
// app/Http/Controllers/AlertController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AlertController extends Controller
{
public function show()
{
$alertType = 'error'; // バックエンドからの変数
$alertMessage = 'There was an error.';
return view('welcome', compact('alertType', 'alertMessage'));
}
}
2. Bladeビューでコンポーネントに変数を渡す
次に、ビューで渡された変数をコンポーネントに渡します。
<!-- resources/views/welcome.blade.php -->
<x-app-layout>
<x-slot name="header">
<h1 style="margin: 20px;">Welcome to My Application</h1>
</x-slot>
<p style="margin: 20px;">This is the content of the welcome page.</p>
<x-alert :type="$alertType" :message="$alertMessage" />
<x-slot name="footer">
<p style="margin: 20px;">Custom Footer Content</p>
</x-slot>
</x-app-layout>
<x-alert :type="$alertType" :message="$alertMessage" />の箇所です。
3. コンポーネントビューの定義
最後に、コンポーネントのビューを定義します。@propsを使用してデフォルト値を設定することもできます。
<!-- resources/views/components/alert.blade.php -->
@props([
'message' => 'このメッセージはデフォルトです。',
'type' => 'success'
])
<div class="flex justify-between p-4 items-center {{ $type == 'success' ? 'bg-green-500' : 'bg-red-500' }} text-white">
<div>{{ $message }}</div>
<button>×</button>
</div>
参考記事