Remix の歩みと Remix 3 - React Router マージから Preact ベース再始動まで、モジュラーツールキットへの転換

「Remix v3 はいつ出るの？」という問いに、2026 年現在の答えは少しややこしくなります。「当初予定されていた v3 は React Router v7 として出た」。そしてその後、「もう一度 v3 を、まったく新しい方向で作り直している」。

このややこしさを 1 本で整理しつつ、2026-04-30 に公開された Remix v3.0.0-beta.0 の中身までざっと見渡せるようにまとめます。

Remix とは何だったか（簡単なおさらい）

Remix は、React Router 作者の Ryan Florence と Michael Jackson が設立したフルスタック React フレームワークです。Web 標準（fetch / Request / Response / FormData / Streams）を一級市民として扱い、loader / action という server-first なデータフェッチパターン、ネスト型ルーティング、エラーバウンダリ、楽観的 UI といった「Web のレイテンシと闘うための仕組み」をフレームワークに組み込んだのが特徴でした。

Remix の歩み

時系列で並べると、流れがすっきり見えます。

「Remix の v3」という言葉が指すものが、2024 年と 2025 年で完全に別物に変わったのが、混乱の元です。

なぜ Remix は一度 React Router にマージされたのか

「Merging Remix and React Router」（2024 年）の説明をかいつまむと、

• Remix の中身は「React Router の上に薄いレイヤーを乗せたもの」に近づいていた
• そのレイヤーをもっと薄く、薄くしていくうちに「もう React Router 本体に取り込んでしまったほうが綺麗」になった
• Shopify 自身に 500 万行規模の React Router アプリがあり、両方を別々に維持するメリットが消えた
• 結果として、当初 Remix v3 と呼んでいたものは React Router v7 の "framework mode" として出すのが最良の選択になった

React Router v7 は、loader / action / ネスト型ルーティング / SSR / RSC（Server Components）対応といったRemix が培ったほぼすべての機能を取り込み、2024 年 11 月にリリースされました。

Remix v1 / v2 から React Router v7 へは、@remix-run/* パッケージを @react-router/*（または react-router 本体）に置き換えるだけの機械的なリネーム作業が主で、公式の codemod も提供されています。Remix v2 future flags をすべて有効にしていた既存プロジェクトであれば、移行コストはかなり低いです。

「Wake up, Remix!」と Remix 3 の再始動

2025 年 4 月、Remix チームは 「Wake up, Remix!」というブログでこう書きました。

React Router v7 became really, really good. ... It means we're free to go build what comes next.

つまり、React Router v7 が「Remix のいいところ全部入り」になったおかげで、Remix 自身はもう React フレームワークである必要すらなくなったのです。

そして「次の Remix」のビジョンを次のように打ち出しました。

• シンプル、明快、高速な Web フレームワーク
• モジュラーツールキット（単独でも使え、組み合わせても使える）
• データベースドライバから内蔵 UI ライブラリ（Reach UI の復活）まで自前
• クリティカルな依存をゼロにする。React にすら依存しない
• ベースは Preact のフォークから始める

「メジャーバージョンアップ」ではなく 「新しい方向（new direction）」と言い切っているのが特徴的です。

Remix 3 の 6 つの設計原則

Remix の GitHub リポジトリと「Wake up, Remix!」ブログに、Remix 3 開発の指針として次の 6 原則が明示されています。これが Remix 3 の世界観そのものなので、まず読んでおく価値があります。

「Model-First」が原則の 1 番に来ているのが象徴的です。Remix 3 は最初から「LLM が読み書きすることを前提に設計された Web フレームワーク」として作られています。

なぜ React ではなく Preact のフォークなのか

「依存ゼロを目指す」という原則 4 を、もっとも色濃く反映しているのがこの判断です。

• React への依存を切ることで、React のロードマップ（並行レンダリングや RSC の方向性、Compiler の挙動、依存ライブラリの分断）に振り回されなくなる
• Preact は既に成熟している（Shopify / Google などで大規模採用実績あり）
• Preact から フォークすることで、Web Components や AI ファーストな仕組みを独自に拡張できる
• 既存の React コードベースとの互換性を狙うのではなく、「Web により近いコンポーネントモデル」を新規に作る

ここを読んで「分裂じゃないか」と感じるかもしれませんが、Remix 3 は既存の React Router v7 ユーザーを連れて行こうとしていないのがポイント。React 系のアプリを「いま動かしたい」人は React Router v7 をそのまま使えばいいし、Remix 3 は別の選択肢として並走する、というのが現在の整理です。

Remix 3 の構造

Remix 3 のリポジトリは pnpm モノレポで、packages/ 配下に小さなパッケージが多数並んでいます（2026-04 時点）。

これらが個別パッケージとして単独でも使えるように作られたうえで、利用者からは remix という単一パッケージ越しに再エクスポートで使う、という構造です（原則 5・原則 6）。

import { ... } from 'remix'
import { ... } from 'remix/headers'
import { ... } from 'remix/multipart-parser'
import { ... } from 'remix/node-fetch-server'
import { Button, Combobox, Menu, Popover } from 'remix/ui'
import { jsx } from 'remix/ui/jsx-runtime'

ドキュメントもインストールもすべて npm i remix で完結するのに、内部では細かいパッケージに分かれていて単独利用も可能、というのが Remix 3 の物理構造です。

Remix 3 の新機能・変更点（alpha.6 〜 beta.0 まで）

ここからが「v3 の新機能・変更点」の本題です。なお Remix 3 は「v2 からの差分」というより新規プロジェクトなので、ここでは「現時点の beta.0 で何が出てきているか」を列挙します。

1. 統合 UI ランタイム remix/ui/*

最新の v3.0.0-beta.0 でもっとも目立つ変更がこれ。remix/component, remix/component/jsx-runtime, remix/component/server といった旧名は削除され、remix/ui 配下に統一されました。

// Old (alpha 初期)
import { jsx } from 'remix/component/jsx-runtime'
import { renderToString } from 'remix/component/server'
 
// New (beta.0 以降)
import { jsx } from 'remix/ui/jsx-runtime'
import { renderToString } from 'remix/ui/server'

UI コンポーネントは Reach UI 系の構成で、remix/ui 配下に下記のような豊富なプリミティブが揃っています。

import {
  Accordion,
  Anchor,
  Breadcrumbs,
  Button,
  Combobox,
  Glyph,
  Listbox,
  Menu,
  Popover,
  Select,
  Separator,
  // ... and more
} from 'remix/ui'
import { theme } from 'remix/ui/theme'
import { motion } from 'remix/ui/animation'
import { renderToString } from 'remix/ui/server'

「アクセシブルで Web 標準志向」だった旧 Reach UI をRemix チームが正式に引き継ぐ形になっています。

2. ランタイム非依存・Node 24.3.0+

Remix 3 はランタイム非依存（runtime-agnostic）を強く打ち出しています。Node.js / Bun / Deno / Cloudflare Workers のいずれでも動くことが前提で、内部実装は Node 固有 API（fs / Buffer / node:stream 等）ではなく Web 標準 API（Web Streams API / Uint8Array / Web Crypto API / Blob / File）を使う方針です。

CLI（remix）のメタデータではNode.js 24.3.0 以上を要求します。

3. remix/cli と remix/test/cli

新しく remix バイナリが追加されました（@remix-run/cli への薄いブリッジ）。プログラマブル API は remix/cli から、テスト関連の CLI は remix/test/cli から呼べます。

4. MultipartPart.headers の型変更（BREAKING）

remix/multipart-parser の MultipartPart.headers が、Headers インスタンスからプレーンなオブジェクト（lower-case キー）に変わりました。

// Before
part.headers.get('content-type')
 
// After
part.headers['content-type']

これは原則 3「Religiously Runtime」の延長線にある変更です。バンドラの解析や Web Fetch 仕様の細部に縛られず、最小限のプレーンなデータ構造に寄せる方針。

5. 機能別パッケージのオプショナル peer dependency

データベースドライバや Playwright 連携など、機能別パッケージのメタデータが整備され、remix の export 経由でオプショナル peer dependency として扱えるようになりました。「使う機能だけを peer に入れる」典型的なツールキット構成です。

6. node-fetch-server / node-serve / terminal

サーバー実装系のパッケージが追加されました。remix/node-fetch-server は fetch スタイルのリクエストハンドラを Node の HTTP サーバーで動かすブリッジ、remix/node-serve は本番サーブ用、remix/terminal はターミナル UI 系ユーティリティです。

7. パッケージ境界の厳格化

リポジトリ内の AGENTS.md（Remix 3 Development Guide）に明記されていますが、

• パッケージ境界をまたぐ re-export を避ける
• src/lib/* の中でバレル風の薄いラッパーを作らない
• 公開 API は常にトップレベル src/ の barrelでだけ宣言する

といった「コンポジション原則を物理構造で強制する」ルールが採用されています。Remix 3 が公開する API は、必ず「どのパッケージのどのファイルから出ているか」が一意にわかる構造になっています。

8. AI / LLM ファーストの開発ガイドライン

リポジトリには skills/make-pr/SKILL.md、skills/make-change-file/SKILL.md、skills/write-readme/SKILL.md といったAI エージェント向けのスキルが同梱されています。原則 1「Model-First Development」を、フレームワーク本体の開発フローでも実践しているのが分かります。

「LLM が読みやすい・書きやすいコードベース」を本気で設計対象にしている、というのは現代のフレームワークとして相当に先鋭的です。

React Router v7 と Remix 3、どう使い分けるか

「で、結局自分はどっちを使えばいい？」という疑問に、現実的なガイドを置いておきます。

ざっくり 「既存資産を活かすなら React Router v7、新規 + 実験的な動機があるなら Remix 3 を様子見」が 2026 年中盤時点の現実解です。

Remix 3 を触ってみる最小手順

beta はまだ早い段階なので API は頻繁に変わる前提ですが、雰囲気を掴むだけなら次のコマンドで導入できます。

npm i remix@beta

import { jsx } from 'remix/ui/jsx-runtime'
import { Button } from 'remix/ui'
 
function App() {
  return (
    <Button onClick={() => console.log('clicked')}>Hello, Remix 3</Button>
  )
}

Node.js 24.3.0 以上が必要なので、node -v で確認しておきましょう。

まとめ

• Remix は 2020 年公開・2022 年 Shopify 買収を経て、2024 年に React Router v7 へマージされた
• 当初 Remix v3 と呼ばれていたものはReact Router v7として出ており、既存 v1 / v2 ユーザーはここに移行する
• 2025 年 4 月、Remix チームは 「Wake up, Remix!」 で新しい Remix 3 を再始動。React に依存せずPreact フォークを土台にしたモジュラーツールキットを目指す
• 6 つの設計原則（Model-First / Web APIs / Religiously Runtime / Avoid Dependencies / Demand Composition / Distribute Cohesively）が世界観そのもの
• 2026-04-30 に remix@3.0.0-beta.0 公開。remix/ui/* の統合 UI ランタイム、Node 24.3.0+、ランタイム非依存（Node / Bun / Deno / Cloudflare Workers）、AI / LLM ファーストの開発ガイドラインなどが特徴
• 既存資産があるなら React Router v7、実験的に未来を覗くなら Remix 3、というのが現時点の使い分け

「Remix」という言葉が指す対象がここ数年で何度も変わっており、Web 上の情報は世代が混在しがちです。「いつの Remix の話か」をまず確認するクセをつけておくと、迷子になりにくいと思います。

参考リンク

• Wake up, Remix! - Remix Blog
• Merging Remix and React Router - Remix Blog
• Mixing It Up: Remix Joins Shopify to Push the Web Forward
• Upgrading from Remix v2 to React Router v7
• remix-run/remix on GitHub
• remix v3.0.0-beta.0 Release Notes
• remix v3.0.0-alpha.6 Release Notes
• React Router (Wikipedia)