Viteの使い方完全ガイド【インストールから応用まで】

フロントエンド開発の現場では、開発サーバーの起動時間やコード変更後の反映速度が、開発者の生産性に直結します。従来のビルドツールでは、プロジェクトが大規模になるにつれて、これらの時間が長くなる傾向がありました。開発サーバーの起動に数十秒かかったり、小さな変更でも反映に数秒待たされたりする経験は、多くの開発者にあるでしょう。

特に、複数のコンポーネントを同時に修正する場面では、その待ち時間が積み重なります。これは開発フローを阻害し、集中力を途切れさせる原因にもなります。

Viteは、このような課題に終止符を打つために登場しました。Viteを導入することで、開発サーバーは瞬時に立ち上がります。コードの変更は、まるで魔法のように即座にブラウザに反映されます。これにより、開発者は思考を中断することなく、スムーズにコーディングに集中できます。まるで、目の前でコードが生きているかのような、ストレスフリーな開発体験が実現します。

Viteとは：次世代フロントエンドツールの核心

Viteは「ヴィート」と読みます。フランス語で「速い」を意味する言葉です。その名の通り、超高速なフロントエンドビルドツールとして設計されました。これは、現代のウェブ開発における生産性の向上を目的としています。

Viteは主に二つの主要な部分から構成されています。 一つは、開発時に利用する「開発サーバー」です。これは、ネイティブESモジュールを活用します。非常に速いHot Module Replacement (HMR) を提供するのが特徴です。HMRとは、コードの一部を変更した際に、ページ全体をリロードせずにその変更だけを反映する機能です。これにより、開発中の待ち時間が大幅に短縮されます。

もう一つは、本番環境向けにコードを最適化して出力する「ビルドコマンド」です。Viteのビルドコマンドは、Rolldownというツールを用いています。このツールが、バンドルされた高品質な静的アセットを生成します。静的アセットとは、HTML、CSS、JavaScriptファイルなどのことです。これらはウェブサイトを構成する基本的な要素です。

Viteが誕生した背景には、従来のJavaScriptバンドラーが抱えていた課題があります。例えば、Webpackのようなツールは、プロジェクト全体の依存関係を事前にバンドルしていました。そのため、大規模なプロジェクトでは、開発サーバーの起動に時間がかかりがちでした。

Viteは、開発時にはネイティブESモジュールを直接利用します。必要なモジュールだけをオンデマンドでブラウザに提供します。これにより、サーバーの起動時間を大幅に短縮し、開発体験を革新しました。本番ビルドでも最適化された出力を実現し、高速なウェブサイトを提供します。

Viteは、その高速性だけでなく、プラグインAPIとJavaScript APIを通じて高い拡張性も提供しています。これにより、開発者はViteを自身のプロジェクトやワークフローに合わせて柔軟にカスタマイズできます。

インストール方法：Viteプロジェクトを素早く起動

Viteプロジェクトを開始するには、create-vite コマンドを使用するのが最も簡単です。このコマンドは、Viteを基盤とした新しいプロジェクトを素早くセットアップしてくれます。Node.jsが事前にインストールされていることを確認してください。Node.jsはJavaScriptの実行環境です。

以下のコマンドをターミナルで実行してください。お使いのパッケージマネージャーに合わせて選択します。

npmの場合

npm create vite@latest

Yarnの場合

yarn create vite

pnpmの場合

pnpm create vite

コマンドを実行すると、プロジェクト名や使用するフレームワーク、TypeScriptの使用有無などを対話形式で尋ねられます。例えば、my-vite-app という名前でVueとTypeScriptのプロジェクトを作成する場合、以下のように選択します。

Project name: my-vite-app
Select a framework: Vue
Select a variant: TypeScript

これにより、Viteと選択したフレームワークの初期設定が完了したプロジェクトが生成されます。

もし、特定のフレームワークとテンプレートを直接指定したい場合は、以下のようにコマンドを実行できます。 例えば、ReactとTypeScriptのテンプレートでプロジェクトを作成する場合です。

npm create vite@latest my-react-ts-app -- --template react-ts

このコマンドは、my-react-ts-app という新しいディレクトリを作成し、ViteとReact、TypeScriptが設定されたプロジェクトをセットアップします。

基本的な使い方：最低限これだけ知れば使えるコマンド

Viteプロジェクトの基本的な開発サイクルは、いくつかのシンプルなコマンドで完結します。ここでは、最低限知っておくべき主要なコマンドを3つ紹介します。これらのコマンドは、プロジェクトのルートディレクトリで実行します。

1. 依存関係のインストール

プロジェクトを作成したら、まず必要なパッケージをインストールします。これは、package.json に記述されている依存関係をダウンロードする作業です。

cd my-vite-app
npm install
# または yarn install
# または pnpm install

2. 開発サーバーの起動

開発中にコードの変更を即座に確認するためには、開発サーバーを起動します。このコマンドは、超高速なHMRを提供し、開発体験を向上させます。

npm run dev
# または yarn dev
# または pnpm dev

通常、http://localhost:5173 (または別のポート) でアプリケーションにアクセスできます。コードを変更すると、ブラウザが自動的に更新されます。

3. 本番環境向けビルド

アプリケーションをデプロイする準備ができたら、本番環境向けに最適化されたコードをビルドします。このコマンドは、JavaScript、CSS、HTMLなどのファイルを最小化します。これにより、パフォーマンスを最大化します。

npm run build
# または yarn build
# または pnpm build

ビルドされたファイルは、通常 dist ディレクトリに生成されます。

4. ビルド結果のプレビュー (任意)

ビルドした静的ファイルをローカルで確認したい場合は、以下のコマンドを使用します。これは、実際のウェブサーバーを模倣した簡易的なサーバーを起動します。

npm run preview
# または yarn preview
# または pnpm preview

このプレビューサーバーは、開発サーバーとは異なり、HMR機能は持ちません。あくまでビルドされた最終成果物を確認するためのものです。

便利な使い方・応用例 3選：実際の開発シーンに落とし込む

Viteは、基本的な機能だけでも強力ですが、さらに便利な使い方や応用例を知ることで、開発効率を格段に上げられます。ここでは、実際の開発シーンで役立つ3つの応用例を紹介します。

1. 環境変数の活用

Viteでは、環境変数を使ってアプリケーションの設定を柔軟に変更できます。例えば、開発環境と本番環境で異なるAPIのエンドポイントを使用する場合に便利です。Viteは、.env ファイルを自動的に読み込みます。

プロジェクトのルートディレクトリに .env.development や .env.production といったファイルを作成します。ファイル内の変数は VITE_ プレフィックスを付ける必要があります。

例えば、開発環境用のAPI URLを設定するには、.env.development に以下を記述します。

VITE_API_URL=http://localhost:3000/api

本番環境用には、.env.production に以下を記述します。

VITE_API_URL=https://api.example.com/api

アプリケーションコード内では、import.meta.env を通じてこれらの変数にアクセスできます。

// main.js (または任意のJavaScript/TypeScriptファイル)
console.log('API URL:', import.meta.env.VITE_API_URL);

// 開発環境では http://localhost:3000/api が表示され、
// 本番環境では https://api.example.com/api が表示されます。

これにより、コードを変更せずに環境ごとの設定を切り替えられます。

2. パスエイリアスの設定

大規模なプロジェクトでは、深い階層にあるファイルをインポートする際に、相対パスが長くなりがちです。例えば、../../components/Button.vue のようなパスは読みにくいことがあります。Viteでは、vite.config.js でパスエイリアスを設定することで、これを解決できます。

例えば、@ を src ディレクトリのエイリアスとして設定してみましょう。vite.config.js (または vite.config.ts) に以下を追加します。

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path'; // Node.jsのpathモジュールをインポート

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // @をsrcディレクトリにマッピング
    },
  },
});

これで、src ディレクトリ内のファイルを @ を使ってインポートできます。

// src/App.vue
import Button from '@/components/Button.vue'; // 相対パスが短縮されます

TypeScriptを使用している場合は、tsconfig.json にもエイリアスの設定を追加する必要があります。これにより、TypeScriptコンパイラがエイリアスを認識し、型チェックが正しく機能します。

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // ベースURLをカレントディレクトリに設定
    "paths": {
      "@/*": ["./src/*"] // @/* を ./src/* にマッピング
    }
  }
}

これにより、コードの可読性が向上し、ファイル移動時のパス修正の手間が減ります。

3. CSSプリプロセッサの統合

Viteは、SassやLess、Stylusといった主要なCSSプリプロセッサをネイティブでサポートしています。特別なViteプラグインをインストールする必要はありません。

例えばSassを使用したい場合、まずSassパッケージをプロジェクトにインストールします。開発時のみ必要なため、-D オプションを付けてインストールします。

npm install -D sass
# または yarn add -D sass
# または pnpm add -D sass

次に、.scss や .sass 拡張子のファイルを通常通りインポートするだけで利用できます。

/* src/assets/styles.scss */
$primary-color: #3498db; // 変数を定義

body {
  font-family: Arial, sans-serif;
  color: $primary-color; // 変数を使用
}

// main.js (または任意のJavaScript/TypeScriptファイル)
import './assets/styles.scss'; // Sassファイルをインポート

Viteが自動的にSassファイルをコンパイルし、CSSとしてアプリケーションに適用します。これにより、CSSの記述をより構造化し、効率的に管理できます。PostCSSもサポートされており、postcss.config.js ファイルを設置することで自動的に適用されます。

他ツールとの組み合わせ：Viteエコシステムで開発を加速

Viteは単体でも強力ですが、他のツールと組み合わせることで、その真価を最大限に発揮します。ここでは、Viteと相性の良いツールやフレームワーク、そしてそれらを組み合わせる方法について説明します。

フレームワークとの連携

Viteは、React、Vue、Svelte、Litなど、多くの人気JavaScriptフレームワークと高い親和性を持ちます。create-vite コマンドでプロジェクトを初期化する際、これらのフレームワーク用のテンプレートを選択できます。

これにより、各フレームワークのプロジェクトをViteの高速な開発環境でスムーズに開始できます。例えば、Reactプロジェクトのテンプレートを選択すると、React開発に必要な設定がすでにViteに統合されています。

Vitest (テストフレームワーク)

Vitestは、Viteを基盤として開発された高速なユニットテストフレームワークです。Viteの設定をそのまま利用できるため、設定の手間が少なく、非常に高速にテストを実行できます。開発サーバーと同じESモジュール解決の仕組みを利用します。これにより、開発とテストの間で環境の整合性を保ちやすくなります。

インストールは簡単です。

npm install -D vitest

package.json にスクリプトを追加し、npm test で実行できるようにします。

// package.json
{
  "scripts": {
    "test": "vitest"
  }
}

テストファイルを作成し、npm test を実行するだけでテストが走ります。ウォッチモードやUIモードなど、豊富な機能が提供されています。

ESLintとPrettier (リンターとフォーマッター)

ESLintはコードの品質を維持し、潜在的な問題を検出するリンターです。Prettierは、コードスタイルを統一するためのフォーマッターです。これらのツールは、Viteプロジェクトに簡単に統合できます。

ESLintのViteプラグインや、PrettierのVite対応設定を利用することで、開発ワークフローに組み込めます。例えば、Viteの公式テンプレートには、ESLintやPrettierの導入をサポートするオプションが含まれることがあります。これにより、チーム開発におけるコードの一貫性を保ち、品質を向上させることが可能です。

UIライブラリとCSSフレームワーク

Tailwind CSSやMaterial UIなどのUIライブラリやCSSフレームワークもViteと問題なく連携できます。特にTailwind CSSはPostCSSプラグインとして機能するため、ViteのPostCSSサポートを通じて簡単に統合できます。

これにより、Viteの高速な開発環境で、モダンなUIコンポーネントやデザインシステムを効率的に構築できます。

よくある設定・カスタマイズ：vite.config.js でViteを操る

Viteの設定は、プロジェクトルートにある vite.config.js (または vite.config.ts) ファイルで行います。このファイルは、Viteの動作を細かく制御するための中心的な場所です。ここでは、よく使われる設定例をいくつか紹介します。

1. プラグインの追加

Viteは、プラグインによって機能を拡張できます。例えば、レガシーブラウザ対応のための @vitejs/plugin-legacy や、PWA機能を追加する vite-plugin-pwa などがあります。

プラグインは npm install でインストールし、vite.config.js で読み込んで plugins オプションに追加します。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 例えばVueプラグインをインポート
import legacy from '@vitejs/plugin-legacy'; // レガシープラグインをインポート

export default defineConfig({
  plugins: [
    vue(), // Vueプラグインを有効化
    legacy({ // レガシープラグインを設定
      targets: ['defaults', 'not IE 11'], // 対象ブラウザを指定
    }),
    // 他のプラグインもここに追加
  ],
});

これにより、Viteの標準機能を超えた様々な要件に対応できます。

2. 開発サーバーのカスタマイズ

開発サーバーのポート番号やホストアドレス、プロキシ設定などを変更できます。例えば、APIリクエストを別のサーバーに転送するプロキシ設定は非常によく使われます。

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 8080, // 開発サーバーのポートを8080に変更
    open: true, // サーバー起動時に自動でブラウザを開く
    proxy: {
      '/api': { // /api で始まるリクエストをプロキシ
        target: 'http://localhost:5000', // ターゲットとなるAPIサーバー
        changeOrigin: true, // オリジンを変更してCORS問題を回避
        rewrite: (path) => path.replace(/^\/api/, ''), // /api を削除して転送
      },
    },
  },
});

この設定により、フロントエンドとバックエンドが異なるポートで動作していても、CORSの問題なく開発を進められます。

3. ビルド出力のカスタマイズ

本番ビルドの出力先ディレクトリや、バンドルされたファイルの命名規則などを設定できます。例えば、dist 以外のディレクトリにビルド結果を出力したい場合などです。

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'build', // 出力ディレクトリを 'build' に変更
    assetsDir: 'static', // アセットのサブディレクトリ名を 'static' に変更
    rollupOptions: {
      // Rollupのオプションを直接指定することも可能
      output: {
        // 例えば、特定のモジュールを個別のファイルにバンドルする
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        },
      },
    },
  },
});

outDir はビルド結果が保存されるルートディレクトリを指定します。assetsDir は、JavaScriptやCSS、画像などの静的アセットが outDir 内のどのサブディレクトリに配置されるかを指定します。

rollupOptions を使うと、Viteの内部で使われているバンドラーであるRollupの低レベルな設定にアクセスできます。これにより、特定のデプロイ環境に合わせた柔軟なビルド設定が可能です。

今日からできる実行プラン：3ステップでViteを始める

Viteの強力な機能と快適な開発体験を、今日からすぐに始められます。以下の3つのステップで、Viteプロジェクトの立ち上げと基本設定を体験してみましょう。

ステップ1: 新しいViteプロジェクトを作成する

まず、ターミナルを開き、Viteプロジェクトを新規作成します。お好みのフレームワーク（React, Vueなど）とTypeScriptの有無を選択してください。

npm create vite@latest my-first-vite-app -- --template react-ts

このコマンドは、my-first-vite-app という名前でTypeScriptを使ったReactプロジェクトを生成します。

ステップ2: 開発サーバーを起動し、HMRの速度を体感する

作成したプロジェクトディレクトリに移動し、依存関係をインストールします。

cd my-first-vite-app
npm install

その後、開発サーバーを起動します。

npm run dev

ブラウザで表示されたページを開き、src/App.tsx (例えばReactの場合) のテキストを編集してみてください。保存と同時にブラウザの表示が瞬時に更新されることを確認しましょう。このHMRの速度が、Viteの大きな魅力の一つです。

ステップ3: vite.config.ts で設定をカスタマイズしてみる

プロジェクトルートにある vite.config.ts ファイルを開いてみましょう。例えば、開発サーバーのポートを変更したり、パスエイリアスを設定したりしてみてください。

例えば、server.port: 3000 を追加して、開発サーバーのポートを 3000 に変えてみましょう。

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000, // ポートを3000に変更
  },
});

変更を保存し、再度 npm run dev を実行すると、新しいポートでサーバーが起動するはずです。これらの簡単なカスタマイズを通じて、Viteの柔軟性と設定の容易さを実感できます。

これらのステップを踏むことで、Viteの基本的な使い方と、それがもたらす快適な開発体験をすぐに理解できるでしょう。ぜひ、ご自身のプロジェクトにViteを導入し、次世代のフロントエンド開発を体験してください。

参考文献

• Vite 公式ドキュメント
• Vite GitHubリポジトリ
• Rolldown GitHubリポジトリ
• MDN Web Docs - JavaScript モジュール
• Vitest 公式ドキュメント
• Viteで始める超高速フロントエンド開発入門
• ViteとTypeScriptで構築するモダンWebアプリケーション