SPA と MPA を一言でいうと
SPA は Single Page Application(シングルページアプリケーション) の略で、
「最初に 1 つのページを読み込んだあと、画面の中身だけを JavaScript で差し替え続けるスタイル」です。
MPA は Multi Page Application(マルチページアプリケーション) の略で、
「画面を切り替えるたびに、サーバーから新しい HTML ページを丸ごと受け取るスタイル」です。
どちらも Web アプリですが、
「画面遷移を誰が担当するか(ブラウザか、JavaScript か)」
「HTML をどこで作るか(サーバーか、ブラウザか)」
が大きく違います。
MPA のイメージと Java との相性
MPA の基本イメージ
MPA は、昔からある「普通の Web サイト」のスタイルです。
リンクをクリックするたびに、ブラウザはサーバーに新しい URL でリクエストを送り、
サーバーは新しい HTML を返します。
ユーザーから見ると、
画面が「ページごとに切り替わる」感覚になります。
ブラウザの戻るボタンも素直に使えますし、URL と画面が 1 対 1 で対応しやすいです。
Java での典型:Spring MVC + テンプレート
Java では、Spring MVC とテンプレートエンジン(Thymeleaf など)を使うと、
MPA スタイルのアプリが自然に作れます。
例えば、ユーザー一覧と詳細画面を考えます。
GET /users で一覧ページ用の HTML を返すGET /users/{id} で詳細ページ用の HTML を返す
それぞれ別のテンプレートを用意し、
サーバー側で HTML を組み立てて返します。
画面遷移は「ブラウザが URL を変えて、サーバーから新しいページをもらう」だけなので、
構造がシンプルで、Java 初心者にも理解しやすいです。
SPA のイメージとフロントエンド中心の世界
SPA の基本イメージ
SPA は、「ページを切り替える」という感覚が薄くなります。
最初に index.html のような 1 枚の HTML と、
大量の JavaScript を読み込みます。
その後の画面遷移は、
URL は変わっても、
実際には JavaScript が画面の一部を差し替えているだけです。
ユーザーから見ると、
画面が「アプリっぽくぬるっと切り替わる」感覚になります。
スマホアプリに近い体験を Web で実現するイメージです。
フロントエンドフレームワークが主役
SPA では、React / Vue / Angular などのフロントエンドフレームワークが主役になります。
画面の状態管理
ルーティング(URL ごとの画面切り替え)
フォーム入力、バリデーション
API 呼び出しと結果の反映
これらをすべてブラウザ側の JavaScript が担当します。
バックエンド(Java)は、
HTML を返すのではなく、
JSON を返す REST API として振る舞うことが多くなります。
SPA と MPA の違いを「画面遷移」と「HTML 生成」で見る
画面遷移の違い
MPA:
リンクをクリックするたびに、ブラウザがサーバーに新しいページを取りに行きます。
画面全体がリロードされます。
SPA:
リンクをクリックすると、JavaScript が「今の画面を別のコンポーネントに差し替える」だけです。
画面全体のリロードは起きず、一部だけが書き換わります。
この違いが、
「ページ感のある Web サイト」か
「アプリっぽい動きの Web アプリ」か
という体験の差につながります。
HTML をどこで作るか
MPA:
HTML はサーバー側(Java)でテンプレートを使って生成します。
ブラウザは「完成した HTML」を受け取って表示するだけです。
SPA:
サーバーは JSON を返すだけで、
HTML はブラウザ側の JavaScript が組み立てます。
「データはサーバー、見た目はブラウザ」という分担がより強くなります。
Java 初心者がまずどちらを意識すべきか
まずは MPA で「Web の基本」をつかむのがおすすめ
Java をこれから学ぶ段階なら、
最初は MPA スタイル(Spring MVC + テンプレート)で、
HTTP リクエストとレスポンス
Controller/Service/Repository の 3 層
テンプレートエンジンでの HTML 生成
といった「サーバーサイド Web アプリの基本」を押さえるのが良いです。
MPA は、
URL と画面の対応が分かりやすく、
ブラウザの動きもシンプルなので、
「Web の仕組みそのもの」を理解するのに向いています。
そのあとで SPA を「バックエンド視点」で見る
次のステップとして、
「フロントエンドが SPA になったとき、Java バックエンドはどう振る舞うか」
を学ぶとバランスが良いです。
そのときの Java の役割は、
REST API を設計する
JSON を返す
認証・認可を API ベースで考える
といった「API サーバー」としてのバックエンドになります。
「画面はフロントエンドが全部やる。自分は API に集中する」
というモードに切り替わるイメージです。
SPA / MPA を自分の言葉で説明できるようにする
最後に、あなたの言葉でまとめるとこうなります。
MPA は、
「ページごとにサーバーから新しい HTML をもらうスタイル」で、
Java(Spring)で HTML を生成する構成と相性が良い。
SPA は、
「最初に 1 ページ読み込んで、あとは JavaScript が画面を差し替え続けるスタイル」で、
フロントエンドフレームワークが主役になり、
Java は JSON を返す API サーバーになる。
どちらも正解で、
「どんな体験を作りたいか」「チームのスキルセットはどうか」で選ぶ。
学ぶ順番としては、
まず MPA で Web と Java の基本を押さえ、
そのあと SPA を「バックエンドの立場から」理解していくのが現実的。
