Reactの思想は消えた、もうVueでもいいよね、ていうか他のはどこ行った...
はじめに
私はVue支持者、というかNuxt支持者で、普段はNuxtでWEBアプリの開発を行っているのですが、現在ReactでHPのチーム開発をしてます。現在の構成は「React × Tailwind4」で、一部CSSを書こうとしたときにSCSSで書きたいと思って調べると,,,びっくりする事実に気付いてしまいました。
つまりそれはTailwindは純粋なCSSではない、ということです。
おい！聞いた話と違うやんけ！！
と思ったので、ChatGPTに色々問いかけて、ついでに以下の記事を作ってもらいました。
ChatGPTのいうことなので正直どこまで信用できるか微妙ですが、まあご愛敬です。
「Nuxt.js、Vercelに合流」（参考）とかもありますし、一時期注目されていたNue.jsはどうなったんや、とか、JSフレームワーク周辺の謎の停滞感がある状況ではありますが、とりあえずはAIの書いた記事をどうぞ。
なんか変な言い回しをしてますが、AIなんで、気にしないで
誤りは指摘いただけると助かります、他のユーザの為にも
React純粋主義の終焉 ─ Tailwindとともに歩む実用主義への変遷
もしReactが「純粋なJavaScript主義」を捨てたのなら、
Vueでも良かったのではないか？
フロントエンド開発者が、
近年の React + Tailwind の流行を見て感じている根源的な違和感です。
本記事では、Reactがどのようにして「JS純粋主義」から「実用主義」へと変化したのか、
そしてなぜTailwindと結びついたのかを、年表と思想マップで解き明かします。
🏁 2013〜2014：React誕生 ― 純粋主義の始まり
キーワード：All in JavaScript
| 要点 | 内容 |
|---|---|
| React初版（v0.3〜0.8）登場 | Facebook内部ツールからOSS化 |
| JSX導入 | HTMLをJS構文で表現（テンプレートを排除） |
| Virtual DOM | DOM操作をJSロジックで抽象化 |
| 思想 | 「UI = f(state)」 ─ すべてをJSで完結させる |
| CSSとの関係 | CSS-in-JS が理想とされた |
🧠 この時代のReactは、「HTMLもCSSもJSに従属させる」という立場でした。
JSが全ての中心であり、HTML/CSSは従属的存在です。
⚙️ 2015〜2017：普及期 ― 関数的UIの時代
キーワード：宣言的UI・One-way Data Flow
| 要点 | 内容 |
|---|---|
| React 15リリース | コンポーネント化が業界標準に |
| Redux, Flux | 状態をJSで完全に制御するアーキテクチャ |
| CSS-in-JS流行 | styled-components, emotion が台頭 |
| 競合 | Vue 2登場：「テンプレートでよくない？」という潮流 |
🧠 Reactは「純粋関数でUIを表現する」哲学を貫いていましたが、
この頃から「複雑なJS構文を嫌う層」がVueに流れ始めます。
🪞 2018〜2020：Hooks登場 ― 構造的純粋性の崩壊
キーワード：useState, useEffect, useContext
| 要点 | 内容 |
|---|---|
| React 16.8でHooks導入 | クラス構文を廃止し、関数だけで状態管理 |
| useEffect問題 | 副作用の扱いが難解に（純粋関数とは言いにくくなる） |
| styled-componentsの限界 | パフォーマンス・複雑性が露呈 |
| Tailwind 1.x登場 | CSS-in-JSへの逆提案として注目され始める |
🧠 「すべてをJSで完結させる」理想が、
現実の開発複雑性の中で破綻し始めた時期です。
ここから「JSの外に逃がしたい」という欲求が生まれます。
→ その出口が Tailwind CSS でした。
⚡ 2021〜2023：Next.js & Tailwind ― 実用主義の勝利
キーワード：DX（Developer Experience）
| 要点 | 内容 |
|---|---|
| Next.js普及 | SSR・SSGがReactと統合 |
| Tailwind 2〜3系普及 | React界のデファクトCSSフレームワークに |
| CSS-in-JS衰退 | パフォーマンス・設定の複雑さが敬遠される |
| React Server Components構想 | JSの外部化が再び進む |
🧠 React開発者はこの頃から明確に、
「純粋性よりも開発効率」を選ぶようになります。
Tailwindのユーティリティクラスが、
JSX内で動的にスタイルを構築するAPIのように機能し始めました。
React：「JSでUIを書く」
Tailwind：「CSSをJSXで書く」
→ 方向は逆なのに、結果的に補完関係が成立した。
🌍 2024〜現在：React 19 / Tailwind 4 ― ハイブリッド主義の時代
キーワード：調和・共存・自動化
| 要点 | 内容 |
|---|---|
| React 19 (Server Components正式化) | テンプレート的概念が再導入される |
| Tailwind v4 | PostCSS廃止、純CSS構文でSass的表現力を持つ |
| Meta-framework時代 | Next.js, Remix, Astro などが主戦場に |
| 思想 | 「純粋さよりも協調性」 |
🧠 Reactは今や「JSの中にCSSを書かない」。
Tailwindは「CSSの中でJS的抽象化を行う」。
結果、両者は“再び中間点で出会った”のです。
🧭 React思想の変遷マップ（年表で見る思想の進化）
| 年代 | 思想段階 | キーワード | 方向性・変化のポイント |
|---|---|---|---|
| 2013〜2014 | 🧩 純粋JS主義 | 「All in JavaScript」 「UI = f(state)」 |
HTML/CSSをJSに統合。 JSX・Virtual DOM登場。 |
| 2015〜2017 | ⚙️ 関数的UI主義 | 宣言的UI・Redux | 状態とUIの分離。 JSでアプリ全体を制御。 |
| 2018〜2020 | 🪞 複雑化期 | Hooks・CSS-in-JSの限界 | 副作用の増加。 「JSが重すぎる」問題が浮上。 |
| 2021〜2023 | ⚡ 実用主義 | Next.js・Tailwind | DX（開発体験）を最優先。 CSSを再び分離・効率化。 |
| 2024〜2025 | 🌍 調和主義 | React19・Tailwind4 | JSとCSSの再統合。 “純粋性”より“協調性”を重視。 |
🧠 補足解説
-
純粋JS主義（2013〜）
Reactは「UIをJSの関数で表現する」という革命的発想から始まった。
HTMLやCSSは副次的な存在とみなされ、JSXが新しい標準となった。 -
関数的UI主義（2015〜）
ReduxやFluxによって、状態をJSで統一的に管理。
「副作用のないUIレンダリング」という関数的思想が強調された。 -
複雑化期（2018〜）
Hooksの登場で純粋関数モデルが崩れ、
副作用（useEffect）や依存関係管理が複雑化。
開発者の間に「JSに詰め込みすぎでは？」という反発が起きる。 -
実用主義（2021〜）
CSS-in-JSが重くなり、Tailwindが“逆方向の解決策”として登場。
React開発者は**「JSの中でCSSを書く」から「JSXでCSSを組み合わせる」**へ転換。
「All in JS」から「JS中心＋CSS協調」へのパラダイムシフト。 -
調和主義（2024〜）
React19ではServer Componentsが導入され、
再びテンプレート的な構造が評価されるように。
Tailwind4もCSSを標準構文に回帰し、
ReactとCSSは「分離ではなく調和」の関係に戻った。
🧩 一文でまとめると
Reactは「JSが全て」という純粋主義から出発し、
Hooksで複雑化し、Tailwindと出会って実用主義へ転じ、
そして今は「JS・HTML・CSSの調和」という成熟した中庸に辿り着いた。
⚖️ React vs Vue vs Tailwind ― 思想対比表
| 項目 | React（当初） | React（現在） | Vue | Tailwind |
|---|---|---|---|---|
| 哲学 | JS純粋主義 | 実用主義（中庸） | 調和主義 | 抽象主義 |
| UI構築方法 | JSX（JS拡張構文） | JSX + DSL | テンプレート構文 | ユーティリティクラス |
| 開発者体験 | 関数的・抽象的 | 柔軟・高速 | 宣言的・直感的 | 組み合わせ的・即時的 |
| CSSとの関係 | CSS-in-JS | Tailwind主流 |
<style>共存 |
独自CSS構文 |
| 現代的役割 | JSの基盤 | Webアーキテクチャのコア | バランス型 | UI層のミドルウェア |
🧩 結論：純粋主義は否定されたが、調和主義が勝利した
ReactがTailwindを受け入れた瞬間、
Reactはもはや「純粋なJavaScript哲学の体現者」ではなくなった。
しかし同時にそれは、
フロントエンドが“JSの覇権”から“協調的Web設計”へ進化した証拠でもある。
- Vueは最初から調和主義だった
- Reactは純粋主義から実用主義へ歩み寄った
- TailwindはCSSをAPI化し、両者の接点を作った
🧭 結局のところ──
純粋主義は否定されたが、調和主義が勝利した。
📘 まとめ
- Reactはかつて「JSで全てを制御する」純粋主義だった
- HooksとCSS-in-JSの混乱を経て、その思想は実用主義へ移行
- TailwindがReactの「JS中心思想」に現実的な出口を与えた
- 現代のReactは「JS・HTML・CSSが協調するハイブリッド主義」
- Vueの原点と再び交差し、フロントエンドは“調和の時代”に入った
というわけで終わりに
ここに書いてあることは本当なのだろうか、、、
うーん疑わしい、が
当初React信者が口にしていたのは、JSXはJS標準仕様だから純粋であるといった論調であった。
私は「純粋=良い」はそもそも意味が通じていないと思った。おかしいと思った。もしかしたらReact信者もそんなことは思っていなかったかもしれない。
そして、Tailwind が流行った、私はこれも意味が分からなかった、Styleに書けばよいことを、或いはUIフレームワークを使えばもっと便利なものを、なぜわざわざクラスにするのか理解できない。
そしてここにきて、Tailwindは純粋なCSSではない、ということも知った。
全部が全部矛盾している、それでも使い続けられるのは
1つは既に覇権を取って、周辺環境も整っているということ
1つはサポート体制、主導者がVueのように脆弱ではなかったということ
1つはVue3がその複雑な仕様により勝手に瓦解したということ
1つは結局何らかの直感的な使いやすさにおいてReactに優位があったということ
なのだろう
けれどな、私はどう考えてもNuxtが優れていると思うよ。少なくとも思想的にはReactである理由はなくなったし、JSXにはいまだに違和感しかない。
Reactユーザを否定はしないけれど。
Nuxt はどうなる
正直わからない。
でも、性能は良いにしても資金面や体制に問題があったNuxtが救われたのは非常に大きい。
そして、一応今のところは、統合できるところは統合して、それぞれの良いところはばらばらに共存する方針らしい。
個人的には、VueのOptions APIを廃止して、JSX、ないしはTSXにすれば、お互い満足なのではないかな。
Nue はどうなった
以下、AI談
うーん、期待した感じにはならないかなあ
兎に角、HPをみると内容がペテン的で信用に足らない
- Nue.jsが「ライトウェイトUIライブラリ／フレームワーク」として一定のニッチを確保していく可能性が高いです。特に「静的サイト／シンプルUI／低依存」を重視する場面で。
- 既存の大手フレームワークに比べて「学習コスト」「開発者供給」「ライブラリ互換性」が弱いため、これらが改善されると採用が広がる可能性があります。
- Web開発トレンドとして「依存を減らす」「ビルドサイズを抑える」「標準技術（HTML／CSS／JS）を活かす」という流れがあるため、それに乗る形でNueが評価を受けるかもしれません。
- 逆に、機能拡張・サードパーティ統合・大規模支援が遅れると、“実験的／趣味的”な枠を抜けられずに終わる可能性もあります。
Discussion