本記事の目的
最近のWeb開発でよく使われる
「RESTful API + SPA」構成について、初心者向けに解説します。
前回の記事では MVC モデルについて説明しましたが、
本記事では
- なぜ MVC から RESTful API + SPA に進化したのか
- RESTful API と SPA はそれぞれ何をしているのか
をイメージできるようになることを目標とします。
※ 本記事では、Webアプリの基本構造として MVC モデル を理解していると、
RESTful API + SPA の役割分担がより分かりやすくなります。
MVC モデルについては、以下の記事で初心者向けに解説しています。
▶︎ 【Web】MVC モデルとは
RESTful API とは？
RESTful API とは、
データのやり取りに特化したAPI です。
HTML（画面）を返すのではなく、
JSONなどの形式で データのみ を返します。
RESTful API の特徴
- URLは「リソース（データ）」を表す
- HTTPメソッドで操作内容を表す
| 操作 | HTTPメソッド | 内容 |
|---|---|---|
| 取得 | GET | データを取得する |
| 登録 | POST | データを新規作成 |
| 更新 | PUT / PATCH | データを更新 |
| 削除 | DELETE | データを削除 |
RESTful API は
「どんなクライアントから呼ばれても同じデータを返す」
という特徴があります。
SPA とは？
SPA（Single Page Application）とは、
ページ遷移をJavaScriptで制御するWebアプリ です。
最初に1枚のHTMLを読み込み、
その後は画面の切り替えをJavaScriptで行います。
SPA の特徴
- ページ全体を再読み込みしない
- 画面操作がスムーズ
- React / Vue / Angular などが代表例
RESTful API + SPA の全体像
この構成では、役割が明確に分かれます。
-
バックエンド：RESTful API
→ データの取得・更新を担当 -
フロントエンド：SPA
→ 画面表示・ユーザー操作を担当
SPA が RESTful API を呼び出し、
取得したデータを元に画面を更新します。
MVC との違い
MVC では、サーバーが画面（HTML）を生成するケースが一般的でした。
一方、RESTful API + SPA では、
| 項目 | MVC | RESTful API + SPA |
|---|---|---|
| 画面生成 | サーバー | フロントエンド |
| データ提供 | Model | RESTful API |
| 役割分担 | やや密結合 | 明確に分離 |
役割を分離することで、
フロントエンドとバックエンドを独立して開発しやすくなります。
メリット
ユーザー体験（UX）の向上
画面遷移時にページ全体を再読み込みしないため、
操作がスムーズです。
開発の分業がしやすい
- フロントエンド担当
- バックエンド担当
といった形で、チーム開発がしやすくなります。
APIの再利用が可能
同じ RESTful API を
- Webアプリ
- スマホアプリ
- 外部サービス
などから利用できます。
デメリット
構成が複雑
MVCに比べて、
- フロントエンド
- バックエンド
- API通信
と理解すべき要素が増えます。
学習コストが高い
JavaScriptやフレームワーク（React / Vue など）の知識が必要になり、
初心者には難しく感じることがあります。
向いているケース
- 操作の多いWebアプリ
- スマホアプリ展開を想定している
- 中〜大規模開発
向いていないケース
- 小規模な管理画面
- 画面数の少ないシンプルなアプリ
まとめ
RESTful API + SPA は、
- データ担当（API）
- 画面担当（SPA）
を分離した、現代的なWebアーキテクチャです。
最初は難しく感じますが、
MVCを理解した後に学ぶことで、
Webアプリ全体の構造がよりクリアになります。