Laravel・LumenのサイトをVue.jsでSPAサイトにリニューアルして感じたメリット・デメリット

Vue.js SPAのメリット

まずは、Vue.jsのSPAに移行してよかったところを見ていきます。

データを並行で取得できる（レスポンスが速い）

Vue.jsのSPAサイトの場合、axiosで並行してAPIサーバーからデータを取得できるので、

まずはデフォルトで読み込んだVue.jsアプリでページをレンダリング
APIデータが必要なところは、APIサーバーから平行してロード（ローディング画面にしておく）
データを取得したところから、順次レンダリング

ということができます。

LaravelなどのPHPサイトの場合、すべてのデータを完成させてからサーバー出力するため、処理が多ければ多いほど時間がかかります。（処理を直線的に順番に行っていくので）

しかし、SPAの場合は、デザインと設計にもよりますが、axiosを使った並行ロードを実装することで、ロードと描画を圧倒的にスピードアップすることができます。

例えば、

Laravelの場合: 0.1秒の処理 * 10個 -> 1秒
Vue.js SPAの場合: 0.1秒の処理 * 10個 -> 0.1秒前後

こんな感じです。

これまで、PHPで1秒未満でファーストビュー表示をがんばっていたのが馬鹿らしくなってくるほど、簡単にファーストビュー表示を制御できます。そして、一旦ロードしてしまえば、ページ切り替えの際に毎回サーバー呼び出しをしないので、0.1秒ほどでページ遷移が出来ます。本当にアプリみたいな感じです。

高性能な機能を簡単に実装できる

Vue.jsのプラグインは、インストールするだけで高性能なものをすぐに組み込めます。PHPにもcomposerがありますが、どうしても規模が大きくなってしまいがちでです。Vue.jsは、最終的にビルドしたjsファイルを読むので、プラグインを多様してもある程度軽量にできるのが大きなメリットです。

また、Firebaseなどのログイン機能や、ルーター機能、ローディング機能など、ライブラリではなく機能単位で追加できるので、ブロック間隔で機能を追加できるのが楽しいですね。

1コンポーネント完結でコードが見やすい

Vue.jsは、1コンポーネントファイルに、スクリプトもHTMLもCSSも全部記述する方式になっているので、スクリプトやCSSの見通しが良く、管理しやすいです。

最初はCSSがばらばらになっているのに違和感がありましたが、ビルドする際に一つにされるのでロードも問題ありませんし、それなら開発者が楽になる方式のが良いですよね。

Vue内でのコード再利用が簡単にできる

コンポーネントをうまく使い分けることで、ブロックやパーツ単位でコードを管理することができます。例えば、一覧のサマリーブロックなどの中規模の単位から、リンクボタンなどの細かい単位までコンポーネントで管理できるので、一箇所変更すれば、他にも即反映されるというのが良いですね。

Vue.js SPAのデメリット

結局2つ開発するのが面倒

SPA部分と、API部分の2つを開発することになるので、手間といえば手間です。一気に作ってしまいたい人には面倒だと感じるでしょう。

ただし、先程のメリットのところで書いたように、小さい単位でデータをやりとりできるので、大規模サイトでなければAPI部分の製造にはあまり手間がかからない気もします。

このあたりは、ロードが高速化されることとのトレードオフなのかなと思いました。

動作が早すぎるため、画面遷移に工夫が必要

Vue.jsサイトは、ただの静的サイトなので、一度ロードをすると、ページ切り替えは爆速です。

しかし、検索などを経由してくるユーザーは、アプリではなく「普通のWebサイト」として入ってくるので、Vue.jsでのページ遷移が早すぎて逆に「ページが変わったのかがわかりづらい」というデメリットもあります。

対策としては、ページ遷移の際には短いアニメーションを入れて「ページが変わった感」を出すと良いと思いました。その分、作業が増えるのはデメリットとも言えます。

逆に、0.2-3秒くらいのロードがあれば、「超高速サイト」という感じになるので、その間に裏でAPIと通信すれば一石二鳥になりますね。

コンポーネント間を行き来すると混乱する

これは作り方にもよると思いますが、コンポーネントを分割しつつ、コンポーネント間でのデータのやりとりをすると、データの動きなどがわかりづらくなり少し混乱します。

共通データはstateを使うなど、最初からしっかりとした設計をしておかないと、規模が大きくなった時にあっさりと崩壊しそうです。

プラグインの互換性にエラーがあると改修が大変

なんどかプラグインのインストールに失敗して、全くビルドが出来ないエラーにハマりました。

本来はあまり起こらないエラーですが、インストール時にうまくインストールできなくて、裏技っぽいことをして強制的にインストールしようとしたりすると、取り返しのつかないことにもなりかねないので注意が必要です。

Laravel・LumenのサイトをVue.jsでSPAサイトにリニューアルした時の感想でした。

個人的には、今後はこのフォーマットでやっていこうと決意ができました。