はじめに
SPA（シングルページアプリケーション）
システムエンジニアならここ数年で一度は聞いたことがある単語だと思います。
SPAとはWEBアプリケーションの開発手法の一つです。
従来のWEBアプリケーションとの違いや特徴について説明していきたいと思います。
SPAとは
SPAの説明の前に、まず従来のWEBサイトの仕組みから説明します。
従来のWEBサイトの仕組みであるMPA（マルチページアプリケーション）は、リンクやボタンをクリックするごとに新しいページがサーバーから取得される仕組みです。
ユーザーがページ間を遷移するたびに、サーバー側で生成された新しいHTMLがダウンロードされ、画面全体がリフレッシュされます。
対するSPAは、従来のWEBサイトとは異なり、ページの読み込み時に必要なデータやリソースを一度に取得し、その後はサーバーとのやり取りを最小限に抑えて動的なコンテンツの表示や操作を行います。
ページ内で変化させる必要のない部分はそのまま、変化させたい部分だけを更新（クライアント側でのHTML生成）することで、表示の速度や全体のパフォーマンスを向上させることができます。
ユーザーが認識する変化はページの一部であり、ページ遷移（ページ全体が白くなる）を意識することがなくなります。
この章のまとめ
■MPA（マルチページアプリケーション）
・HTMLの生成はサーバー側
・情報の更新はページ遷移（ページ全体が白くなる）
■SPA（シングルページアプリケーション）
・HTMLの生成はクライアント側 ※初回読み込み時等を除く
・情報の更新はコンテンツのみ更新
おさらい：MPAとSPAの比較
SPAが使われているサイト
今ではSPAが使われているサイトは数多くあります。
有名なサイトをいくつか紹介したいと思います。
Twitterのホームタイムラインを見る時、ページの遷移なく新しいツイートがリアルタイムに表示されます。
初回のページ読み込み後、ユーザーがスクロールすると、非同期で新しいツイートを取得し、動的に表示されます。
また、ツイートを投稿すると投稿内容を非同期でサーバーに送信し、ツイートがリアルタイムに表示されます。
Gmail
Gmailでは、メールの一覧や詳細表示、検索などの機能がページ遷移なしに動的に表示されます。
メール受信時にGmailは非同期でサーバーからデータを取得し、受信したメールがリアルタイムに表示されます。
ユーザーは新着メールを受け取るたびにページのリロードを行わずに、最新のメールを確認することができます。
Googleマップ
Googleマップにアクセスすると、初回のページ読み込みが行われ、必要なリソースがダウンロードされ地図が表示されます。
ユーザーは地図上でズームイン・ズームアウト、ドラッグ、ピンチ操作などのマップ操作を行い、地図はリロードなく滑らかに表示されます。
下記の動画で、リロードなく滑らかに地図が表示されるのがわかると思います。
開発者ツールでネットワークを確認すると、地図操作に連動して非同期で情報を取得していることがわかります。
SPAのメリット
SPAのメリットを紹介します。
ユーザーエクスペリエンスの向上
SPAを導入することで得られるものとして、ユーザーエクスペリエンス（ユーザーが感じる使いやすさ、印象などの体験）の向上があげられます。
ページの再読み込みや遷移が少ないため、ユーザーがスムーズな操作体験を得ることができ、ページ遷移でのユーザーストレスが軽減されます。
高速なパフォーマンス
SPAではページ全体を再読み込みする必要がないため、データの取得や処理にかかる時間が短くなり、高速なパフォーマンスが実現されます。
モジュール化と保守性の向上
SPAでは機能ごとに分割したコンポーネント（部品）を使用します。
ヘッダーコンポーネント、サイドバーコンポーネント、フォームコンポーネントなどです。
各コンポーネントは独自の機能を持ち、再利用が可能です。
これにより、コードの再利用性が高まり、保守性が向上します。
この考え方は「コンポーネント指向開発」とも呼ばれます。
オフライン対応の容易さ
SPAは一度読み込まれたコンテンツをキャッシュし、オフライン状態でも一部の機能やデータの表示が可能です。
これにより、ユーザーは一時的なネットワークの切断や低速な接続状況でもアプリケーションを利用できます。
この章のまとめ
SPAのメリット
■ユーザーエクスペリエンスの向上
・ユーザーがスムーズな操作体験を得ることができ、ページ遷移でのユーザーストレスが軽減される
■高速なパフォーマンス
・必要なデータのみを読み込むため、高速なパフォーマンスが実現される
■モジュール化と保守性の向上
・各コンポーネントは独自の機能を持ち、再利用が可能
■オフライン対応の容易さ
・コンテンツをキャッシュし、オフライン状態でも一部の機能やデータの表示が可能
SPAのデメリット
SPAに多くのメリットがありましたが、デメリットも存在します。
初回ロード時間
SPAは初回に全ての必要なリソース（HTML、CSS、JavaScript）を一度にダウンロードする必要があります。
そのため、初回のロード時間が他のアプリケーションと比べて長くなることがあります。
SEO（検索エンジン最適化）の課題
SPAでは情報の更新がクライアント側で行われるため、従来のサイトのようにコンテンツページが初めから存在しないことがあります。
そのため、一部の検索エンジンは、SPAのコンテンツを正しくクロール（検索エンジンのロボットが、Webサイトを巡回しHTMLファイルなどの読みこみを行い、Webページを検索結果として表示させるためのデータベースに登録すること）ができない場合があります。
これにより、検索エンジンの検索結果表示順位が低下する可能性があります。
ブラウザの制約
SPAはクライアントサイドで動作するため、ユーザーのブラウザに依存します。
古いバージョンのブラウザでは、最新のJavaScriptやCSSの機能をサポートしていない場合があり、正常に動作しないことがあります。
また、一部のセキュリティ設定やブラウザ拡張機能によっても制約が生じる場合があります。
メモリ使用量の増加
SPAは一度に全ての必要なリソースをダウンロードする特性を持つため、メモリ使用量が増加する傾向があります。
この章のまとめ
SPAのデメリット
■初回ロード時間
・初回に全ての必要なリソースをダウンロードするため、初回のロード時間が長くなる
■SEO（検索エンジン最適化）の課題
・コンテンツを正しくクロールされず、検索エンジンの検索結果表示順位が低下する可能性がある
■ブラウザの制約
・古いバージョンのブラウザでは、正常に動作しない可能性がある
■メモリ使用量の増加
・メモリ使用量が増加する傾向がある
さいごに
SPAはユーザーにも開発者にも多くのメリットをもたらします。
デメリットもあるので、それを充分に理解して設計する必要がありますが、トレンドの技術でもあるのでそれらを考慮しながら導入していただければなと思います。
最近よく聞くけど今さら聞けない技術用語について、いくつか記事を書いています。
良かったらそちらもご覧ください。
参考