SPA | ぽち先生と学ぶ IT基礎ノート

要点

SPA（Single Page Application）は、1つのHTMLの上でJavaScriptが画面の中身を書き換えていくアプリの作り方です。
ページ遷移のたびにHTMLをまるごと読み込み直す従来型サイト（MPA）とは仕組みが異なります。
アプリのようななめらかな操作感を実現しやすい一方、初回の読み込みやSEOでは工夫が必要になります。

SPAとは何か

SPAは、最初に1枚のHTMLファイルだけを読み込み、その後の画面の変化はJavaScriptがDOM（画面の構成要素）を書き換えることで表現するアプリの作り方です。

最初に
1枚だけ読込

JavaScriptが
画面を書き換え

ページ遷移せず
見た目が変わる

従来の複数ページ遷移型（MPA）との違い

従来型のサイト（MPA・Multi Page Application）では、リンクをクリックするたびにサーバーへリクエストを送り、新しいHTMLをまるごと受け取って画面全体を再読み込みします。

SPAでは、必要なデータだけをAPI経由で取得し、画面の変わる部分だけをJavaScriptが書き換えます。ページ全体を読み込み直さないため、画面の切り替えが速く、なめらかに感じられます。

ぽち先生のヒントMPAは「本のページをめくるたびに、本まるごと新しいものに差し替える」ようなもの、SPAは「1枚のホワイトボードに書いたり消したりしながら書き換えていく」ようなものに例えられます。ホワイトボード自体は変わらず、書かれている内容だけが更新されます。

画面遷移の仕組み（ルーティング）

SPAでも「URLが変わって別の画面に見える」体験は必要です。これはJavaScriptがURLの変化を監視し、実際にはページを再読み込みせずに、表示するコンポーネント（画面部品）だけを切り替えることで実現しています。この仕組みを「クライアントサイドルーティング」と呼びます。

URLの
変化を検知

表示する画面部品
を切り替え

SPAのメリットと注意点

メリット画面遷移がなめらか。アプリのような操作感を実現しやすい。

注意点最初の1枚に多くのJavaScriptが必要で、初回表示に時間がかかりやすい。

注意点検索エンジンにページ内容が伝わりにくい場合があり、SEO対策の工夫が必要。

SPAとJamstackの関係

SPAは「画面の書き換え方」の話であり、Jamstackは「HTMLをいつ作るか」の話です。この2つは対立するものではなく、組み合わせて使われることもよくあります。例えば、Jamstackで骨組みとなるHTMLをビルド時に用意しつつ、画面内の一部をSPA的にJavaScriptで動かす、といった構成です。

代表的なSPAフレームワークの例

SPAを構築する際は、次のようなJavaScriptフレームワーク・ライブラリがよく使われます。

React（Facebook/Meta発、コンポーネント指向の代表格）
Vue.js（学習コストが低く、日本でも広く使われる）
Angular（Google発、大規模アプリ向けの総合的なフレームワーク）
Svelte（ビルド時にコンパイルし、実行時の処理を軽量化）

まとめ

SPAは、1枚のHTMLの上でJavaScriptが画面を書き換えていくアプリの作り方です。ページ全体を読み込み直さないためなめらかな操作感が得られますが、初回表示やSEOでは工夫が必要になります。