はじめに
「開発サーバーの起動に時間がかかる」
「コードの変更がなかなか反映されない」
といった悩みを抱えていませんか？
私も以前はWebpackを使った開発環境で、起動に時間がかかり、イライラした経験があります。
実は、そんな悩みを一気に解決してくれるのが「Vite（ヴィート）」というモダンなビルドツールです。
私がViteに出会ってからは、開発効率が格段に上がり、ストレスフリーな開発環境を手に入れることができました。
この記事では、Viteの基本的な使い方から実践的なヒントまで、初心者の方にも分かりやすく解説していきます。
記事を読み終えると、爆速の開発環境を手に入れ、快適なフロントエンド開発を始められるようになりますので、ぜひ参考にしてみてください。
Viteとは？その魅力と主な特徴
Viteが生まれた背景
フロントエンド開発の世界では、プロジェクトの規模が大きくなるにつれて開発環境の起動時間やビルド時間が長くなるという問題が常にありました。
そんな問題を解決するために、Vue.jsの作者であるEvan You氏によって開発されたのがVite（フランス語で「速い」という意味）です。
その名の通り、「速さ」にこだわって設計されたビルドツールです。
従来のビルドツールとの違い
従来のWebpackなどのビルドツールは、開発サーバーを起動する前にすべてのモジュールをバンドル（一つにまとめる）する必要がありました。
これが、プロジェクトが大きくなればなるほど時間がかかる原因です。
対してViteは、モダンブラウザが持つネイティブESモジュール（ES Modules）の機能を活用し、バンドル処理を必要最小限に抑えるアプローチを採用しています。
この違いが「爆速」と呼ばれる理由なんです。
Webpackの場合：
ファイル変更 → 全体のバンドル再構築 → ブラウザに反映Viteの場合：
ファイル変更 → 変更されたモジュールのみ処理 → ブラウザに即時反映この違いは、特に大規模なプロジェクトになるほど顕著に現れます。
WebpackとViteの使い分けや違いについては以下の記事で詳細に解説をしていますので、あわせて参考にしてみてください。
Viteプロジェクトの始め方
必要な環境構築
Viteを使ってプロジェクトを始める前に、まずは開発環境を整えておく必要があります。
Viteの環境構築はとても簡単なんです！
最も重要なのは、Node.jsがインストールされていることです。
Node.jsがインストールされているか確認するには、ターミナル（またはコマンドプロンプト）で以下のコマンドを実行してください。
node -vもしバージョン番号（例：v16.14.0）が表示されれば、Node.jsはすでにインストールされています。
表示されない場合は、以下のNode.jsの公式サイトからダウンロードしてインストールする必要があります。
上記サイトからNode.jsのLTS（Long Term Support）版をインストールしてください。
安定性が高く、多くのツールやライブラリとの互換性が確保されています。
プロジェクトの作成手順
Node.jsが準備できたら、いよいよViteプロジェクトの作成に進みます。
ターミナルで以下のコマンドを実行します：
npm create vite@latestこのコマンドを実行すると、セットアップが始まります。最初に「プロジェクト名」の入力を求められるので、好きな名前を入力してください。
フレームワーク別のテンプレート選択
プロジェクト名を入力した後、使用するフレームワークを選択するように促されます。
既に慣れているフレームワークがあればそれを選んでください。
初心者の方はVanilla(純粋なJavaScript)がおすすめです。
フレームワークを選んだ後は、バリアント（JavaScript、TypeScript）を選択してください。
依存関係のインストールと開発サーバーの起動
プロジェクトが作成されたら、そのディレクトリに移動し、必要な依存関係をインストールします：
cd プロジェクト名
npm installこのnpm installコマンドは、プロジェクトに必要なすべてのパッケージをインストールします。
これはpackage.jsonファイルに定義されている依存関係を自動的にインストールしてくれるものです。
依存関係のインストールが完了したら、以下のコマンドで開発サーバーを起動します：
npm run devこのコマンドを実行すると、通常は「http://localhost:5173」でアプリケーションが起動します。
ブラウザでこのURLを開くと、作成したプロジェクトのウェルカムページが表示されるはずです。
サーバーの起動速度が早いのを実感できるはずです。
これで、Viteプロジェクトの基本的なセットアップは完了です。
Viteプロジェクトの構造と設定カスタマイズ
基本的なディレクトリ構造の理解
Viteプロジェクトを作成すると、基本的なディレクトリ構造が自動的に生成されます。
Viteプロジェクトの基本的な構造は以下のようになっています：
プロジェクト名/
├── index.html # アプリケーションのエントリーポイント
├── package.json # プロジェクトの依存関係と設定
├── vite.config.js # Viteの設定ファイル
├── public/ # 静的ファイルを格納するディレクトリ
└── src/ # ソースコードを格納するディレクトリ
├── main.js # JavaScriptのエントリーポイント
├── App.vue/jsx # メインのアプリケーションコンポーネント
├── assets/ # 画像やフォントなどのアセット
├── components/ # 再利用可能なコンポーネント
└── styles/ # CSS、SCSSなどのスタイルファイルViteでは、index.htmlがプロジェクトのルートに配置されています。これは、HTMLファイルが単なるビルド成果物ではなく、プロジェクトの出発点として扱われているからです。
vite.config.jsによる設定カスタマイズ
Viteの柔軟性を最大限に活かすには、vite.config.jsファイルを活用することが重要です。
このファイルで、プロジェクトに合わせた様々な設定をカスタマイズできます。
基本的なvite.config.jsファイルは以下のような構造になっています：
import { defineConfig } from 'vite'
export default defineConfig({
server: {
port: 3000 // 開発サーバーのポート番号を変更
}
})私が特に便利だと感じる設定オプションをいくつか紹介します：
開発サーバーの設定：
import { defineConfig } from "vite";
export default defineConfig({
server: {
port: 3000, // ポート番号の変更
open: true, // サーバー起動時に自動でブラウザを開く
},
});
npm run devのコマンドを実行すると自動でブラウザを立ち上げることが出来ます。
ビルド設定：
build: {
outDir: 'dist', // ビルド出力先ディレクトリ
assetsDir: 'assets', // 静的アセットのディレクトリ
minify: 'terser', // minifyツールの指定
sourcemap: true // ソースマップの生成
}本番環境向けのビルド設定もカスタマイズできます。
SassやLessの使用：
CSSプリプロセッサを使いたい場合は、対応するパッケージをインストールするだけでViteが自動的にサポートします：
npm install sass -Dインストール後、.scssファイルを直接インポートできるようになります。
追加の設定は不要です
これらの設定を組み合わせることで、プロジェクトの要件に合わせた最適な開発環境を構築できます。
一般的なnpmスクリプトとその使い方
Viteプロジェクトでは、package.jsonファイルに以下のような一般的なnpmスクリプトが定義されています：
"scripts": {
"dev": "vite", // 開発サーバーの起動
"build": "vite build", // 本番環境用のビルド
"preview": "vite preview" // ビルド後のプレビュー
}これらのスクリプトは以下のように使用します：
npm run dev：開発サーバーを起動します。コードを変更すると、自動的にブラウザに反映されます。npm run build：本番環境用にアプリケーションをビルドします。最適化されたファイルがdistディレクトリに生成されます。npm run preview：ビルドされたアプリケーションをローカルでプレビューします。本番環境デプロイ前の最終確認に便利です。
プロジェクト構造の理解に関連して、Viteでのページ追加について解説を追加しますね。
Viteプロジェクトでのページ追加方法
Viteプロジェクトに新しいページを追加する方法を解説します。
これは実際のウェブサイト開発では必須の知識ですが、意外と躓きやすいポイントでもあります。
ページ追加
新しいページを追加するのは非常にシンプルです。
- まず、プロジェクトのルートディレクトリに新しいHTMLファイルを作成します。例えば、
about.htmlというファイルを作成してみましょう：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - My Vite Project</title>
</head>
<body>
<h1>About Page</h1>
<p>This is the about page of my Vite project.</p>
<a href="index.html">Back to Home</a>
<script type="module" src="./src/about.js"></script>
</body>
</html>- 次に、
srcディレクトリに対応するJavaScriptファイル（この例ではabout.js）を作成します：
// src/about.js
import './style.css' // 共通のスタイルをインポート
console.log('About page loaded!')
// ページ固有のJavaScript処理をここに記述- 最後に、メインページ（
index.html）からこの新しいページへのリンクを追加します：
<a href="about.html">About</a>これで新しいページが追加され、メインページからアクセスできるようになります。
Viteは自動的に新しいHTMLファイルも認識し、開発サーバーでアクセス可能にしてくれます。
共通のヘッダーとフッターの抽出
Viteでは各ページで共通のヘッダーとフッターを使う場合、JavaScript側でインポートして挿入する方法があります：
// src/components/header.js
export function createHeader() {
const header = document.createElement('header')
header.innerHTML = `
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
`
return header
}そして、各ページのJavaScriptで：
// src/main.js, about.js, contact.js などで
import { createHeader } from './components/header.js'
document.body.prepend(createHeader())この方法を使用して、headerなど共通のパーツをコンポーネント化をすることで効率的に開発ができるようになります。
まとめ
Vite（ヴィート）は、フロントエンド開発者の開発体験を劇的に向上させるビルドツールです。従来のWebpackなどと比較して、その「爆速」の開発環境が最大の魅力となっています。
Viteは初心者にも扱いやすく設計されており、少ないコマンドで効率的な開発環境を構築できます。React、Vue、Svelteなど様々なフレームワークとの相性も良く、フロントエンド開発の新しい標準になりつつあります。
まだViteを試したことがない方は、ぜひこの記事を参考に、爆速の開発環境を体験してみてください。
関連記事
