はじめに
PHPでWebアプリケーションを作成する際、フレームワークLaravelを利用することがデファクトスタンダードになっています。そのLaravelには、画面を作成する際に、オーソドックスなサーバサイドレンダリングに利用するテンプレートエンジンとして、Bladeが含まれています。
一方で、フロントエンド的な画面を作成する方法として、以下の2つの方法もサポートされています。これらを利用する場合、コンポーネントベースのイベント駆動のコーディングとなります。
- Livewireを利用したPHPコーディングによる画面作成
- InertiaによるVue/Reactを利用した画面作成
本連載は全4回を予定しており、第1回と第2回でLivewireを、第3回と第4回でInertiaによるVueを利用した方法を紹介します。この4回の連載で、Laravelによるフロントエンド的な画面作成の基本的な方法を理解していただけると思います。
なお、本連載は、あくまでLivewireとInertia＋Vueの使い方を紹介するためのものなので、ルーティング登録をはじめとするLaravel自体の使い方や、Vueのコーディング方法の紹介は割愛せざるを得ないことを、あらかじめご了承ください。Laravelそのものの使い方はこちらの連載を、Vueに関してはこちらの連載を参照してください。
※本連載のサンプルデータは、GitHubから参照できます。
新しいLaravelのスタータキット
早速、Livewireの解説に入りたいところですが、Laravel本体の最新バージョンであるLaravel 12が、2025年2月24日にリリースされました。この最新リリースでの一番の注目点は、新しいスタータキットです。
スタータキットの用意
Laravelを利用する場合、Laravelプロジェクトを作成する必要があります。そのプロジェクトを作成するスタータキットが刷新され、ウィザードに答えながら、最適なツールを選べるようになりました。
その際に、本連載がテーマとする画面作成において、Blade、Inertia+React、Inertia+Vue、Livewireを選択できるようになっており、それぞれに合わせた適切な構成のプロジェクトが作成できるようになっています。
こうしたスタータキットを利用するためには、Composerを利用した以下のコマンドで、Laravelインストーラをインストールしておく必要があります。
composer global require laravel/installer
インストールが完了すると、laravelコマンドが利用できるようになります。ただし、そのためにはComposerの公式ドキュメントにあるように、グローバルベンダーバイナリフォルダにパスを通しておく必要があるので注意してください。
スタータキットを利用したLivewireプロジェクトの作成
Laravelインストーラがインストールされた状態ならば、任意のフォルダ上で次のコマンドを実行すると、そのフォルダ内に指定されたプロジェクト名（＝アプリ名）でLaravelプロジェクトを作成できます。
laravel new プロジェクト名
その際、スタータキットのウィザードによっていくつか質問されます。その質問1が、図1の内容です。なお、本稿で作成するプロジェクト名は、first-livewireとしています。
「Which starter kit would you like to install?」という質問で、選択肢のNone、React、Vue、Livewireから選ぶ必要があります。これが画面をどのように作成するかの選択肢です。
Noneを選択すると、これまで通りのBladeを利用したサーバサイドレンダリングのプロジェクトとなります。一方、ReactおよびVueを選択するとInertiaを利用したものとなり、このうちのVueを利用したものを、連載第3回と第4回で紹介します。
今回は最後の選択肢である［Livewire］を選択します。その後は、表1の質問が続きます。
| 番号 | 質問 | 選択肢 | 内容 | 通常の選択肢 |
|---|---|---|---|---|
| 2 | Which authentication provider do you prefer? | Laravels built-in authentication / WorkOS | ユーザー認証機能として何を利用するか | Laravels built-in authentication |
| 3 | Would you like to use Laravel Volt? | Yes / No | Livewireのコンポーネント記述を関数的に記述できるライブラリであるVoltを利用するかどうか | どちらでもよいが本稿では利用しないのでNoを選択 |
| 4 | Which testing framework do you prefer? | Pest / PHPUnit | テストツールとして何を利用するか | どちらでもよい（本稿では利用しない） |
質問4まで選択すると、自動的にプロジェクトが作成され、必要なライブラリ類のダウンロードが始まります。一通り、PHPに関連するライブラリのダウンロード、およびその設定が終了すると、図2の質問が表示されます。この質問はnpm関連、すなわち、JavaScript関連のライブラリ類のダウンロードとその設定を行うかどうかの質問です。
この質問には［Yes］を選択してください。最終的にプロンプトが返ってくれば、プロジェクトの作成は終了しています。その後、次のコマンドでLaravelプロジェクトを起動してください。図3の画面が表示されていれば、成功です。
php artisan serve
［NOTE］Laravelプロジェクト起動コマンド
Laravelプロジェクトの起動コマンドは、php artisan serveであると紹介しましたが、これは旧来から存在する起動方法です。一方、Laravelのバージョン11.28で、以下のコマンドでも起動できるように機能が追加されています。これに伴い、バージョン12の公式ドキュメントでは、以下のコマンドでの起動が記載されています。
composer run dev