Vue

🚀 はじめに この記事でわかること SPA（シングルページアプリ）とは何か なぜ Webアプリがヌルッと動くのか（ページ遷移が速い理由） SPAが使われる場面と、もし使わないとどうなるか 初心者でもイメージしやすい「動きの仕組み」 ✅ 概要解説 SPA（シングルページアプリ）とは何か 一言でいうと、「ページを切り替えずに中身だけ入れ替えるWebアプリ」 のことです。 普通のWebサイト（MPA：マルチページアプリ）は、 リンクをクリックするたびに ページ全体をサーバーから読み直します。 一方、SPAは… 最初に 1枚のページ（HTML）を読み込む あとは必要な部分だけ JavaScriptで書き換える ページ全体を読み直さないので ヌルッと動く という仕組みになっています。 何のためにあるのか SPAの目的は 「体験を速く・滑らかにする」 こと。 ページ全体を読み直さない 必要なデータだけサーバーから取ってくる 画面の切り替えがアプリのようにスムーズ その結果、ユーザーは アプリを触っているような快適さ を感じます。 SPAがないとどうなるのか SPAを使わない場合（普通のWebサイト）だと… ページ遷移のたびに 画面が真っ白になる 読み込みが終わるまで 待ち時間が発生 ボタンを押すたびに ページ全体がリロード つまり、動きがカクカクしやすい。 SPAはこの「毎回リロード問題」を解決するために生まれました。 どんな場面で使えるのか SPAは、動きの多いWebアプリに向いています。 SNS（Twitter / Instagram） チャットアプリ（Slack / Discord） 地図アプリ（Google Maps） 管理画面・ダッシュボード ECサイトの検索画面 逆に、ブログや企業サイトのように 「ページを読むだけ」のサイトでは、SPAである必要はありません。 💡 小話・豆知識・逸話 1) SPAが“アプリっぽい”理由 SPAは、画面の切り替えを ブラウザではなくJavaScriptが担当します。 スマホアプリと同じように、画面の中身だけ差し替えるので、 「アプリみたいに動く！」と感じるわけです。 2) 実は昔のWebは全部“MPA”だった 昔のWebは、リンクを押すたびにページ全体を読み直すのが当たり前でした。 SPAの登場で、Webが アプリのように動く時代 に進化しました。 ...