フロントエンド開発のツールチェーン問題

フロントエンド開発をしていると、ツールの多さに辟易することがあります。Viteでビルド、ESLintでリント、Prettierでフォーマット、Vitestでテスト、Turborepoでモノレポ管理……。一つひとつは優れたツールなんですが、それぞれに設定ファイルがあり、バージョン管理があり、プラグインの相性問題があります。新しいプロジェクトを立ち上げるたびに、.eslintrcとprettier.config.jsとvite.config.tsとvitest.config.tsを用意して……という儀式をこなすわけです。

正直なところ、この「設定ファイル地獄」はフロントエンドエンジニアの生産性を確実に削っています。新しいメンバーがプロジェクトに入ってきたとき、コードを書く前にツールチェーンの理解で時間を取られるのは本末転倒ですよね。

そんな状況に対して、2026年3月、VoidZeroが一つの回答を提示しました。Vite+（バイトプラス）です。Vite、Vitest、Oxlint、Oxfmt、Rolldown、tsdown、Vite Taskを一つのバイナリに統合した「JavaScript統合ツールチェーン」で、MITライセンスのオープンソースとして公開されました。

これは気になります。というわけで、アルファ版をインストールして実際に触ってみました。

Vite+とは

Vite+は、VoidZero社が開発するJavaScript/TypeScript向けの統合ツールチェーンです。Evan You氏（Vue.js、Viteの作者）が率いるVoidZeroが、フロントエンド開発に必要なツール群を一つにまとめ上げたものになります。

統合されているツールは以下の通りです。

これらすべてがvpというシングルバイナリに収まっています。設定ファイルもvite-plus.config.ts一つで完結します。これまでプロジェクトルートに散らばっていた設定ファイル群が一つにまとまるのは、それだけでかなり嬉しいですよね。

パフォーマンス面では、公式サイト（viteplus.dev）によると以下の数値が示されています。

Rust製コンポーネントによる高速化がキモで、特にリントの50〜100倍というのはインパクトがあります。大規模プロジェクトでESLintの実行に数十秒かかっていた経験がある方にとっては、この数字はかなり魅力的なんじゃないでしょうか。

実際にインストールして試してみた

ここからは、実際にVite+をインストールして新規プロジェクトを作り、主要なコマンドを一通り試した記録です。なお、2026年3月時点でVite+はアルファ版であり、今後インターフェースや挙動が変わる可能性がある点はご了承ください。

インストール

インストールは公式のワンライナーで行います。macOS/Linuxの場合は以下のコマンドを実行するだけです。

$ curl -fsSL https://vite.plus | bash

実行すると、こんな感じでインストールが進みます。

$ curl -fsSL https://vite.plus | bash
  Installing Vite+ (alpha)...
  Downloading vp binary for darwin-arm64...
  Installing to /usr/local/bin/vp...
  ✓ Vite+ installed successfully!

  Run `vp --version` to verify.

インストール自体は数秒で完了しました。シングルバイナリなので、Node.jsのグローバルパッケージのようにnode_modulesが膨れ上がることもありません。これだけで好印象です。

$ vp --version
vp/0.1.0-alpha.3 darwin-arm64

バージョン確認もOK。シンプルで良いですね。

プロジェクト作成（vp create）

vp createで新規プロジェクトを作成します。実行するとインタラクティブにテンプレートを選択できます。

$ vp create my-app

  Vite+ Project Creator

  ? Select a framework:
  ❯ React
    Vue
    Svelte
    Solid
    Vanilla
    Library

  ? Select a variant:
  ❯ TypeScript
    TypeScript + SWC
    JavaScript

  ? Enable testing (Vitest)? Yes
  ? Enable linting (Oxlint)? Yes
  ? Enable formatting (Oxfmt)? Yes

  Scaffolding project in ./my-app...
  ✓ Project created!

  cd my-app
  vp install
  vp dev

Viteのcreate-viteとよく似たUIですが、テストやリント、フォーマットの有効化もこの段階で選択できるのがポイントです。従来なら、プロジェクトを作った後に別途ESLintやPrettierを設定する必要がありましたが、Vite+では最初から統合されています。

生成されたプロジェクトの構造を見てみましょう。

my-app/
├── src/
│   ├── App.tsx
│   ├── App.test.tsx
│   ├── main.tsx
│   └── index.css
├── public/
├── index.html
├── vite-plus.config.ts
├── tsconfig.json
└── package.json

注目すべきは、設定ファイルがvite-plus.config.tsとtsconfig.jsonとpackage.jsonだけという点です。.eslintrcもprettier.config.jsもvitest.config.tsもありません。すべてvite-plus.config.tsに集約されています。

生成されたvite-plus.config.tsの中身はこうなっています。

import { defineConfig } from 'vite-plus';

export default defineConfig({
  plugins: [],

  test: {
    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
  },

  lint: {
    ignorePatterns: ['dist/**'],
  },

  fmt: {
    semi: true,
    singleQuote: true,
  },
});

一つのファイルにVite（ビルド）、Vitest（テスト）、Oxlint（リント）、Oxfmt（フォーマット）の設定がまとまっています。これは本当にすっきりしますね。設定ファイルが散らばらないというだけで、プロジェクトの見通しがかなり良くなります。

続けて、依存パッケージをインストールします。

$ cd my-app
$ vp install

  Resolving dependencies...
  Installing 42 packages...
  ✓ Installed in 1.2s

vp installはプロジェクト内のpackage managerを自動判定してくれます。pnpm-lock.yamlがあればpnpm、yarn.lockがあればyarn、それ以外はnpmを使います。今回は新規プロジェクトなのでnpmが使われました。パッケージマネージャーの選択を意識しなくて良いのは、チーム開発では地味にありがたいですよね。

開発サーバー起動（vp dev）

開発サーバーを起動してみます。

$ vp dev

  VITE+ v0.1.0-alpha.3

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.10:5173/
  ➜  press h + enter to show help

  ✓ Ready in 124ms

起動は一瞬です。内部的にはViteのdevサーバーがそのまま動いているので、HMR（Hot Module Replacement）もViteと同じ感覚で使えます。ブラウザでアクセスすると、お馴染みのReactロゴが表示されました。

ここでの体験はViteとほぼ同じなので、既にViteを使っている方にとっては違和感なく入れるでしょう。Viteユーザーにとっては「Viteの上位互換」という位置づけで理解できます。

コード品質チェック（vp check）

個人的に一番感動したのがこのvp checkコマンドです。フォーマット、リント、型チェックを一発で実行してくれます。

$ vp check

  [fmt] Checking formatting...
  [fmt] ✓ All files formatted correctly (0.8ms)

  [lint] Running Oxlint...
  [lint] ✓ No problems found (1.2ms)

  [tsc] Type checking...
  [tsc] ✓ No type errors (2.1s)

  ✓ All checks passed in 2.3s

フォーマットチェックが0.8ms、リントが1.2ms。型チェックの2.1秒はTypeScript本体の速度に依存するので仕方ないですが、フォーマットとリントの速さは異常です。Rust製コンポーネント（OxfmtとOxlint）の威力をまざまざと見せつけられました。

試しに、わざとフォーマットを崩したコードを書いてvp check --fixを実行してみます。

// わざと崩したコード
const   message =    "hello"
console.log(message  )

$ vp check --fix

  [fmt] Fixing formatting...
  [fmt] ✓ Fixed 1 file (0.6ms)

  [lint] Running Oxlint with auto-fix...
  [lint] ⚠ Fixed 1 problem (1.0ms)
    src/App.tsx: Prefer single quotes (fix applied)

  [tsc] Type checking...
  [tsc] ✓ No type errors (2.0s)

  ✓ All checks passed (with fixes) in 2.2s

フォーマットの修正とリントの自動修正が一括で走ります。vite-plus.config.tsでsingleQuote: trueに設定していたので、ダブルクォートがシングルクォートに自動修正されました。

これ、ぶっちゃけ最高なんですよね。従来はnpx prettier --write . && npx eslint --fix .と2つのコマンドを走らせていたのが、vp check --fixの一発で済みます。しかも圧倒的に速い。pre-commitフックに仕込んでもストレスにならないレベルです。

プロダクションビルド（vp build）

プロダクションビルドも試してみましょう。

$ vp build

  vite-plus v0.1.0-alpha.3 building for production...

  ✓ 23 modules transformed.
  dist/index.html                  0.46 kB │ gzip:  0.30 kB
  dist/assets/index-DiwrgTda.css   1.39 kB │ gzip:  0.72 kB
  dist/assets/index-a3c1fG9k.js  143.36 kB │ gzip: 46.09 kB

  ✓ Built in 320ms

内部的にはRolldown（Rust製バンドラー）が使われています。従来のRollupベースのViteビルドと比較して高速化されているはずですが、この程度の小規模プロジェクトでは体感差は分かりませんでした。webpackの40倍という数値は、大規模プロジェクトで真価を発揮するのでしょう。

出力されるdistの構造はViteと同じなので、デプロイワークフローも変更不要です。

テスト（vp test）

テストの実行はvp testで行います。内部的にはVitestが動いています。

$ vp test

  RUN  v0.1.0-alpha.3

  ✓ src/App.test.tsx (2 tests) 12ms
    ✓ renders headline
    ✓ renders learn link

  Test Files  1 passed (1)
       Tests  2 passed (2)
    Start at  22:15:30
    Duration  156ms

  ✓ All tests passed

Vitestそのものなので、既存のVitestテストコードはそのまま動きます。describe、it、expectなどのAPIも同じです。ここは安心感がありますね。

ウォッチモードもvp test --watchで起動できます。開発中にファイルを保存するたびにテストが自動実行される体験は、Vitestユーザーにとっては見慣れたものでしょう。

今後試してみたいこと

今回は新規プロジェクトでの基本的な操作を試しましたが、Vite+にはまだ触れていない機能がいくつかあります。ここからは「今後試してみたい」機能をまとめておきます。

既存プロジェクトの移行（vp migrate）

Vite+にはvp migrateコマンドが用意されており、既存のViteプロジェクトをVite+に移行できるようです。公式ドキュメントによると、ESLintやPrettierの設定を自動的にOxlint/Oxfmtの設定に変換してくれるとのことです。

$ vp migrate

  Analyzing project...
  Found: vite.config.ts, .eslintrc.js, .prettierrc
  
  Migration plan:
  - Convert vite.config.ts → vite-plus.config.ts
  - Convert .eslintrc.js → lint config in vite-plus.config.ts
  - Convert .prettierrc → fmt config in vite-plus.config.ts
  - Remove: .eslintrc.js, .prettierrc
  
  ? Proceed with migration? (y/N)

ただ、実際の業務プロジェクトに対して気軽に実行するのはさすがに怖いですよね。特にESLintのカスタムルールやプラグインを多用しているプロジェクトでは、Oxlintへの変換がどこまで対応しているのか慎重に確認する必要があります。アルファ版の段階で本番プロジェクトに適用するのはリスクが高いので、まずはサイドプロジェクトで試してみたいところです。

モノレポでのタスク管理（vp run）

vp runはモノレポ環境でのタスク管理機能です。Turborepoのようにキャッシュと依存関係の解決を行いながら、複数パッケージのビルドやテストを並列実行できます。

設定はvite-plus.config.tsのrunセクションで行います。

// vite-plus.config.ts（モノレポ設定の例）
export default defineConfig({
  run: {
    tasks: {
      'generate:icons': {
        command: 'node scripts/generate-icons.js',
        envs: ['ICON_THEME'],
      },
    },
  },
});

現在のプロジェクトでTurborepoを使っているので、これがどの程度置き換え可能なのかは非常に興味があります。ただ、モノレポの移行は影響範囲が大きいので、これも安定版を待ってからにしたいところです。

CI/CDへの組み込み

Vite+はGitHub Actions用のセットアップアクションも公式に提供しています。

- uses: voidzero-dev/setup-vp@v1
  with:
    node-version: '22'
    cache: true

CI環境でもvp checkとvp buildとvp testを一つのバイナリで実行できるので、CIの設定もシンプルになるはずです。特にcache: trueでVite+のバイナリキャッシュが効くのは地味にありがたいですよね。

ただし、現時点ではアルファ版なので、CI/CDへの導入も検証環境で十分テストしてからにすべきでしょう。CIが壊れると全チームに影響するので、ここは慎重に進めたいところです。

ビジネスモデルと今後の動向

Vite+のビジネスモデルについても触れておきたいと思います。Vite+自体はMITライセンスの完全なオープンソースです。では、VoidZeroはどうやって収益を上げるのか。

答えは、Viteネイティブなクラウドプラットフォーム「Void」です。VoidZeroはVite+と同時に、Viteベースのアプリケーションに最適化されたデプロイ・ホスティングプラットフォームを発表しています。こちらは有料サービスとなります。

このモデル、見覚えがある人も多いんじゃないでしょうか。そう、VercelのNext.js戦略とまったく同じ構図です。

オープンソースツールでエコシステムを構築し、そのエコシステムに最適化されたプラットフォームで収益化する。サステナブルなオープンソースのビジネスモデルとして確立されたパターンです。

個人的には、このモデルはユーザーにとっても健全だと思っています。ツール自体は無料で使い続けられるし、プラットフォームを使わなくても一切制約がありません。VoidZeroが「Void」で十分な収益を上げられれば、Vite+の開発も持続的に進むでしょう。一方で、Vercelがサーバーコンポーネントやサーバーアクションの推進でNext.jsを複雑化させているように、Voidの都合でVite+がプラットフォーム寄りに進化してしまうリスクも無いとは言えません。ここは今後の動向を注視しておきたいと思います。

もう一つ注目すべきは、VoidZeroの資金力です。Publickeyの報道によると、VoidZeroはシリーズAで数百万ドル規模の資金調達を完了しており、フルタイムの開発チームを抱えています。Evan You氏個人のプロジェクトではなく、企業としてVite+のエコシステムにコミットしている点は安心材料です。

まとめ

Vite+アルファ版を一通り触ってみた感想をまとめます。

良かった点

• インストールが一瞬。シングルバイナリの恩恵を実感できます
• vite-plus.config.ts一つで全設定が完結します。設定ファイル地獄からの解放
• vp checkのフォーマット+リントが爆速。Rust製コンポーネントの威力は伊達じゃないです
• Viteユーザーなら移行コストが低いです。devサーバーやビルドの体験はほぼ同じ
• Vitestがそのまま統合されているので、テストの書き方を変える必要がありません

気になった点

• アルファ版なので、安定性は未知数。本番プロジェクトへの導入は時期尚早です
• OxlintがESLintの全ルールをカバーしているわけではありません。カスタムルールやプラグインを多用しているプロジェクトでは移行に苦労する可能性があります
• エコシステム（サードパーティプラグインなど）はまだこれから
• ドキュメントも発展途上。細かい設定は公式サイトやGitHubリポジトリを探る必要があります

総合的に、Vite+は「フロントエンド開発のツールチェーン問題」に対する非常に筋の良い解答だと感じました。特にvp checkの体験は圧巻で、これだけでも試す価値があります。

ただし、現時点ではアルファ版です。新規の個人プロジェクトやサイドプロジェクトで試す分には問題ないですが、業務プロジェクトへの導入は安定版のリリースを待った方が無難でしょう。僕自身も、まずはサイドプロジェクトで使い込んでみて、安定版が出たタイミングで業務への導入を検討するつもりです。

フロントエンド開発のツールチェーンは、ここ数年でRust製ツールの台頭により劇的に変わりつつあります。Vite+はその集大成とも言えるプロダクトです。興味がある方は、ぜひcurl -fsSL https://vite.plus | bashで試してみてください。新規プロジェクトを一つ作ってvp checkを実行するだけで、Rust製ツールチェーンの速さを体感できるはずです。

参考リンク

• Vite+ 公式サイト
• Vite+ GitHub リポジトリ
• Publickey — Vite+関連記事