シングルページアプリケーションとは？従来のWebサイトとの違いとメリット。

この記事では、モダンなWebの世界でスタンダードとなりつつあるシングルページアプリケーション（以下、本文では「SPA」と省略）について詳しく解説していきたいと思う。

SPAは一言で言うならばユーザにより快適な体験してもらうために産まれた新しいタイプのWebアプリケーションで、Google・Facebookを始めとする多くのウェブサイトがSPAを導入している。

この記事では、SPAの特徴やメリットについて語ったうえで、導入のためのステップやSPAにまつわる問題点についてもまとめている。

おもにWebアプリケーションの開発者に向けて書いているが、IT知識が特に無い人でも理解できるように専門的な用語はなるべく使わないように心掛けた。

シングルページアプリケーションを知る

まずはSPA（シングルページアプリケーション）の概要を知ろう。

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

SPAはWebサイトのユーザにより快適な画面操作を提供するために産まれた技術。

従来のWebサイトではページを移動するたびに、サーバーへリクエストをおこないページ内容を取得する必要があった。これには0.5秒から3秒ほどの時間が掛かりユーザにとっては大きなストレスとなっていた。

SPAでは最初の読み込みの際にコンテンツ全体を取得するために遷移に掛かる時間はほぼ0となっている。

SPAの利点はそれだけでは無く、キャッシュを使いオフラインで使用なども可能にしている。

ただし、SPAが常に新しく優れているというわけでは無く、多くの問題点も存在している。

また、Web全体を見渡した場合、インターネット上のほとんどのページは従来からあるMPAである。

シングルページアプリケーションの歴史

インターネットの世界ではページの読み込み時間は常に大きな課題であった。

著者がインターネットを利用し始めた2000年ごろには1ページを読み込むのに数分かかるようなこともあった。

現在ではインターネットの通信速度の向上により、そういった極端な例は見受けられれなくなったもののページの遷移に掛かる時間はストレスの元だ。

SPAの基となるアイデア自体は2000年代から存在したが、SPAがよく知られるようになったきたのはここ数年の話だ。

ページの読み込みにまつわる技術では「Ajax（asynchronous javascript and xml） 」が有名だ。

Ajaxはページの再読み込みをすることなくWebページの一部を更新できる技術で、ユーザのストレスは大きく軽減されWebの進展やJavaScriptの普及に大きく貢献した。

SPAとAjaxはより快適なWeb体験をユーザに提供するための技術という点では一致しているが、SPAは設計の根本から従来のWebサイトとは大きく異なるのでAjaxと比較するのは難しいだろう。

従来のWebサイトとの違い

SPA（シングルページアプリケーション）に対して、ページを移動するごとに内容をロードする従来のWebサイトはMPA（マルチページアプリケーション）と呼ばれる。

SPAではJavaScriptを核として構成され、複雑なビジネスロジックもフロントエンド側で処理することができる。

対するMPAではおもにHTML・CSSのコードを中心に構成され、ページに動きを加えたいときにのみJavaScriptが使用される。

また、SPAとMPAの特徴を組み合わせたハイブリッドスタイルのWebサイトも存在する。

この場合はMPAの一部にSPAが組むこまれる形となる。

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

SPAの利点をまとめてみよう。

• ページの遷移がスムーズである
  
• キャッシュを使うことによりロード時間が短縮できる
  
• オフラインでの使用も一部で可能となる
  
• デスクトップ・モバイルのアプリとして利用可能。（PWA）

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

SPAの問題点もまとめてみよう。

• 最初にページを開く際にMPAより時間が掛かる
  
• リフレッシュなどのブラウザ操作でバグのような挙動をすることがある
  ⇒　インターネットブラウザはMPAを表示することを念頭に設計されている
  
• SEOには向いてなく検索上位に表示させるのが難しい

また、それに加えてSPAを導入する場合は、開発に掛かる工数も大きくなり、優秀な開発者を集めるのも難しい。

シングルページアプリケーションの事例

よりSPAを理解するためにSPAを導入しているサイトを覗いてみよう。

有名サイトの例

誰もが知っている有名なサイトからSPA・MPAそれぞれの例を探してみよう。

SPAをイメージするうえでの参考になるだろう。

シングルページアプリケーションの例

• Facebook
  https://www.facebook.com
  
• Twitter
  https://twitter.com
  
• Gmail
  https://mail.google.com
  
• YouTube
  https://www.youtube.com

マルチページアプリケーションの例

• amazon
  https://www.amazon.com
  
• ebay
  https://www.ebay.com
  
• The New York Times
  https://www.nytimes.com

シングルページアプリケーションの向き・不向き

前の章でも述べた通り、シングルページアプリケーションはすべてにおいて優れているというわけでは無い。

ここでは、Webサイトの内容を基にSPAに適しているか否かを考えてみよう。

シングルページアプリケーションに適した例

• SNS
  ⇒ SNSを使用する際はタイムラインから個人のプロフィールなどと頻繁にメニューを切り替えることが多い。
  こういったサイトにはSPAが向いている。
  
• メール管理アプリ
  ⇒ GmailやOutlookなどのメール管理アプリもシングルページアプリケーションが向いているだろう。
  
• オンラインバンキング
  ⇒ 高機能で認証などもしっかりしていないといけない。

マルチページアプリケーションに適した例

• オンライン通販サイト
  ⇒ 通販サイトなどサイトの一部分でSPAを使っている場合もあるが基本的にMPAで作られている。
  
• ニュースサイト
  ⇒ ニュース記事を読む際は頻繁にメニューを切り替える必要など無い。こういったサイトは読み込みが早く切り替えに時間がかかるMPAのほうが向いているだろう。
  
• 製品紹介のサイト
  ⇒ 製品紹介のためのサイトでは従来のMPAが使用されることが多い。
  
• ブログ
  ⇒ ブログもニュースサイトと同様の理由でMPAが向いている。基本的にコンテンツが文字中心のサイトはMPAという切り分けでいいだろう。