「Laravel」タグアーカイブ

Laravel 9 + Vue 3で作る8割Laravelの知識で行けるSPA

LaravelにはVue.jsを使ったSPAでありながらルーティングやバリデーション処理などはLaravelのルーティングをそのまま利用して実装できる仕組みが有ります。この仕組みはVueフロントエンドとLaravelの間のやり取りをしてくれる 「Inertia.js」で実現されています。これを実際の社内プロダクトで利用して十分実用的でしたので紹介したいと思います。

  • ルーティング→Laravelの仕組みをそのまま利用できる。一部だけ要御調整（後述）。
  • バリデーションと結果のエラー表示→Laravelの仕組みをそのまま利用できる。各フォーム項目内容を集めてPOSTするようなコードを自分で書く必要は無く普通のHTMLフォームを描くだけで内部的にAjaxな通信になってくれます。
  • ビュー作成→Vueコンポーネントとして作成、コンパイルの仕組みなども用意してくれる。Bladeテンプレートエンジンで作るテンプレートはほぼ不要。
  • 必要なVueの知識： ルーティングなどVueを補助するツールに対する別のツールへの理解は不要。代わりにInertia.jsについての知識は要確認。

Windows環境でのLaravel開発はWSL2で

Laravel自体がそうなのですが、Windows（というよりはNTFS？）ネイティブ環境での動作がファイルI/Oの関係から遅いです。これはWSL2 + Ubuntuを導入したうえでWSL2管理下のパスにプロジェクトを置いておくする事で高速になります。

PHPやMySQLサーバーなどをDockerコンテナでまとめて用意してくれる「Laravel Sail」で用意した場合はWSL2 + Ubuntu + Dockerという環境になりますが、この場合もプロジェクトは /home/<ユーザー名>/xxx などWSL2管理下に配置しておきましょう（/mnt/c/ など/mnt/経由でWindows管理下のパスにアクセスすると非常に遅くなります）。WSL管理下のパスに置いた場合でもPhpStorm等の開発ツールは問題なくプロジェクトを開く事が出来ます。

参考: https://readouble.com/laravel/9.x/ja/sail.html

Laravel BreezeでのInertia.jsの導入

LaravelにはTOPページ、ログインページ、登録ページ、ログイン後TOPページなどをまとめてさくっと作ってくれる「Larvel Breeze」という機能が有り、これにオプションを付け加える事で Laravel + Inertia.js の環境を作ってみる事が出来ます。Vueコンポーネントをコンパイルする仕組みも一緒に用意してくれるのでVueでのSPAを作った事が無い人でもVueをリアクティブなDOM操作ができるjQueryのようなポジションで利用していた人でも比較的簡単に実装可能です。

参考： https://readouble.com/laravel/9.x/ja/starter-kits.html#laravel-breeze

php artisan breeze:install
php artisan migrate
npm install
npm run dev

Inertia.jsが実際にどういう動きをするのか、どう使えばいいのかは Inertia.js 自体のドキュメントを見ると分かりやすいです。

参考： Inertia.js – The Modern Monolith

上記のドキュメントを確認しつつ、Laravel Breezeで作成された最小限のプロジェクトを参考リンクの情報と併せて見てみる事で全体のイメージがつかめるかと思います。

この時、CSSフレームワークはデフォルトでは Tailwind CSSが利用されています。Bootstrapなどとは大きく考え方が異なるCSSフレームワークですが、コンポーネント部品としてボタン、その他フォーム、ボックス、ヘッダなど部品を作っていく際に、コンポーネントを素早くスタイリングするのに最適化された使用感になっており、余裕が有れば合わせてTailwind CSSも試してみるといいかもしれません。

Tailwind CSS
→角丸にする、サイズはこう、レイアウトはこうといった見た目のスタイリングを高速に簡単に組み合わせていく事に特化したCSSフレームワーク。
→再利用性・共通化はコンポーネント化すること対応。フォームであれば form-control クラスを付けるBootstrapとは異なり、先に作成したフォーム「コンポーネント」を使っていく感じの使用感。

参考：

Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.

単一ファイルコンポーネント | Vue.js

SFC <script setup> | Vue.js

エラー処理ハンドリング

適切にVue + Inertia.js側でエラー処理を行うためにLaravel側の例外ハンドラーの調整が必要です。以下を参考に対応します。

参考: https://inertiajs.com/error-handling

終わりに

これでLaravel + Inertia.js + Vue 3 でフロントエンドでVueコンポーネントで作られたビューを主体としたSPAをサクサク作っていく事が出来ます（作りました）。ご興味が有ればぜひ触ってみてネット上の情報を増やしていきましょう。