フロントエンド開発の変遷シリーズ第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回はこちら