シングル・ページ・アプリケーション(Single Page Application)とは何か?リッチクライアントを実現する技術を解説

2021年5月12日

Single Page Applicationの概要

シングル・ページ・アプリケーション(Single Page Application、以下SPAと略記)とは、その名の通り、1つのWebページ内で情報を動的に更新することにより、OSにインストールされたアプリケーション(ネイティブアプリ)のような操作性を実現させようとするアプリケーションのことです。

従来のWebアプリケーションではクライアントからリクエストが発生するたびに、サーバは新しいページを生成してレスポンスとして返していました。
例えば、図書館の蔵書の検索システムでは、「検索フォームがあるページ」で検索を行った後は、「検索結果が表示されるページ」に遷移し、検索結果が表示されます。

一方で、SPAの場合は、ページの更新を行う際、クライアントは現在表示されているWebページから変更された部分のみをリクエストします。
例えば、Google Mapでは地図を移動しても画面全体を再読み込みするわけではなく、必要な箇所のマップのみが読み込まれます。
SPAの場合、サーバはページ全体ではなく必要なデータのみをjsonなどで返します。
ページ全体を更新する必要がないため、SPAではクライアント側で高速な動作を実現することが可能です。

なぜSPAが生まれたのか

従来クライアント側でリッチなUIを提供するためには、Adobe FlashやMicrosoft SilverlightなどのWebブラウザを拡張する技術(RIA:Rich Internet Application)が必要でした。
しかし2010年、当時アメリカApple社のCEOであったスティーヴ・ジョブズはiOSでAdobeのFlashを採用しない考えを表明しました。
ジョブズの考え方は、Webの標準技術はオープンであるべきであり、Flashは独占的であるというものでした。
これを機にFlashは衰退していきます。

さらに、Webブラウザの進化やHTML5、CSS3の登場によって、RIAの必要なしにリッチインターフェースを実現することができるようになっていきます。
SPAを実現するためのJavaScriptのライブラリやフレームワークとして、Vue.js、React、Angularなども誕生してきました。
こうしてSPAが台頭してきたのです。

どういうときにSPAを使うのか

ユーザー操作が多く、そして滞在時間が長いWebページでSPAは非常に有効です。
SPAは画面遷移などのアクションに対して必要最小限の通信しか行わないので、動作が軽快でユーザーにストレスを与えないためです。
また、スマートフォンやタブレット上では、端末にインストールするタイプのネイティブアプリのように動作します。
Webアプリとネイティブアプリをそれぞれ開発するよりも、コストを大幅に削減することが可能になります。

一方で、SPAはブログやメディアサイトのような動きのないWebページには不向きです。
SPAは初回アクセス時にJavaScriptなどのコードを大量に読み込むため、ページの表示が遅くなってしまうことがあります。
このように、ユーザーの操作が少なく、表示する内容も多くない場合は、わざわざSPAにするよりは、通常のWebサイトやWebアプリケーションの技術を使う方がよいでしょう。

参考