🐈
【アプリ個人開発】Laravelでlivewireを使ってみたい
livewireを導入する理由
LaravelでもvueやreactのようなSPA的なフロントを作成してモダンなユーザー体験を提供したい
参考にする記事
公式ドキュメント
Livewireって一体何？LaravelでLivewireの使い方の基礎を学ぶ
Laravel Livewire入門！PHPでreact/vueライクなアプリケーション開発
Livewireの普通の使い方とVoltの比較
導入
公式ドキュメント通りに実行すれば導入できた。
breezeとの共存を実験
公式ドキュメントに既存のAlpineJSとの競合が指摘されていたため、breezeとの共存を試してみた
- 先にlivewireをインストール
- 次にbreezeをインストール
- すると共存方法を聞かれた
ここではLivewire (Volt Class API) with Alpineを選択した - breezeのインストール完了後、作成されたauth関連のファイルをみると
voltというAPIを使用して作成されていた
（voltについては後述） - AlpineJSの競合については
/resources/js/app.jsを見たところ競合は起きてなさそうだったので、プロダクト開発時はこの手順で導入してみる
参考記事を試してみる
Livewireって一体何？LaravelでLivewireの使い方の基礎を学ぶ
■メモ
- livewireのインストールはbreezeのインストール時に併せてインストールすることが可能
- Reactのコンポーネントのように親コンポーネント内に子コンポーネントを配置することができる(blade componentとは違ったもの)
- 試してみたが動作はReactやvueに比べるとちょっともたつく印象
Laravel Livewire入門！PHPでreact/vueライクなアプリケーション開発
■メモ
- reactの感触に近いtodoアプリが作れそう
次やること
- livewireの最低限の導入方法は分かったので次はもう少し入り込んだ使い方がないかを動画や記事で探す
- 並行してLaravel単体のblade componentの利用方法のキャッチアップも行う
Discussion