「Google Map」が使っている「SPA」という技術

ぼくの大好きなWebページに「Google Map」がある。

なぜ好きかというと、生活を一変させてといっても過言ではないから。

旅行の予定を立てるときや、目的地への行き方を調べるのにはなくてはならない存在だ。

ヒマなときの時間つぶし、つまりエンタメとしても面白い。

知らない場所を眺め、面白そうな地名を見つけたり、適当に「うどん屋」と入力し、美味しそうな「うどん屋」を見つけてみたり。

はたまたその「うどん屋」へは、自宅から行くと何分かかるのかを調べてみたり。

そんな「Google Map」は、SPAという技術でできていることを最近知った。

本日は、そんなSPAについてまとめてみたい。

SPAってどんな技術？

SPAとは「Single Page Application」の略。

単一のページでコンテンツの切り替えを行う、Webアプリケーションのアーキテクチャの名称だ。

従来のWebページでは、遷移時にページ全体が書き換わるが、SPAでは、ブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行う。

そうすることで、ユーザー体験を大きく向上させることができる。

より具体的にいうと、SPAでは JavaScript を用いて、ページ内の HTML の一部を差し替えてコンテンツを切り替えている。

確かに「Google Map」で地名を検索しても、ページ全体が書き換わることはない。

このSPAは、「Google Map」だけではなく「Facebook」にも採用されている技術だ。

SPAのメリット

SPA を採用する主なメリットは、以下の2点。

➀ 通常のWebページでは実現できないユーザー体験の実現。

SPAを採用すれば、高速なページ遷移を実現できる。

例えば、ブラウザによるページ遷移が発生しないことにより、以下のサービスを実装できる。

・音楽を試聴しながらブラウジングを行うことができる音楽配信サービス
・Twitter や Facebook などのような、プッシュ型の通知を提示
・Facebookのように「チャットウィンドウは表示したまま表示しているコンテンツを変更する」などの機能
・なめらかなアニメーションによるページ遷移

② 高速なページ遷移

表示が遅いWebページは、すぐに画面から消してしまいたくなるように、表示速度はコンバージョンやリピーターの獲得に大きく影響。

従来のWebページでは、ページ遷移のたびに遷移先のHTML全体をサーバーから取得していたので、読み込みに時間がかかっていた。

しかしSPAでは、遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のWebページと比較してページ遷移が高速となっている。

さらに、独自にキャッシュ機能や、先行ローディングの機能を実装することで、さらなる速度向上を図ることも可能。

SPAのデメリット

メリットとは反対に、デメリットも存在する。

SPAを採用することによる主なデメリットは、以下の2点が挙げられる。

➀ 実装コストが大幅に増える

いままでブラウザに処理を任せていた部分を実装する必要があるため、開発コストが増える。

たとえば、以下のようなものを実装しなければならない
・ブラウザの「戻る・進む」の履歴管理
・ページごとの URL の割り当て
・リンククリック時のローディング表示

また、通常のWebページと比較してSEOの面で不利になるため、サーバーサイドレンダリング(SSR)という技術で対策をしなければならない場合もある。

② 開発者が少ない

SPAを開発するには、通常のWebページの制作スキルに加え、JavaScriptおよびその周辺技術に関する幅広い知識と、高度な設計スキルが求められる。

SPAを構築するために、なんらかのライブラリ（Reactなど）やフレームワーク(Next.JS, NestJSなど)を使用することは避けられないため、それらに対する理解も必須となる。

このように、通常のWebページよりも高度なスキルが求められ、規模の大きいコードを書く必要があることから、SPAの開発者は、一般的なWebページの制作者に比べ圧倒的に少ないようだ。

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

SPAでは、ページの切り替えが高速になることと引き換えに、初期ローディングにかかる時間が増える。

これは、いままでサーバー側で行っていたHTMLの生成を、SPAではブラウザで行うことになるためだ。

サーバーサイドレンダリング(SSR)を用いることで高速化は可能だが、その分の実装コストがかかる。

まとめ

結局SPAは、どのような場面で採用するべきなのかというと、ユーザーが「ひんぱんにページ遷移」や「コンテンツの操作を多くおこなう」ような滞在時間の長いサービスに適している。

このようなサービスを従来のWebページで実装すると、検索がおこなわれるたびにページ遷移が発生し、待ち時間が発生してしまうからだ。

逆に、ブログのような直帰率が比較的高いサービスは、SPAにはあまり適していないといえる。

というのも、SPAは従来のブラウザが行っていた挙動をJavaScriptで実装しており、最初にアクセスしたときの読み込みやセットアップにより多くの時間を必要とするからだ。

なので、直帰率が高いサービスにSPAを採用しても、アクセス時にかかる時間が増加するだけで、あまりメリットはないといえる。