10. SPA（シングルページアプリ）って何？
「リロードなし」で動く快適さ

1. 真っ白になる画面遷移はもう古い？

かつてのWebサイトは、ボタンやリンクをクリックするたびに、ブラウザが「新しいHTMLをください」とサーバーへリクエストを送っていました。サーバーが新しいページを返し、ブラウザがそれをゼロから描画する。その一瞬、画面が真っ白になるのが当たり前でした。これをマルチページアプリケーション（MPA）と呼びます。

対して、猫の手ツールのような SPA (Single Page Application) は、最初に一度だけHTMLを読み込んだら、後は中身をJavaScriptで「書き換える」だけです。物理的なページ移動が発生しないため、不快な画面のチラつきがなく、極めて高いレスポンス性能を実現できます。

2. JavaScriptが「DOM」を直接操作する仕組み

SPAの本質は、ブラウザに読み込まれたJavaScriptが、HTMLの構造（DOM）を動的に書き換えることにあります。サーバーから新しいページをもらうのではなく、手元にある部品を入れ替えるイメージです。

これにより、ヘッダーやナビゲーションなどの「共通部分」を維持したまま、メインのコンテンツだけを瞬時に切り替えることが可能になります。インフラ的な視点で見ると、ページ全体を再取得しないため、通信データ量（トラフィック）を大幅に削減できるというメリットもあります。

具体的実装：見せる・隠すによる擬似的な遷移

【Before】従来のリンク遷移（物理的なリロードが発生）

<!-- index.html -->
<a href="/result.html">結果を表示</a>
<!-- ⚠️ ページ全体が再読み込みされる -->

【After】SPA的な状態切り替え（リロードなし）

// 物理的な移動はせず、表示状態（State）を切り替える
function goToResult() {
  // 編集エリアを非表示にし、結果エリアを表示する
  document.getElementById('edit-area').style.display = 'none';
  document.getElementById('result-area').style.display = 'block';

  // 必要ならURLの見た目だけを変える（History API）
  history.pushState(null, '', '/result');
}

3. 注意点：SPAが抱える特有の課題

快適なSPAですが、開発時には考慮すべき落とし穴もいくつかあります。

• SEO（検索エンジン最適化）： ページの中身をJavaScriptで生成するため、検索エンジンのクローラーが内容を正しく読み取れない時期がありました（現在はGoogleを中心に改善されていますが、SSRなどの対策が語られる理由です）。
• 「戻る」ボタンの挙動： 物理的な遷移がないため、ブラウザの戻るボタンを押した際にアプリ全体が終了してしまうことがあります。これを防ぐには「History API」を使って、擬似的に履歴を管理する必要があります。
• 初回の読み込み負荷： アプリ全体のロジック（JavaScript）を最初にまとめて読み込むため、最初の1ページ目が表示されるまでに時間がかかる傾向があります。

4. 実務での役立ち：猫の手ツールでの体験

「猫の手ツール」をSPAとして構築した最大の理由は、ユーザーの作業を中断させないためです。証明写真の作成は「写真をアップロードし、範囲を選び、ダウンロードする」という一連のフローが非常に密接に関わっています。

各ステップでリロードが発生してしまうと、アップロードした画像データを保持するために複雑なセッション管理や一時サーバーが必要になりますが、SPAならブラウザ上のメモリだけで完結します。

「1ページの中でアプリが完結している」という感覚。これは、サーバーの負荷を下げつつ、ユーザーに最高速度の体験を提供する、現代のWeb開発における一つの正解なのだと実感しました。

まとめ

SPAは、Webを「情報の閲覧場所」から「道具（アプリケーション）の実行場所」へと進化させました。リロードのない快適な操作感は、もはや贅沢ではなく、ユーザーが当然のように期待する標準品質になりつつあります。

この構造を理解したことで、単なるWeb制作ではなく「ソフトウェア開発」をしているというワクワク感を、より強く持てるようになりました。