Laravel
LaravelでSPAっぽいの作ってみた(Livewire)
はち
更新日:2022/03/01
◆SPAっぽいのを作りたかった
SPAとは「Single Page Application」の略で、単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャの名称。
SPAではブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことで、ユーザー体験（UX）を大きく向上させることができる。
◆SPAのメリット・デメリット
メリット
- 通常のWeb ページでは実現できないユーザー体験を実現できる。
- 高速なページ遷移を実現できる。
- ネイティブアプリの代わりとして提供することができる。
デメリット
- 実装コストが大幅に増える。
- 初期ローディングにかかる時間が増える。
- 開発者が少ない。
◆SPAの候補
3大JavaScriptフレームワーク
- Angular
- React
- Vue.js
今から覚えるのは中々骨が折れる・・・
・Laravel Livewire ←New!! これを使ってみます！
◆Laravel Livewireを教えてもらった
Laravel LivewireとはBlade（Laravelの標準Viewテンプレート）を用いて、JavaScriptを記述せずにSPAを実現できるライブラリ。
これまでの様にフロントエンドにVueやReactなどフレームワークを選定する必要がなくなり、バックエンドはもちろんフロントエンドもLaravelだけで開発が可能。
この文章だけ見たらめっちゃお手軽最強っぽい・・・
◆動作環境
・PHP7.2.5以上が必要
・Laravel7以上が必要（今回は8を採用）
◆インストール
・https://laravel-livewire.com/docs/2.x/installation
◆サンプル、参考記事
今回は実際の業務システムに組み込んでしまったので、開示できるサンプルがないのですが下記のサイトが非常に参考になりました！
・https://zenn.dev/hdmt/articles/a587636cf9e2a2
・https://morioh.com/p/f5143a261b52
※公式にもチュートリアルがあります！
◆ここがイケてる！
・バックエンドをLivewireが処理するのでSPA感出てる
・今回のシステムでは画像のアップロード前リアルタイムプレビューが◎
・画像の本登録や削除もサクサクできるのでモタついてる感がない
◆ここが辛かった・・・
・デバッグ
とにかくリファレンスが無いので公式ドキュメントとエラーメッセージから読み解いていく作業が地道で時間がめっちゃかかる。
・慣れてないので時間がかかる
↑のデバッグのシーンとか、標準のファイル構成に変更があるので覚えるまでが大変。
ただReactのようにコンパイルコンパイル・・・とやる必要がない分楽かなぁと感じました。
かなりPHPライクで作っていけるのがいいですね！
