担当したプロジェクトでLaravelとVue.jsを使ってWebシステムをつくりました。
その際に導入したのが、よく耳にするSPAという構築方法です。
今回は「これからSPAに挑戦してみたい!」という方向けに、実際に構築してみた感想をお伝えします。
SPAとは何か?
SPAとは、Single Page Application(シングルページアプリケーション)の略称です。
通常、ページ内で検索したり、別のページに移動したりする場合には、同期して画面を更新します。
SPAでは、同期せずに画面の一部分を切り替えることで、素早く画面の表示内容を変更することができます。
SPA以外の構築方法
動的な動きのあるWebサイト(システム)を構築する場合、3つの構築方法が考えられます。
Bladeファイル数 | Vueコンポーネント数 | 同期の有無 | |
SPA (Blade+Vue) | 1つ | ページぶん | なし |
jQueryをVue.jsで代用 (Blade+Vue.js) | ページぶん | ページぶん | あり |
jQuery (Blade+jQuery) | ページぶん | あり |
※BladeファイルやVueコンポーネントの数は、細かく分けるともっとあります。
まだVue.jsの扱いに慣れていない方は2番目の方法が簡単だと思います。
コーディングの方法としては、
①コントローラーでデータを取得する
②該当ページのBladeファイルでデータを受け取る
③Vueコンポーネントにjson_encodeしたデータを渡す
という流れになります。
表示の部分を直接Bladeファイルに書かずに、Vueコンポーネントに変えているだけなので簡単に構築できます。
SPAのメリット
それではSPAについての概要を掴めたところで、SPAで構築するメリットをお話していきます。
一般的に言われるのは「表示速度が速い」ということです。
確かに、(うまくつくれば)サクサク表示が切り替わるので、とても快適です。
また、使い勝手の面から見ても、作業の無駄を省いたり、いつも使っているスマートフォンのアプリ感覚で使えたり、良い面は沢山あります。
SPAのデメリット
一方、デメリットとして感じたのは以下の2点です。
ロードできないぶん工数が増える
動的な動きが多いWebサイトをつくる際の宿命ともいえますが、自分で制御しないといけない部分が増えます。
例えば、バリデーションです。
同期を使えば、HTML5のバリデーションを使えるので、必須や入力形式のチェックの手間はかかりません。
しかし、SPAにすると同期が使えないので、ライブラリで手間を省くという手もありますが、基本的には自分でバリデーションプログラムを書かないといけません。
表示速度を上げるためのチューニングが面倒
SPAで表示速度を上げるためには、「非同期通信の回数✕データの取得時間」を最小にする工夫が必要です。
具体的には、Axiosの利用回数、DBから取得するデータ量(内容)をページの表示内容に合わせて細かくチューニングしないといけません。
これを怠ると、SPAで構築したことによって、むしろ表示速度が遅くなってしまいます。
おすすめの利用場面
ここまでSPAのメリット・デメリットについてお話してきましたが、個人的に思うSPAの利用場面は以下の3つです。
ページ数が少ない
ページ数が増える毎に、工数がチリツモに増えるので注意が必要です。
スケジュールに余裕がある
肌感覚ですが、工数が通常の1.5倍ほどかかるので、スケジュールの余裕は必須です。
アサインするメンバーがVue.jsに慣れている
慣れていないメンバーが多いと、チューニング等で余計に時間がかかってしまいます。
まとめ
Vue.jsなどを使うと、つい「SPAで構築してみたい!」という気持ちになってしまいますが、利用場面を見極めて上手に利用していきましょう。