Livewire利用の基本
Livewireを利用するプロジェクトが作成できたところで、早速、Livewireを利用したコーディングを行いましょう。
Livewire利用手順
Bladeのようなテンプレートエンジンを利用したサーバサイドレンダリング画面の作成とは違い、コンポーネントベースのフロントエンド的な画面作成の場合、通常はJavaScript/TypeScriptの利用が必要です。実際、連載第3回と第4回で紹介するInertia＋Vueではこの方法を利用します。一方、Livewireを利用すると、言語としてPHPを利用しながらフロントエンド的な画面作成が可能となるのが特徴です。
Livewireを利用する場合の手順は、以下の通りです。
- レイアウトファイルを作成する
- コンポーネントファイルを作成する
- コンポーネントクラスをコーディングする
- コンポーネントビューファイルをコーディングする
- コンポーネントをルーティング登録する
この手順に従って、まず、TOP画面を図2のように表示させてみましょう。なお、今回は、Livewireの使い方の基本を紹介するのが趣旨ですので、まずは、データの表示に話を集中させたいと思います。そのため、フロントエンド的な動的な操作は次回に紹介したいと思います。
1. レイアウトファイルを作成する
Livewireを利用する場合、表示される画面の共通部分は、レイアウトファイルとして記述し、各コンポーネントには差分のタグだけを記述することになります。このレイアウトファイルは、resources/views/components/layouts/app.blade.phpと決まっており、Livewireプロジェクトを作成すると、あらかじめ作成されています。
そして、その拡張子がblade.phpからもわかるように、基本的にファイル内の記述には、Bladeの記述が利用できます。なお、公式ドキュメントにあるように、このレイアウトファイルは複数作成して画面ごとに切り替えることも可能です。
このapp.blade.phpの内容を、例えば、リスト1のようにしたとします。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? "初めてのLivewire" }}</title>
</head>
<body>
{{ $slot }} // (1)
</body>
</html>
リスト1でのポイントは（1）です。レイアウトファイル中に{{$slot}}を記述すると、その部分に手順2～4でコーディングしたコンポーネントが埋め込まれて画面に表示されます。
2. コンポーネントファイルを作成する
この手順は、以下のコマンドを利用します。
php artisan make:livewire コンポーネントクラス名
例えば、ここで作成するコンポーネントクラス名をTopIndexとすると、以下のコマンドをプロジェクト直下で実行することになります。
php artisan make:livewire TopIndex
すると、コンポーネントクラスファイルとしてapp/Livewire/TopIndex.phpと、コンポーネントビューファイルとしてresources/views/livewire/top-index.blade.phpが自動生成されています。これらを、それぞれ手順3と手順4でコーディングしていきます。
3. コンポーネントクラスをコーディングする
自動生成されたapp/Livewire/TopIndex.phpはリスト2の内容となっています。
<?php
namespace App\Livewire;
use Livewire\Component;
class TopIndex extends Component // (1)
{
public function render() // (2)
{
return view("livewire.top-index"); // (3)
}
}
コンポーネントクラスは、リスト2の（1）のように、Livewire\Componentクラスを継承して作成します。そして、画面表示に必要なデータをpublicプロパティとして、画面のイベントに応じた処理をメソッドとして定義します。
その上で、（2）にあるように、render()メソッドを定義し、（3）のようにview()関数の実行結果をリターンします。すなわち、レンダリングしたい画面をリターンすることになり、そのため、view()関数の引数として、まさに自動生成されたコンポーネントビューファイルを指定します。
さて、図4を見ると「しんちゃんさん、こんにちは!」という表示が見えます。このうち、「しんちゃん」を変数としてコンポーネントクラスに定義し、コンポーネントビューファイルでは、その値を変数として表示させるようにコーディングすると、TopIndex.phpは、リスト3の（1）の$nameプロパティを追加するだけです。
class TopIndex extends Component
{
public string $name = "しんちゃん"; // (1)
public function render()
:
}
4. コンポーネントビューファイルをコーディングする
リスト3で追記した変数$nameを表示させて、図4の画面となるようにコンポーネントビューファイルであるtop-index.blade.phpをコーディングすると、リスト4のようになります。
<div>
<h1>Welcome</h1>
<p>
{{$name}}さん、こんにちは!
</p>
</div>
通常のBlade記述と変わりません。コンポーネントクラスのpublicプロパティとして用意された変数（ここでは$name）を、マスタッシュ構文で表示させるだけです。
ただし、注意が必要です。コンポーネントビューファイルでは、必ず、単一の要素から始まる必要があります。リスト4ならば、全ての要素がdiv要素配下に含まれています。これが、以下のように複数のルート要素を持つファイルは不可となるので注意してください。
<div> : </div> <section> : </section>
5. コンポーネントをルーティング登録する
最後の仕上げです。これは、routes/web.phpに、リスト5のような記述を行うだけです。（1）にあるように、ルーティング登録関数の第2引数としてコンポーネントクラスを登録します。
<?php
use Illuminate\Support\Facades\Route;
use App\Livewire\TopIndex;
Route::get("/", TopIndex::class); // (1)
