SPAとは
SPAとは、シングルページ・アプリケーション（Single Page Application）の略称です。SPAは、Webアプリケーションの開発手法の1つであり、Webページを遷移せずに通常のアプリケーションを操作しているような操作感を実現します。ページの読み取り時に必要なデータを1度に取得し、ページ内で変化させたい部分だけを更新することでUX（ユーザエクスペリエンス）を大きく向上させることが期待できます。
UXは、サービスの利用者が得る体験や印象のことを指します。例えば、通販サイトのUXを向上させると、顧客満足度が高くなり、更なる利用や新規顧客の獲得につながります。
SPAの仕組み
比較するために、従来のWebページ（MPA：Multi-Page Application）を閲覧する場合の仕組みをご紹介します。
MPAでは、以下の手順を繰り返し行うことでWebページを閲覧します。
- クライアント（サービスや機能の提供を受けるコンピュータ）がWebサーバに「このWebページを見たいです」とリクエストを送信
- リクエストを受け取ったサーバが該当するWebページのHTMLファイルをクライアントに送信
- HTMLファイルを受け取ったクライアントがHTMLファイルを表示
一方、SPAでは上記の手順を最初に行った後、以下の2つの方法を使用してWebページを閲覧します。
クライアントサイドレンダリング
クライアントサイドレンダリングとは、Webサーバから得たデータをもとにクライアント側のスクリプトが表示に必要なHTMLなどのコードの生成を行う方法のことを指します。例えば、You Tubeでは関連動画やコメントの表示をユーザのスクロールに合わせて動的にHTMLを作成しています。
SPAでは、ページの必要な部分だけを更新することでページ遷移せずに操作できるようにするために使用します。
非同期通信
非同期通信とは、データの送受信が行われる際にクライアントがWebサーバからの応答を待たずに次の処理を進めることができる通信方法のことを指します。例えば、メールは非同期通信と言えます。メールは、送信して別の作業をしながら返信が来ることを待っている人が大多数を占めると思います。
SPAでは、非同期通信を行うことで、画面の表示や操作に影響を及ぼさずにサーバから取得したデータの処理をバックグラウンド（ユーザからは見えない場所）で実行します。
SPAのメリット・デメリット
ここでは、SPAでWebページを構成するメリットとデメリットをご紹介します。
メリット
操作感の向上
SPAでは、ユーザが必要な部分のみを更新し、Webページ全体を読み込むことなく表示を切り替えられるため、ユーザはシームレス（「継ぎ目のない・途切れない」の意）な操作をすることができます。これにより、UXの向上が期待できます。
サーバへの負荷の軽減
最初のロード時に必要なファイルやデータを読み取るため、ユーザがその後に行う操作はサーバへのリクエストが少なくなります。その結果、サーバへの負荷が軽減され、スケーラビリティ（ソフトウェアなどの性能・機能の拡張性）が向上します。
オフライン対応のアプリケーション
SPAは、オフラインでも機能するアプリケーションを容易に構築できます。Service Workerなどの技術を使用することで、キャッシュ（Webページなどのデータを一時的に保存する）にアクセスし、オフライン時でもユーザが操作を行える環境を提供できます。
デメリット
最初のロードが遅い
SPAでは、最初のロード時に読み取るファイルが大きくなりやすいため、ロード時間が長くなることがあります。アプリケーションを利用する前に待たせることになるため、ユーザが離れてします一因になる可能性があります。
開発コストが高い
Webブラウザの処理に依存していた部分を開発者が実装する必要があるため、その分開発工数が発生してしまいます。
また、SPAの技術が比較的新しいため、現状ではSPAの開発者がまだ少なく、開発コストが高くなりやすい傾向があります。
SEOに不利な可能性がある
SEO（Search Engine Optimization）とは、Googleなどの検索エンジンで特定のWebサイトを上位表示させることで、検索結果からユーザの流入を増やす施策のことです。
SPAでは、必要な部分のみを更新するため、Webページを正しく認識しなかったことで内容が適切に評価されず、SEO施策が思うようにできないことがあります。
SPAの例
SPAを活用したアプリケーションには、以下のようなものがあります。
Google Map
ユーザが地図を操作しながら地点を検索したり、ルートを確認したりする際、ページを再読み込みすることなく情報を提供します。
Gmail
ユーザが受信トレイを開いたり、メールを確認したりする際、ページ全体をリロードすることなく、必要な部分だけが更新されます。例えば、メールを開くと内容が表示され、返信や転送もシームレスに行えます。
X（旧Twitter）
ユーザがタイムラインをスクロールしながら新しい投稿を見ることができます。新しい投稿が自動的に読み込まれるため、ユーザはページを再読み込みすることなく、常に最新の情報を受け取ることができます。
まとめ
今回は、SPAについて解説しました。
SPAという言葉は知らなくても、活用したことがある人が多いのではないでしょうか。
アプリケーションを開く際、SPAかそうではないかを考えてみると理解を深められると思います。
無料のプログラミングスクール「テクドリ」の卒業生のインタビュー動画を、インスタグラムほか公式SNSにて公開中！
