この記事について
この記事の内容は、かつて社内の技術共有の場で共有した内容。
以下共有対象の開発チームについての前提
- 自社のWebアプリケーションは伝統的なBackendでHTML生成 + jQueryという構成
- 画面の一部jQueryで非同期に更新しているが、基本はサーバー側でHTML生成して返す
- SPAという言葉は知っている（はず）が、技術要件などは共有されていない
Wikipedia の定義
Single Page Application の略。
Wikipedia
シングルページアプリケーション（英: single-page application、SPA）とは、単一の Web ページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供する Web アプリケーションまたは Web サイトである。必要なコード（HTML、JavaScript、CSS）は最初にまとめて読み込むか[1]、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う。
→ ここでいう「単一の Web ページ」とは単一の HTML のこと
狭義の SPA は大体下の 3 点を満たす
- Client 側（ブラウザ）での HTML 生成 - VirtualDOM、宣言的 UI / 命令的 UI みたいな言葉で議論されるのはここ。React や Vue はここ
- Client 側（ブラウザ）での状態管理（State/Store） - MV〇や Flux などで議論されるのは主にここ。Redux や RxJS、VueX、Flux（実装）はここ。サーバーサイド MVC からクライアントサイド MVC へ(=アプリケーションステートの管理をフロント側が担うようになる)
- Client 側（ブラウザ）でのルーティング - react-router、Vue-Router はここ
Not SPA の場合
SPA ではない Web サイト／アプリの場合
- ユーザーがブラウザに URL を入力する（request 発行）
- サーバー側の処理で HTML を生成する。その過程で DB への通信なども行われる。
- DBから取得したユーザー固有の情報やユーザーの入力／操作／画面などのアプリケーションの状態をサーバー側で保存・管理する（所謂セッション）
- サーバー側で管理している「アプリケーションの状態」に応じて、サーバー側でHTMLを生成（jspとか）
- クライアント側（ブラウザ）へ生成した HTML を返す（response）
- ブラウザはサーバーから返ってきた HTML を頭から読み込み必要なリソース（JavaScript や CSS 等）を要求する request を発行する
- 必要なリソース（JavaScript,CSS,png など）がすべて Client 側で読み込まれたとき、ページの表示が完了する
- リンク等（
<a href="hogehoge">）をクリックした際には上記 1 から 6 が繰り返される（← ここが SPA との大きな違い）
SPA の場合
- ユーザーがブラウザに URL を入力する（request 発行） - 同じ
- 大体の場合サーバーが返す HTML は Static でアプリケーションを表示するための
ガワだけ持っている（<body><div id="app-root"></div></body>みたいなの） - ここが違う - クライアント側（ブラウザ）へ（Static な）HTML を返す（response） - 同じ
- ブラウザは response の HTML を読み込み必要なリソース（JavaScript や CSS 等）を要求する request を発行する - 同じ
- ここで要求される JavaScript によって HTML 内の
ガワに画面に必要な要素が生成される - ここが違う。画面の生成は Client 側の JavaScript- ユーザーの入力／操作など状態として保存しておきたいものはClient側で「アプリケーションの状態」として保存しておく（state/store）
- リンク等をクリックした際には 5 で読み込んだ JavaScript で
ガワの中身を書き換える。検索結果など動的に変わるものは、その結果を要求する request を発行する（非同期でデータだけ持ってくる） - ここが違う。大体の場合 JSON の配列で結果が返ってくる- 「リンクをクリックしたからリクエストを発行する」のではなく、「表示するコンポーネント内に動的なもの（検索結果とか最新のニュース記事とか）を表示したいから、その情報を取得するためのリクエストを発行する」ということ。
- この「リンクをクリックしたときに表示したいコンポーネントを指定する」時に使われるのがreact-routerとかvue-router
- DBからのデータ取得はバックエンド側でWebAPIとして実装される
SPA のメリット
- 宣言的UIやFluxなど、開発体験が良い（個人差あり）
- Web アプリケーション（≠Web サイト）ではほぼ標準に近い
SPA のデメリット
- (工夫をしないと)最初の読み込み時に大きなJavaScriptファイルを読み込むことになるので、そこに時間はかかる
まとめ
- SPAではかつてサーバー側で実装されていた、1.画面の動的な生成、2.アプリケーションの状態管理、をどちらもクライアント側で実装する
- かつてバックエンド側で、ORMとかDB用のライブラリとかを使ってDBからデータを取得していた部分を、WebAPIとして実装。
- （多分語弊がある）かつてのWebサーバー＝今のフロントエンドのプロジェクト、かつてのアプリサーバー＝上記のようなWebAPIサーバー
- フロントエンドのリポジトリの目的は、Webサーバーに配置するStaticなリソース群（実際はCDNからユーザーへ配信される）をビルドすること
- staticなindex.html、各種画像やfavicon、webpackでビルドされるbundle.js(app.js)
- 最終的には、SPA ＋ Serverless WebAPIになる（多分）