「SPAっていう言葉は聞くけど、じゃあ、それ以外のサイトは何て呼ぶの？」
「Webサイトのページが表示される、基本的な仕組みを知りたい！」
私たちがインターネットの世界を旅するとき、そのほとんどの時間を、Webサイトの閲覧に費やしています。
一言でいうと、MPAとは**「ユーザーが、ページ内のリンクをクリックするたびに、サーバーから、全く新しい、別のHTMLページを、まるごと一枚、ダウンロードし直して表示する、複数のページ（Multi-Page）で構成された、古典的で、堅実なWebサイトの構築手法」**のことです。
この記事では、プログラミング初心者の方でも、このWebの「基本のき」とも言えるMPAの仕組みがスッキリと理解できるように、**「図書館で本を読む」**という、例えを交えながら、わかりやすく、徹底的に解説していきます。
-
MPAの具体的な仕組み
-
ライバルである「SPA」との決定的な違い
-
MPAのメリットと、現代におけるデメリット
-
どんなサイトが、今もMPAで作られているのか
MPAの仕組み：「ページごとに、新しい本を借りに行く」
MPAは、Multi-Page Applicationの略です。その名の通り、Webサイトが、物理的に独立した、複数のHTMLファイルで構成されています。
index.html（トップページ）、about.html（会社概要ページ）、contact.html（お問い合わせページ）…といったように、ページごとに、一つひとつHTMLファイルが存在します。
このMPAの仕組みを、**「図書館」**に例えてみましょう。
あなたは、あるテーマについて調べるために、図書館を訪れました。
-
あなたは、まず図書館の**「総合案内カウンター（＝サーバー）」**に行き、「トップページという本をください」とお願いします（リクエスト）。
-
司書さん（サーバー）は、本棚から**「トップページ.html」という、一冊の完成された本**を持ってきて、あなたに渡してくれます（レスポンス）。
-
あなたはその本を読みます。本の中には、「会社概要については、『会社概要.html』という本を参照してください」という記述（リンク）があります。
-
あなたは、そのリンクをクリックします。すると、あなたは今読んでいる「トップページ.html」の本を、一度、完全に閉じて、本棚に返します。
-
そして、再び**「総合案内カウンター（サーバー）」**に行き、「今度は、『会社概要.html』という本をください」と、新しくお願いをします。
-
司書さん（サーバー）は、本棚から、全く新しい「会社概要.html」という本を持ってきて、あなたに渡してくれます。
-
あなたの目の前には、新しい本が、まるごと一冊、開かれます。
これが、MPAの基本的な動作原理です。
ユーザーが、ページ上のリンクをクリックする、というアクションを起こすたびに、
-
ブラウザは、ページ全体を再描画（リロード）する。
-
サーバーは、リクエストのたびに、HTML、CSS、JavaScriptを、すべてゼロから生成し、クライアントに送り返す。
ライバルの登場：SPAとの決定的な違い
このMPAの対極にあるのが、現代のWebアプリケーションで主流となっている**「SPA（シングルページアプリケーション）」**です。
SPAは、図書館の例えで言うなら**「超高機能な、魔法の電子書籍リーダー」**です。
-
SPAの動き
-
最初に一度だけ、**書籍の骨格となる「器（からっぽのHTML）」と、「すべてのデータを表示するためのプログラム（JavaScript）」**を、リーダーにまとめてダウンロードします。
-
あなたが「会社概要」のリンクをタップすると、リーダーは、司書さん（サーバー）に**「『会社概要』の文章データだけください」**と、必要な部分だけをリクエストします。
-
リーダーは、受け取った文章データを使って、現在表示されている画面の、本文エリアだけを、プログラム（JavaScript）の力で、瞬時に書き換えます。
-
「GmailやGoogleマップって、なんであんなにサクサク動くの？」「ページを移動しても、画面が白くならないサイトがあるけど、どういう仕組み？」「SPA（エスピーエー）って聞くけど、普通のWebサイトと何が違うの？」 &nb[…]
MPAとSPAの決定的な違い
| 項目 | MPA (マルチページアプリケーション) | SPA (シングルページアプリケーション) |
| ページの構成 | 複数のHTMLファイル | 単一のHTMLファイル |
| 画面遷移の仕組み | サーバーが、ページ全体を生成して返す | **クライアント（ブラウザ）**が、データだけ受け取り、ページの一部を書き換える |
| 通信 | 同期通信（ページ全体の再読み込み） | 非同期通信 (Ajax) |
| ユーザー体験(UX) | 普通（ページ遷移ごとにもたつく） | 非常に高い（高速、スムーズ） |
| 開発 | シンプルで、分かりやすい | 複雑性が高い |
| SEO | 非常に有利 | 対策に工夫が必要 |
| 例えるなら | 伝統的な紙の本 | 魔法の電子書籍リーダー |
MPAでは、画面遷移の**「頭脳」はサーバー側にあります。
一方、SPAでは、画面遷移の「頭脳」はクライアント（ブラウザ）側のJavaScriptにあります。
MPAのメリット：なぜ、今もなお現役なのか？
「SPAの方が、ユーザー体験が良いなら、全部SPAにすればいいじゃないか」
そう思うかもしれません。しかし、MPAには、SPAにはない、明確で、強力なメリットが存在します。
だからこそ、今もなお、多くのWebサイトがMPAで作られているのです。
1. SEO（検索エンジン最適化）に非常に強い
最大のメリットです。Googleなどの検索エンジンのクローラーは、WebページのHTMLを読み込んで、その内容を評価し、検索順位を決定します。
MPAは、ページごとに、最初から内容がすべて記述された、完成品のHTMLファイルが存在します。
そのため、クローラーは非常に内容を理解しやすく、SEO上有利になります。
2. 開発がシンプルで、歴史が長い
各ページが独立しているため、構造が非常にシンプルで、理解しやすいです。
また、Webの黎明期から存在する技術なので、開発ノウハウや、利用できるツール（WordPressなど）が、世の中に豊富に蓄積されています。
3. 初期表示速度が速い
各ページは、そのページに必要な情報だけを含んでいるため、一般的にファイルサイズが小さく、ユーザーが最初のコンテンツを目にするまでの時間（初期表示速度）が、SPAに比べて速くなる傾向があります。
MPAのデメリット：失われた「スムーズさ」
ページ遷移ごとの、もたつき
リンクをクリックするたびに、サーバーとの通信と、ページ全体の再読み込みが発生するため、どうしても操作感が「もっさり」してしまいます。これが、ユーザー体験（UX）を損なう、最大のデメリットです。
サーバーへの負荷
リクエストのたびに、サーバー側でHTMLを生成する処理が走るため、アクセスが集中すると、サーバーへの負荷が高くなりがちです。
フロントエンドとバックエンドの密結合
見た目（HTML）を生成するロジックが、サーバーサイドのプログラム（PHP, Rubyなど）に組み込まれていることが多く、フロントエンドとバックエンドの役割分担が曖昧になりがちです。
どんなサイトが、MPAで作られているのか？
これらのメリット・デメリットを踏まえると、MPAは、以下のような特徴を持つWebサイトの構築に、非常に適しています。
コンテンツ（情報）そのものが、中心的な価値を持つサイト
- ニュースサイト、ブログ、メディアサイト：記事の内容が、SEOを通じて検索されることが、最も重要。
- 企業のコーポレートサイト、LP（ランディングページ）：会社の情報や、商品の魅力を、静的な情報として、確実に伝えることが目的。
非常に大規模で、情報階層が深いサイト
- ECサイト（Amazonなど）：商品数やカテゴリが膨大で、各ページが明確に独立している。
- Wikipedia
まとめ
**MPA（マルチページアプリケーション）**は、Webサイトの歴史そのものであり、今なおインターネットの大部分を構成する、**堅実で、信頼性の高い、Webの「王道」**です。
-
ページごとに、独立したHTMLファイルが存在する。
-
画面遷移のたびに、サーバーがページ全体を生成し、ブラウザが再読み込みする。
-
SEOに強く、開発がシンプルなのが最大のメリット。
-
ブログやニュースサイト、ECサイトなど、コンテンツ中心のサイトに向いている。
プログラミング初心者として、あなたがHTMLとCSSを学び、最初に作るWebページ。それは、まさしくこのMPAです。
このシンプルで、力強いWebの基本構造をしっかりと理解しておくこと。
それが、その先のSPAや、モダンなフロントエンド技術の価値を、より深く、そして正確に把握するための、揺るぎない土台となるでしょう。
フロントエンドエンジニアって実際どういう事をする人なの？ 具体的に何をつくっている人なんだろう 転職サイトでシステムエンジニアを検索するときの条件に「フロントエンド」や「バックエンド」といった言葉を目にし[…]
