JavaScript , Web application

本記事では、シングルページアプリケーション（以下、SPA）の簡単な説明に加え、具体的にどのような場面において採用するべきなのかをメリット、デメリットを交えながら解説します。

SPAってどんな技術？

SPAとは「Single Page Application」の略で、単一のページでコンテンツの切り替えを行うWeb アプリケーションWeb アプリケーションブラウザで動くアプリケーションのこと。のアーキテクチャアーキテクチャアプリケーションの構造のこと。大規模なアプリケーションを開発する際にはそれを構成するパーツを細かく分解し、適切に組み合わせることが必要となるが、それを表す言葉がアーキテクチャである。アーキテクチャが適切に設計されたアプリケーションはメンテナンスコスト、機能追加コストが低いなどの優位性を持つ。の名称です。

SPAではブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことで、ユーザー体験（UX）ユーザー体験（UX）「User Experience」の略。ユーザーがあるサービスを通じて得られる体験のこと。例えば「ホームページの情報が整理されていてわかりやすい」や「デザインがとても素敵」などといったユーザーが感じる体験全体を指す。を大きく向上させることができます。 従来のWeb ページでは遷移時にページ全体が書き換わりますが、SPAでは JavaScript を用いてページ内の HTML の一部を差し替えてコンテンツを切り替えています。 これにより、ブラウザの挙動に縛られないUIの実現や、パフォーマンスの向上が可能になります。

SPAを用いた有名な事例はこちらです。
Facebook
Google Map

SPAを採用するメリット

SPA を採用する主なメリットは、以下の 3点が挙げられます。

1. 通常のWeb ページでは実現できないユーザー体験を実現できる。
2. 高速なページ遷移を実現できる。
3. ネイティブアプリネイティブアプリiOSやAndroidのアプリのようにデバイス上で直接動作するアプリケーションのこと。ブラウザ上で動作する「Webアプリケーション」とよく比較して使われる。の代わりとして提供することができる。

１. 通常のWeb ページでは実現できないユーザー体験(UX)を実現できる。

ブラウザの挙動に縛られないことから、より幅広い UI を実現することができるため、ユーザー体験を向上させることができます。 例えば、ブラウザによるページ遷移が発生しないことにより、音楽を試聴しながらブラウジングを行うことができる音楽配信サービスのようなものも実現可能です。 また、Twitter や Facebook などのようにプッシュ型の通知を提示することもできます。Facebookのように「チャットウィンドウは表示したまま表示しているコンテンツを変更する」などの機能を実現することができます。 他にもなめらかなアニメーションによるページ遷移や、見栄えの良いローディングも独自に実装することが可能です。

2. 高速なページ遷移を実現できる。

表示速度が1秒遅れることでコンバージョンが7%低下する（出典はこちら）という調査結果があり、表示速度はコンバージョンやリピーターの獲得に大きく影響します。

従来のWebページでは、ページ遷移の度に遷移先のHTML全体をサーバーから取得するため読み込みに時間がかかります。しかし、SPAでは遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のWebページと比較してページ遷移が高速になります。

また、ブラウザによるページ遷移が発生しないため、独自にキャッシュ機能や先行ローディングの機能を実装することでさらなる速度向上を図ることも可能です。

3. ネイティブアプリの代わりとして提供することができる。

SPA によって実現可能なユーザー体験はネイティブアプリと比較しても遜色のないものとなるため、Web アプリとして作成したものをネイティブアプリとして流用することができます。 最近ではプログレッシブウェブアプリ（Progressive Web Apps: PWA)という考え方がGoogleから提唱されており、Web の最新の技術を用いてWebとネイティブアプリの両方の利点を持ったアプリを作ることが着目されています。この手法を用いれば、オフラインでのページ閲覧、プッシュ通知、ホーム画面からの起動といったネイティブアプリならではの機能をWebアプリで実現することができます。

SPA を採用するデメリット

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

1. 実装コストが大幅に増える。
2. 初期ローディングにかかる時間が増える。
3. 開発者が少ない。

１. 実装コストが大幅に増える。

SPAでは今までブラウザに処理を任せていた部分を実装する必要があるため、開発コストがかさみます。例えば、ブラウザの「戻る・進む」の履歴管理、ページごとの URL の割り当て、リンククリック時のローディング表示などが挙げられます。一般的な機能であれば、それがすでに実装されたライブラリがある場合が多いですが、アプリの要件に合わせるために独自に実装しなければならないケースも多々あります。

こういった機能はUI上のささいな点である場合がほとんどですが、実装を怠ると使い勝手に大きく影響してしまうため、SPAを採用する上では対応は必須といえるでしょう。

また、ただ動くものを作るだけでは通常のWebページと比較してSEOの面で不利になるため、サーバーサイドレンダリング(SSR)という技術で対策をしなければならない場合もあります。SPAはJavaScriptでデータを取得し、HTMLを構築するというステップでページを表示することから、ほとんどの場合クローリングの対象外です。SSRを導入するためにはサーバーサイドの開発も必要となり、対応しているライブラリも限られているため一般的に実装コストが大きく増加します。

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

ページの切り替えは高速になりますが、JavaScriptのコード量が増えるのに加えて今までサーバー側で行っていたHTMLの生成をブラウザで行うことになるため、 初期ローディングにかかる時間は増えます。こちらも SSR を用いることで高速化は可能ですが、その分の実装コストがかかってしまいます。

3. 開発者が少ない。

SPAを開発したことのある開発者は、一般的なWebページの制作者に比べ圧倒的に少ないのが現状です。SPAを開発するには、通常の Webページよりも規模が大きいコードを書く必要があることから、Webページの制作スキルに加えてJavaScriptおよびその周辺技術に関する幅広い知識と高度な設計スキルが求められます。SPA を構築するためにはなんらかのライブラリ、フレームワークを使用することは避けられないため、それらに対する理解も必須となります。 また、後々までメンテナンスが可能なコードを書くための設計も必須といえるでしょう。

どのような場面で採用するべき？

SPAはその特性上、ユーザーが頻繁にページ遷移やコンテンツの操作を行う滞在時間の長いサービスに適しています。例えば、データ可視化サービスやチケットの座席指定などはユーザーが繰り返し検索を行うため、SPAに向いているといえます。

このようなサービスを従来のWebページで実装すると、検索が行われる度にページ遷移が発生し、頻繁に待ち時間が発生してしまいます。しかし、SPAにすることで検索の実行から結果の表示までを一画面で行うことができるため、待ち時間を最小限に抑えることが可能となります。

一方で、ブログのように直帰率が比較的高いサービスはSPAにはあまり適していないといえるでしょう。SPAは従来のブラウザが行っていた挙動をJavaScriptで実装するため、サービスに最初にアクセスしたときの読み込みやセットアップにより多くの時間を必要とします。直帰率が高いサービスにSPAを採用しても、アクセス時にかかる時間が増加するだけであまりメリットは無いでしょう。

SPAの採用事例としては弊社のサービス「Talkscope」があります。Talkscopeは訪日外国人のSNSの投稿を収集、分析できるツールです。 Talkscopeでは豊富な検索条件からデータを絞り込むことができ、さらに、データの多彩な可視化方法をサポートしています。このことから、ユーザーが検索条件や可視化方法を頻繁に変更することを想定しており、それらの操作による待ち時間を抑えユーザー体験を向上させるためにSPAを採用しています。

SPAの紹介及び導入のメリット＆デメリットについて具体例を交えてご紹介しました。導入には向き不向きなサイトがあるので、それぞれのサービスの特徴を考慮した上でユーザー目線でのサービスを提供していきたいですね。

この記事を書いた社員