1.1 Web 開発の進化 — 静的 HTML から SPA まで

ここは Part 1 の最初の章です。React の話に入る前に、その「前史」を一緒にざっと眺めます。急がず、気楽に読み進めてみてください。

まず、この章で伝えたいことを 1 行で言います。

Web フロントエンドは「サーバーが HTML を作る時代」から「ブラウザが JavaScript で画面を組み立てる時代」へと段階的に移ってきました。

この流れを知っておくと、次章以降で出てくる「jQuery の世界」や「SPA の苦しみ」が、なぜ生まれたのかが掴みやすくなります。

Web の始まり (1989〜1995)

World Wide Web の出発点は、1989 年 3 月、CERN の Tim Berners-Lee が "Information Management: A Proposal" という文書を CERN 内部で回覧したところです。1990 年 11 月には最初のブラウザ WorldWideWeb と最初の Web サーバーが動き始めました。1993 年 4 月 30 日、CERN は Web 技術を誰でも自由に使えるものとして公開し、1994 年 10 月 1 日に W3C が設立されます。

この時期の Web ページは、基本的に 静的な HTML ドキュメント でした。URL を指定するとサーバーからファイルが返り、ブラウザがそれをレンダリングする、それだけです。リンクをクリックするたびに画面全体が再読み込みされ、インタラクティブ性はほとんどありませんでした。紙の本のページをめくる感覚に近い、と考えてみてください。

サーバーサイドでページを生成する (1995〜2005)

90 年代後半になると、CGI、PHP、Perl、Java Servlet / JSP、Ruby on Rails などによる サーバーサイドレンダリング (SSR) が主流になっていきます。フォームが送信されるたびにサーバーがテンプレートに値を差し込んで HTML を生成し、ブラウザはそれを受け取って表示する、というモデルです。

この時代、ブラウザ側の JavaScript が担うのは「簡単な入力チェック」「マウスオーバーで画像を差し替える」程度の補助的な役割でした。状態はサーバー側のセッションに持ち、画面が切り替わるたびに全ページリロードがかかるのが普通の世界です。

図 1.1.1 画面遷移のリクエスト・レスポンス

毎回ページ全体が送られ、ブラウザは都度まっさらな状態から描画をやり直します。ここは、リンクをクリックするたびにブラウザがページをリセットする世界だと思ってみてください。

Ajax の衝撃 (2005〜)

転機は 2005 年 2 月 18 日。Jesse James Garrett が "Ajax: A New Approach to Web Applications" を公開した日です。「Ajax」は Asynchronous JavaScript and XML の略で、ページを遷移せずに JavaScript からサーバーに HTTP リクエストを投げ、返ってきたデータで画面の一部だけを書き換える手法を指します。

技術基盤自体は Ajax 命名より前からあり、1999 年 3 月の Internet Explorer 5.0 で XMLHttpRequest が MSXML ライブラリの一部として導入されたのが始まりです。その後 Mozilla、Safari、Opera、Chrome が同等の API を実装していきました。「Ajax」という呼び名と実装パターンは、2004 年の Gmail、2005 年の Google Maps といった Google のプロダクトで衝撃的に普及しました。

MDN の現行ドキュメントは、当時の事情をこう記述しています。

In the early days, this general technique was known as Asynchronous JavaScript and XML (AJAX), because it tended to request XML data. This is normally not the case these days (you'd be more likely to request JSON), but the result is still the same, and the term "AJAX" is still often used to describe the technique.

— MDN "AJAX"

つまり「XML」の部分はもはや字義どおりではなく、やり取りするデータは JSON が主流です。ただ「ページを遷移せずに JavaScript でサーバーと非同期通信し、画面の一部だけを更新する」というアイデア自体は、その後の Web の基本形になりました。

図 1.1.2 全ページリロードと Ajax の違い

右の「必要な部分だけ更新」が当時とても新鮮に受け取られました。画面がチカッと白くならずに、データがスッと差し替わる体験は、Web アプリケーションの感触をデスクトップアプリに近づけた大きな一歩でした。

Single-Page Application (SPA) の登場 (2008〜)

Ajax の一般化によって、ページ遷移を一切せずに 1 枚の HTML の上で画面全体を JavaScript で組み立てる という発想が現実的になります。これが Single-Page Application (SPA) です。

MDN の定義はこうです。

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as Fetch when different content is to be shown.

— MDN "SPA"

SPA では、ブラウザは最初に 1 枚の HTML (とそれに紐づく JS / CSS) だけをロードし、その後の画面の切り替えはすべてクライアント側の JavaScript が担います。サーバーはデータを JSON API として返すだけで、HTML を組み立てる責務は持ちません。責任の場所がサーバーからブラウザに移った、と捉えてみてください。

図 1.1.3 SSR と SPA の通信パターン

SPA の代表的なフレームワークとしては、Backbone.js (2010-10-13 初版)、AngularJS (2010-10-20 初版)、Ember.js (2011-12-08 初版)、そして本サイトの主題である React (2013) が登場します。それぞれアプローチは違いますが、「クライアント側で動的に UI を組み立てる」という方向は共通でした（初版日は各プロジェクトの Wikipedia infobox に基づきます）。

SPA が抱え込んだ問題

SPA は一見スマートに見えますが、サーバーサイドレンダリング時代には存在しなかった問題を持ち込みました。ここは初学者がよくつまずく部分なので、少しだけ丁寧に並べます。

• 状態管理: 画面遷移しないので、画面のあらゆる状態を JavaScript のメモリ上に保持する必要があります。変数が増え、どこで何が変わったか追うのが難しくなります。
• DOM と状態の同期: モデル (データ) が変わったとき、対応する DOM をどう書き換えるか。これを手で書くと、条件分岐と更新処理が指数関数的に増えていきます (次章 1.2 DOM を直接触る世界 と 1.3 命令的 UI の限界 で掘り下げます)。
• SEO: 初回ロード時にコンテンツが空の HTML しか返さないため、検索エンジンのクローラーがインデックスしにくい、という問題がありました (この点は後の Server-Side Rendering フレームワークや、Part 5 で扱う Server Components に繋がります)。
• 初回ロードの重さ: アプリ全体の JavaScript を最初に送る必要があり、バンドルサイズとパフォーマンスの戦いが始まりました。

MDN の SPA の項でも、デメリットとして「SEO への対応が複雑」「状態管理に手間がかかる」「ナビゲーション実装の複雑さ」「パフォーマンス監視の難しさ」が挙げられています。

本サイトの立ち位置

本サイトが扱う React は、この SPA の流れの中で生まれた「宣言的に UI を組み立てるためのライブラリ」です。ただし 2020 年代に入ってから、React は SPA に閉じず、Server Components や Next.js を通じてサーバーサイドレンダリングと融合する方向にも進んでいます。Part 5 で詳しく扱います。

次章では、SPA 以前〜初期の Web で広く使われ、DOM を直接触る文化を作った jQuery の世界を見ていきます。

1.2 DOM を直接触る世界 — jQuery 時代の開発 に進んでください。

参照ソース

• W3C — A Little History of the World Wide Web
• MDN — AJAX (Web Guide)
• MDN — SPA (Glossary)
• Wikipedia — Ajax (programming)（Jesse James Garrett 2005-02-18 の記事の日付、Gmail 2004 / Google Maps 2005 の事例を二次参照として確認）
• Wikipedia — Backbone.js（初版日 2010-10-13）
• Wikipedia — AngularJS（初版日 2010-10-20）
• Wikipedia — Ember.js（初版日 2011-12-08）