React

「React」は「反応する（React）」を意味します。データの変化に対してUIが「反応する」、すなわち状態（state）が変わると自動的に画面が再描画されるという、ライブラリの中心思想がそのまま名前になっています。同時期にAngularJSが「双方向データバインディング」で似た領域を扱っていましたが、Reactはより軽量で「単方向データフロー」を採用した設計でした。

Reactの原型は2011年、Facebookの広告管理ツール「Ads Manager」のために、FacebookエンジニアのJordan Walkeさんが社内プロトタイプとして書きました。当時Facebookのフィード（Newsfeed）はjQuery等を使った複雑なDOM操作で構築されており、機能追加のたびに不具合が頻発していました。

Jordan Walkeさんは「画面の状態をプログラム上の状態と一致させる仕組み」を作りたいと考え、PHPのXHP（PHP内にHTMLを書ける拡張）に着想を得て、JavaScriptでも同様のことを実現する仕組みを作りました。これがReactの直接的な祖先です。

2013年5月のJSConf USで、Facebookエンジニアのピート・ハント（Pete Hunt）さんがReactを公に発表しました。当時の開発者の最初の反応は懐疑的でした。「JavaScriptの中にHTMLを書く（JSX）なんて気持ち悪い」「双方向データバインディングのほうが直感的だ」というコメントが多く寄せられました。

しかしReactは「Instagram全体（2014年）」「Facebookのコメントシステム」「Khan Academy」など、実プロダクトでの実績を積み重ね、2015年頃から急速に支持を広げていきました。AngularJSの「ダイジェストサイクル」が大規模アプリで性能問題を起こしていたこと、Reactの「仮想DOM + 単方向データフロー」がスケーラビリティで優れていたことが背景にあります。

Reactの設計哲学は以下の3点に集約されます。

• コンポーネントベース: UIを再利用可能な小さな部品に分割。HTMLの拡張ではなく、関数（またはクラス）としてUIを表現する
• 単方向データフロー: 状態が変わるとUIが再描画される。逆方向（UIの変更が状態を直接書き換える）はpropsとして明示的に渡す。データの流れが追いやすい
• 仮想DOM: 実際のDOMではなくJavaScriptオブジェクトとして「画面の理想的な状態」を保持。差分計算で必要な部分だけ実DOMに反映するため高速

2018年に登場したReact Hooks（useState・useEffect等）は、それまでのクラスコンポーネント中心の設計から関数コンポーネント中心の設計への大きな転換でした。クラスベースOOPに依存しない、関数型寄りの設計に振り直したことで、コードがより簡潔になりました。

Reactはフロントエンドフレームワークの代表格として、現在最も広く採用されているライブラリのひとつです。Facebook・Instagram・WhatsApp・Netflix・Airbnb・Uber・Twitter (X)・Discord・Slack・Dropbox・Tesla・GitHubなど、世界中の大規模サービスでReactが採用されています。

React単体は「UIライブラリ」であり、ルーティング・SSR・データ取得などは別のライブラリ（Next.js・Remix・React Router・SWR・TanStack Queryなど）と組み合わせて使われます。Meta社は2022年以降「React単体の利用は避け、Next.jsなどフルスタックフレームワークを使うこと」を公式ドキュメントで推奨するようになり、React + Next.jsの組み合わせが現代の主流となっています。

競合としてVue（Evan Youさんが2014年公開、Reactから影響を受けつつ独自進化）・Svelte（コンパイラ方式）・Solid.js（細粒度リアクティビティ）などがありますが、エコシステムの広さと採用事例の多さでReactが先頭を走っています。

ReactのJSX・コンポーネント・Hooks・状態管理・実用パターンはReact辞典で詳しく解説しています。