Reactの責任範囲
Reactは何をするライブラリで、何をしないのか。この境界を理解することが、Reactを深く使いこなす第一歩です。
🎯 Reactは何をするか？
Reactの責任は、たった一つです。
「UIの状態をDOMに同期する」
アプリのstate（状態）が変化したとき、Reactはその変化をDOMに反映します。開発者はDOMを直接操作する必要がなく、 「状態 → UI」という宣言的な記述に集中できます。
// stateを変えると、Reactが自動でDOMを更新する
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>
{count}回クリック
</button>;🚫 Reactは何をしないか？
Reactが担当しない領域を知ることは、ライブラリ全体のアーキテクチャを理解する上で重要です。
ルーティング
URLの管理はReact Routerや Next.jsが担当。Reactはページ遷移を知らない。
データフェッチ
APIコールはuseEffect・SWR・React Queryなどのエコシステムの仕事。
グローバル状態管理
ReduxやZustandが担当。Reactが提供するのはコンポーネントローカルのstateのみ。
SSR・SSG
サーバーサイドレンダリングはNext.jsなどのフレームワークが担当。
スタイリング
CSSの適用はReactの責任範囲外。CSS Modules・Tailwindなど何でも使える。
認証
ログイン・セッション管理はAuthライブラリやサーバー側の仕事。
📊 なぜ「ライブラリ」なのか？
AngularやEmberは「フレームワーク」です。ルーティング・HTTPクライアント・状態管理などをフレームワーク自身が提供します。 一方Reactは「UIレンダリング」に特化したライブラリです。他の関心事は、専門のライブラリに委ねます。
ReduxはReactの外側（またはコンテキスト経由）でグローバル状態を管理し、状態変化をReactに伝えます。 Reactはその状態を受け取ってDOMを更新するだけです。
Redux / Zustand (グローバル状態管理)
↓ dispatch → state変化
⚛️ React (stateを受け取ってUIを再描画)
↓
DOM💡 本質的な理解
Reactが「ライブラリ」である理由は、アーキテクチャの思想によるものです。 単一責任原則（SRP）と同様に、Reactは「UIの状態同期」という一つのことだけを、非常にうまくやります。 他のことは、その領域の専門家（ライブラリ）に任せる——これがReactエコシステムの強さです。