React と Remix の関係を正しく理解する

フレームワークとは何か

フレームワーク = 「仕組みが整った作業場」 です。

料理で例えると

レベル	料理の例え	プログラミングの例え
素の言語	畑から食材を収穫するところから始める	HTML/CSS/JavaScript を一から手書き
ライブラリ	スーパーでカット野菜や調味料を買える。何をどう作るかは自由	React（部品化の仕組みだけ提供）
フレームワーク	ミールキット。レシピ、食材、手順が全部セットで届く	Remix（React + ルーティング + データ取得 + ビルドが全部セット）

ポイント

ライブラリは「便利な道具」、フレームワークは「やり方の枠組みごと提供するもの」です。

もう少し具体的に

ライブラリ（React）の場合

「UI の部品化の仕組みをあげるから、ページの構成、URL の管理、データの取得方法、ビルドの仕方は自分で考えてね」

フレームワーク（Remix）の場合

「ファイルをこのフォルダに置けば URL は自動で決まる。データ取得は loader 関数に書けばいい。ビルドコマンドは npm run build で OK。全部面倒見るよ」

制約と自由のトレードオフ

フレームワークは 「制約」 を与える代わりに、「判断の回数」 を大幅に減らしてくれます。

React の正確な位置づけ

React は厳密には「ライブラリ」です。Facebook（Meta）がそう定義しています。

React が提供するのは 1つのこと だけ：

「UI をコンポーネント（部品）として定義し、
データが変わったら自動的に画面を更新する」

tsx

// React コンポーネントの例
function ArticleCard({ title, author }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>著者: {author}</p>
    </div>
  );
}

React は これだけ です。

React 単体の限界

以下のことは React 単体ではできません：

やりたいこと	React 単体で	別途必要なもの
URL に応じてページを切り替える	できない	ルーター（react-router 等）
サーバーでデータを取得する	できない	データ取得の仕組み
ファイル → URL の自動マッピング	できない	ルーティングフレームワーク
サーバーで HTML を生成する（SSR）	できない	SSR 対応のフレームワーク
本番用にファイルをまとめる	できない	ビルドツール（Vite 等）

つまり

React だけでアプリを作ろうとすると、これら全てを自分で選んで組み合わせる必要があります。これは「スーパーで食材を個別に買って、レシピも自分で考える」ようなものです。

Remix と React の関係

Remix v2 の内部構造

Remix v2 (Framework)

React

UI Parts

Router

URL Management

Loader / Action

Data Flow

SSR Engine

Server-side HTML generation

CF Workers Adapter

Cloudflare Pages integration

Remix は React を「内蔵」しています。関係性は：

⚙

React = Engine

UI rendering power source.
Alone, it can only rotate on the spot.

🚗

Remix = Complete Vehicle

Engine built-in.
Steering, brakes, and navigation included.

開発者は React のコンポーネント記法で UI を書きますが、それ以外の部分（ルーティング、データ取得、SSR）は Remix が自動的に処理します。

このブログでの具体例

admin.presentation.tsx を例にすると：

admin.presentation.tsx での役割分担

React が担当する部分

ProblemCard, StatCard 等のコンポーネント定義
JSX（HTML に似た記法）での画面構造の記述
useLoaderData() でデータを受け取って表示

Remix が担当する部分

ファイル名 → URL の自動マッピング
loader() 関数でサーバーサイドのデータ取得
SSR（サーバーで HTML を生成してブラウザに送信）
ページ間遷移時のデータ再取得

開発者が書くコードは1つのファイルですが、React の仕事と Remix の仕事が自然に分離されています

なぜ「React はフレームワーク」と言われることがあるのか

React のエコシステム（周辺ツール群）が非常に大きいため、実質的にフレームワーク的に使われることが多く、混同されがちです。

React 公式サイト — 「ライブラリ」と明記

React 単体 — アプリを構築できない（追加のツールが必要）

Next.js や Remix — React ベースのフレームワークが、React を完全なアプリ開発環境に仕立てている

React 公式の推奨

React 公式も現在は「新しいプロジェクトを始めるなら、React 単体ではなく Next.js や Remix のようなフレームワークを使ってください」と推奨しています。

まとめ

	React	Remix
分類	ライブラリ	フレームワーク
提供するもの	UI の部品化と自動更新	ルーティング + データ取得 + SSR + ビルド + React
単体で使えるか	小さな UI なら可能。アプリ全体は困難	単体でフルアプリ構築可能
例え	エンジン	エンジン搭載の自動車
関係	Remix の中に組み込まれている	React を内蔵している