SPA（シングルページアプリ）

📖 もうちょい詳しく

何が新しいの？

SPAは「Single Page Application（1枚のページで動くアプリ）」の略で、Webサイトを操作したときにページ全体を読み込み直さない作り方です。
ふつうのサイトはリンクを押すたびに新しいページを取りに行きますが、SPAは最初に土台を一度だけ読み込み、あとは必要な部分だけを差し替えます。地図サービスやメールの画面のように、画面が白くチカッとならず、なめらかに動くWebアプリが増えたことで広まりました。

どうやって動いてるの？

最初のアクセスで、表示の枠組みと JavaScript（ページに動きをつける言語）をまとめて受け取ります。
そのあとは、ボタンを押すなどの操作に合わせて、JavaScriptが必要なデータだけを裏でこっそり取りに行き、画面の一部だけを書き換えます。ページの中身を組み立てる作業を、サーバー側ではなく、見ている人の手元（ブラウザ）で行うことが多いのが特徴です。

何ができるの？

ページの切り替えが速く、操作してもチラつかない、アプリのような使い心地のWebサービスが作れます。
入力中の内容を保ったまま表示を切り替えたり、スクロールに合わせて続きを読み込んだりと、こまかい動きを得意とします。SNSやチャット、管理画面など「ずっと開いて操作し続ける」種類のサービスと相性がよいです。

🌱 身近なたとえ

ホワイトボードで例えると、SPAは「1枚のボードを使い回す」やり方です。
ふつうのサイトは、説明を変えるたびに新しい紙に印刷して貼り替えるイメージです。SPAは、ボードはそのままで、書いてある中身だけを消して書き直します。
紙を毎回差し替えないぶん、切り替えが速く、見ている側もチラつきを感じにくくなります。

✅ まず覚えるポイント

• SPAは「Single Page Application」の略
• ページ全体を読み込み直さず、中身だけを書き換える作り方
• 最初に土台とJavaScriptをまとめて読み込む
• 操作のたびに必要なデータだけを裏で取りに行く
• アプリのようななめらかな操作感が得意

🧭 よくある勘違い

本当にページが1枚しかないの？

見た目は1枚に感じますが、画面の「種類」はいくつもあります。
一覧・詳細・設定といった切り替えはちゃんとありますが、そのたびにページを開き直さず、同じ土台の上で中身だけを入れ替えているだけです。「ファイルが1つ」という意味ではなく、「読み込み直しが1回で済む」と考えると正確です。

SPAなら必ず速くて軽いの？

そうとは限りません。最初に多くのJavaScriptをまとめて読み込むため、開きはじめは逆に重く感じる場合があります。
また、JavaScriptが動かない環境では中身が表示されにくいことや、検索エンジンに内容が伝わりにくい場合もあります。最近はこれらを補う工夫も使われますが、いつでも万能というわけではありません。

🧩 関連して覚えると楽な言葉

• JavaScript: SPAの動きを支える、ブラウザの中で画面を書き換える言語
• React: SPAをつくるときによく使われる、画面づくりの代表的な道具
• ルーター: ページを開き直さずに画面の切り替えを管理するしくみ
• DOM: ブラウザが画面を部品の集まりとして扱う構造で、SPAはこれを書き換えて表示を変える

🏁 ひとことでまとめ

SPAは、ページを開き直さずに中身だけを差し替えて動かす、アプリのようなWebの作り方です。
1枚のボードを書き換えて使い回すように、なめらかな操作感を出せるのが持ち味です。身近なWebサービスの多くが、この考え方で作られています。