2026年フロントエンドテストの最適解 — Vitest + Testing Library + Playwright、そしてNext.jsエコシステムの現在地

Jestの時代は終わり、Vitestが新たなデフォルトとなった。しかし本当に重要なのは「どのテストツールを使うか」ではなく、「フロントエンドエコシステム全体がどこへ向かっているか」だ。2026年、開発者たちが実際に選んでいる組み合わせを、データとコミュニティの議論をもとに整理する。

1. Next.jsは依然として王者なのか？ — データが語る現実

「新規プロジェクトを始めるなら、どのフレームワークを使うか？」——2024年までの答えはシンプルだった。Next.js。React開発者の約67%がNext.jsを使用し、Netflix、TikTok、Notionなどの大規模サービスが本番環境で運用している。Stack Overflow Developer Survey 2025でもReactは44.7%でフレームワーク1位を維持している。

しかし2025年後半から、空気が変わった。3つの変化が同時に起きたのだ。

第一に、Astroの急成長。 State of JS 2024でAstroは25%の採用率を記録した。コンテンツ中心のサイトでNext.js比LCP（Largest Contentful Paint）を40〜70%改善し、パフォーマンスの優位性を実証した。2026年1月にはCloudflareがAstroを買収し、オープンソースを維持しつつ開発を加速させると発表。Astro 6ベータはすでに公開されている。

第二に、React Server Components（RSC）のセキュリティインシデント。 2025年12月、RSCプロトコルでCVSS 10.0満点の深刻な脆弱性（CVE-2025-55182、通称React2Shell）が発見された。認証なしでリモートコード実行が可能であり、create-next-appのデフォルト設定だけでも脆弱だった。CISAがKnown Exploited Vulnerabilitiesカタログに登録し、中国を拠点とする脅威グループによる実際の攻撃も確認された。Vercelは自社プラットフォームを先にパッチしてからコミュニティに通知したが、この対応順序が利益相反の議論を呼んだ。

第三に、コミュニティの疲弊。 Hacker Newsで「Next.js is infuriating」というタイトルの投稿が数百の共感コメントを集めた。主な不満は3つに集約される。App Routerの過剰な複雑さ、Vercelへのベンダーロックイン、そして頻繁なbreaking change。ある開発者はこう書いた。

“If you are using Next.js, you have technically introduced a consultancy corporation as a dependency in your product.” （Next.jsを使うということは、技術的にはコンサルティング企業をプロダクトの依存関係に組み込んだということだ。）

とはいえ、Next.jsが凋落したわけではない。大規模インタラクティブアプリケーション（ダッシュボード、エディタ、複雑なSPA）では依然として最も成熟した選択肢だ。ただし「すべてのWebプロジェクトのデフォルト」という地位は揺らいでいる。

2. 2026年フレームワーク勢力図 — 用途別の最適解

State of JS 2024-2025とStack Overflow Survey 2025を総合すると、フレームワークの選択はますます用途ベースで分化している。

用途	推奨フレームワーク	理由
大規模インタラクティブアプリ	Next.js（App Router）	エコシステムの規模、採用市場、RSC対応
コンテンツ中心サイト/ブログ	Astro	最小限のJS、極限のパフォーマンス、Cloudflare支援
SSRが必要なReactアプリ	React Router v7（旧Remix）	Next.jsのコア機能をより軽量に
開発者満足度最優先	SvelteKit	5年連続満足度トップクラス、JSバンドル50〜70%削減
Vueエコシステム	Nuxt	Nitroエンジン、成熟したモジュールエコシステム
サーバー中心アーキテクチャ	HTMX + Alpine.js	「新しい古き良き方法」、最小限のJS

注目すべき数字がある。Stack Overflow 2025でSvelteの満足度（Admired）は62.4%で、Reactの52.1%を上回った。 Svelteを使った開発者の方が、Reactを使った開発者よりも満足しているということだ。State of JSではSvelteが「最も学びたいフレームワーク」1位（約50%）を獲得。実際の使用率も2019年の8%から2025年には約20%へと180%成長した。

一方、Hacker Newsでは**「サーバーへの回帰」の動き**が鮮明だ。Rails + Turbo/Stimulus、Django + HTMX、Phoenix LiveViewといったサーバーレンダリング中心のスタックが「SPA疲れ」の代替として活発に議論されている。「Ask HN: What’s the ideal stack for a solo dev in 2025?」というスレッドで最も多くの支持を集めたのはReactではなく、Ruby on Railsと「Go + HTMX + Tailwind + PostgreSQL」の組み合わせだった。

3. VitestがJestを超えた瞬間 — テストフレームワークの世代交代

本題に入ろう。2026年の新規プロジェクトにおいて、テストフレームワークのデフォルトはVitestだ。もはや議論の余地はない。

数字で見る転換点

Jestは依然として週間3,000〜3,700万ダウンロードを記録しているが、成長曲線は横ばいだ。Vitestは急勾配の上昇を続け、一部の集計では週間4,000万ダウンロードに到達している。State of JS 2024ではVitestが開発者満足度でJestを逆転した。

Vitestが勝利した理由

パフォーマンス。 コールドスタートがJest比で約66%高速。VitestはViteのHMRグラフを追跡し、変更されたモジュールを推移的にインポートしているテストのみを再実行する。Jestのgit diffヒューリスティクスより正確で速い。

ネイティブESMサポート。 JestでESMに移行すると設定地獄が待っている。VitestはESMとTypeScriptを追加設定なしでサポートする。Hacker Newsのある開発者はこう証言した。

“Jest presented a lot of issues after switching to ESM. Vitest was compatible with our existing Jest code.” （JestはESM移行後に多くの問題を引き起こした。Vitestは既存のJestコードと互換性があった。）

DX（Developer Experience）。 Viteベースのプロジェクトと設定を共有でき、watchモードの応答速度は体感できるほど速い。カバレッジも安定している。Jestの不安定なカバレッジ結果に不満を持つ開発者が、移行のきっかけとして挙げるケースが多い。

フレームワークサポート。 Nuxt、SvelteKit、Astro、Angularの最新ツーリングはすべてVitestをデフォルトまたは推奨ランナーとして採用している。Next.js公式ドキュメントも2026年2月のアップデートでVitestをJestと同等にサポートしている。

Jestが依然として有効なケース

React Native：Jestが唯一の公式対応テストランナー。
大規模レガシーコードベース：移行コストがメリットを上回る場合。
ナレッジベース：ブログやStack Overflowの回答がJest中心に蓄積されており、初心者には有利な面がある。

ダークホース：Node.js組み込みテストランナー

Hacker Newsで興味深い第三の選択肢が繰り返し登場している。node:testだ。「Jest is full of unneeded magic (= complexity), whereas node:test is straightforward」という意見が着実に上がっている。外部依存なしで最速の実行速度を誇るが、エコシステムとDXの面ではVitestに及ばず、メインストリーム入りにはまだ時間がかかる。

4. @testing-library/react — 揺るがないコンポーネントテストの標準

テストランナーがJestからVitestに変わっても、コンポーネントテストライブラリの標準は@testing-library/reactだ。「実装ではなくユーザーの振る舞いをテストする」という哲学は、2026年もフロントエンドテストの中核原則として受け入れられている。

Enzymeは React 18以降アップデートされておらず、React 19では完全に動作しない。事実上の終了宣告だ。

ひとつ重要な制約がある。 Next.js App Routerの非同期サーバーコンポーネント（async Server Components）は、現在VitestやJestでユニットテストできない。Next.js公式ドキュメントは非同期サーバーコンポーネントにはE2Eテストを推奨し、同期サーバーコンポーネントとクライアントコンポーネントは@testing-library/reactでユニットテスト可能と案内している。

5. E2Eテスト — PlaywrightがCypressを逆転した

E2E（End-to-End）テストの領域で、2024〜2025年の間に劇的な転換が起きた。2024年6月、Playwrightがnpm週間ダウンロード数でCypressを追い抜いた。 その後、差は広がり続けている。

2026年現在の数値：

Playwright：週間約3,300万ダウンロード、急成長中
Cypress：週間約600〜650万ダウンロード、2023年以降横ばい

State of JS 2025でPlaywrightは「Most Adopted」賞を受賞し、前年比+14%の成長を記録。QA専門家の約45%がPlaywrightを採用している。

Playwrightが勝利した理由

項目	Playwright	Cypress
ブラウザ対応	Chromium、Firefox、WebKit/Safari	Chromium、Firefox（Safari非対応）
並列実行	ネイティブサポート＋テストシャーディング	別途設定が必要
テストアクション速度	〜290ms	〜420ms
10並列テスト時メモリ	〜2.1GB	〜3.2GB
言語サポート	JS/TS、Python、Java、C#	JS/TSのみ
継続利用率（Retention）	94%	低い

特にSafari/WebKitサポートが決定的だ。iOSユーザーが無視できない割合を占めるサービスでは、Safariをテストできないcypressは選択肢から外れざるを得ない。

Cypressが依然として光る領域はデバッグDXだ。タイムトラベルデバッガーとコマンドログはPlaywrightより直感的である。チームのオンボーディングを重視し、Safariテストが不要であれば、Cypressも依然として合理的な選択肢だ。Cypressは最近「Cypress AI」をリリースし、自然言語で不足しているテストを生成する機能を追加した。

6. 2026年新規Next.jsプロジェクトの推奨テスト構成

Next.js公式ドキュメント（2026年2月更新）がサポートするツールは4つ：Vitest、Jest、Playwright、Cypress。このうちコミュニティのコンセンサスが収束している組み合わせは以下の通りだ。

┌─────────────────────────────────────────────────────────┐
│  テスト階層              ツール                           │
├─────────────────────────────────────────────────────────┤
│  ユニット/コンポーネント   Vitest + @testing-library/react │
│  E2Eテスト               Playwright                      │
│  DOM環境                 jsdom（またはVitest Browser Mode） │
│  カバレッジ               v8（Vitest内蔵）                 │
│  カバレッジ目標            80%以上                         │
│  テストファイル配置        実装ファイルの隣にco-location     │
└─────────────────────────────────────────────────────────┘

Vitest Browser ModeはVitest 4.0（2025年10月）でstableに昇格した注目の機能だ。jsdomの代わりに実際のChromium、Firefox、WebKitでユニット/コンポーネントテストを実行できる。ただしHacker Newsでは「ブレークポイントがリフレッシュ時に消える」「CI設定が複雑」という報告があり、本番レベルの安定性はまだ検証中だ。

7. テストを超えて — 2026年フロントエンドプロジェクトの全体構成

テストツールはプロジェクト全体構成の一部に過ぎない。コミュニティの合意が収束しつつある2026年の「理想的な」Next.jsプロジェクトスタックを整理する。

コアスタック

領域	ツール	備考
フレームワーク	Next.js 15+（App Router）	用途に応じてAstro、React Router v7も
言語	TypeScript（strict mode）	事実上必須
スタイリング	Tailwind CSS v4 + shadcn/ui	v4はCSS容量70%削減、shadcn/uiはGitHub 10万スター
サーバー状態	TanStack Query	週間500万ダウンロード
クライアント状態	Zustand	週間400万ダウンロード、新規プロジェクト40%が採用
フォーム	React Hook Form + Zod	型安全なバリデーション
ORM	Drizzle ORM	エッジ/サーバーレス対応、Prisma比で軽量
認証	Clerk / NextAuth.js / Lucia	プロジェクト規模に応じて選択
パッケージマネージャー	pnpm（モノレポ）/ Bun（単体）	Bunはインストール3秒、pnpmは厳密な依存関係管理
リンティング	ESLint + Prettier	Biome（56倍高速）が台頭中だがFW向けプラグイン不足
テスト	Vitest + Playwright	本文参照
モノレポ	Turborepo（シンプル）/ Nx（複雑）	両方ともRustへのコア移行中

注目すべきトレンド

styled-componentsの退場。 ランタイムCSS-in-JS（styled-components、Emotion）はReact Server Componentsと互換性がない。2025〜2026年の新規プロジェクトでの採用率は7%まで急落した。Tailwind CSSが68%で圧倒的だ。

Reduxの後退。 Redux Toolkitは依然として週間400万ダウンロードを記録しているが、新規プロジェクトで手書きReduxを選択する割合は約10%にまで低下。Zustand（クライアント状態）とTanStack Query（サーバー状態）の組み合わせが新たな標準だ。

Biomeの台頭。 ESLint + Prettierを一つのツールで置き換えようとするBiomeは、56倍高速な処理速度と423以上のルールを提供する。月間1,500万ダウンロード（ESLintの7,900万に対して）でまだ差はあるが、成長率は急峻だ。ただしeslint-plugin-react-hooksやeslint-plugin-nextのようなフレームワーク特化プラグインが不在のため、Next.jsプロジェクトではまだESLint + Prettierが安全な選択だ。

8. Hacker Newsが語るフロントエンドの未来

Hacker Newsコミュニティの2025〜2026年の議論で繰り返し登場するテーマを整理する。

「複雑さへの反乱」

最も強い潮流はSPA過剰への反省だ。「Moving on from React, a year later」という投稿で、ある開発者はこう述べている。

“It was MUCH easier to structure everything as pytest unit tests and completely rely on Django for all the business logic rather than trying to put state in the frontend.”

フロントエンドに状態を持たせようとして苦労するより、Djangoですべてのビジネスロジックを処理してpytestでテストする方がはるかに楽だったという話だ。HTMX、Rails + Turbo、Phoenix LiveViewといったサーバーレンダリングスタックが「SPA脱出口」として真剣に議論されている。

「ツール疲れのパラドックス」

State of JSの調査で、回答者一人あたり平均4.4個のテストツールを使用しているという結果が出た。テスト領域で最も多い不満はモッキング（267件）と設定/構成（154件）だ。ツールは良くなっているが、同時に多すぎる。コミュニティが求めているのは「組み合わせ」ではなく「簡素化」だ。

AIの影響

Cypress AI、TestMu AI（旧LambdaTest）のように、自然言語でテストを生成するツールが登場している。Next.js 16はDevtools MCP（Model Context Protocol）を導入し、AIベースのデバッグワークフローをサポートしている。しかしHacker Newsの視点は冷静だ。

“99% of working with this technology is making a JSON HTTP call to a chat completion endpoint.”

AIが開発スタックの選択自体を変えることはない——というのが現時点での大方の見解だ。

9. 結論 — 実用的な選択のためのガイド

2026年のフロントエンドエコシステムにおける核心メッセージをまとめる。

テストツールは決着がついた。 新規プロジェクトにおけるVitest + @testing-library/react（ユニット/コンポーネント）+ Playwright（E2E）は、もはや「トレンディな選択」ではなくコミュニティのコンセンサスだ。

フレームワークは用途に合わせて。 「とりあえずNext.js」の時代は過ぎた。コンテンツサイトならAstro、軽量なSSRならReact Router v7、開発者体験を最優先にするならSvelteKitを真剣に検討すべき時が来ている。もちろん、複雑なインタラクティブアプリにおけるNext.jsのエコシステムは依然として代替が難しい。

シンプルさこそ力。 Hacker Newsで最も一貫して繰り返されるアドバイスは「use what you know（知っているものを使え）」だ。完璧なスタックを探すことに時間を費やすより、馴染みのあるツールで素早く始める方がいい。2026年の「理想的なスタック」は確かに存在するが、それがすべてのプロジェクトの正解とは限らない。

フロントエンドテストの世界は「混沌の中間地点（messy middle）」を抜け、安定した勝者が見え始めている。Vitest、Testing Library、Playwright——この3つが2026年の勝者だ。そしてその上に載るフレームワーク、スタイリング、状態管理は、自分のプロジェクトが実際に解くべき問題に合わせて選べばいい。

参考資料・出典：