Laravelの新しいスタータキットでLivewireプロジェクトを作成──Livewireの基本的な使い方

LivewireとInertiaによるLaravelのフロントエンド的画面作成入門 第1回

　PHPフレームワークのデファクトスタンダードの地位を確立したと言える「Laravel」。Laravelでの画面作成には、あらかじめ組み込まれているテンプレートエンジン「Blade」を利用するのがオーソドックスな方法です。一方で、Laravelはフロントエンド開発的な画面の作成を標準でサポートしており、その際に利用するのが「Livewire」と「Inertia」です。本連載では、このLivewireと、InertiaによるVueの利用方法を紹介していきます。初回となる今回は、本連載を概観しておくとともに、Livewireの基本的な使い方を紹介します。

はじめに

　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としています。

図1：Laravelスタータキットによる質問1

　「Which starter kit would you like to install?」という質問で、選択肢のNone、React、Vue、Livewireから選ぶ必要があります。これが画面をどのように作成するかの選択肢です。

　Noneを選択すると、これまで通りのBladeを利用したサーバサイドレンダリングのプロジェクトとなります。一方、ReactおよびVueを選択するとInertiaを利用したものとなり、このうちのVueを利用したものを、連載第3回と第4回で紹介します。

　今回は最後の選択肢である［Livewire］を選択します。その後は、表1の質問が続きます。

表1：Laravelスタータキットによる質問2以降の内容

番号	質問	選択肢	内容	通常の選択肢
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関連のライブラリ類のダウンロードとその設定を行うかどうかの質問です。

図2：npm関連のインストールを行うかどうかの質問

　この質問には［Yes］を選択してください。最終的にプロンプトが返ってくれば、プロジェクトの作成は終了しています。その後、次のコマンドでLaravelプロジェクトを起動してください。図3の画面が表示されていれば、成功です。

php artisan serve

図3：スタータキットで作成したLaravelプロジェクトを起動したTOP画面

［NOTE］Laravelプロジェクト起動コマンド

　Laravelプロジェクトの起動コマンドは、php artisan serveであると紹介しましたが、これは旧来から存在する起動方法です。一方、Laravelのバージョン11.28で、以下のコマンドでも起動できるように機能が追加されています。これに伴い、バージョン12の公式ドキュメントでは、以下のコマンドでの起動が記載されています。

composer run dev