新登場したVite+が速すぎる！— ESLint 100倍、しかも Next.js でも動く

はじめに

JS開発のツール設定、プロジェクトごとに毎回つらくないだろうか。 ESLint、Prettier、Vitest、husky、lint-staged — 設定ファイルだけで5個以上、バージョン競合で半日溶けた経験がある人も多いはずだ。

2026年3月、Viteの作者Evan YouのVoidZero社から Vite+ Alpha が発表された。これらを 1コマンド・1設定ファイルに統一する ツールチェーンだ。実際にReact + TypeScriptプロジェクトとNext.jsプロジェクトの両方で試したので、何が変わるのかを整理する。

https://viteplus.dev
https://github.com/voidzero-dev/vite-plus

前提: Vite での開発経験がある方向け。Vite+ v0.1.11（Alpha）時点の情報。

結論：何が変わるのか

	従来	Vite+
設定ファイル	.eslintrc .prettierrc vitest.config.ts .husky/ lint-staged.config.js	vite.config.ts のみ
devDependencies	eslint, prettier, vitest, husky, lint-staged + 各プラグイン	vite-plus, typescript
コマンド体系	eslint . prettier --check . vitest tsc --noEmit	vp check で全部
ビルド内部	Rollup + esbuild（2つのバンドラが混在）	Rolldown（Rust製、統一）

設定の数が減るだけでなく、「ツールを組み合わせるコスト」自体がなくなる。

なぜツールが分散していたのか

そもそもなぜJSエコシステムはツールがバラバラだったのか。背景を理解しておくと、Vite+の設計判断が見えてくる。

従来のViteは「開発時はesbuild、本番はRollup」という二重構造だった。esbuildはGoで書かれていて速いがTree Shakingが弱い。RollupはJSで書かれていてTree Shakingは強いが遅い。この妥協のために、開発と本番で挙動が微妙に異なるという問題があった。

リントとフォーマットも同様だ。ESLintはASTベースで柔軟だが遅い。PrettierはCST（Concrete Syntax Tree）ベースで正確だが、ESLintのルールと競合する。eslint-config-prettier で競合を抑制するというツールの噛み合わせを人間が管理する構造になっていた。

Vite+はこの問題を、同じRustツールチェーン（Rolldown + Oxc）の上にすべてを統合することで根本解決している。ビルドもリントもフォーマットも同じASTパーサーを共有するため、ツール間の不整合が構造的に起きない。

Vite+ の2層構造 — 名前に騙されるな

ここが一番面白いポイントだ。試してみてわかったのだが、Vite+ は「Vite の拡張」ではない。「JS/TS の統一ツールチェーン」だ。

Vite+ は内部的に2つの層を持っている。

層	内容	対象
Quality 層	Oxlint（リント）、Oxfmt（フォーマット）、型チェック、pre-commit hook	全プロジェクト
Build 層	Rolldown（ビルド）、Vite dev server	Vite ベースのプロジェクトのみ

Next.js プロジェクトで検証してみた

vp create create-next-app で Next.js プロジェクトを作ってみた。生成されたのは普通の Next.js プロジェクトだが、vite.config.ts が追加されており、vp check が動く。

コマンド	React + Vite+	Next.js + Vite+
vp dev	Vite dev server	next dev
vp build	Rolldown	next build
vp check	Oxlint + Oxfmt	Oxlint + Oxfmt
vp test	Vitest	Vitest

ビルドとdev serverはフレームワーク側のものが使われるが、品質チェック系は共通でVite+が担う。 つまり vp check は pnpm validate のような立ち位置で、フレームワークに依存しない品質管理レイヤーとして機能する。

vp create は npm の create-* エコシステム全体に対応

vp create は特定のフレームワークだけをサポートしているわけではない。npm の create-* パッケージならなんでも使える。

vp create vite                 # create-vite
vp create create-next-app      # create-next-app
vp create @tanstack/start      # @tanstack/create-start
vp create github:user/repo     # GitHub テンプレート

内部的には npx create-* と同じことを実行し、その上に Vite+ の Quality 層を被せる。自作の create-* パッケージでも動く。

既存のエコシステムを壊さずに、品質層だけを統一する。 これが Vite+ の設計戦略だ。

実際に試してみた

インストール〜プロジェクト作成

curl -fsSL https://vite.plus | bash
vp create vite -- --template react-ts

生成された vite.config.ts

export default defineConfig({
  staged: { "*": "vp check --fix" },
  lint: { options: { typeAware: true, typeCheck: true } },
});

これが設定のすべてだ。 リント、フォーマット、型チェック、pre-commitフックの設定がこの数行に収まっている。husky も lint-staged も不要。

コマンドを実行してみる

vp dev     # 開発サーバー
vp check   # リント + フォーマット + 型チェック（全部）
vp build   # 本番ビルド（Rolldown）
vp test    # テスト（Vitest）

体感として、すべてが一瞬で終わる。本当に瞬きする間に終わる 小さいプロジェクトなので正確な計測は難しいが、ESLintで感じていた「数秒の待ち」が完全に消えた。公式によると、大規模プロジェクトでは以下の性能差が出ている。

ツール	従来比
Rolldown（ビルド）	1.6〜7.7倍高速
Oxlint（リント）	ESLintの約50〜100倍
Oxfmt（フォーマット）	Prettierの最大30倍

package.json の devDependencies

{
  "typescript": "~5.9.3",
  "vite": "npm:@voidzero-dev/vite-plus-core@latest",
  "vite-plus": "latest"
}

3つだけ。 vite が内部的に @voidzero-dev/vite-plus-core にエイリアスされていて、既存のViteプラグインとの互換性を保つ設計になっている。

他のアプローチとの比較

「ツールチェーン統一」には他のアプローチもある。

アプローチ	例	トレードオフ
All-in-one CLI	Vite+	統一されるが、個別ツールのカスタマイズ性は下がる
メタフレームワーク統合	Next.js (Turbopack)	フレームワーク選択に縛られる
Rust製ツール個別導入	Biome (lint+fmt)	組み合わせは自分で管理
従来ツール継続	ESLint + Prettier	柔軟だが設定コスト高

Vite+の立ち位置はフレームワークに依存しないツールチェーン層の統一だ。React でも Vue でも Svelte でも、Next.js でも、その下の品質チェックを統一する。Next.jsのTurbopackとは層が違う。

一方で、ESLintの豊富なプラグインエコシステム（eslint-plugin-react-hooks 等）がすべてOxlintに移植されているわけではない。プロジェクトによっては、現時点ではBiomeやESLint継続の方が現実的なケースもある。

注意点（Alpha版）

• 本番プロジェクトへの導入は時期尚早
• ESLintの全ルール・プラグインがOxlintにあるわけではない
• IDE連携（VSCode拡張等）はこれから整備される段階
• 既存プロジェクトの移行は vp migrate が用意されているが、Alpha段階では慎重に

まとめ

観点	評価
設定の簡素さ	設定ファイル5個 → 1個。最大のメリット
速度	体感で明らかに速い。CI/CDコスト削減にも直結
FW非依存	Next.js でも vp check が動く。品質層はFWを問わない
エコシステム互換	Viteプラグインは互換あり。ESLintプラグインは一部未対応
導入タイミング	個人プロジェクトで試す段階。業務は安定版を待つのが無難

Vite+は「ツールの選定・設定」という開発者の負担を構造的に解消する試みだ。 そしてその恩恵は Vite ベースのプロジェクトに限らない。名前こそ「Vite+」だが、実態は JS/TS エコシステム全体の品質基盤 を目指している。

まずは3行で体験できる。

curl -fsSL https://vite.plus | bash
vp create vite -- --template react-ts
vp dev

参考

• Announcing Vite+ Alpha
• Vite+ Documentation