Vite+ 入門ガイド

Vite+ は、VoidZero が提供する統合開発者ツールチェーンです。VoidZero は、Vite と Vue の作者である Evan You が設立した企業であり、Vite+は Vite、Vitest、Rolldown、Oxlint、Oxfmt、tsdown、および Vite Task を vp という単一の CLI にまとめています。2026年3月13日にアルファ版として発表され、2026年5月13日に v0.1.21 でアルファタグが外れました。本稿執筆時点での最新リリースは v0.1.23（2026年5月29日）です。プロジェクトはまだ 1.0 未満であるため、本番環境で実績のあるスタックとしてではなく、初期段階のソフトウェアとして扱う必要があります。ただし、アルファ段階は脱しており、基本的な入門ワークフローは実際のプロジェクトで使用できる程度には安定しています。

本ガイドでは、Vite+ のインストール、プロジェクトのスキャフォールディング、開発サーバーの起動、チェックとテストの実行、本番ビルドの生成、そして vp が一般的なフロントエンドワークフローにどのように組み込まれるかについて説明します。

Vite+ の実態

Vite+ は、厳選されたフロントエンドツール群を単一のエントリーポイントにまとめた CLI ディストリビューションです。各コンポーネントは新たに開発されたものではなく、既存のプロジェクトです。具体的には、Vite 8 が開発サーバー、Rolldown が Rollup と API 互換性を持つ Rust ベースの本番バンドラー、Vitest がテストランナー、Oxlint と Oxfmt が Oxc コンパイラーインフラストラクチャー上に構築されたリンターおよびフォーマッター、tsdown がライブラリバンドリング、そして Vite Task がモノレポのタスクオーケストレーションとキャッシングを担います。

これらのツール全体にわたるパフォーマンス向上は、個別の最適化の積み重ねではなく、構造的なものです。Rolldown、Oxlint、Oxfmt は、VoidZero の Rust ベースの JavaScript コンパイラーインフラストラクチャーである Oxc を、共通のパースおよびトランスフォームレイヤーとして共有しています。速度向上の源泉は、各ツールが個別に最適化されているのではなく、基盤となるエンジン自体が高速であることにあります。

Vite+ は Vite を置き換えるのではなく、補完するものです。すでに Vite を使用している場合は、Vite+ を段階的に採用できます。Vite を使用していない場合、Vite+ は最初の入口として適切ではありません。

前提条件

インストールの前に、お使いの環境が Vite 8 のランタイム要件を満たしているか確認してください。Vite 8 は Node.js 20.19 以降、または Node.js 22.12 以降が必要です。Vite+ は Node.js を置き換えるのではなく、vp env を通じてプロジェクトで使用する Node.js のバージョンを管理します。古いバージョンの Node.js 上で Vite+ を実行すると、開発サーバーが起動する前にエラーが発生します。

また、macOS または Linux では POSIX 互換シェル、Windows では PowerShell が必要です。

Vite+ のインストール

Vite+ は vp という単一のバイナリとしてインストールされます。macOS または Linux の場合：

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

Windows PowerShell の場合：

irm https://vite.plus/ps1 | iex

ターミナルを再起動し、インストールを確認します：

vp --version
vp help

インストール中に、Vite+ がグローバルな Node.js ランタイムを管理するかどうかを尋ねられます。すでに nvm、fnm、または asdf を使用している場合は、マネージドモードを断ることができ、その場合 Vite+ はシステムの Node.js に委ねます。この設定は後から vp env on または vp env off で切り替えることができます。

最初のプロジェクトを作成する

vp create は Vite+ テンプレートから新しいプロジェクトをスキャフォールドし、フレームワーク、パッケージマネージャー、TypeScript または JavaScript の選択を対話的に促します：

vp create

対話型プロンプトでは、テンプレート（Vite、Vue、Svelte、Nuxt、Next.js、React Router、または TanStack Start）、パッケージマネージャー（npm、pnpm、yarn、bun）、TypeScript または JavaScript を選択できます。プロンプトをスキップするには、テンプレート名を引数として渡します：

vp create vue my-app
cd my-app
vp install

スキャフォールドにより、単一の vite.config.ts が生成されます。このファイルは、ツールチェーン内のすべてのツール（リンター、フォーマッター、テストランナー、ステージングファイルフックを含む）の設定を一元管理します。

vp dev で開発サーバーを起動する

vp dev は、一般的なケースではフラグ不要で、Vite 8 開発サーバーをデフォルト設定で起動します：

vp dev

vp dev は Vite 8 開発サーバーを直接起動します。package.json の dev スクリプトを実行するわけではありません。これは混乱しやすいポイントであり、npm run dev の動作とは逆です。プロジェクトにカスタムの dev スクリプト（例えば、バックエンドプロセスをフロントエンドと並行して実行するもの）がある場合は、明示的に呼び出してください：

vp run dev

同じルールが vp test と vp build にも適用されます。これらは Vite+ の統合ツールを経由する組み込みコマンドです。vp run <スクリプト> は任意の package.json スクリプトを実行するためのエスケープハッチであり、--cache オプションを付けて呼び出すと Vite Task の入力対応キャッシングも利用できます。

統合された vite.config.ts

Vite+ は、Vite がラップするすべてのツール（Vite、Vitest、Oxlint、Oxfmt、ステージングファイルフック）の設定を、プロジェクトルートにある単一の vite.config.ts に集約します。個別の .eslintrc、.prettierrc、vitest.config.ts ファイルを管理する代わりに、型付きの defineConfig 呼び出し一つですべてを表現します。

最小限の設定は次のようになります：

import { defineConfig } from 'vite-plus'

export default defineConfig({})

プロジェクトの成長に合わせて、個々のツールの設定を追加できます：

import { defineConfig } from 'vite-plus'

export default defineConfig({
  fmt: {
    singleQuote: true,
    semi: false,
  },
  lint: {
    ignorePatterns: ['dist/**'],
  },
  test: {
    include: ['src/**/*.test.ts'],
  },
})

Vite+ は staged 設定ブロックを通じてステージングファイルのチェックもサポートしています：

import { defineConfig } from 'vite-plus'

export default defineConfig({
  fmt: { singleQuote: true, semi: false },
  lint: { ignorePatterns: ['dist/**'] },
  test: { include: ['src/**/*.test.ts'] },
  staged: {
    '*.{js,ts,tsx,vue,svelte}': 'vp check --fix',
  },
})

コミット時のチェックを有効にするには、Git フックをインストールします：

vp config

これにより、Vite+ は vp staged を通じてコミット時に設定されたステージングファイルタスクを自動的に実行します。Husky や lint-staged の個別設定は不要です。

Vite+ の他の部分と同様に、設定システムはプロジェクトが 1.0 未満の間も進化し続けています。新しいリリースを採用する場合は、アップグレード前に公式ドキュメントとリリースノートで設定の変更点を確認することをお勧めします。

vp check でチェックを実行する

vp check は、現在のプロジェクトに対してフォーマット、リント、型チェックを一度に実行します：

vp check

安全に修正できる問題を自動修正するには：

vp check --fix

--fix はほとんどのフォーマット問題と多くのリントルールに対応しますが、型エラーやロジックのバグは修正できません。自動修正ツールとして扱い、コードレビューの代替とはみなさないでください。型チェックは、TypeScript Go ツールチェーン上に構築された型対応リンターである tsgolint によって実行されます。完全な tsc --noEmit コンパイルではないため、一般的な型エラーの検出には高速ですが、網羅的な型コンパイルが必要な CI 環境では tsc の代替にはなりません。Oxlint、Oxfmt、tsgolint は Oxc 対応のインフラストラクチャーを共有しているため、vp check は同じコードベースに対して ESLint + Prettier + tsc --noEmit を組み合わせた場合と比べて、目に見えて高速に動作します。

vp test でテストを実行する

vp test は Vitest スイートを一度だけ実行して終了します。Vite+ は Vitest のネイティブデフォルトであるウォッチモードを反転させているため、ウォッチ動作はオプトインです：

vp test                  # 一度だけ実行（Vite+ はデフォルトでウォッチしません。Vitest とは異なります）
vp test watch            # ウォッチモードに入る
vp test run --coverage   # カバレッジ付きで一度だけ実行

vp test は vite.config.ts の test ブロックを使用して Vitest を呼び出します。これは Vitest のネイティブデフォルトを反転させていることに注意してください。vp test 単体では一度のパスで終了しますが、スタンドアロンの vitest はウォッチモードのままになります。Vitest はすでに Vite のトランスフォームパイプラインを共有しているため、個別の vitest.config.ts を管理する必要はありません。同じ defineConfig が両方をカバーします。

vp build で本番ビルドを生成する

vp build は Vite 8 と Rolldown を使用して本番バンドルをコンパイルし、vite build と同じ規則に従って dist/ に出力します：

vp build

vp build は Vite 8 と Rolldown を使用して本番バンドルをコンパイルします。出力は vite build と同じ規則に従って dist/ に書き出されます。Rolldown は Rollup と API 互換性を持つように設計されているため、既存の Rollup プラグインは引き続き動作することが意図されています。ただし、プラグイン作者はまだエッジケースの修正を進めているため、リリースで vp build に依存する前に、カスタムプラグインをブランチ上で検証してください。

モノレポでビルド入力を実行間でキャッシュするには：

vp run --cache build

Vite Task は宣言された入力をフィンガープリントし、入力が変更されていないパッケージは後続の実行でスキップします。これは Turborepo が解決するのと同じワークフロー上の課題であり、ツールチェーンに統合されているため、外部から追加する必要がありません。

バンドラーを切り替える際によくある本番環境での問題として、ソースマップのサイレントな劣化があります。vp build の出力をデプロイする前に、エラー監視ツールやセッションリプレイツール上のスタックトレースが元のソースファイルに正しく解決されることを確認してください。これは OpenReplay が実際のセッションデータで最も頻繁に確認するビルドツール移行の問題の一つです。

vp コマンドリファレンス

本リファレンスは Vite+ v0.1.23（2026年5月29日）時点の情報です。

Vite+ を GitHub Actions に組み込む

CI 環境向けに、VoidZero は voidzero-dev/setup-vp アクションを公開しています。このアクションは vp CLI をインストールし、オプションで依存関係をキャッシュします。最小限のワークフロー例：

name: CI
on: [push, pull_request]
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: voidzero-dev/setup-vp@v1
        with:
          node-version: '22'
          cache: true
      - run: vp install
      - run: vp check
      - run: vp test
      - run: vp build

これにより、個別のリント、フォーマット、型チェック、ビルドのステップが、開発者がローカルで使用するのと同じ vite.config.ts を参照する4つの vp 呼び出しに置き換えられます。

採用前に知っておくべきこと

現在のリリースに関するいくつかの率直な注意点を挙げます：

• Oxfmt はまだ 1.0 未満です。 本番コードベースを切り替える前に、ブランチ上で既存の Prettier ベースラインと出力を比較してください。
• フレームワークのエコシステムには独自の規則があります。 Vite+ は Nuxt や TanStack Start などのフレームワーク向けのプロジェクトをスキャフォールドできますが、フレームワーク固有の設定やワークフローは引き続き Vite+ の統合設定モデルの外に存在する場合があります。
• 1.0 未満はブレーキングチェンジが起こりうることを意味します。 CI では vp のバージョンを固定し、アップグレード前に Vite+ の変更履歴を確認してください。

次のステップ

今週、サイドプロジェクトに Vite+ をインストールし、vp check を一度実行して、6つのツールが1つのコマンドに統合されたときのツールチェーンの感触を確かめてみてください。その体験が良好であれば、重要度の低い Vite プロジェクトで vp migrate を試し、マージ前に差分を確認してください。移行自体は速く完了しますが、エッジケースを発見するのはレビューの段階です。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.