はじめに

概要

Vite（フランス語で「速い」という意味、発音は /vit/、「ヴィート」のように）は、最新のWebプロジェクト向けに、より高速で無駄のない開発体験を提供することを目的としたビルドツールです。Viteは主に以下の2つの部分から構成されています。

• ネイティブESモジュールに加えて、例えば非常に高速なホットモジュールリプレイスメント（HMR）などの豊富な機能拡張を提供する開発サーバー。

• Rollupを使用してコードをバンドルするビルドコマンド。本番環境向けに最適化された静的アセットを出力するように事前設定されています。

Viteは意見がはっきりしており、すぐに使える気の利いたデフォルト設定が付属しています。機能ガイドで何ができるかをご覧ください。フレームワークのサポートや他のツールとの統合はプラグインを通じて可能です。設定セクションでは、必要に応じてViteをプロジェクトに適合させる方法を説明しています。

Viteは、プラグインAPIとJavaScript APIを通じて、完全な型サポートにより高度に拡張可能です。

プロジェクトの背後にある根拠については、Why Viteセクションで詳しく学ぶことができます。

ブラウザのサポート

開発中、Viteはモダンブラウザが使用されていることを前提としています。これは、ブラウザが最新のJavaScriptとCSS機能のほとんどをサポートしていることを意味します。そのため、Viteはesnextを変換ターゲットとして設定します。これにより、構文の格下げが防止され、Viteが元のソースコードに可能な限り近いモジュールを提供できるようになります。Viteは、開発サーバーを機能させるためにいくつかのランタイムコードを注入します。これらのコードは、各メジャーリリース時（このメジャーリリースでは2025-05-01）にBaselineで新しく利用可能になった機能を使用します。

本番ビルドの場合、ViteはデフォルトでBaselineで広く利用可能なブラウザをターゲットとします。これらは少なくとも2.5年前にリリースされたブラウザです。ターゲットは設定によって下げることができます。さらに、レガシーブラウザは公式の@vitejs/plugin-legacyを通じてサポートできます。本番ビルドセクションで詳細をご覧ください。

Viteをオンラインで試す

StackBlitzでViteをオンラインで試すことができます。ブラウザでViteベースのビルド設定を直接実行するため、ローカル設定とほぼ同じですが、マシンに何もインストールする必要はありません。vite.new/{template}に移動して、使用するフレームワークを選択できます。

サポートされているテンプレートプリセットは次のとおりです。

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

最初のViteプロジェクトを足場にする

互換性に関する注意

ViteにはNode.jsバージョン20.19+、22.12+が必要です。ただし、一部のテンプレートでは動作するためにこれより高いNode.jsバージョンが必要な場合があります。パッケージマネージャーが警告した場合はアップグレードしてください。

npm

$ npm create vite@latest

Yarn

$ yarn create vite

pnpm

$ pnpm create vite

Bun

$ bun create vite

Deno

$ deno init --npm vite

次にプロンプトに従ってください！

プロジェクト名と使用したいテンプレートを追加のコマンドラインオプションで直接指定することもできます。たとえば、Vite + Vueプロジェクトを足場にするには、次を実行します。

npm

# npm 7+, extra double-dash is needed:
$ npm create vite@latest my-vue-app -- --template vue

Yarn

$ yarn create vite my-vue-app --template vue

pnpm

$ pnpm create vite my-vue-app --template vue

Bun

$ bun create vite my-vue-app --template vue

Deno

$ deno init --npm vite my-vue-app --template vue

サポートされている各テンプレートの詳細については、create-viteを参照してください: vanilla、vanilla-ts、vue、vue-ts、react、react-ts、react-swc、react-swc-ts、preact、preact-ts、lit、lit-ts、svelte、svelte-ts、solid、solid-ts、qwik、qwik-ts。

現在のディレクトリに足場を作成するには、プロジェクト名に.を使用できます。

コミュニティテンプレート

create-viteは、人気のあるフレームワークの基本的なテンプレートからプロジェクトをすばやく開始するためのツールです。他のツールを含む、または異なるフレームワークをターゲットとするコミュニティがメンテナンスするテンプレートについては、Awesome Viteを確認してください。

https://github.com/user/projectにあるテンプレートの場合、https://github.stackblitz.com/user/project（プロジェクトのURLのgithubの後に.stackblitzを追加）を使用してオンラインで試すことができます。

degitのようなツールを使用して、テンプレートの1つでプロジェクトを足場にすることもできます。プロジェクトがGitHubにあり、デフォルトのブランチとしてmainを使用していると仮定すると、次を使用してローカルコピーを作成できます。

npx degit user/project#main my-project
cd my-project

npm install
npm run dev

手動インストール

プロジェクトでは、次を使用してvite CLIをインストールできます。

npm

$ npm install -D vite

Yarn

$ yarn add -D vite

pnpm

$ pnpm add -D vite

Bun

$ bun add -D vite

Deno

$ deno add -D npm:vite

そして、次のようなindex.htmlファイルを作成します。

<p>Hello Vite!</p>

次に、ターミナルで適切なCLIコマンドを実行します。

npm

$ npx vite

Yarn

$ yarn vite

pnpm

$ pnpm vite

Bun

$ bunx vite

Deno

$ deno run -A npm:vite

index.htmlはhttps://:5173で提供されます。

index.htmlとプロジェクトルート

気づいたかもしれませんが、Viteプロジェクトでは、index.htmlはpublicの中に隠されるのではなく、前面と中央にあります。これは意図的なものです。開発中、Viteはサーバーであり、index.htmlはアプリケーションへのエントリーポイントです。

Viteはindex.htmlをソースコードおよびモジュールグラフの一部として扱います。JavaScriptソースコードを参照する<script type="module" src="...">を解決します。インラインの<script type="module">や<link href>で参照されるCSSもVite固有の機能を利用できます。さらに、index.html内のURLは自動的にリベースされるため、特別な%PUBLIC_URL%プレースホルダーは必要ありません。

静的HTTPサーバーと同様に、Viteにはファイルが提供される「ルートディレクトリ」の概念があります。ドキュメントの残りの部分では<root>として参照されます。ソースコード内の絶対URLはプロジェクトルートをベースとして解決されるため、通常の静的ファイルサーバーを扱っているかのようにコードを記述できます（ただし、はるかに強力です！）。Viteは、ルート外のファイルシステムロケーションに解決される依存関係も処理できるため、モノレポベースのセットアップでも使用できます。

Viteは、複数の.htmlエントリポイントを持つマルチページアプリもサポートしています。

代替ルートの指定

viteを実行すると、現在の作業ディレクトリをルートとして開発サーバーが起動します。vite serve some/sub/dirで代替ルートを指定できます。Viteはプロジェクトルート内で設定ファイル（例: vite.config.js）も解決するため、ルートを変更する場合は移動する必要があります。

コマンドラインインターフェース

Viteがインストールされているプロジェクトでは、npmスクリプトでviteバイナリを使用するか、npx viteで直接実行できます。以下は、足場が作成されたViteプロジェクトのデフォルトのnpmスクリプトです。

package.json

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

--portや--openなどの追加のCLIオプションを指定できます。CLIオプションの完全なリストについては、プロジェクトでnpx vite --helpを実行してください。

コマンドラインインターフェースについて詳しく学ぶ

未リリースコミットの使用

最新機能のテストを新しいリリースまで待てない場合は、https://pkg.pr.newでViteの特定のコミットをインストールできます。

npm

$ npm install -D https://pkg.pr.new/vite@SHA

Yarn

$ yarn add -D https://pkg.pr.new/vite@SHA

pnpm

$ pnpm add -D https://pkg.pr.new/vite@SHA

Bun

$ bun add -D https://pkg.pr.new/vite@SHA

SHAをViteのコミットSHAのいずれかに置き換えてください。古いコミットリリースは削除されるため、過去1ヶ月以内のコミットのみが機能することに注意してください。

あるいは、viteリポジトリをローカルマシンにクローンし、自分でビルドしてリンクすることもできます（pnpmが必要です）。

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # use your preferred package manager for this step

次に、Viteベースのプロジェクトに移動し、pnpm link --global vite（またはviteをグローバルにリンクするために使用したパッケージマネージャー）を実行します。これで、開発サーバーを再起動して最先端を体験できます！

Viteを使用する依存関係

推移的に依存関係によって使用されるViteのバージョンを置き換えるには、npm overridesまたはpnpm overridesを使用する必要があります。

コミュニティ

ご質問やヘルプが必要な場合は、DiscordとGitHub Discussionsのコミュニティにご連絡ください。