フロントエンド開発のビルドツール「Vite」とは

2025年 6月 6日　Posted　野々瀨(フロントエンドエンジニア)

昨今（というほど最近でもありませんが）フロントエンド開発を行う際は、ビルドツールが欠かせなくなってきています。そんな幾つかのビルドツールがあるうちの一つ「Vite（ヴィート）」を、今回軽くご紹介しようと思います。

コンパイル

コンパイルとは、JavaScriptなどの人間が読むコードをコンピューターに理解できる機械語に翻訳・変換することです。また、言語間（例えばTypeScriptからJavaScriptなど）の変換を指す場合もあります。

トランスパイル

トランスパイルとは、ソースコードを別のソースコードへ変換・置き換えることです。また、別のソースコードへ置き換わることから、言語間（例えばTypeScriptからJavaScriptなど）の変換を指す場合もあります。

バンドラー

バンドラーとは、依存するJavaScriptやCSSなど、複数のアセットをまとめる（バンドル）こと・機能です。「Webpack」などのツールがあります。

タスクランナー

タスクランナーとは、開発作業（タスク）の一部を自動化する機能です。ファイルを監視し、そのファイルが更新されたら処理を実行するといったことができます。「Grunt」や「Gulp」などのツールがあります。

ビルド／ビルドツール

ビルドとは、変換処理する過程の最初から最後までの一連です。コンパイルやトランスパイル、バンドラー、タスクランナーなどがまとめられ処理されます。これらの処理を自動的に行うのがビルドツールで、「Parcel」や今回ご紹介する「Vite」などがあります。

Viteとは

Viteは、Vue.jsの作者であるEvan You氏によって作られました（現在はEvan You氏を含むさまざまな人達で進められています）。これまでのビルドツールでは、コードが増えたりで処理の動作が遅くなる傾向にあるのを高速に処理を行えるようにしたビルドツールです。

https://ja.vite.dev/

次のような特長があります。

• 高速に動作
• セットアップが簡単
• 簡易的なWebサーバーを搭載
• TypeScriptやJSX、CSSを標準サポート（もちろん素のJavaScriptであるVanilla JSにも対応）
• さまざまなフレームワークに対応

前提条件

2025年4月現在では、 Node.jsのバージョン18以上（または20以上）が必要です。

環境構築

幾つかのパッケージマネージャーに対応していますが、ここではnpmでご紹介します。なお、今回はフレームワークなしの素のJavaScript（Vanilla JS）を例にご紹介していきます。

npm create vite@latestを実行し、Viteのプロジェクト環境の初期化を行います。

npm create vite@latest

実行すると幾つかの質問をされますので、それぞれ回答していきます。

まず、インストールするかどうかを聞かれますので、そのままEnterキーを押します。

Need to install the following packages:
  create-vite@x.x.x
Ok to proceed? (y)

プロジェクト名を入力し、Enterキーを押します（初期は「vite-project」となっています）。

Project name:
vite-project

使用するフレームワークを選択し、Enterキーを押します。フレームワークを使用しない場合は「Vanilla」を選択します。

Select a framework:
Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others

開発言語を選択し、Enterキーを押します。

Select a variant:
TypeScript
JavaScript

「Done」が表示されたらプロジェクトのセットアップは完了です。続いてパッケージのインストールを行います。プロジェクトディレクトリーへ移動し、npm installを実行します。

cd プロジェクト名
npm install

これで環境は整いました。

開発の開始

プロジェクトディレクトリー上で、npm run devを実行すると開発サーバーが起動します。

npm run dev

起動が完了しましたら、表示されているURLにブラウザーでアクセスしますと、開発している内容が表示されます。

これでsrcディレクトリー配下のファイルを更新しますと、ブラウザーで開いた開発環境のページが自動的に再読み込みされます。

本番環境のためのビルド

本番環境へ反映する場合はビルドが必要です。npm run buildを実行するとビルドを行います。

npm run build

distディレクトリーにビルドされたデータが出力されます。このdistディレクトリー配下を本番環境へ反映すれば完了です。

直接開発と関係ない静的ファイル（アセット）

例えば、robots.txtなどは開発時には関係のないファイルです。これらの静的ファイル（アセット）は、publicディレクトリーに保管します。

publicディレクトリーはドキュメントルートと同じ扱いとなります。例えば、初期時にあるmain.jsでは次の画像のように書かれています。

ビルドした時はdistディレクトリーにpublic配下のデータがそのままコピーされます。

ファイル・ディレクトリー構成

Viteのプロジェクト配下は、次のようなファイル・ディレクトリーの構造をしています。

*  初期化で選択したフレームワークや開発言語によって構造は異なります。

.
│  .gitignore
│  index.html
│  package-lock.json
│  package.json
├─dist
│  │  index.html
│  │  vite.svg
│  │
│  └─assets
│      index-xxx.css
│      index-xxx.js
├─node_modules
├─public
│   vite.svg
└─src
    counter.js
    javascript.svg
    main.js
    style.css

ルート直下のindex.html

ルート直下のindex.htmlはページのトップとなるファイルです。

srcディレクトリー

JavaScriptやCSSなど組み込んで開発をするソースコードのファイルが格納されているディレクトリーです。

publicディレクトリー

開発時にソースとして利用しないような静的ファイル（アセット）を保管しておくディレクトリーです。ビルド時にdistディレクトリー内にコピーされます。

distディレクトリー

distディレクトリーがビルドした際に、本番用として書き出されたファイル群です。distディレクトリーにあるassetsディレクトリーは、srcディレクトリーから書き出されたファイルが基本的に書き出されます。

Viteの設定について

Viteの設定はプロジェクトディレクトリーにvite.config.js（あるいはvite.config.ts）ファイルを設置することで、変更することが可能です。例えば、開発のルートディレクトリーはプロジェクトディレクトリーですが、srcディレクトリーに変更すると次のように記述します。

import { defineConfig } from 'vite';

export default defineConfig({
  root: './src',
  publicDir: '../public',
  build: {
    outDir: '../dist'
  }
});

ちなみにルートディレクトリーをsrcディレクトリーにすると、プロジェクトディレクトリー直下にあるにあるindex.htmlなどを、srcディレクトリー内で管理することができます。

詳しい設定については公式の「Vite の設定」ページをご覧ください。

https://ja.vite.dev/config/