フロントエンド開発の変遷シリーズ第3回です。
第2回はこちら。

SPA（シングルページアプリケーション）とは、起動時に一度HTML全体をロードし、以後はユーザーインタラクションに応じてAjaxで情報を取得し、動的にページを更新するWebアプリケーションのこと。

	説明
従来のWebアプリケーション	HTML全体をページ遷移の度に読み込む
SPA	ページ遷移をクライアントサイドで行う。Ajaxを使用して必要な時に必要な部分だけデータを取得してViewを表示するため、オーバーヘッドが軽減される

従来型のWebアプリケーションよりも、より高速なUIの動作を実現でき、ネイティブアプリのような、より滑らかなユーザー体験を提供できる。現在では多くのWebアプリケーションがSPAで実装されている。

また、SPAの流行に合わせてサーバーサイドの実装も変化しています。SPA以前はJavaのStrutsや、Ruby on RailsなどのサーバーサイドのMVCフレームワークが備えているビューの機能によってUIを実装するのが一般的でした。この形式では、サーバーサイドがビュー（HTMLの生成）までを担当し、都度HTMLをクライアントサイドに渡していた。

SPAの登場によりJSON形式のAPIがサーバーサイドとフロントエンドのつなぎを担うという設計が普及した。サーバーサイドはJSONをクライアントサイドに渡し、そのJSONをもとにクライアントサイドはビューを構築する。HTMLを逐一渡すのに比べ、JSONを渡す場合はビューの部分的な更新・高速な更新が可能になるメリットがあります。

Webフレームワークのスタイル	フロントエンドの役割	サーバーサイドの役割
SPA以前	補助的・限定的	MVC全てを担う。HTMLの生成までを担当。
ReactなどのSPA	ビューの構築などの大きな役割を果たす	シンプルな実装が好まれるように。JSONを返す。

SPAを導入するメリットとデメリット

メリット

ハイパフォーマンスなアプリケーションを提供できる
サーバーサイドエンジニアとフロントエンドエンジニアの分業が容易になる
JSON APIによる疎結合の設計ができる
iOSやAndroidなどネイティブアプリクライアントに対してもAPIによる疎結合なシステム構成が対応可能になる

デメリット

JavaScriptの読み込みとレンダリングが発生するため対策しないと初期表示に少し時間がかかる
フロントエンドの学習コストが高い
フロントエンドのコード量が多くなる
経験のある人材の採用が難しい

SPAを支える技術要素

URLパスとViewのルーティング管理
クライアントサイドでのブラウザ履歴管理によるページ遷移
非同期によるデータ取得
Viewのレンダリング
モジュール化されたコードの管理

Reactはこの中でView関連に注目したライブラリ。そのためReact Routerなどのルーティング機能を持つライブラリを利用してSPAを実装するのが一般的。

第4回はこちら