LabHub

ブログ

フロントエンドフレームワーク 2026 完全ガイド - React 19 · Vue 3.6 Vapor · Svelte 5 · SolidJS 2 · Qwik · Astro 5 · HTMX 2 · Next 16 · Nuxt 4 · Angular 19 · Tailwind 4 · Vite 6 徹底解説

2026-05-16 · 23 分で読めます · #frontend#react#vue#svelte#solidjs#qwik#astro#htmx#next-js#nuxt#angular#tailwind-css#vite#tanstack#shadcn

한국어English日本語

はじめに — 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 19 Actions の典型コード。

'use client'
import { useActionState } from 'react'

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 (
    <form action={formAction}>
      <input name="email" type="email" required />
      <button disabled={pending}>{pending ? '購読中...' : '購読'}</button>
      {state?.ok && <p>購読完了</p>}
    </form>
  )
}

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)を出力する。

Vue 3.6 Vapor の使用例。

<script setup vapor>
import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)
</script>

<template>
  <button @click="count++">{{ count }} / {{ double }}</button>
</template>

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

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

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

Svelte 5 runes の実コード。

<script lang="ts">
  let count = $state(0)
  let double = $derived(count * 2)

  $effect(() => {
    console.log('count changed:', count)
  })
</script>

<button onclick={() => count++}>{count} / {double}</button>

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

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

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

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

import { createSignal, createEffect } from 'solid-js'

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 がメタフレームワークの役割を担う。

Qwik のコード例。

import { component$, useSignal, $ } from '@builder.io/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月時点の中心機能。

Astro のコンポーネント例。

---
import Header from '../components/Header.astro'
import Counter from '../components/Counter.tsx'
const posts = await Astro.glob('./posts/*.md')
---

<html>
  <body>
    <Header />
    <h1>ブログ</h1>
    <Counter client:visible />
    <ul>{posts.map((p) => <li>{p.frontmatter.title}</li>)}</ul>
  </body>
</html>

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

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

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

HTMX の典型は次のとおり。

<button hx-get="/api/now" hx-target="#clock" hx-swap="innerHTML">
  現在時刻を取得
</button>
<div id="clock"></div>

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 が安定リリース。

Next.js 16 のコード例。

// app/posts/[id]/page.tsx
import { Suspense } from 'react'

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  return (
    <div>
      <h1>Post {id}</h1>
      <Suspense fallback={<p>コメント読み込み中...</p>}>
        <Comments id={id} />
      </Suspense>
    </div>
  )
}

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

Remix → React Router 7 — 統合された

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

既存の 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 を目指している。

ルーター定義例。

import { createFileRoute } from '@tanstack/react-router'

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 ラインが安定した。

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

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

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

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

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

モデル説明代表的な用途備考
SSGビルド時に HTML 生成ドキュメント/マーケティング/ブログ最も安く速い、更新頻度が低い
SSRリクエストごとにサーバーレンダーダッシュボード、パーソナライズ動的データ、無限キャッシュ不可
ISRSSG + バックグラウンド再生成ニュース、カタログrevalidate 周期を設定
PPR静的シェル + 動的領域のストリーミングハイブリッドページNext 16, Astro 5 server islands
Streaming SSRSuspense 単位でチャンク送出データが遅いページReact 18+, SvelteKit, SolidStart

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

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

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

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

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

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

Zustand の典型例。

import { create } from '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年の風景。

shadcn/ui の CLI 利用例。

npx shadcn@latest init
npx shadcn@latest add button card dialog

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

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

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

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

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

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

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

フレームワークランタイムモデルSSRバンドルサイズ(hello world)デフォルト・メタ
React 19VDOM + Compiler メモ化RSC + Streaming~40KBNext.js / RR7
Vue 3.6VDOM または Vapor signalsSSR + Suspense~25KB(Vapor)Nuxt 4
Svelte 5runes signals + コンパイル DOMSvelteKit SSR~10KBSvelteKit 3
SolidJS 2signals + コンパイル DOMSolidStart SSR~7KBSolidStart
Qwik 2resumability(コードチャンク)QwikCity~1KB 初期 JSQwikCity
Astro 5islands(デフォルト 0KB)server islandsほぼ 0Astro 自体
Angular 19Zoneless + signalsHydration + partial~80KBAngular CLI
Lit 4web componentsSSR + lit-ssr~6KB単独 / Astro

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

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

正直なガイドライン。

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

終わりに — 2026年の結論

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

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

References

コメント

まだコメントはありません。

ログインするとコメントできます