はじめに
結論から言うと、Viteは2024年以降のフロントエンド開発では第一選択肢になるビルドツールですね。
「Vite」はフランス語で「素早い」という意味らしいんですが、名前負けしていない。むしろ名前以上に速い。GitHubで76,900スター以上を獲得していて、毎日20以上のスターが増え続けているという事実が、その人気を物語っています。
正直なところ、最初は「また新しいツールか...」と思っていたんですよ。Webpackで困ってないし、学習コストかけてまで乗り換える必要あるのかなと。でも実際に使ってみたら、もう戻れなくなりました。
Viteとは
ViteはEvan You氏（Vue.jsの作者）が開発した次世代フロントエンドビルドツールです。開発時はネイティブESM（ECMAScript Modules）を活用してバンドル不要で動作し、本番ビルドにはRollupを使用します。
現在の最新バージョンはv7系で、MITライセンスのオープンソースとして公開されています。
特徴・メリット
1. 開発サーバーの起動が瞬時
これ、意外と軽視されがちなんですけど、開発サーバーの起動時間って地味にストレスなんですよね。
Webpackだとプロジェクトが大きくなるにつれて起動に数十秒、下手したら1分以上かかることもある。Viteは依存関係の事前バンドルにesbuildを使っているので、ほぼ瞬時に起動します。
個人的には、この「待ち時間がない」というのが一番のメリットだと思います。
2. HMR（ホットモジュールリプレースメント）が爆速
コードを変更したら、その変更だけがブラウザに反映される機能ですね。これがプロジェクトのサイズに関係なく高速なんですよ。
大規模プロジェクトでもHMRが遅くならないというのは、開発効率に直結します。30代になって思うのは、こういう「待ち時間」の積み重ねが馬鹿にならないということ。
3. 設定がシンプル
Webpackの設定ファイル、正直つらくないですか？ローダーの設定とか、プラグインの順番とか。
Viteは最小構成なら設定ファイルすら不要です。TypeScript、JSX、CSSは標準でサポートされているので、追加設定なしで使えます。
4. フレームワーク非依存
Vue、React、Svelte、Preact、Lit...主要なフレームワークのテンプレートが用意されています。バニラJS/TSでも使えるので、選択肢が広い。
5. 本番ビルドが最適化されている
開発時の快適さだけでなく、本番ビルドもRollupベースでしっかり最適化されます。コード分割、ツリーシェイキング、圧縮...必要なことは全部やってくれる。
インストール方法
前提条件
Node.js 20.19以上、または22.12以上が必要です。
新規プロジェクトの場合
一番簡単なのはcreate-viteを使う方法です。
# npm
npm create vite@latest
# yarn
yarn create vite
# pnpm
pnpm create vite
# bun
bun create vite
対話形式でプロジェクト名とテンプレートを選択できます。
テンプレートを直接指定することも可能です。
# Reactプロジェクト
npm create vite@latest my-react-app -- --template react-ts
# Vueプロジェクト
npm create vite@latest my-vue-app -- --template vue-ts
# バニラTypeScript
npm create vite@latest my-app -- --template vanilla-ts
既存プロジェクトへの導入
npm install -D vite
基本的な使い方
プロジェクト構成
新規作成すると、こんな構成になります。
my-vite-app/
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
├── src/
│ ├── main.ts
│ └── style.css
└── public/
└── favicon.ico
package.json
基本的なスクリプトは3つです。
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
dev: 開発サーバー起動build: 本番用ビルドpreview: ビルド結果のプレビュー
vite.config.ts
設定ファイルはこんな感じ。最小構成なら空でもOKです。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
build: {
outDir: 'dist',
},
})
開発サーバーの起動
npm run dev
これだけでhttp://localhost:5173で開発サーバーが立ち上がります。起動時間は体感で1秒未満。
本番ビルド
npm run build
distディレクトリに最適化されたファイルが出力されます。
実践的なユースケース
React + TypeScriptプロジェクト
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev
これだけで型安全なReact開発環境が整います。時短になる。
環境変数の使用
.envファイルを作成して、VITE_プレフィックスをつけた変数を定義します。
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App
コード内ではimport.meta.envでアクセス。
console.log(import.meta.env.VITE_API_URL)
パスエイリアスの設定
@でsrcディレクトリを参照できるようにする設定。
// vite.config.ts
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
// tsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}
これでimport { Button } from '@/components/Button'みたいに書けます。
CSS Modulesの使用
ファイル名を.module.cssにするだけで使えます。追加設定不要。
/* Button.module.css */
.button {
background: blue;
color: white;
}
import styles from './Button.module.css'
export const Button = () => (
<button className={styles.button}>Click me</button>
)
Webpackからの移行
コスパ的に、Webpackからの移行は十分価値があります。
移行のポイント：
-
webpack.config.jsをvite.config.tsに書き換え- ほとんどの設定はViteではデフォルトで対応済み
-
ローダーをプラグインに置き換え
- 多くの機能は標準サポートされているので、プラグインすら不要なことが多い
-
process.envをimport.meta.envに置き換え- プレフィックスも
REACT_APP_からVITE_に変更
- プレフィックスも
-
require()をimportに置き換え- Viteはネイティブ ESM なので
まとめ
Viteを導入して感じた変化：
- 開発サーバー起動: 数十秒 → 1秒未満
- HMR: 体感で2〜3倍速くなった
- 設定ファイル: 大幅に簡素化
- QOL: 確実に上がった
正直なところ、新規プロジェクトでWebpackを選ぶ理由はもうほとんどないと思います。レガシーなプラグインがどうしても必要な場合を除けば、Vite一択ですね。
特にTypeScriptとの相性が良くて、設定もシンプル。フロントエンド開発のストレスが確実に減ります。
まだ試していない人は、まず小さなプロジェクトで使ってみてください。戻れなくなりますよ。