1.4 React の登場 (2013) — Facebook の動機
ここは、前章で見た「命令的 UI の限界」に対して、Facebook がどう応えたかを具体的にたどる章です。人の顔と時系列が出てくるので、物語を追うつもりで読んでみてください。
まず、この章で伝えたいことを 1 行で言います。
React は実験作ではなく、Facebook が自社の本番で数年間使い込んだ「設計思想の公開」としてリリースされました。
React は 2013 年 5 月 29 日、Facebook の JSConf US 2013 での発表と合わせてオープンソースとして公開されました。開発者は Facebook のソフトウェアエンジニア Jordan Walke。React は「ある日 GitHub に現れた実験的ライブラリ」ではなく、Facebook が社内で数年間使い込んだ上で公開したプロダクトだった、という事実を押さえるのがこの章のポイントです。
公開までの時系列
一次資料から確認できる事実を並べます。
- 2011 年 — React の前身が Facebook の News Feed で初めてデプロイされる
- 2012 年 — Instagram (Facebook が 2012 年 4 月に買収) に React が統合される
- 2013 年 5 月 29 日 — JSConf US 2013 で Jordan Walke が発表、同時にオープンソース化
- 2013 年 6 月 5 日 — Pete Hunt が legacy ブログに "Why did we build React?" を投稿
- 2013 年 5 月 — 初期ライセンスは Apache License 2.0
- 2014 年 10 月 — 3-clause BSD License に変更
- 2017 年 9 月 26 日 — React 16.0.0 と合わせて MIT License に変更
ライセンス履歴は案件で採用判断を求められたとき役に立つので、ここに残しておきます。
図 1.4.1 React 誕生のタイムライン
Facebook が解こうとしていた問題
Facebook は 2010 年代前半、News Feed を始めとする巨大な SPA を抱えていました。当時の UI 開発では、前章 1.3 命令的 UI の限界 で見た 2 つの苦しみが深刻化していました。
- データが変わったときの UI 同期が手作業 — 未読バッジ、通知、投稿本体など、同じデータに依存する UI が複数箇所にあり、それを全部手で更新する必要があった
- テンプレート言語とロジックの分離 — 当時は MVC や MVVM で「テンプレート (View) とロジック (Controller) は分けるべし」という建前が強く、その結果 View と Controller の間で状態の受け渡しコードが増殖していた
React 公式ブログ (2013-06-05) は、この点にはっきり反旗を翻しています。
We've found that with React we were able to tackle this problem by building components. By letting a single component represent both the view and the logic needed to generate it, we can greatly reduce, and sometimes eliminate, much of the glue code that tends to build up in traditional MVC applications.
— Pete Hunt, "Why did we build React?" (2013-06-05)（要旨）
つまり React は、「View と Logic を 1 つのコンポーネントの中に一緒に置く」 という、当時としてはやや異端の判断を選びました。これは翌年に登場する JSX (HTML のような構文を JavaScript の中に書けるようにした仕組み、Part 3.2 で詳説) にもつながります。
図 1.4.2 MVC と React の関心分け方の違い
左の MVC では、View と Controller が別ファイル・別層にあり、その間をつなぐ「glue code」(状態を View に渡す・View の操作を Controller に伝える) が増殖しがちでした。React は右のように、1 つのコンポーネントの中で両者を一緒に扱うことで、この glue code を減らそうとした、と考えてみてください。
発表時に出したキー概念
公開時のブログから、React が新しく持ち込んだ概念を整理します。
コンポーネント
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.
— 同上
UI を「再利用可能な部品の合成」として組み立てるという発想は、React 以前にもありました (Web Components、Backbone の View など)。React の新しさは、「データが時間とともに変わること」を前提にコンポーネントを設計した点にあります。
データは一方向に流れる (単方向データフロー)
In React, props flow from the parent down to children.
— 同上 (要旨)
親コンポーネントから子コンポーネントへ props というデータが流れ、逆は基本的にない、という 単方向データフロー を、React は最初から採用しました。これは当時広がっていた双方向バインディング (AngularJS の ng-model など) とは対照的な設計判断でした。
render は副作用のない関数
The data returned from
renderis neither a string nor a DOM node — it's a lightweight description of what the DOM should look like.— 同上
開発者が書くのは「この状態なら UI はどうあるべきか」を返す関数だけ。DOM を直接触る必要はなく、React がその関数の返り値を見て差分を計算し、実 DOM に反映します。
図 1.4.3 React が開発者に求める書き方
開発者が書くのは上段の 状態 → UI の記述 までで、下段の UI の記述 → 実 DOM は React が全部面倒を見る、という分担です。
「なぜ Facebook が作ったか」への答え
公開時のブログは、最後に React を採用すべき理由を 3 つ挙げています。
- 宣言的: データが変わると UI がそれに従って更新されるので、「イベントハンドラで DOM をどう書き換えるか」を書かなくて済む
- コンポーネントベース: UI が再利用可能なコンポーネントの合成で表現できる
- Learn once, write anywhere: React Native (後の 2015 年) やサーバーサイドレンダリングなど、同じ考え方で Web 以外にも展開できる
3 点目は React 自身の GitHub リポジトリの README でも主要なメッセージとして据えられており、React の公式スローガンです。
Declarative · Component-Based · Learn Once, Write Anywhere
— facebook/react README (抜粋)
当時受け入れがたかった点
React は登場時、次の 2 点で多くの開発者に違和感を持たれました。最初は違和感があるのが自然なところなので、「なるほど、ここで揉めたのか」と眺めてみてください。
- JSX: HTML のような構文を JavaScript の中に書く。これは当時の MVC 原理主義 (View と Logic を分けるべき、マークアップは HTML ファイルに書くべき) と正面衝突しました。公式はこれを「関心事の分離であって、技術の分離ではない」と主張しました。
- Virtual DOM: 毎回 UI を全部作り直す、というアイデアは「無駄が多い」と受け取られました。公式は「実 DOM に触るのはコストが高いが、JS オブジェクトの比較は速い」と応答しました。
この 2 点への説得が、後の数年の React コミュニティの主要な説明テーマになりました。Part 3.2 と Part 6.1 で改めて掘り下げます。
内部から外へ — React は思想の公開だった
Facebook が自社の News Feed と Instagram で 2 年ほど使い込んだ上で 2013 年に公開した、という時系列は重要です。React は「アイデアを試すために公開された実験」ではなく、「本番で動いているものの思想を公開した」ライブラリでした。これが 2013〜2015 年の普及速度の速さに影響していると考えられます。
次章では、2013 年から 2026 年までに React を取り巻くエコシステムがどう広がったか、現在どこから学び始めるのが妥当かを整理します。
1.5 エコシステムの現在地 (2026) に進んでください。
参照ソース
- React 公式ブログ (legacy): Why did we build React? (2013-06-05, Pete Hunt)
- facebook/react — GitHub リポジトリ README
- Wikipedia — React (software)（Jordan Walke、2013-05-29 JSConf US での公開、ライセンス履歴の確認）