今回の記事では、最近話題のフロントエンド開発技術、シングルページアプリケーション(SPA)について、分かりやすく解説します。

SPA（シングルページアプリケーション）とは？

シングルページアプリケーション(SPA)は、2013年頃から広まり始めたフロントエンドの技術です。プログラミングの知識が少しある方であれば、ReactやVueといったJavaScriptのフレームワークを聞いたことがあるかもしれません。

シングルページアプリケーション(SPA)は、これらのJavaScriptの技術を使って、従来のWebサイトでは実現できなかった、スマホアプリのようなユーザー体験(UX)を実現させることが可能です。下記の動画を見てみてください。

動画の前半のWebサイトが、シングルページアプリケーション(SPA)で作られたWebサイトの画面遷移です。動画の後半に出てくるWebサイトが、従来の手法で作られたWebサイトの画面遷移です。

https://twitter.com/ryosuke_hu/status/1486699346682912774

全然違いますよね！シングルページアプリケーション(SPA)で作られたWebサイトは、まるでスマホアプリのように画面遷移します。他方、従来のウェブサイトでは、パチパチと画面がリロードされているのが分かります。

シングルページアプリケーション(SPA)の仕組み

SPAの仕組みを全て解説すると、かなり長くなる上に上級者向けの解説になってしまうので、簡単に説明しますと、

元々Webサイトというのは、「リクエスト」と「レスポンス」という仕組みで作られていました。

つまり、ブラウザを使ってるユーザーが「このWebページが欲しい」とサーバーにリクエストを送るたびに、

サーバーがブラウザへ、レスポンスを返すわけです。その結果、必然的に一回一回の画面遷移でパチパチと画面が切り替わります。

フルスタックエンジニアのノウハウ

 

2 Pockets

Web開発の基本！リクエスト／レスポンスを理解する

https://blog.senseshare.jp/request-response.html

​今回は、Webプログラミングの基本である「リクエスト／レスポンス」についてご説明します。​この考え方は、Webプログラミングを行う上で「超基本」となりますので、この機会にしっかり理解しておきましょう！

しかし、シングルページアプリケーション(SPA)というのは、一番最初にサイトにアクセスした時に、全てのページをサーバーから全部取得します。

なので、ブラウザが画面を要求するとき、サーバーへのリクエストが発生することなく画面を切り替えることが可能なわけです。

シングルページアプリケーション(SPA)のメリット

Webサイトのユーザー体験(UX)が良い

上記の動画からも分かるように、シングルページアプリケーション(SPA)で作られたWebサイトは、画面遷移するときにブラウザのリロードを挟みません。

サイトが高速化し、スマホアプリのようなユーザー体験(UX)を実現させることが可能です。

つまり、通常のWebサイトよりもユーザー体験が向上しますし、使っていてすごくモダン感があります。

シングルページアプリケーション(SPA)のデメリット

しかし、シングルページアプリケーション(SPA)は正しく運用しなければ諸刃の剣でもあります。

シングルページアプリケーション(SPA)を使えば、なんでもかんでもサイトが高速になるわけでもありません。

正直な話、普通のWebサイトでも技術力のあるエンジニアが作れば、かなり高速なWebサイトを作ることは可能です。

逆に、技術力のない人がシングルページアプリケーション(SPA)でWebサイトを作ると、逆にサイトが遅くなります。

ですから、しっかりとメリットデメリットを理解した上で、SPAを選ぶべきです。

ネイティブアプリの代用ではない

そもそも、シングルページアプリケーション(SPA)は、スマホアプリ（ネイティブアプリ）の代用ではありません。

AndroidやiOSといったスマホアプリは、しっかりとしたスマホアプリ専用のプログラミング言語や技術があります。

シングルページアプリケーション(SPA)は、あくまでもwebの技術なので、

「シングルページアプリケーション(SPA)で作ればスマホアプリと一緒だ」と勘違いしない方がいいです。

初期ローディングに時間がかかる

シングルページアプリケーション(SPA)サイトは、ユーザーがブラウザでWebサイトにアクセスしたとき、全てのデータをサーバーから一気に取得します。

なので、初めてWebサイトにアクセスしたときに、初期ロードがすごく遅くなる傾向があります。遅いサイトは嫌われますよね。

そういう風に考えると、シングルページアプリケーション(SPA)は普通ウェブサイトよりも劣っているとも言えます。

これらの課題を解決するためには、サーバーサイドレンダリングなどの手法を取る必要があるのですが、より高い技術力を求められます。

シングルページアプリケーション(SPA)にが技術力が必要

くどいようですが、シングルページアプリケーション(SPA)サイトを成功させるには、高度な技術力が必要です。

初期ロードの件もそうですが、WordPressのように簡単に作れるものでもないです。

SEOに向いていない

シングルページアプリケーション(SPA)は、画面遷移のたびにサーバーにリクエストを送りません。

もっと言えば、Webサイトを表示したとき、HTMLのDOMを構成しません。

ですから、SPAで作られたWebサイトのソースを見てみると、HTMLが全くなく、JavaScriptだけの場合が殆どです。

そうなると、SEO的に物凄く不利になります。なぜならば、GoogleのアルゴリズムはHTML DOMを見てランク付けをするからです。

ただし、現在のGooglebotには、Chrome 74相当のレンダリングが搭載されており、

最新のJavaScript技術に対応していると言われているので、この問題は一応気にしなくても良さそうです。

Google Developers

 

10 Pockets

The new evergreen Googlebot  |  Google Search Central Blog  |  Google Developers

https://developers.google.com/search/blog/2019/05/the-new-evergreen-googlebot

シングルページアプリケーション(SPA)に適した状態

シングルページアプリケーション(SPA)を選ぶべきサービスは、

例えば、会員制のサイトなど、ユーザーがサイト内を回遊し、長く滞在するようなサービスと言えます。

他方で、ブログのように文字を読むだけ、検索からやってくるだけのようなサイトの場合は、わざわざSPAを導入する意味はないでしょう。

WordPressを導入して、高性能なサーバーを導入すれば、プログラミングが出来なくても高性能なWebサイトが作れます。

シングルページアプリケーション(SPA)に適さない状態

技術力のあるWebエンジニアが存在しないチームでは、一旦シングルページアプリケーション(SPA)の導入は見送った方が良さそうです。

また、ブログサイトのようなメディアをやろうとしてる人にも、わざわざコストを割いてSPAを導入するメリットは少ないです。

ソーシャルメディ(Twitter)のような、ユーザーがサイト内で活発に行動するサイトの場合は、シングルページアプリケーション(SPA)を導入し、ユーザー体験をこだわるのは良いでしょう。

まとめ

このように、シングルページアプリケーション(SPA)はサイトのUXを向上させる素晴らしい技術ではあるものの、

初期ロードに時間がかかったり、上手に実装するのに技術力が必要だったりします。

下手にSPAサイトを作ると、サイトを直すコストが急激に上がったり、

逆にパフォーマンスが落ちてしまいコンバージョンに影響が出たりします。

ですから、必要に応じてサイトを作っていきましょう。

何度もくどいようですが、SPAで実装されてないウェブサイトでも、

高速で優れたUXを実現できているサイトはいくらでもあります。