SPAって何？
「リロードなし」で動く快適なWeb

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

昔のWebサイトは、ボタンを押すたびに画面全体が一度真っ白になり、新しいページをサーバーから読み込んでいました。これが「画面遷移」です。でも、「猫の手貸し」は一度も画面が白くなりません。ずっと同じページにいるからです。これを SPA (Single Page Application) と呼びます。

JavaScriptが「一部だけ」書き換える

SPAでは、JavaScriptが画面の必要な部分だけを「書き換え」たり、見せる要素を切り替えたりします。ページ全体を読み直さないので、動作が非常にスムーズです。

// 擬似的なSPAの切り替え処理
function goToResult() {
  editArea.classList.add('hidden'); // 編集画面を隠す
  resultArea.classList.remove('hidden'); // 結果画面を見せる
}

サーバーとの通信を最小限にし、ブラウザ側のリソースで画面を構成する。インフラ的には「トラフィックの削減」というメリットもあります。この「1ページで完結するツール」という構造を学んだことで、Webアプリ開発の視野が大きく広がりました。