【歴史】Reactが覇権を握るまでの知られざる物語【図解解説】

はじめに

こんにちは、Watanabe Jin(@Sicut_study)です。
普段はReactに関してのチュートリアルをたくさん投稿していて思いました。

「Reactを始めるなら歴史から学んだほうがよいのでは？」

そこでReactの歴史についてネットを調べていたところ
いまとなってはAIブームもあり覇権を握っていますが、リリース当初には全然開発者に好まれなかったという過去がありました。

そして調べていくうちにReactが映画のような大逆転劇を繰り広げたのです。
今回はそんな Reactが覇権を握るまでの歴史 を紹介します。

動画も力をいれて作成してますので、ぜひそちらで見てほしいです！！

↓↓↓

Reactが覇権を握るまでの物語

今日、私たちが当たり前のように使っているReact

Instagram、Netflix、Airbnbなど、日常的に利用するサービスの多くがReactで構築されています。

しかし、2013年5月にJSConf USで初めて公開されたとき、Reactは開発者コミュニティから激しく批判されました。

「これは大きな後退だ」
「こんなコードを誰が書くんだ?」

では、なぜ最初は嫌われたReactが、現在では最も人気のあるJavaScriptライブラリの一つになったのでしょうか?

目次

1. Reactが生まれる前 - 2010-2011年のウェブ開発
2. FaxJSの誕生 - Jordan Walkeの実験
3. JSConf US 2013 - 炎上した公開
4. Pete Huntの反撃 - Rethinking Best Practices
5. BSD+特許ライセンス問題 - 2016-2017年の危機
6. React Hooksの登場 - 2019年の革命
7. 現代のReact - フレームワーク時代
8. まとめ

1. Reactが生まれる前 - 2010-2011年のウェブ開発

2010年から2011年頃、ウェブ開発は混沌としていました。
当時最も人気があったのはjQueryで、DOM操作を簡単にし、ブラウザ間の互換性問題を解決してくれました。

しかし、jQueryには大きな問題がありました。
アプリケーションの状態(state)がDOMに散らばってしまい、コードが複雑になるにつれて保守が困難になったのです。

開発者たちはこれを「jQuery疲労」と呼びました。

この問題を解決するため、Backbone.jsが登場しました。
BackboneはMVCパターンを導入し、状態管理を改善しましたが、自由度が高すぎて初心者には難しいツールでした。

一方、AngularJSは「オールインワン」フレームワークとして登場し、双方向データバインディングなどの強力な機能を提供しました。しかし、アプリケーションが大規模になるとパフォーマンスの問題が顕在化しました。

2. FaxJSの誕生 - Jordan Walkeの実験

2010年頃、Facebookは急速に成長していました。
特にニュースフィードや広告システムのUIは複雑化の一途を辿り、管理が限界に達していました。

Facebookは既にXHPというPHP拡張を使用していました。X
HPはPHP内にHTML風の構文を書けるようにし、コンポーネント化された再利用可能なUIを作ることができました。

Facebook社内のエンジニアであるJordan Walkeは、XHPの思想をJavaScriptに持ち込めないかと考えました。彼はFaxJSという実験的なプロジェクトを開始します。公式ブログ「Our First 50,000 Stars」によると、FaxJSではReactの基礎となる概念の多くが生まれました:

props: コンポーネントに外部から情報を渡す仕組み
state: コンポーネントが内部で保持するデータ
差分検出(diff): 変更を効率的に検出する仕組み
サーバーサイドレンダリング: サーバー側でHTMLを生成

2012年3月、JordanはこのライブラリをFacebookのコードベースにインポートし、FBoltと名付けました。

そして2011年、Facebookのニュースフィードで初めて実戦投入されます。

Jordan Walke: "I might add for the sake of discussion, that many systems advertise some kind of reactivity, but they usually require that you set up some kind of point-to-point listeners and won't work on structured data. This API reacts to any state or property changes, and works with data of any form (as deeply structured as the graph itself) so I think the name is fitting."
（訳：「議論のために付け加えると、多くのシステムは何らかのリアクティビティを謳っていますが、通常はポイント・ツー・ポイントのリスナーを設定する必要があり、構造化されたデータでは機能しません。このAPIはあらゆる状態やプロパティの変更に反応し、どんな形式のデータ（グラフのように深く構造化されたもの）でも動作するので、この名前はふさわしいと思います。」）
出典: Our First 50,000 Stars - React Blog

こうしてFBoltは「React」と名付けられました。

Reactの最も革新的なアイデアは 仮想DOM(Virtual DOM) でした。

従来のアプローチでは、UIの一部を更新する際に「どの部分をどう変更するか」を細かく指定する必要がありました。しかしJordanは、　「データが変わるたびに全体を再レンダリングする」　という一見非効率なアプローチを考えました。

仮想DOMは、実際のDOMの軽量なコピーをメモリ上に保持します。

データが変更されると

1. 新しい仮想DOMツリーを作成
2. 古い仮想DOMと比較(diffing)
3. 変更された部分だけを実際のDOMに反映

これにより、開発者は「UIがどうあるべきか」を宣言的に記述するだけでよくなり、パフォーマンスも最適化されました。

3. JSConf US 2013 - 炎上した公開

歴史的な発表

2013年5月29日、JSConf USでTom OcchinoとJordan WalkeがReactを公開しました。

しかし、会場の反応は冷ややかでした。RisingStackのタイムラインによると

"The audience was skeptical. Most people thought React was a huge step backward."
（訳：「会場は懐疑的だった。ほとんどの人がReactは大きな後退だと考えた。」）

最も批判されたのがJSXでした。
JSXはJavaScript内にHTML風の構文を書ける仕組みです

function LikeButton() {
  return <button>Hello World!</button>;
}

従来、ウェブ開発では「HTMLとJavaScriptは分けるべき」という原則が絶対的なルールとされていました。これは「関心事の分離(Separation of Concerns)」と呼ばれ、何十年も信じられてきた設計思想です。

Reactはこの常識を真っ向から否定したのです。

当時の開発者たちの反応は

「HTMLとJavaScriptを混ぜるなんて、1999年に逆戻りだ」
「こんな汚いコードを誰が書くんだ?」
「これは大きな後退だ」

4. Pete Huntの反撃 - Rethinking Best Practices

2012年、FacebookはInstagramを買収しました。
Pete HuntというエンジニアがInstagramチームに加わり、「InstagramのウェブサイトをReactで完全に構築する」という大胆な計画を立てました。

この計画を実現するには、ReactをFacebook専用の技術からオープンソースにする必要がありました。

このプロジェクトが、Reactのオープンソース化への原動力となりました。

2013年9月14-15日、JSConfEUでPete Huntは「Rethinking Best Practices」という伝説的なトークを行いました。

Peteの主張は明確でした

「HTMLとJavaScriptを分けることは、『技術による分離』であって、『関心事の分離』ではない」

彼は具体例を示しました。

従来の分け方(技術で分ける)

index.html  → HTMLだけ
style.css   → CSSだけ
script.js   → JavaScriptだけ

「いいねボタン」を修正するには、3つのファイル全てを触る必要があります。関連するコードがバラバラです。

Reactの分け方(意味で分ける)

LikeButton.jsx    → いいねボタンに関することは全部ここ
CommentBox.jsx    → コメントに関することは全部ここ
UserProfile.jsx   → プロフィールに関することは全部ここ

関連するものが全て1箇所にまとまっています。これが真の「関心事の分離」だとPeteは主張しました。

実際のデモを見た開発者たちの反応は変わり始めました。今まで10行、20行書いていたコードが、数行で書けることが示されたのです。

手応えを感じたReactチームは、世界中でイベントを開催し、開発者たちに実際にReactを使ってもらいました。RisingStackの記事では

"The creators of React realized this mistake on time, and decided to start a 'React tour' later on to turn haters into advocates."
（訳：「Reactの開発者たちはこの間違いにすぐ気づき、後に『Reactツアー』を開始して、嫌悪者を支持者に変えることにしました。」）
出典: The History of React.js on a Timeline - RisingStack

このような地道な活動により、少しずつ理解者が増えていきました。

5. BSD+特許ライセンス問題 - 2016-2017年の危機

Reactが人気を集める中、2016年から2017年にかけて深刻な問題が表面化しました。
それはBSD+特許ライセンスです。

このライセンスには次のような条項がありました

"The license granted hereunder will terminate, automatically and without notice, if you (or any of your subsidiaries, corporate affiliates or agents) initiate directly or indirectly, or take a direct financial interest in, any Patent Assertion against Facebook..."
(訳：本ライセンスによって付与されるライセンスは、あなた（またはあなたの子会社、関連会社、代理人）が直接的または間接的にFacebookに対する特許侵害の主張を開始した場合、あるいはそのような主張に対して直接的な金銭的利害関係を持った場合、自動的かつ通知なしに終了します。)

簡単に言うと、 「Reactを使用している企業がFacebookを特許訴訟で訴えた場合、Reactの使用権を即座に失う」 というルールでした。

2017年7月、Apache Software Foundationがこのライセンスを「Category X」に分類し、Apacheプロジェクトでの使用を事実上禁止しました。

そして2017年8月、WordPressの創設者Matt Mullenwegが、新しいエディタGutenbergでReactの使用を中止すると発表。

WordPressは当時、世界中の膨大な数のウェブサイトで使用されており、これは大打撃でした。

開発者コミュニティは騒然としました

「Facebookはオープンソースを悪用している!」
「Reactから逃げろ!」
「Vue.jsやAngularに移行すべきだ!」

Facebookは窮地に立たされました。2017年9月23日、Adam Wolffが公式ブログで発表しました

"We've decided that we would relicense our open source projects React, Jest, Flow, and Immutable.js under the MIT license."
(訳：私たちは、オープンソースプロジェクトであるReact、Jest、Flow、およびImmutable.jsをMITライセンスの下で再ライセンス化することを決定しました。)
出典:Relicensing React, Jest, Flow, and Immutable.js

MITライセンスは、世界中で使われている最もシンプルで制限の少ないライセンスです。

この決断により、Reactは信頼を取り戻しました。むしろ、「コミュニティの声を真摯に聞く」という好印象さえ与えました。

6. React Hooksの登場 - 2019年の革命

2018年までに、Reactは業界標準になっていました。しかし、開発者たちは新たな課題に直面していました。

Reactには2種類のコンポーネントがありました

クラスコンポーネント

• stateを持てる
• ライフサイクルメソッドを使える
• しかし、書き方が複雑で初心者には難しい

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  render() {
    return <div>{this.state.count}</div>;
  }
}

関数コンポーネント

• 書き方がシンプル
• stateを持てない(stateless)

2019年2月6日、React 16.8がリリースされ、Hooksが正式に導入されました。

React v16.8: The One With Hooks

Hooksにより、関数コンポーネントでもstateを持てるようになりました

function Counter() {
  const [count, setCount] = useState(0);
  
  return <div>{count}</div>;
}

• useState: state管理
• useEffect: 副作用(データ取得など)の処理
• useContext: コンテキストの利用
• useReducer: 複雑なstate管理

公式ドキュメントでは、Hooksの導入理由が詳しく説明されています:

"Hooks are functions that let you "hook into" React state and lifecycle features from function components."
(訳：Hooksは、関数コンポーネントからReactのstateとライフサイクル機能に『フック（接続）する』ことを可能にする関数です。)

Hooksは、Reactの使い方をさらに革新しました。

7. 現代のReact - フレームワーク時代

2014年から2020年頃、Reactは主に SPA(シングルページアプリケーション) を構築するために使われていました。

しかしSPAには問題がありました

• 初期ロードが遅い: 全てのJavaScriptを最初に読み込む必要がある
• SEOに弱い: 検索エンジンがコンテンツを読み取りにくい

これらの問題を解決したのが、Next.jsやRemixといったフレームワークです。

• SSR(サーバーサイドレンダリング): サーバー側でHTMLを生成
• SSG(静的サイト生成): ビルド時にHTMLを生成
• ISR(インクリメンタル静的再生成): 静的生成とSSRのハイブリッド
• 自動的なコード分割とルーティング

2016年の登場以来、Next.jsはReactエコシステムの事実上の標準になりました。

今では「Reactを使う = Next.jsを使う」という開発者も多く、Reactはもはやライブラリというより、エコシステム全体として進化しています。

8. まとめ

Reactの歴史から学べることは多くあります。

1. イノベーションは批判から始まる
最初は理解されなくても、本当に良いものなら、いつか必ず認められます。

2. コミュニティとの対話が重要
ライセンス問題で見せたように、コミュニティの声に耳を傾け、柔軟に対応することが信頼につながります。

3. 常識を疑う勇気
「関心事の分離」という長年の常識に挑戦したからこそ、新しい世界が開けました。

4. 進化し続ける
HooksやServer Componentsなど、Reactは常に進化を続けています。

おわりに

いかがでしたでしょうか？
Reactははじめからうまくいっていたライブラリではなく、裏ではものすごいドラマがありました。歴史を知ることでよりReactを好きになれたのではないでしょうか？

詳しく解説した動画を投稿しているのでよかったらみてみてください！

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

図解ハンズオンたくさん投稿しています！

参考文献