SPAとは、Single Page Applicationの略で、単一のWebページでアプリケーションを構成する設計構造の名称です。SPAでは、ブラウザによるページ遷移を行わずコンテンツの切り替えを可能とすることで、ユーザー体験（UX）を大きく向上させることができます。今回はこのSPAについて紹介します。
SPAについて
SPAの技術について
従来のWeb ページでは遷移時にページ全体が書き換わりますが、SPAでは JavaScript を用いてページ内の HTML の一部を差し替えてコンテンツを切り替えています。 これにより、ブラウザの挙動に縛られないUIの実現や、パフォーマンスの向上が可能になります。また、JavaScriptの他にも、AngularJS、Ember.js、Meteor.js、Vue.js、Reactといったフレームワークも SPAの基本概念を導入しているため活用が可能です。
SPAの具体例
SPAの事例としては、GoogleMapが有名です。GoogleMapは世界中の地図情報を提供しているため膨大なデータ量となりますが、SPA技術を用い、 一部のコンテンツの更新を行った際にページ全体が再読み込みさせることなく単一ページで情報を描画することで、高いユーザー体験（UX）を実現しています。
その他、SPAはページ遷移を高速化するという特徴から、FacebookやYouTubeなどの滞在時間の長いサービスに適しています。
SPAのメリットとデメリット
SPAのメリット
SPAのメリットは以下の3点です。
- 動作性の向上
従来のWebページでは、ページ遷移の度にサーバーから遷移先のHTML全体を取得する必要があります。一方で、SPAでは遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のWebページと比較してページ遷移が高速になります。 - より高度なWeb表現が可能
SPAはユーザーのアクションに対して必要な部分のみを更新するため、ブラウザの挙動に縛られることがなく、幅の広いUIの実装が可能になります。例えば、YouTubeのように「特定の動画を流しながら、表示するコンテンツを変更する」などの機能を実現することができます。 他にもなめらかなアニメーション等を独自に実装することが可能になります。 - ネイティブアプリの代用が可能
アプリケーションには、Webブラウザ上で動くWebアプリと、端末内にダウンロードして使うネイティブアプリがあります。ネイティブアプリでは、オフラインでのページ閲覧、プッシュ通知、ホーム画面からの起動といった機能が実現できます。SPA技術を用いることで、Webアプリでありながら、ネイティブアプリならではの機能も実現することが可能になります。
SPAのデメリット
SPAのデメリットは以下の3点です。
- 初期ローディングの時間が長くなる
SPAでは、サーバとのやり取りの量は減るので、ページ遷移は高速になります。一方で、JavaScriptのコード量が増加するため、初期ローディングに必要な時間が長くなります。 - 開発者が少ない
SPA開発では、通常の Webページよりも大規模なコード構築が必要になるため、Webページの制作スキルに加えてJavaScriptおよびその周辺技術に関する幅広い知識と高度な設計スキルが求められます。そのため、SPA開発の経験者は、一般的なWebページ制作の経験者に比べ少なく、リソースの確保が難しいと考えられます。 - 実装コストが高い
SPAでは、ブラウザの処理に依存していた部分を開発者が実装することになるため、開発コストが高くなります。一般的な機能であれば、ライブラリを活用できるケースが多いですが、アプリの要件に合わせるために独自に実装しなければならないケースも多々あります。こういった機能はUI上のささいな点であったとしても、使い勝手に大きく影響してしまうためSPAを採用する上では対応が必須と考えられます。
エンジニアからのアドバイス
SPA技術は、ページ遷移が高速化されるなど高いユーザー体験（UX）を実現することができます。一方で、ブログのようにページ遷移等をあまり行わないサービスでは、アクセス時間の増加の影響度が大きくなります。実装コストの増加も含め、実現したいサービス内容によって適切な実装方法を検討するようにしましょう。