Chaos and Order

💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.

원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

はじめに — 2026年5月、フロントエンドは「フレームワークではなくレンダリングモデル」で分かれる

3年前まで、フロントエンドを選ぶことは React か Vue か Svelte かを選ぶことだった。2026年5月現在、その問いはほぼ意味を失っている。**本当の選択は「どのレンダリングモデルを使うか」**であり、フレームワークはそこに従属する。

ざっくり5つのモデルに整理できる。

1. **Virtual DOM + reconciliation (React 19, Preact, Inferno)**

2. **シグナルベースの fine-grained reactivity (SolidJS 2, Svelte 5 runes, Vue 3.6 Vapor, Angular 19 signals, Preact signals)**

3. **Resumability (Qwik 2)** — hydration そのものを廃する道

4. **アイランドアーキテクチャ (Astro 5, Fresh, Eleventy の islands)**

5. **HTML-over-the-wire (HTMX 2, Hotwire/Turbo, LiveView 系)**

この5モデルの上に **React Compiler の GA**、**Vue Vapor の正式リリース**、**Svelte runes の安定化**、**Next.js 16 PPR の正式版**、**Remix の React Router 7 への吸収**、**TanStack Start のベータ安定化**といった大きな出来事が2025〜2026年に連続して起きた。本稿はその変化の輪郭と実際のコード形を1ページにまとめる。

React 19/19.1 — Compiler GA、Actions、Server Components がデフォルトに

React 19.0 は2024年末に GA、2025年に 19.1 がマイナーで追従、2026年に入って 19.1.x のパッチラインが安定した。本質的な変化は3つ。

- **React Compiler GA**: 2025年に `react-compiler` パッケージが stable になった。`useMemo`、`useCallback`、`React.memo` といった手動メモ化は事実上不要となった。Babel/SWC プラグインとしてビルド時に自動メモ化する。

- **Actions + `useActionState` + `useFormStatus`**: フォーム送信と非同期 mutation を React のモデルに取り込む。`<form action={...}>` がファーストクラスになった。

- **Server Components + `use` フック**: RSC は Next.js だけのものではなく React コアの一部として確立した。Promise を直接 `use(promise)` で解ける。

React 19 Actions の典型コード。

'use client'

async function subscribe(prev: { ok: boolean } | null, formData: FormData) {

const email = formData.get('email')

const res = await fetch('/api/subscribe', { method: 'POST', body: JSON.stringify({ email }) })

return { ok: res.ok }

}

export function Subscribe() {

const [state, formAction, pending] = useActionState(subscribe, null)

return (

{state?.ok && <p>購読完了</p>}

)

}

`useActionState` は19で導入され、`useFormStatus` は子コンポーネントから親フォームの pending 状態を読むときに使う。どちらも React 18 の `useFormState` の後継だ。

Vue 3.6 — Vapor Mode 正式リリース、VDOM がオプションになった年

Vue.js は2026年初頭に **3.6 で Vapor Mode を正式 stable** とした。Vapor は VDOM を介さず、SolidJS スタイルのコンパイル済み fine-grained reactivity で直接 DOM を更新するレンダーバックエンドだ。同じ SFC(`.vue`)をそのまま使いながら、コンパイラが2つの成果物(VDOM/Vapor)を出力する。

- バンドルサイズが小さくなり、メモリ使用量は30〜50%減、初期レンダーコストは SolidJS と比較可能なレベル、というのが公式ベンチの結果。

- 欠点は一部のライブラリ(主に VDOM ベースの third-party)が Vapor モードで動作保証されないこと。Vue Router、Pinia、VueUse のような first-party は互換だ。

Vue 3.6 Vapor の使用例。

const count = ref(0)

const double = computed(() => count.value * 2)

`<script setup vapor>` の一行でコンパイル対象が変わる。同じコンポーネントツリーで Vapor と VDOM を混在させられるため、漸進的な移行が可能だ。

Svelte 5 + SvelteKit 3 — runes API、4年の論争が終わった

Svelte 5 は2024年末に GA、2025年を通じて SvelteKit がメジャー 3 で追従した。中心は **runes API**。

- `$state`、`$derived`、`$effect`、`$props`、`$bindable` といった関数型 reactivity primitive。

- 以前 Svelte 3/4 の「トップレベル `let` 変数は暗黙的に reactive」という魔法はオプトインになり、runes はモジュール内のどこからでも(コンポーネント外でも)使える。

Svelte 5 runes の実コード。

let count = $state(0)

let double = $derived(count * 2)

$effect(() => {

console.log('count changed:', count)

})

SvelteKit 3 はサーバーアクション(`+page.server.ts` の `actions`)、改善されたストリーミング、Vite 6 ベースのビルド、そして `remote functions`(クライアントから直接呼び出せる RPC 形式のサーバー関数)を正式サポートする。

SolidJS 2 + SolidStart — シグナルの本家がメジャー 2 に

SolidJS は2026年第1四半期に **メジャー 2.0** を公開した。シグナルを最初からファーストクラスで設計したライブラリらしく、変化は漸進的だが強い。

- `createSignal`、`createMemo`、`createEffect` はそのまま。

- 新規追加の `createAsync`、`useAction`、`query` は SolidStart の RPC モデルと連携する。

- JSX コンパイルがさらに小さいコードサイズを出し、SSR ストリーミングが安定した。

SolidStart 1.0 は2025年秋に GA。Vinxi(ランタイム)と Nitro(サーバー)ベースで、ルーティングはファイルベース、サーバー関数は `'use server'` ディレクティブで表す。

function Counter() {

const [count, setCount] = createSignal(0)

createEffect(() => {

console.log('count:', count())

})

return <button onClick={() => setCount(count() + 1)}>{count()}</button>

}

Solid は小さく、速く、メンタルモデルが「JavaScript そのまま」なので、一度慣れれば最も直感的だという評価は変わらない。

Qwik 2 — resumability という別の道

Qwik は hydration を避ける道を最後まで進む。2026年5月時点で Qwik 2 が安定化段階にあり、QwikCity がメタフレームワークの役割を担う。

- **Resumability**: サーバーでレンダリングした HTML をそのまま受け取り、ユーザーが相互作用したコンポーネントのみ、その時点でコードがダウンロードされる。hydration の「最初から実行し直す」コストを廃する。

- `component$`、`$()`、`useSignal`、`useTask$`、`useStore` といった関数が中心 API。

- `$` サフィックスはビルド時にコードをチャンク分割するシグナルだ。

Qwik のコード例。

export default component$(() => {

const count = useSignal(0)

const onClick = $(() => count.value++)

return <button onClick$={onClick}>{count.value}</button>

})

Qwik のシェアは小さいが、「大規模 EC + SEO + 初回ペイント速度」の領域で強いというポジションが固まった。Builder.io がメインスポンサーだ。

Astro 5 — server islands と Content Layer でコンテンツサイトの標準に

Astro は2024年末に 5.0 をリリースし、2025年を経てコンテンツ中心のサイト(ブログ、マーケティング、ドキュメント、ニュース、小規模 EC)で事実上の標準になった。2026年5月時点の中心機能。

- **Server islands**: 一部の領域のみ動的にサーバーレンダリングし、それ以外は静的にする。Astro 版の Partial Prerendering だ。

- **Content Layer API**: 静的コンテンツだけでなく、外部 CMS/DB/API から取得したデータも統一された content loader で扱う。

- **View Transitions API** 統合、framework-agnostic island(`<MyReactComponent client:visible />` 形式)はそのまま。

Astro のコンポーネント例。

const posts = await Astro.glob('./posts/*.md')

Astro の強みは「デフォルトで 0KB JS、必要な部分だけ island として読み込む」点だ。

HTMX 2 — JS を最小化する道、いまも健在

HTMX は2024年にメジャー 2.0 をリリースし、2026年現在は安定ラインだ。サーバーから HTML フラグメントを受け取りページの一部を差し替えるモデルで、「バックエンドが強いチームが SPA の80%の効果を20%の複雑さで得る」というポジションだ。

- 別途のビルドツールが不要。CDN 1行で導入できる。

- Django、Rails、Phoenix、Laravel、FastAPI といったサーバーサイドフレームワークと自然につながる。

HTMX の典型は次のとおり。

現在時刻を取得

GitHub の一部 UI、Help Scout、Discord の一部管理画面、そして Django/Rails 界隈のサイドプロジェクトで HTMX の採用率がじわりと上がっている。

Next.js 16 — Partial Prerendering、after API、dynamicIO

Next.js は2025年秋に 15 から 16 へメジャーを上げた。2026年5月時点で 16.1.x が安定リリース。

- **Partial Prerendering (PPR)**: 静的シェルを即座に送り、動的部分(Suspense 境界)はストリーミングで埋める。正式 stable になった。

- **`after()` API**: レスポンスを送ったあとバックグラウンドで実行する副作用(ロギング、分析、メールキュー)。serverless で fire-and-forget を安全に扱う。

- **dynamicIO**: 動的/静的の境界を自動推論。`cookies()`、`headers()`、`searchParams` を使う位置に応じて境界が自動で引かれる。

- **Turbopack** が dev/build の両方でデフォルトのバンドラとして入った。

Next.js 16 のコード例。

// app/posts/[id]/page.tsx

export default async function Page({ params }: { params: Promise<{ id: string }> }) {

const { id } = await params

return (

)

}

Next.js は依然として React エコシステムのデフォルトメタフレームワークだ。Vercel がメインスポンサーで、RSC と PPR を最も積極的に推進している。

Remix → React Router 7 — 統合された

Remix は2024〜2025年にかけて React Router 7 に吸収統合された。2026年5月時点で、事実上2つの名前が1つのライブラリを指す。

- React Router 7 は SPA モードと「framework モード」(=旧 Remix)の2つで動作する。

- loader/action モデル、ネストルート、エラーバウンダリ、フォームアクションがそのまま生きている。

- Shopify が後援するため、EC と Hydrogen がワンセットで強調される。

既存の Remix コードはほぼそのまま React Router 7 で動作する。import パスが `@remix-run/*` から `react-router` に変わった程度だ。

TanStack Start — Tanner Linsley 陣営のメタフレームワーク

TanStack(Tanner Linsley 陣営)は React Query、Router、Table、Form、Virtual ですでに React エコシステムの重要な一角だ。2025年にベータ入りした **TanStack Start** が2026年に正式 1.0 を目指している。

- フルスタック React フレームワーク。ファイルベースルーティング + 型安全な loader + サーバー関数。

- Vite 6 + Vinxi(または自前のサーバーアダプタ)ベース。

- 「Next.js ほど決まりごとが多いのは嫌だが、React Router 7 より風呂敷を広げてほしい」位置を狙う。

ルーター定義例。

export const Route = createFileRoute('/posts/$postId')({

loader: async ({ params }) => {

return await fetch(`/api/posts/${params.postId}`).then((r) => r.json())

component: PostPage,

})

function PostPage() {

const post = Route.useLoaderData()

return <h1>{post.title}</h1>

}

Nuxt 4 + Nitro 3 — Vue 陣営のフルスタック解

Vue 陣営のメタフレームワーク Nuxt は2025年にメジャー 4 をリリース、2026年に 4.x ラインが安定した。

- **Nitro 3** ベースの universal サーバー — Node、Bun、Deno、Cloudflare Workers、Vercel、Netlify Edge のどこでも同じコードで動く。

- Vue 3.6 の Vapor モードと自然に連携する。

- ルーティング、layouts、サーバールート(`server/api/`)、`useFetch`/`useAsyncData` のコンポーザブルがファーストクラス。

- `nuxt/content`、`nuxt/image`、`nuxt/ui` といったモジュールエコシステムが厚い。

Angular 19 — signals + control flow + deferrable views で再浮上

長らく「エンタープライズに閉じ込められている」と評されてきた Angular は、17〜19 を経て急速に変わった。

- **Signals**(`signal`、`computed`、`effect`)が standalone API として安定。

- **新しい control flow**: `@if`、`@for`、`@switch` のテンプレート構文が `*ngIf` 系を置き換える。

- **Deferrable views**(`@defer`): ビューポートに入ったときに lazy load される部分。

- **Standalone components** がデフォルト。モジュールシステムはオプトイン。

- SSR/hydration が正式 stable、partial hydration も 19 で入った。

Angular は韓国/日本の大手 SI、金融、ヘルスケアで強い位置を維持している。

Lit、Marko、Mitosis — 小さいが意味のあるカード

- **Lit 4**: Google が推進する web components ライブラリ。デザインシステムとマイクロフロントエンドで強い。ING、Adobe Spectrum、SAP UI5、GitHub の一部 UI が web components ベースだ。

- **Marko**: eBay が作った SSR-first フレームワーク。Marko 6 は fine-grained reactivity と自動コード分割を持つ。シェアは小さいが eBay 内ではメイン。

- **Mitosis**: Builder.io が作った「1回書いて複数フレームワークにコンパイル」するメタツール。JSX 風の構文で書くと、React、Vue、Svelte、Solid、Qwik、Angular 用のコンポーネントを生成する。デザインシステム/コンポーネントライブラリのベンダーに有用だ。

レンダリングモデル比較 — SSG vs SSR vs ISR vs PPR vs Streaming

| モデル | 説明 | 代表的な用途 | 備考 |

| --- | --- | --- | --- |

PPR は2026年の「デフォルト・メンタルモデル」になった。キャッシュできる部分はキャッシュし、ユーザー固有/リアルタイムの部分のみ動的に置く、境界を明示するモデルだ。

ビルドツール — Vite 6、Turbopack、Rspack、esbuild、swc、Bun、Deno 2、oxc

バンドラ/ビルドツール市場も2026年でほぼ整理された。

- **Vite 6**: Rollup → Rolldown(oxc ベースの Rust バンドラ)への移行が進行中。dev は esbuild + native ESM、build は Rolldown で統一が目標。事実上、SvelteKit/Nuxt/SolidStart/Astro/TanStack Start の共通基盤だ。

- **Turbopack**: Vercel が作る Next.js 用 Rust バンドラ。Next.js 16 で dev/build の両方デフォルト。

- **Rsbuild + Rspack**: ByteDance が作った Rust ベースの webpack 互換バンドラ。webpack 移行が最も容易という強み。

- **esbuild**: Go で書かれたトランスパイラ/バンドラ。他ツールの内部エンジンとして広く使われる。

- **swc**: Rust で書かれた Babel の代替。Next.js 内部のコンパイラ。

- **Bun**: JavaScript ランタイム + パッケージマネージャ + バンドラをひとまとめに。1.x ラインが安定し、Node 互換性もほぼ追いついた。

- **Deno 2**: 2024年末にメジャー 2、npm 互換性とワークスペースが正式に。JSR(Deno の npm 代替レジストリ)が生き残った。

- **oxc**: Rust で書かれた JavaScript ツールチェーン(parser、リンタ `oxlint`、transformer)。Rolldown のコアでもある。

ビルドツールの大局は「Rust + native が全レイヤを蚕食する」だ。

状態管理 — Redux Toolkit、Zustand、Jotai、TanStack Query、SWR、Valtio、MobX、Effector

グローバル状態管理の形も2026年で整理された。

- **サーバー状態**は **TanStack Query**(React Query)と **SWR** が二分。ほぼデフォルト。

- **クライアント状態(小)**: `useState` + Context で十分なケースが増えた。

- **クライアント状態(中)**: **Zustand** が事実上のデフォルト。小さくボイラープレートがない。

- **クライアント状態(atom ベース)**: **Jotai** が強力。Recoil は事実上メンテナンスモード。

- **クライアント状態(プロキシベース)**: **Valtio**、**MobX**。

- **クライアント状態(エンタープライズ)**: **Redux Toolkit** が依然大規模コードベースの標準。RTK Query まで含めればサーバー状態もカバー。

- **イベントベース**: **Effector** がロシア圏/欧州で厚いファン層を持つ。

Zustand の典型例。

interface Counter {

count: number

inc: () => void

}

export const useCounter = create<Counter>((set) => ({

count: 0,

inc: () => set((s) => ({ count: s.count + 1 })),

}))

スタイリング — Tailwind 4 Oxide、CSS-in-JS の後退、shadcn/ui の拡散

CSS 陣営の2026年の風景。

- **Tailwind CSS 4**: 2025年1月に GA。Oxide(Rust)エンジンでビルドが10〜100倍速くなり、ネイティブ CSS variables、container queries、cascade layers をファーストクラスで扱う。設定ファイルはほぼ消え、CSS-first config に変わった。

- **CSS-in-JS の後退**: `styled-components` は2024年に事実上 maintenance モードを宣言。`Emotion` は生きているが新規採用は減った。RSC との相性が悪いのが大きい理由。

- **CSS Modules**: いまも最も安全な選択肢。Vite/Next/Nuxt のいずれもファーストクラス。

- **Panda CSS**: ChakraUI チームが作った zero-runtime CSS-in-JS。Tailwind の代替。

- **vanilla-extract**: TypeScript で CSS を書く。Seek が作った。

- **UnoCSS**: atomic CSS エンジン。Tailwind 互換でより軽量。

- **Mantine、Park UI、shadcn/ui**: コンポーネントライブラリ陣営。**shadcn/ui** は「コピペで取り込む」モデルで2024〜2026年に React 陣営で爆発的に普及。Park UI は同思想の Vue/Solid/Svelte 版。

shadcn/ui の CLI 利用例。

npx shadcn@latest init

npx shadcn@latest add button card dialog

テスティング — Playwright、Vitest 3、Storybook 9、Chromatic、Cypress

- **Playwright**: E2E の事実上のデフォルト。Microsoft 後援、Chromium/Firefox/WebKit すべてサポート、trace viewer が強力。

- **Vitest 3**: 2025年にメジャー 3。Jest とほぼ互換、Vite 友好的、明らかに速い。

- **Storybook 9**: 2026年初に GA。軽量化され、Vite ベースの構成がデフォルト。

- **Chromatic**: Storybook と組み合わせる視覚回帰テスト SaaS。

- **Cypress**: いまも大きなシェアだが、新規採用は Playwright に移行中。

- **Jest**: 生きているが、新規プロジェクトは Vitest へ。

Vercel AI SDK、T3 Stack、Refine など脇のカード

- **Vercel AI SDK**: React/Vue/Svelte/Solid における LLM 統合の標準ライブラリとして定着。`useChat`、`useCompletion`、`streamText` などの API。

- **T3 Stack**(`create-t3-app`): Next.js + tRPC + Prisma + Tailwind + NextAuth のセット。フルスタックスタータとして依然人気。

- **Refine**: 管理画面/ダッシュボード特化の React フレームワーク。Ant Design/Material/Mantine と相性が良い。

- **Hydrogen**: Shopify の React Router 7 ベース EC フレームワーク。

韓国フロントエンドエコシステム — トス、カラット、ワディズ、クーパン

- **トス(Toss)**は React + Next.js + 自社デザインシステム + 自社モノレポツールチェーン。`slash`(オープンソース React ユーティリティ)、`toss/use-funnel`、`toss/suspensive` といった OSS を積極的に公開。

- **カラット(Karrot/당근)**は React + Next.js + TanStack Query + 自社デザインシステム `seed-design`。一部マイクロフロントエンドを導入。

- **ワディズ(Wadiz)**は Next.js + TypeScript + Tailwind のスタックを整理し、エンジニアブログで多数公開している。

- **クーパン(Coupang)**は部分的に React Native(アプリ)+ React/Next.js(Web)+ 自社デザインシステム。決済/注文といったコアは安定性優先で保守的。

- **カカオ、LINE、ウアハン兄弟**も React + Next.js がデフォルト、一部新規サービスで SolidJS/Svelte の採用を実験している。

韓国のカンファレンス(FEConf、JSConf Korea)でも 2025〜2026 年は RSC、signals、runes、PPR が支配的なテーマだった。

日本フロントエンドエコシステム — CyberAgent、ZOZO、freee、マネーフォワード、SmartHR

- **CyberAgent** は ABEMA(動画ストリーミング)、Ameba Blog、Tapple などで React + Next.js をメインに採用。Web Speed Hackathon といったフロントエンドカンファレンスも主催する。

- **ZOZO**(ZOZOTOWN)は Next.js + TypeScript + 自社デザインシステム。マイクロフロントエンドを段階的に導入。

- **freee**(会計 SaaS)は React + TypeScript + 自社デザインシステム `vibes`。アクセシビリティに強い。

- **マネーフォワード(Money Forward)**は Rails + React のハイブリッドから Next.js への漸進的移行中。

- **SmartHR** は React + 自社デザインシステム `smarthr-ui`(OSS)。アクセシビリティとデザインシステム運営において日本国内の模範事例としてよく挙がる。

日本陣営は韓国よりも Vue/Nuxt の比重がやや高い。Nuxt を作る NuxtLabs のコアメンバーに日本ベースがいて、Vue Fes Japan のようなカンファレンスが活発だ。

フレームワーク・ランタイムモデル比較表

| --- | --- | --- | --- | --- |

ベンチ数値は正確な値ではなく「感覚」として見る。同じアプリが各フレームワークでどれくらい違うサイズに落ちるかを比較する用途だ。

移行シナリオ — 「いま新規案件なら何を選ぶか」

正直なガイドライン。

- **コンテンツ中心(ブログ、マーケティング、ドキュメント)**: Astro 5。ほぼ迷う余地がない。

- **フルスタック SaaS、ダッシュボード、EC(React 寄り)**: Next.js 16 か React Router 7。チームが規約を好めば Next、もっと自由なら RR7。

- **フルスタック SaaS(Vue 寄り)**: Nuxt 4。Vapor モードを段階的に取り込む。

- **フルスタック SaaS(軽量・速度優先)**: SvelteKit 3 か SolidStart。

- **EC + SEO + 初回ペイント速度の極限**: Qwik 2 + QwikCity。ただし人材プールが小さいことを織り込む。

- **バックエンドが強いチーム、JS 最小化**: HTMX 2。

- **エンタープライズ/金融/大規模管理画面**: Angular 19。

- **デザインシステムベンダー**: Lit 4 + Mitosis でマルチフレームワーク対応。

状態管理/スタイリング/テスティングの標準はほぼ決まった。TanStack Query + Zustand + Tailwind 4 + shadcn/ui + Playwright + Vitest 3 + Storybook 9 の組み合わせが、React 陣営の事実上のデフォルトだ。

終わりに — 2026年の結論

2026年フロントエンドの中心メッセージは3つ。

- **レンダリングモデルがフレームワーク選択より重要になった。** PPR/streaming/server components/server islands/resumability を理解すれば、どのフレームワークに行っても意思決定が楽になる。

- **Rust + native が全ビルドレイヤを蚕食した。** Vite/Turbopack/Rspack/esbuild/swc/Bun/Deno/oxc — どの組み合わせを選んでも、5年前の webpack 時代とは桁違いの速度がベースラインだ。

- **共通インフラが標準化された。** TanStack Query + Tailwind 4 + shadcn/ui + Playwright + Vitest + Storybook はフレームワークと無関係にほぼどこでも使える共通カードだ。

フレームワーク戦争は終わっていないが、2018〜2022 のような「パラダイム戦争」の時期は過ぎた。いまは各モデルの長短がよく見えてきた時期、すなわち **選びどころの良い時期**だ。

References

- [React](https://react.dev) — React 公式ドキュメント、Compiler、Actions、Server Components。

- [Vue.js](https://vuejs.org) — Vue 3.6、Vapor Mode 公式ドキュメント。

- [Svelte](https://svelte.dev) — Svelte 5 runes、SvelteKit 3。

- [SolidJS](https://www.solidjs.com) — Solid 2.0、SolidStart 公式。

- [Qwik](https://qwik.dev) — Qwik 2、QwikCity。

- [Astro](https://astro.build) — Astro 5、server islands、Content Layer。

- [HTMX](https://htmx.org) — HTMX 2。

- [Next.js](https://nextjs.org) — Next.js 16、PPR、after、dynamicIO。

- [Nuxt](https://nuxt.com) — Nuxt 4、Nitro 3。

- [Angular](https://angular.dev) — Angular 19、signals、control flow。

- [Lit](https://lit.dev) — Lit 4。

- [Vite](https://vitejs.dev) — Vite 6、Rolldown。

- [Turbopack](https://turbo.build/pack) — Turbopack。

- [Rspack](https://rspack.dev) — Rspack、Rsbuild。

- [Bun](https://bun.sh) — Bun。

- [Tailwind CSS](https://tailwindcss.com) — Tailwind 4 Oxide。

- [shadcn/ui](https://ui.shadcn.com) — shadcn/ui。

- [TanStack](https://tanstack.com) — Query、Router、Start。

- [Vercel AI SDK](https://ai-sdk.dev) — Vercel AI SDK。