エンジニアBLOG

担当したプロジェクトでLaravelとVue.jsを使ってWebシステムをつくりました。

その際に導入したのが、よく耳にするSPAという構築方法です。

今回は「これからSPAに挑戦してみたい！」という方向けに、実際に構築してみた感想をお伝えします。

通常、ページ内で検索したり、別のページに移動したりする場合には、同期して画面を更新します。

SPAでは、同期せずに画面の一部分を切り替えることで、素早く画面の表示内容を変更することができます。

まだVue.jsの扱いに慣れていない方は2番目の方法が簡単だと思います。

コーディングの方法としては、
①コントローラーでデータを取得する
②該当ページのBladeファイルでデータを受け取る
③Vueコンポーネントにjson_encodeしたデータを渡す
という流れになります。

表示の部分を直接Bladeファイルに書かずに、Vueコンポーネントに変えているだけなので簡単に構築できます。

それではSPAについての概要を掴めたところで、SPAで構築するメリットをお話していきます。

一般的に言われるのは「表示速度が速い」ということです。

確かに、（うまくつくれば）サクサク表示が切り替わるので、とても快適です。

また、使い勝手の面から見ても、作業の無駄を省いたり、いつも使っているスマートフォンのアプリ感覚で使えたり、良い面は沢山あります。

動的な動きが多いWebサイトをつくる際の宿命ともいえますが、自分で制御しないといけない部分が増えます。

例えば、バリデーションです。

同期を使えば、HTML5のバリデーションを使えるので、必須や入力形式のチェックの手間はかかりません。

しかし、SPAにすると同期が使えないので、ライブラリで手間を省くという手もありますが、基本的には自分でバリデーションプログラムを書かないといけません。

SPAで表示速度を上げるためには、「非同期通信の回数✕データの取得時間」を最小にする工夫が必要です。

具体的には、Axiosの利用回数、DBから取得するデータ量（内容）をページの表示内容に合わせて細かくチューニングしないといけません。

これを怠ると、SPAで構築したことによって、むしろ表示速度が遅くなってしまいます。