Vite入門：高速フロントエンド開発環境を5分で構築する方法

Viteとは？高速な理由とは

Viteは、Vue.jsの作者であるEvan You氏が開発したフロントエンドビルドツールです。従来のバンドラ（Webpackなど）と異なり、開発中はバンドルせず、ESモジュール（ESM）をネイティブに活用することで、高速な開発体験を実現しています。

特徴

• 開発サーバーの高速起動（ミリ秒単位）
• モジュール単位のオンデマンド読み込み
• 本番ビルドはRollupベースで最適化
• Vue, React, Preact, Lit, Svelte などに対応

---

5分でViteプロジェクトを構築する手順

以下の手順で、誰でも簡単にVite環境を構築できます。

1. Node.jsのインストール

Node.js（v16以上）をインストールしておきます。

node -v

2. プロジェクトの作成

以下のコマンドでViteプロジェクトを作成します：

npm create vite@latest my-vite-app

または、Yarnを使用する場合：

yarn create vite

pnpmを使用する場合：

pnpm create vite my-vite-app

その後、フレームワーク（Vanilla / Vue / React など）を選択します。

3. パッケージのインストール

npmを使用する場合：

cd my-vite-app
npm install

yarnを使用する場合：

yarn install

pnpmを使用する場合：

pnpm install

4. 開発サーバーの起動

npmを使用する場合：

npm run dev

yarnを使用する場合：

yarn dev

pnpmを使用する場合：

pnpm run dev

ブラウザで http://localhost:5173 にアクセスすると、Viteのスタート画面が表示されます。

---

よく使うVite設定（vite.config.js）

以下は、基本的な vite.config.js の例です：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
  },
});

• port: ローカルサーバーのポート番号
• open: 自動でブラウザを開く
• outDir: 出力ディレクトリ

---

Viteで使える便利なプラグイン

Viteには豊富な公式・サードパーティ製プラグインがあります。ここではいくつかの代表的なプラグインをご紹介します。

例：Vue / React 用の公式プラグイン

npm install @vitejs/plugin-vue --save-dev
npm install @vitejs/plugin-react --save-dev

// Vue 用
import vue from '@vitejs/plugin-vue';

// React 用
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [vue()], // または [react()]
});

例：自動インポートを可能にするプラグイン

npm install unplugin-auto-import --save-dev

import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: 'src/auto-imports.d.ts',
    })
  ]
});

例：SVGをインポートするプラグイン

npm install vite-plugin-svg-icons --save-dev

import svgLoader from 'vite-plugin-svg-icons';

export default defineConfig({
  plugins: [
    svgLoader({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[name]'
    })
  ]
});

---

まとめ：Viteで快適な開発を始めよう！

Viteはその高速な開発体験とシンプルな設定により、多くのフロントエンド開発者に選ばれています。VueやReactを使った開発だけでなく、シンプルなHTML/JSプロジェクトでもその恩恵を受けられます。まだ使ったことがない方は、ぜひ一度Viteを試してみてください。5分でセットアップできるその手軽さに驚くはずです。

なお、Viteは現在弊社のメインのフロントエンド開発環境として採用しており、今後もViteに関するさまざまなTipsや実践的なノウハウを本ブログで継続的に発信していく予定です。