【Laravel】View Componentsを使い方
今回はView Componentsの紹介です。
目次
コンポーネントとは？
Laravelのビューコンポーネント（View Components）は、再利用可能なUI要素を作成し、それをBladeテンプレート内で使用できるようにする仕組みです。これにより、コードの再利用性が高まり、テンプレートの保守性が向上します。
ビューコンポーネントの特徴
- 再利用可能: ビューコンポーネントは複数のビューで簡単に再利用できます。
- 分離されたロジック: ビューとロジックが分離され、コードの整理がしやすくなります。
- カスタムプロパティ: コンポーネントにプロパティを渡すことができ、動的なデータを扱えます。
ビューコンポーネントの構成
ビューコンポーネントは主に2つのファイルから構成されます。
- コンポーネントクラス:
app/View/Componentsディレクトリに配置されるPHPクラス。コンポーネントのロジックやプロパティの定義を行います。 - コンポーネントビュー:
resources/views/componentsディレクトリに配置されるBladeテンプレートファイル。コンポーネントの表示内容を定義します。
コンポーネントの作成
ターミナルで以下のコマンドを実行して、新しいコンポーネントを作成します。
php artisan make:component Footerコマンドを実行すると、app/View/Components ディレクトリに
Footer.php ファイルが作成され、resources/views/components ディレクトリに footer.blade.php ビューが作成されます。
スポンサードサーチ
tree
コンポーネンtを作成するコマンドを叩いたことで、Footer.phpとfooter.blade.phpが作成されました。
ここで一度ディレクトリの確認をしておきましょう。
.
├── app
│ ├── Console
│ ├── Exceptions
│ ├── Http
│ │ ├── Controllers
│ │ ├── Middleware
│ ├── Models
│ ├── Providers
│ └── View
│ └── Components. # カスタムビューコンポーネント
│ └── Footer.php # FooterコンポーネントのPHPクラス
├── bootstrap
├── config
├── database
├── public
├── resources
│ ├── css
│ ├── js
│ └── views # Bladeテンプレート
│ ├── components. # ビューコンポーネントテンプレート
│ │ └── footer.blade.php. # Footerコンポーネントのビュー
│ └── welcome.blade.php
├── routes
├── storage
├── tests
└── vendor
フッターコンポーネントの作成
app/View/Components/Footer.phpにプロパティやメソッドの追加を行います。
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Footer extends Component
{
public $year;
public $company;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($year, $company)
{
$this->year = $year;
$this->company = $company;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\View\View|string
*/
public function render()
{
return view('components.footer');
}
}
スポンサードサーチ
footer.bladeコンポーネント
resources/views/components/footer.blade.phpに、コンポーネントのHTMLテンプレートを定義します。
<footer class="footer">
<p>© {{ $year }} {{ $company }}. All rights reserved.</p>
</footer>footer.bladeコンポーネントの呼び出し
Bladeテンプレート内でコンポーネントを使用します。
今回はwelcome.balde.phpで行います。
コンポーネントを呼び出すときは<x-コンポーネント名 />で呼び出します。
今回は引数をコンポーネント間で渡しているので、<x-コンポーネント名 引数名="値"/>の形でコンポーネントを呼び出しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<!-- Content of the page -->
<!-- Footer Component -->
<x-footer year="2024" company="Company Name" />
</body>
</html>
