Reactはなぜ世界でここまで採用されたのか

ReactとVueを並べると、現代的なWebアプリで必要な機能はかなり近いです。コンポーネント指向、状態管理、TypeScript対応、SSR、再利用可能なロジックの抽出など、主要論点はどちらも押さえています。それでも世界的な採用規模は大きく違います。

数字を見ると差ははっきりしています。Stack Overflow Developer Survey 2025のWeb frameworks and technologiesではReactが44.7%、Vue.jsが17.6%でした。2024年も同調査でReact39.5%、Vue.js15.4%です。さらにState of JS 2024のFront-end Frameworks Used at WorkではReact67%、Vue31%でした。まずここから言えるのは、React優勢は印象論ではなく、実際にかなり大きな差として観測されているということです。

では、なぜここまで差が開いたのか。この記事では、公式docsと調査データをもとに、次の順で整理します。

ここで書く開発体験とは、日々の実装で感じる扱いやすさのことです。
たとえば、書きやすさ、型の扱いやすさ、副作用の整理のしやすさを指しています。

• Reactが機能差だけで勝ったわけではない
• JSXの記法とライフサイクル周りの開発体験は確かに重要だった
• ただし決定打は、その開発体験がエコシステムと採用市場で自己増殖したことだった

まず確認したい事実。Reactだけが多機能だったわけではない

Vue公式docsのComposition API FAQは、Composition APIがReact Hooksと同程度のロジック合成能力を持つと説明しています。あわせて、状態を持つロジックの用途を広くカバーできるとも述べています。さらに、ロジックの再利用、柔軟なコード整理、TypeScriptとの相性を利点として挙げています。

つまり、少なくともVue3以降を前提にすると、「Reactのほうが圧倒的に多機能だから世界で勝った」とは言いにくいです。実際の現場では、業務アプリ、管理画面、EC、メディア、SaaSのフロントエンドで必要になる主要機能は、両者でだいたい実現できます。

この前提は大事です。機能差が小さいのに採用差が大きいとき、勝敗を決めるのはAPIの有無ではなく、開発体験、既存資産とのなじみ、周辺ライブラリ、採用市場のような要素だからです。

JSXは大きな要因だった。ReactはUIを「JavaScriptの問題」として扱いやすかった

ここはかなり重要です。React公式docsのWriting Markup with JSXは、Webがインタラクティブになるにつれ、ロジックがコンテンツを決めるようになったと説明しています。そのため、Reactではrendering logicとmarkupを同じ場所に置きます。React公式トップページでも、条件分岐はif、リスト描画はmapを使えばよいと案内しています。

この設計は、大規模なJavaScriptコードベースとかなり相性が良いです。

• JSXだと、条件分岐、配列処理、高階関数、変数スコープ、importとexportといったJavaScriptの道具をそのままUI記述に持ち込める
• template専用の文法とJavaScriptの境界をまたぐ回数が減る
• UIをコンポーネントライブラリや関数抽象化として扱いやすい
• TypeScriptやIDE補完も、JavaScriptの延長として理解しやすい

特に英語圏の大規模プロダクトやデザインシステムでは、この「UIをほぼ普通のJavaScriptとして扱える」感覚が強かったはずです。HTMLに近い見た目の分かりやすさより、抽象化の自由度を優先するチームでは、JSXはかなり強いです。

もちろん、JSXが万人にとって書きやすいわけではありません。Vueのtemplateを見通しやすいと感じる人も多いです。ただ、世界的な採用の話では「初学者にやさしいか」よりも「大規模なJavaScript開発文化とどれだけ自然につながったか」が効きました。そこではJSXの記法がかなり有利でした。

ライフサイクル周りの開発体験は「簡単だった」より「ルール化しやすかった」が近い

ここは少し分解して見たほうが正確です。分かりにくくなりやすいのは、Reactが昔ながらの「マウント時」「更新時」という言葉だけではなく、「何がきっかけで動く処理か」で整理しているからです。

React公式docsのSynchronizing with Effectsは、コンポーネント内ロジックを3種類に分けています。rendering code、event handlers、Effectsです。rendering codeはpropsとstateからUIを計算する部分です。event handlerはクリックや入力のような特定の操作をきっかけに動きます。Effectはrenderのあとに走り、Reactが直接管理していない対象へ状態を合わせます。

ここで言う「Reactが直接管理していない対象」には、ブラウザのDOM API、setInterval()のようなタイマー、スクロールイベント、WebSocket接続が含まれます。別サーバーとの通信も同じです。要するに、Reactのstateやpropsの外側にあるものです。

この位置関係は、図にすると分かりやすいです。

大事なのは、ユーザー操作で直接動く処理と、描画の結果として後から動く処理が別物だという点です。

React公式docsの例を単純化すると、考え方は次のようになります。

function BuyButton() {
	function handleClick() {
		fetch('/api/buy', { method: 'POST' })
	}

	return <button onClick={handleClick}>Buy</button>
}

function ChatRoom({ roomId }) {
	useEffect(() => {
		const connection = createConnection(roomId)
		connection.connect()
		return () => connection.disconnect()
	}, [roomId])

	return <h1>Room {roomId}</h1>
}

function BuyButton() {
	function handleClick() {
		fetch('/api/buy', { method: 'POST' })
	}

	return <button onClick={handleClick}>Buy</button>
}

function ChatRoom({ roomId }) {
	useEffect(() => {
		const connection = createConnection(roomId)
		connection.connect()
		return () => connection.disconnect()
	}, [roomId])

	return <h1>Room {roomId}</h1>
}

最初のfetch()は、ボタンを押したときだけ動けばよいのでevent handlerです。後ろのconnection.connect()は、「この部屋が表示されている間は接続していたい」という処理なのでEffectです。部屋が変わる前やコンポーネントが消える前にdisconnect()を返して片付けます。

この区別が腹落ちすると、なぜuseEffectに依存配列とcleanupが必要なのかも見えます。Effectは「この画面状態になったので、ブラウザAPIや接続先の状態も合わせる」という宣言です。クリック時の命令ではありません。

Vueとの違いも、ここで見ると整理しやすいです。Vue公式docsのComposition API FAQは、Composition APIではsetupが一度だけ動き、依存を自動収集できることを利点として挙げています。Vueではsetup()の中にonMounted()やwatch()を置くので、「最初にセットアップを書き、あとはリアクティブシステムに任せる」感覚になりやすいです。

同じ処理をどこへ置くかで比べると、ReactとVueの差は次の図のほうが直感的です。

言い換えると、Reactは「依存する値を明示して、再同期条件も自分で書く」方向です。Vueは「onMounted()やwatch()やwatchEffect()へ役割ごとに置く」方向です。

Vue公式docsのWatchersは、watch()が監視対象を明示し、watchEffect()がコールバック中に使った依存を自動追跡すると説明しています。さらにLifecycle Hooksでは、onMounted()が初回描画後、onUnmounted()が後始末に使えると案内しています。

短く表にすると、ライフサイクル周りの対比はこうなります。

Reactは逆に、コンポーネント関数そのものが更新のたびに再実行されます。そのため、「どの値が変わると再同期が必要か」を依存配列で明示します。ここがReactの難しさでもあり、同時にルール化しやすい点でもあります。

この設計は、正直に言うと、常に「楽」ではありません。useEffectの依存配列やstale closureで戸惑う人は多いです。

この比較を踏まえると、「ライフサイクル周りの開発体験の良さがReact勝利の決定打だった」とまでは言い切れません。むしろReactの強みは別のところにあります。

Reactの強みは、描画と副作用の境界をかなりはっきりルール化し、そのルールをlint、Strict Mode、周辺ライブラリで共有しやすかったことです。

大規模チームでは、個人にとって少し煩雑でも、全員が同じ作法で副作用を書くことの価値が高いです。ReactのHooksとEffectsは、その作法をJavaScriptの関数とツールチェーンの中に収めました。これは運用上かなり強いです。

なので、ライフサイクル周りでReactが勝ったというより、「副作用の書き方をチームで統一しやすかった」が近いです。

本当の決定打は、Reactの上に巨大な生態系が積み上がったこと

採用差を最も大きくしたのはここです。React公式トップページは、Reactを単なるUIライブラリではなく、フルスタックフレームワークやネイティブアプリにもつながる中心として位置づけています。React公式docsは、アプリ全体にはNext.jsやReact RouterのようなフルスタックReact frameworkを勧めています。さらに、React NativeとExpoで同じスキルをiOSやAndroidにも広げられると説明しています。

Stack Overflow Developer Survey 2025でも、React44.7%に対してNext.jsは20.8%あります。2024年の同調査では、React Native8.4%も別カテゴリで確認できます。つまりReactは単体で強いだけでなく、周辺に仕事と学習コストを回収しやすい出口が多いです。

さらにReact公式トップページは、React docsには毎月200万人の開発者が訪れると書いています。加えてMeta内部では10万以上のReact componentsが移行戦略の検証に使われ、10億人規模の重要な画面で変更が試されているとも説明しています。これは品質や将来性の安心感につながります。

ここまで来ると、Reactが選ばれる理由は技術そのものだけではありません。

• ライブラリ作者がReact向けを先に出す
• 企業がReact経験者を採りやすい
• 学習者がReactを学ぶと求人に直結しやすい
• フレームワーク、UIライブラリ、記事、動画、書籍がさらに増える

この循環が回り始めると、後発や競合が技術的に優れていても、簡単に逆転できる状況ではありません。

大きな差になったのは、Reactがかなり早い段階でこの自己増殖ループを作れたことです。
採用差の正体は、個別のAPI差よりも、この増幅ループで見たほうが分かりやすいです。

起点はJSXや副作用モデルの開発体験でも、世界的な差になったのは、それが学習資産、採用市場、周辺ライブラリに波及したからです。

では、質問の見立てはどこまで当たっているか

私の見立てはこうです。

JSXの記法と、コンポーネントのライフサイクルや副作用をJavaScriptの中で扱える開発体験は、React普及のかなり大きい起点でした。これはたしかです。

ただし、世界的な採用まで説明するなら、それだけでは足りません。

Reactが世界標準に近い位置まで広がった理由は、次の3つが重なったからです。

1. JSXによってUI記述をJavaScriptの延長に寄せ、大規模なフロントエンド開発と相性が良かった
2. HooksとEffectsで副作用の作法を共有しやすくし、lintやStrict Modeを含めた運用モデルを作れた
3. その上にNext.js、React Native、膨大な学習資産、採用市場が乗り、自己増殖する生態系になった

この3つのうち、最初の2つは技術と開発体験です。最後の1つは市場とエコシステムです。実際に世界的な差を決めた比重でいえば、最後の1つがもっとも大きい要因です。

ReactとVueを論点別に並べる

ここまでの話を、採用に効いた論点で短く並べると次のようになります。

まとめ

Reactは、Vueより圧倒的に多機能だから世界で勝ったわけではありません。Vue3のComposition APIを見ると、現代的な開発で必要な要素はかなり近いところまで来ています。

それでもReactが世界で強いのは、UIをJavaScriptの問題として扱いやすいJSXの設計が、早い段階で大規模開発と噛み合ったからです。その上に副作用の作法、フルスタックフレームワーク、ネイティブ展開、採用市場、学習資産が積み上がりました。

なので、質問の見立てを少し言い換えるなら、こうなります。

Reactが広がった起点は、JSXとライフサイクル周りの開発体験の良さだった。Reactが世界標準になった決め手は、その良さがエコシステムと採用市場で増幅されたことだった。