Back to Portfolio
March 14, 2026

Astro Project で Vite+ を試してみた

【前書き】

この記事は2026/03時点の情報をもとに書いています。
Announcing Vite+ Alphaにあるように、まだAlpha版の段階におけるノートであるため、時間の経過によって状況が変わっている可能性が高いことに注意してください。

昨日、Vite+のAlpha版が公開されました。
Vite+はフロントエンドにおける各種ツールを統合的に管理することを目的としたツールチェーンです。
個人的に結構期待を寄せていることもあり、このサイト（Astro Project）でも使えるところは使ってみようと思い導入をしてみたので、その際のメモとして書いていきます。

Vite+とは？

先ほど『フロントエンドにおける各種ツールを統合的に管理することを目的としたツールチェーン』と書いたのですが、具体的には以下のツールを統合的に管理しています。

  • Vite: ビルドツール
  • Vitest: テスティングフレームワーク
  • Oxlint: コードリンター
  • Oxfmt: フォーマッター
  • Rolldown: JavaScriptバンドラ
  • tsdown: RolldownベースのTypeScriptバンドラ

そして、上記に加えてPackage Managerの統合、Vite Taskによるタスクランナーも含んでいます。
これらのツール群をvite.config.tsによって包括的に管理し、vpコマンドによる実行環境に集約しているところが特徴となっています。

何が良いのか？

これらのツールチェーンのほとんどはRust製であり、とにかく高速であることが強調されています。（Performance & Scale）
今回、移行前の計測をする前に前環境（miseやBiomeといったツール）の破棄をしてしまっており、比較情報を取れませんでした。
インストールし直すのも少し手間だったので具体的な比較まではできていないですが、触ってみた感じ「処理をしている」という感覚がないくらいには高速でした。（メンテナンス開始して1ヶ月も経過していない個人サイト程度の規模なのでまぁ…という感じではありますが）

また、ツールチェーンに対する設定をvite.config.tsに集約することによって、ツールごとに設定ファイルを記述したりバージョン管理をしたり…といった苦しみから解放されます。これは確かに慣れたらすごく楽そうでした。
特にESLintとPrettierの競合など、ツールが異なることによって発生する問題の発生を防げたりといった感じで、ツールの断片化に起因する負担が解消されるといった恩恵もあります。

Astro Projectへの導入

AstroはBundlerやDev Serverの起動にViteを利用しています。（Vite’s build-in support）
Vite+が内包しているツールによる運用をしているプロダクトということになるので、相性はいいのではないかと思います。

また、AstroがCloudflareにとあるようにAstroは今年の年始頃にCloudflareに加わっています。
そして、Vite+を開発しているEvan You氏率いるVoidZeroについても、以下のポストにあるようにVoidというプラットフォームではCloudflareと密接に連携していると公言しています。

こうした組織的な動きを見るに、AstroがVite+をはじめとしたこれらのエコシステムの一部として組み込まれる可能性ももしかしたらあるんじゃないか？という気もしています。（あんまりこういうのは詳しくないのでよくわかりませんが）

ともあれ、今後の具体性はどうあれ少なくとも「相性が悪い」ということはなさそうなので今回は適用できるところは積極的に使っていくことにしました。

Vite+の導入（global install）

インストール自体はcurlコマンド経由で実行するだけです。簡単。

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

これによって、Vite+のコアであるvpコマンドが実行できるようになります。

既存のAstro Projectへの適用

vp migrateという機能が提供されており、既存のプロジェクトに対してVite+を導入する仕組みが用意されています。

# 対象のプロジェクトをcwdにした状態で、以下を実行
vp migrate

実行すると、AI Agent向けにプロンプトを用意するから普段使ってるAgentを選べとか、VSCodeの設定なんかも用意するからVSCodeを使っているか答えろとかいくつかの回答を要求してくるので、自分にあった回答をしてください。

回答が完了するとVite+の利用のための変更が適用されます。

実行時の変更内容をファイルごとに以下にまとめます。

変更1: package.json

変更された行のみを抜粋します。

{
  "scripts": {
    "prepare": "vp config"
  },
  "devDependencies": {
    "vite-plus": "latest"
  },
  "pnpm": {
    "overrides": {
      "vite": "npm:@voidzero-dev/vite-plus-core@latest",
      "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
    }
  }
}

prepareにはvp configを実行してVite+の設定を行ってくれる処理が追加されます。
設定は.vite-hooksとして吐き出されます。

vite-plusはVite+のツールチェーン本体です。

pnpm.overridesはViteやVitestの依存バージョンを強制的に上書きするものです。
ちなみに今回はpnpm.overridesは削除しました。理由は単純で、Astroが内部的に依存しているViteのバージョンを強制的に変更してしまい、ビルドなどが正常に動作しなくなってしまったためです。
この設定自体、React + Vite環境のようなランタイムに直接Viteを使っている場合にVite+のツールチェーンのもので統一的に管理することを目的に追加しているものだと思われるので、AstroやNext.jsなど、フレームワーク固有のビルドプロセスを利用する場合はこの設定を削除することになると思います。

変更2: vite.config.ts

なければ作られます。あれば設定が追加されます（多分）。僕の場合は特にAstroプロジェクトの作成以降Viteの設定に触れる機会がなかったので新規で作成されました。
最初は以下のような状態で生成されます。

import { defineConfig } from 'vite-plus';

export default defineConfig({
  staged: {
    '*': 'vp check --fix',
  },
});

Staged Configというものが埋め込まれます。これはファイルをステージした際にvp checkによってOxlintによる構文解析と、Oxfmtによるフォーマットを実行する設定になっています。

変更3: .vite-hooks/pre-commit

コミットの直前にvp stagedを実行する処理だけが定義された状態のファイルが生成されます。

vp staged

これによって、コミット直前にもvite.config.ts#stagedに定義された処理（今回の場合はvp check --fix）が実行されるようになります。

開発時にどう変化するか

Dev Serverを起動したいとか、Linter掛けたいとか、ライブラリの追加・削除・更新がしたいとか、いくつかのシチュエーションでBefore/Afterを例示します。

例1: 開発サーバーの起動 / ビルド

Before

# Dev Server
pnpm run dev
# Build
pnpm run build

After

# Dev Server
vp run dev
# Build
vp run build

例2: ライブラリの管理

Before

# 追加
pnpm add dayjs
# 更新
pnpm update dayjs
# 削除
pnpm remove dayjs
# バージョン追従状況の確認
pnpm outdated

After

# 追加
vp add dayjs
# 更新
vp update dayjs
# 削除
vp remove dayjs
# バージョン追従状況の確認
vp outdated

ちなみに、これらのvpによる依存ライブラリの管理をする際にどのPackage Managerを利用するかについてはInstalling Dependenciesにあるようにpackage.jsonやlockファイルなどの状況を確認して判断するようになっています。（判断するための情報が確認できない場合はpnpmを利用するようにfallbackを行なう）

例3: Lint実行

Before

pnpm run lint

After

vp check

checkコマンドについてはnpm script（package.json#scripts）に定義する必要はありません。

例4: Linterのルールを編集する

Before

biome.jsonやeslint.configファイルなどの利用しているLinter固有の設定ファイルを更新する。

After

vite.config.ts#lintを更新する。（以下は設定例）

import { defineConfig } from 'vite-plus';

export default defineConfig({
  staged: {
    '*': 'vp check --fix',
  },
  lint: {
    // Oxlint Rules: https://oxc.rs/docs/guide/usage/linter/rules.html
    rules: {
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
      'no-constant-condition': 'error',
      'no-duplicate-imports': 'warn',
      eqeqeq: 'error',
    },
    ignorePatterns: ['dist', 'node_modules'],
  },
  fmt: {},
});

lint配下の設定はOxlintのConfigurationに従って定義する。
ちなみにfmt配下の設定はOxfmtのConfigurationに従って定義する。

GitHub Actions の対応

GitHub Actions向けにはvoidzero-dev/setup-vpが提供されています。
これを利用することでActionsのworkflowに於いてもVite+のツールチェーンを用いた検証が可能になります。

サンプルとして、僕のサイトのActionsを貼ります。LintおよびBuildが正常にPassするかどうかを検証するだけのシンプルなworkflowです。

name: 👀 Check Lint & Build
on: push

jobs:
  check:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        script: [lint, build]

    steps:
      - uses: actions/checkout@v6
        with:
          fetch-depth: 1

      # setup Vite+
      - uses: voidzero-dev/setup-vp@v1
        with:
          node-version-file: 'package.json'

      - run: vp install --frozen-lockfile

      - name: Lint by Oxlint
        if: matrix.script == 'lint'
        run: vp lint

      - name: Build by Astro
        if: matrix.script == 'build'
        run: vp run build

現時点でのAstro Projectにおける Vite+ 利用範囲

Astro独自のビルドプロセスは存在しているので、現状の利用範囲は基本的に以下のような形に落ち着くのではないかと思います。

  • Linter (Oxlint)
  • Formatter (Oxfmt)
  • Package Manager (vp)
  • Task Runner (vp run)
  • Test (Vitest)

以下の記事で言うところのQuality 層の部分で利用する。という感じ。
新登場したVite+が速すぎる！— ESLint 100倍、しかも Next.js でも動く | Zenn

Vite+によるType Checkについて

Vite+は（というよりはVite+が採用しているOxlintは）tsgolintによってTypeScriptの構文解析を行なっています。
このツールはTypeScript v7の仕様をベースに解析を行うようになっているようです。

2026/03時点のAstroの最新バージョン（v6.0.4）で以下のようにType Checkを有効にしている場合、ローカル環境でvp lintをする場合は問題なく通過するもののGitHub Actions上でvp lintを実行するとモジュールの解決に失敗したような感じでエラーが出てしまい詰んでしまいました。

import { defineConfig } from 'vite-plus';

export default defineConfig({
  staged: {
    '*': 'vp check --fix',
  },
  lint: {
    // 👇 ここでType Checkを有効にしている
    options: { typeAware: true, typeCheck: true },
    rules: {
      // any rules...
    },
    ignorePatterns: ['dist', 'node_modules'],
  },
});

IDE上では解決できなかったモジュールに対して型参照はうまくできていそうなので、CIの方に原因がありそうな気はしつつも解決手段まではわからず一旦lint.optionsをやむなく無効にしています。
Astroが内部的に依存しているTypeScriptとのバージョン差異とかもあるのかなと思いつつ、若干沼りそうだったので今後の検討としました。

Oxlintの拡張機能について

VSCode向けの拡張としてOxcが提供されているのですが、これはOxlint, Oxfmtの本来の設定ファイル（oxlint.config.tsやoxfmt.config.ts）を確認するものだと思うので、vite.config.tsに対応していなさそうでした。

そのため、以下みたいな設定は意味を為さなかったです。

{
  "oxc.fmt.configPath": "./vite.config.ts"
}

そのうちVite+の公式拡張機能とかが出そうな気はしていますが、現時点のNext Stepsでは具体的な言及は確認できませんでした。
とりあえず、今のところは最低限以下の設定をしました。

{
  "oxc.enable": true,
  "oxc.typeAware": true,
  "editor.defaultFormatter": "oxc.oxc-vscode"
}

移行してみた感想

現状、僕のサイト程度の規模のAstro Projectではそこまで移行前の運用（miseによるPackage Management、BiomeによるLint&Formatなど）に強い課題感や不満はなかったので、今時点でめちゃくちゃ優位性を感じるというよりは未来にとても期待が持てる感覚になれたという感じでした。

もともとは企業向けの有料ライセンスで検討していたっぽいんですが、コミュニティへの貢献などを理由に無料のMIT Lisenceでの公開に踏み切っているらしく、なんていうか意識の高さに打ちのめされています。

意識の高過ぎる出典を引用してからこのノートを幕閉めとします。

We initially considered a paid license for companies when we announced Vite+. We decided that Vite+ can only achieve our mission of making JavaScript developers more productive than ever before when it is truly free and open source. We got tired of debating which features should be paid and how they should be gated, as this only creates friction in the workflows our open-source users already enjoy and love. Feedback from the community helped us reinforce our conviction. Therefore, we decided to fully open source Vite+ under the MIT license.

出典: Licensing | Announcing Vite+