はじめに

最近SPA開発に興味を持ったので、簡単ではありますが、メリット・デメリットなどをまとめました。
（文字だらけですが・・・）

SPAとは

「Single Page　Application」の略。単一ページ中でコンテンツの切り替えを行うWebアプリケーションのこと。

SPAを開発する上で、Vue.jsやReactなどのJavaScriptのフレームワーク・ライブラリを利用することが多い。

ブラウザでのページ遷移を必要とせずに新しい情報を読み込むことができる。

SPAの代表例

slack Webページ
Facebookメッセンジャー Webページ
GoogleMap
trello

など・・・

これらはWebではありますが、ページ遷移が無いので、スムーズに情報を閲覧できる。

SPAのメリット

①ユーザーのページ遷移ストレスが無くなる

ページのリロード（読み込み）が無いので、ページ遷移時にいちいちリロードされるのでユーザーにとってはストレスに感じる。
SPAは従来のWebサイトのように、ページ遷移ごとにページを丸々差し替える（新しいHTMLを表示させる）ことがなく、必要な部分のコンテンツのみ遷移させるので、画面全体が再描画されるストレスから解放される。

②アプリのようなUX

SPAでは共通の部品は更新しないで、差分だけ更新するので、ユーザー一覧を表示したまま別の一覧ページさせたりすることができる。

③開発の手間を省くことができる

SPAは幅広いUIを実装可能なので、iOSアプリやAndroidアプリのような端末内にダウンロードするネイティブアプリの代用として使用できる。
ネイティブアプリはアプリのリリース前に審査を通過させる必要がある、デバイスごとの挙動を考慮する必要があるというハードルがありますが、そういった問題を考慮せずに公開することができる。

デメリット

①初期ローディングに時間を要する

SPAは差分だけ更新させる動作をさせるので、フロントエンド側（JavaScript）で記述をするが、そのコード量が増加しがちなので、コードを読み込む時間がかかり、最初のページ読み込み時に時間がかかる。

②実装コストがかかる

ブラウザ側に処理を任せていた部分を実装する必要があるので、特にフロントエンドの実装コストがかかる。

③ネイティブアプリのようにモバイルのホーム画面に登録してもらい辛い

モバイルの場合、Webページをホーム画面に登録してもらえる機会が減る可能性が高い。普段使いには厳しいかも。

④SPAが実装できるエンジニアがまだまだ少ない

国内だと、まだまだSPAはメジャーでは無いので、開発実装に対応できるフロントエンドエンジニアが少ない（少しずつ増えてきているのかも？？）

どんなサービスに向いてる？

最初の読み込みは時間がかかるものの、初回読み込み後の各操作については更新のタイムラグが無い。そのためユーザー操作が多く、滞在時間が長いサービスがSPAに向いている。
映画館や新幹線などのチケットの座席指定やグラフ・図などを用いたデータ可視化サービスなどに向いている。これらサービスは、検索が行われる度にページ遷移が発生し、頻繁に待ち時間が発生するのでSPA化することで、検索→結果表示が単一画面上で行われ、待ち時間を最小限に抑えることができる。

どんなサービスが向いていない？

滞在時間が長くないサービス、つまり直帰率が高い(１ページのみ閲覧して、ページから離脱してしまった割合）サービスはSPAに不向き。
ブログなどの１ページのみのサイトなどが挙げられる。
直帰率の高いサービスにSPAを採用しても、最初のアクセス時に読み込み時間を多く要してしまうので時間がかかるばかりでメリットが感じられない。

「サービスの挙動を早くするためにSPAを採用したい！！」というのは少し考える必要がある。
SPAは同時に情報処理をすることは得意だが、データ更新が早くなるわけでは無いので、データ処理を早くするためにはバックエンドの構築を再考するのが良い。

まとめ

SPAを採用する際はどういうサービスを開発したいのかを明確にして、SPAのメリット＆デメリットを考慮しながら導入していきたいところ。

参考

https://digitalidentity.co.jp/blog/creative/about-single-page-application.html
https://www.oro.com/ja/technology/001/