Reactやめようぜ

TL;DR
React は “UI ライブラリ” を名乗っているが、実態は 「あなたの週末を三つくらい平気で溶かすフルスタック・パズル」。
本稿ではまず React を愛ゆえに斬りまくり、その後「じゃあ他の選択肢は？」を体系的に整理する。笑いながら読めて、読み終えたら技術選定会議にすぐ投げ込める内容を目指した。

---

1. 🥶 ReactJS 皮肉大喜利

1.1 「useEffect の檻に入る覚悟はあるか？」

• あるある①
  依存配列に値を入れ忘れる→バグ。
  入れる→無限ループ。
  空配列にする→過去の値を読むゴーストバグ。
  ─ これぞ React 三段活用。

• あるある②
  npm install が映画より長い。もはや Popcorn.js 片手に鑑賞会。

• あるある③
  useState を 50 行宣言したら「それ Redux では？」と指摘され、Redux 導入後に「それ MobX では？」と再度ツッコミを受ける。

• あるある④
  ESLint が「exhaustive-deps が…」と警告。直すと挙動が狂い、結局警告だけ黙らせる。

• あるある⑤
  Strict Mode で useEffect が 2 回呼ばれるのを知らずにデバッグ時間を溶かす。

1.2 React “公式アピール”と開発者の心の声

公式アピール	開発者の心の声
“Learn Once, Write Anywhere!”	Anywhere に書く前に 400 行の設定を Learn Once…。
“Just JavaScript!”	テンプレート＋ロジック＋CSS-in-JS＝Just Everything!
“Hooks はシンプル！”	シンプル≠単純。TypeScript 型パズルが始まる。
“Virtual DOM で速い！”	速いのは UI。デバッグは別次元の長旅。
“モジュール式で拡張自由！”	依存パッケージ 2000↑。node_modules が 1 GB。
“SSR も簡単！”	簡単（当社比）。すぐに Suspense と streaming の沼。

1.3 React 十戒（破るとデバッグ地獄）

1. 依存配列を雑に扱うな。
2. key を甘く見るな。
3. Context に全部突っ込むな。
4. Props Drilling を放置するな。
5. “とりあえず Redux” を唱えるな。
6. setState 直後の console.log(state) は信じるな。
7. useRef を万能鍵と誤解するな。
8. index を key に使うな。
9. dangerouslySetInnerHTML を乱用するな。
10. console.error を見なかったことにするな。

1.4 依存地獄ビンゴ

styled-components	react-query	framer-motion
zustand	FREE (React itself)	redux-toolkit
react-hook-form	immer	react-router

ビンゴ成立＝プロジェクト 3 か月後に bundle size 1 MB 超え確定。

1.5 Buzzword 飲み会ゲーム 🍻

ワード	発言例	飲む量
Suspense	「データフェッチは Suspense でしょ？」	1 shot
Concurrent Mode	「デフォルトになるから」	2 shot
Server Components	「正式版来る！」	2 shot
Signals	「React に Signals が来れば…」	3 shot
“Eventually Consistent UI”	「UX 的に必須」	ボトル確定

---

2. 🌏 React じゃないフレームワーク／ライブラリ早見表

名前	長所	短所	使うべき人	使わないべき人	使いやすさ	専門性
jQuery	CDN 1 行。Stack Overflow が無尽蔵。	“時代遅れ”の視線に耐えるメンタル必須。	レガシー案件救済騎士。	近代ビルドチェーン主義者。	★★★★★	★☆☆☆☆
Astro	Island Architecture で JS 激減、SEO 無双。	CSR を欲張ると結局 React 等を招集。	コンテンツサイト命派。	フル SPA 派。	★★★★☆	★★★☆☆
Vue 3	学習コスト低、SFC が直感的。	大規模 SPA は設計必須。	HTML テンプレ好き。	“全部 JS” 派。	★★★★☆	★★☆☆☆
Svelte	コンパイル時最適化で爆速。	エコシステム若い。	シンプルを愛す。	ランタイムで魔改造したい。	★★★★★	★★★☆☆
SolidJS	React ライクで超高速。	SSR 周りに知識要。	React から軟着陸。	公式プラグインの量を重視。	★★★☆☆	★★★★☆
Angular	完全パッケージ。CLI, DI, ルーティング全部入り。	学習量が大台。	大規模企業案件常連。	週末で小規模サイト勢。	★★☆☆☆	★★★★★
Preact	React API 互換で超軽量。	互換性のゆらぎに注意。	React 資産を軽くしたい。	React18 新機能フル活用勢。	★★★☆☆	★★★☆☆
Qwik	“Resumability” で瞬間起動。	マインドセットが特殊。	初期表示タイム命派。	レガシー JS 継ぎ足し案件。	★★★★☆	★★★★☆

★☆☆☆☆ = 低い／易しい、★★★★★ = 高い／難しい。数字は愛でも憎しみでもなく目安。

---

3. ライブラリ別“深掘り皮肉”レビュー

Vue 3 — Template Heaven, Template Hell

• 長所: <script setup> で TypeScript とバターのように滑らか。
• 短所: <style scoped> に安心しすぎて :deep 乱発 → スコープ崩壊。

Svelte — 書けば消える UI マジック

• 長所: ランタイム 0 kb！胃腸が軽い。
• 短所: $: 付け忘れて再計算されず、泣きながら $: 祭り。

SolidJS — React の最終形態？

• 長所: JSX 書式そのまま、粒度細かいリアクティブ。
• 短所: createSignal に慣れると useState が古代の遺物に感じる。

Angular — 厳格さは正義（多すぎ）

• 長所: プロジェクト構造に迷わない。CLI が人生をコーチング。
• 短所: Decorator, RxJS, Zone.js… 一夜漬け不可。

Preact — ダイエット成功した React

• 長所: React API 互換 8 kb の世界。
• 短所: 互換レイヤー “compat” を入れたらサイズが戻る本末転倒。

Qwik — 読み込みゼロ秒、理解数時間

• 長所: シリアライズ状態を復元する Resumability。
• 短所: $( ) シンタックスと脳トレの二重苦。

jQuery — 時を超える旅人

• 長所: DOM を触るなら最短 3 行。
• 短所: ES Modules 化で阿鼻叫喚。

Astro — コンポーネント断食ダイエット

• 長所: Lighthouse がフル緑。MDX 統合が快適。
• 短所: 問い合わせフォームに React を仕込んで JS 0 kb が台無し。

---

4. React を卒業する／しない判断フローチャート