フロントエンド開発をしていると、「ビルドに時間がかかりすぎる...」と感じることはありませんか？
特に大規模なプロジェクトでは、ビルド時間が長くなりがちで、開発効率が落ちてしまうことも多いです。
そんな悩みを解決してくれるのが、今回紹介する「Vite」というビルドツールです。
Vite を使えば、フロントエンド開発の速度が劇的に向上し、ストレスフリーな開発環境を手に入れることができます。
そもそも「ビルドツール」とは？
フロントエンド開発において、ビルドツールは欠かせない存在です。
でも、「ビルドツールって何？」と思う方もいるかもしれませんね。
簡単に言えば、ビルドツールは「人間が書いたコードを、ブラウザが理解できる形に変換するツール」です。
例えば、最新の JavaScript の機能を使って書いたコードを、古いブラウザでも動くように変換したり、複数のファイルを 1 つにまとめたりする役割を担っています。
これらの処理を手動でやろうとすると、とても時間がかかってしまいます。
ビルドツールを使えば、これらの作業を自動化できるので、開発者は本質的な開発作業に集中できるのです。
Vite の登場背景
従来のビルドツールには、Webpack や Parcel などがありました。
これらは確かに優れたツールですが、プロジェクトが大きくなるにつれて、ビルド時間が長くなるという問題がありました。
「コードを書いて、保存して、ブラウザで確認する」というサイクルが遅くなると、開発効率が落ちてしまいます。
Vite は、このような問題を解決するために開発されました。
特に、ES Modules を活用することで、驚くほど高速な開発環境を提供しています。
Vite とは
Vite の概要
Vite は、フランス語で「速い」という意味を持つ言葉です。
その名の通り、Vite は非常に高速なビルドツールとして知られています。
Vue.js の作者である Evan You 氏によって開発され、2020 年 4 月に初めてリリースされました。
Vite の特徴は、開発時の高速なサーバー起動と HMR（Hot Module Replacement）、そして本番用のビルドの最適化です。
従来のビルドツール
従来のビルドツールといえば、Webpack や Parcel、Rollup などが有名です。
これらのツールは、JavaScript モジュールをバンドル（まとめる）することで、ブラウザで実行可能な形式に変換します。
例えば、Webpack の場合、以下のような流れでビルドが行われます。
- エントリーポイント（最初に読み込まれる JavaScript ファイル）を特定
- 依存関係を解析
- モジュールをバンドル（まとめる）
- 最終的な出力ファイルを生成
この方法は確かに効果的ですが、プロジェクトが大きくなるにつれて時間がかかるようになります。
従来のビルドツールとの違い
Vite が従来のビルドツールと大きく異なるのは、開発時にバンドルを行わない点です。
代わりに、ブラウザのネイティブ ES Module を利用します。
ES Module とは、JavaScript の公式の機能で、ファイルを分割して管理できる仕組みのことです。
Vite は、開発サーバーの起動時にプロジェクト全体をバンドルする代わりに、ブラウザからリクエストがあった時に必要なモジュールだけを変換して返します。
これにより、プロジェクトの規模に関係なく、常に高速な開発環境を維持できるのです。
Vite の特徴
高速な開発サーバー
Vite の開発サーバーは、従来のビルドツールと比べて圧倒的に速いです。
なぜそんなに速いのでしょうか？
それは、Vite が「必要なものだけを、必要な時に処理する」アプローチを取っているからです。
従来のツールでは、サーバーを起動する際にすべてのファイルをバンドルしていました。
一方、Vite は必要なモジュールだけをその場で変換します。
例えば、React で App.js というファイルを編集したとします。
import React from 'react';
function App() {
return <h1>Hello, Vite!</h1>;
}
export default App;
このファイルをブラウザが要求したとき、Vite はこのファイルだけを変換してブラウザに送信します。
他のファイルは、要求されるまで処理されません。
これにより、大規模なプロジェクトでも、サーバーの起動が数秒で完了するのです。
最適化されたビルド
本番環境用のビルドでは、Vite は Rollup を使用して最適化されたバンドルを生成します。
Rollup は、ES モジュールをサポートしていない古いブラウザ向けに、効率的なコードを生成することができます。
例えば、以下のようなコードがあるとします。
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// main.js
import { add } from './math.js';
console.log(add(5, 3));
Vite は、本番ビルド時にこのコードを以下のように最適化します。
function add(a, b) {
return a + b;
}
console.log(add(5, 3));
使用されていないsubtract関数は削除され、モジュールのインポート/エクスポートも解決されています。
これにより、ブラウザがダウンロードするファイルサイズが小さくなり、Web サイトのパフォーマンスが向上します。
プラグインシステム
Vite は、豊富なプラグインシステムを備えています。
これにより、様々な機能を簡単に追加することができます。
例えば、Sass を使用したい場合は、以下のようにプラグインをインストールし、設定するだけです。
npm install -D sass
そして、vite.config.jsファイルに以下のように記述します。
import { defineConfig } from 'vite';
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;`,
},
},
},
});
これだけで、Sass のサポートが追加され、すべての.scss ファイルで$injectedColor変数が使えるようになります。
TypeScript サポート
Vite は、TypeScript のサポートも充実しています。
特別な設定なしで、TypeScript ファイルを直接使用することができます。
例えば、以下のような TypeScript ファイルがあるとします。
// greet.ts
export function greet(name: string): string {
return `Hello, ${name}!`;
}
// main.ts
import { greet } from './greet';
console.log(greet('Vite'));
Vite は、開発サーバー起動時にこれらのファイルを自動的に JavaScript に変換します。
型チェックは別のプロセスで行われるため、開発サーバーの速度が落ちることはありません。
モジュールのプリセット
Vite には、よく使用されるフレームワークやライブラリ用のプリセットが用意されています。
例えば、React プロジェクトを始める場合、以下のコマンドを実行するだけでプロジェクトのセットアップが完了します。
npm create vite@latest vite-project -- --template react
このコマンドを実行すると、React 用の基本的な設定が施されたプロジェクトが作成されます。
他にも、Vue、Svelte、Vanilla JS、TypeScript など、様々なプリセットが用意されています。
Vite のメリット
開発効率の向上
Vite を使用することで、開発効率が大幅に向上します。
特に、高速な開発サーバーと HMR（Hot Module Replacement）の恩恵は大きいです。
例えば、以下のような React コンポーネントがあるとします。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default Counter;
このコンポーネントを編集して保存すると、Vite は瞬時に変更を反映します。
ページ全体をリロードする必要がないため、カウンターの現在の状態を保ったまま、UI の変更を確認できます。
これにより、小さな変更を素早く繰り返し行うことができ、開発のスピードが格段に上がります。
ビルド時間の短縮
Vite は、本番環境用のビルドも高速です。
これは、Rollup を使用して効率的なコード分割を行っているためです。
例えば、以下のようなimport文があるとします。
import('./large-module.js').then((module) => {
// large-moduleの処理
});
Vite は、このlarge-module.jsを別のチャンクとして分割し、必要なときだけロードするようにします。
これにより、初期ロード時間が短縮され、ユーザーエクスペリエンスが向上します。
設定の簡素化
Vite は、多くの一般的なユースケースに対してデフォルトの設定を提供しています。
これにより、複雑な設定ファイルを書く必要性が大幅に減ります。
例えば、静的アセット（画像やフォントなど）の処理は、特別な設定なしで自動的に行われます。
<img src="./img/logo.png" alt="Logo" />
このようなコードがあれば、Vite は自動的に画像を処理し、最適化されたパスを生成します。
もし追加の設定が必要な場合でも、vite.config.jsファイルで簡単に行うことができます。
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
},
},
},
},
});
この設定により、すべてのnode_modulesからのコードがvendorチャンクにまとめられ、キャッシュ効率が向上します。
モダンな開発体験
Vite は、最新の Web 標準に基づいて設計されています。
これにより、モダンな開発体験を提供し、将来的な拡張性も確保しています。
例えば、CSS Modules のサポートが標準で組み込まれています。
/* styles.module.css */
.button {
background-color: blue;
color: white;
}
import styles from './styles.module.css';
function Button() {
return <button className={styles.button}>Click me</button>;
}
このように、CSS を JavaScript にインポートして使用することができます。
Vite は自動的にクラス名をユニークなものに変換し、スタイルの衝突を防ぎます。
Vite の使い方
プロジェクトの作成
Vite でプロジェクトを作成するのは、とても簡単です。
以下のコマンドを実行するだけで、新しいプロジェクトを作成できます。
npm create vite@latest my-vite-project -- --template vanilla
このコマンドを実行すると、いくつかの質問が表示されます。
プロジェクト名や使用するフレームワーク（VanillaJS、React、Vue.js など）を選択できます。
開発サーバーの起動
プロジェクトを作成したら、以下のコマンドで開発サーバーを起動できます。
cd my-vite-project
npm install
npm run dev
これで、高速な開発サーバーが立ち上がります。
通常、http://localhost:3000でアクセスできます。
プロダクションビルド
開発が完了し、本番環境用のビルドを行う際は、以下のコマンドを実行します。
npm run build
このコマンドを実行すると、最適化された静的ファイルがdistディレクトリに生成されます。
例えば、以下のようなファイル構造が生成されるかもしれません。
dist/
├── assets/
│ ├── index-1234abcd.js
│ └── vendor-5678efgh.js
└── index.html
これらのファイルは、静的ホスティングサービスにデプロイすることができます。
静的アセットの扱い
Vite は、静的アセット（画像、フォント、その他のファイル）の処理も簡単に行えます。
例えば、以下のようにして画像を読み込むことができます。
import imgUrl from './img/logo.png';
document.getElementById('logo').src = imgUrl;
Vite は、ビルド時にこの画像を適切に処理し、最適化された URL を生成します。
大きなファイルの場合は、自動的に別ファイルとして扱われ、小さなファイルの場合は base64 エンコードされてインライン化されます。
Vite で React プロジェクトを作成する
では、実際に Vite を使って React プロジェクトを作成してみましょう。
インストールしている Node.js のバージョンが 18、または 20 以上であれば使用できるはずです。
※コマンド実行時に Warning が表示される場合は、Node.js のバージョンをアップデートしてください。
Vite プロジェクトの作成
Vite で React プロジェクトを作成するのは非常に簡単です。
以下のコマンドを実行するだけで、React プロジェクトのテンプレートが作成されます。
npm create vite@latest
このコマンドを実行すると、以下のように対話形式でいくつかの質問が表示されます。
こちらの例では、プロジェクト名を vite-project として、React と TypeScript を選択しています。
$ npm create vite
Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) y
> npx
> create-vite
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript
Scaffolding project in /Users/masuyama/Desktop/vite-project...
Done. Now run:
cd vite-project
npm install
npm run dev
React のインストール
プロジェクトが作成されたら、必要なパッケージをインストールします。
以下のコマンドを実行してください。
cd vite-project
npm install
このコマンドで、package.jsonに記載されている全ての依存パッケージ（React や Vite を含む）がインストールされます。
Vite で React を動かしてみる
パッケージのインストールが完了したら、以下のコマンドで開発サーバーを起動できます。
npm run dev
このコマンドを実行すると、ローカルサーバーが起動し、通常はhttp://localhost:3000でアクセスできます。
ブラウザでこの URL を開くと、React アプリケーションが表示されるはずです。
例えば、src/App.jsxファイルを以下のように編集してみましょう。
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Vite + React</h1>
<div>
<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
</div>
</div>
);
}
export default App;
このコードを保存すると、Vite の高速な HMR（Hot Module Replacement）機能により、ブラウザ上で即座に変更が反映されます。
カウンターをクリックしてみてください。状態が保持されたまま、UI が更新されているはずです。