私はこれまで、ビルドツールという存在は知っていましたが、Sassのコンパイルや画像のWebpの変換などはアプリケーションなどのツールを使用していたため敬遠というほどではないですが使ってきませんでした。

しかし、Sassのコンパイルを手動で行ったり、大量の画像の最適化を別ツールで行ったりするとかなりの時間がかかってしまうという問題に直面してしまいました。

そこで重い腰を上げ、最近話題のビルドツール「Vite（ヴィート）」を導入してみることにしました。

結論から言うと、もっと早く使えばよかったと後悔するほど快適でした。この記事では、ビルドツール未経験だった私がViteを使って静的サイトのベースコーディングを行った体験をもとに、Viteの魅力や基本的な使い方を解説します。

Viteとは？基本を押さえよう

Viteの概要

Vite（ヴィート）は、フランス語で「速い」を意味するモダンなフロントエンドビルドツールです。Vue.jsの作者であるEvan You氏によって開発されました。

従来のビルドツールであるWebpackやGulpと比較して、開発時の起動速度が圧倒的に速いのが特徴です。これは、Viteが開発時にES Modulesをネイティブに活用し、必要なモジュールだけをオンデマンドで処理するアーキテクチャを採用しているためです。

具体的には、従来のバンドラー（Webpackなど）とViteでは、開発サーバーの仕組みが根本的に異なります。

• Bundle-based（Webpack等）：サーバー起動前にプロジェクト内のすべてのファイルをバンドル（1つにまとめる）してからブラウザに提供します。そのため、ファイル数が増えるほど起動に時間がかかります。
• Native ESM-based（Vite）：バンドルせずに、ブラウザからリクエストがあったファイルだけをその場で変換して返します。すべてのファイルを事前に処理する必要がないため、プロジェクトの規模に関係なく常に高速に起動できます。

この仕組みの違いが、Viteの「爆速」の秘密です。

なぜViteが注目されているのか

Viteが多くの開発者から支持されている理由は主に以下の3点です。

1. 驚異的な起動速度

従来のバンドラーは、開発サーバーを起動する際にプロジェクト全体をバンドルする必要がありました。一方、Viteは必要なファイルだけを処理するため、プロジェクトの規模に関係なく瞬時に起動します。

2. 高速なHMR（Hot Module Replacement）

ファイルを編集すると、ブラウザが自動的に更新されるHMR機能。ViteのHMRは変更されたモジュールだけを更新するため、大規模なプロジェクトでも編集内容が瞬時に反映されます。

3. 設定がシンプル

Webpackの設定ファイルは複雑になりがちですが、Viteはゼロコンフィグでも動作し、カスタマイズが必要な場合も直感的に設定できます。

GulpやWebpackとの違い

ビルドツール経験者の方向けに、従来のツールとの違いを簡単に整理します。

Gulpとの違い

Gulpはタスクランナーであり、処理の流れを自分で細かく定義する必要があります。Sassのコンパイル、ファイルの監視、ブラウザのリロードなど、それぞれのタスクを個別に設定します。一方、Viteはこれらの機能が統合されており、最小限の設定で同等以上の機能を実現できます。

Webpackとの違い

Webpackは非常に高機能ですが、その分設定が複雑になりがちです。Viteは内部でRollupを使用しており、開発時はES Modulesを直接利用することで高速化を実現しています。本番ビルド時にはRollupでバンドルするため、最適化された出力を得られます。

実際にViteでベースコーディングしてみた

プロジェクト構成

今回、私が構築したプロジェクトの構成は以下のとおりです。

project/
├── src/                # ソースファイル
│   ├── scss/
│   │   ├── style.scss
│   │   └── _variables.scss
│   ├── js/
│   │   └── main.js
│   └── images/
│       ├── hero.png
│       └── logo.jpg
├── public/             # 変換不要な静的ファイル（favicon等）を置く場所
├── dist/               # ビルド後の出力先（npm run buildで生成）
├── index.html
├── package.json
└── vite.config.js

src/フォルダにソースファイル（Sass、JavaScript、画像）を配置し、ビルド後のファイルはViteのデフォルトである`dist/`フォルダに出力する構成にしました。
なお、`public/`フォルダはViteにおいて「変換不要な静的ファイル（favicon、robots.txtなど）をそのままコピーする場所」として使われます。ビルドの出力先として`public/`を指定すると、Viteがビルド時に出力先を空にする挙動により、必要な静的ファイルが削除されるリスクがあるため避けましょう。

環境構築の手順

1. プロジェクトの作成

まず、任意のディレクトリでnpmプロジェクトを初期化します。

bash npm init -y

2. Viteのインストール

Vite本体と、今回使用するプラグインをインストールします。

bash npm install -D vite sass vite-plugin-image-optimizer

`sass`はSassのコンパイルに必要なパッケージ、`vite-plugin-image-optimizer`は画像をWebPに変換するためのプラグインです。

3. package.jsonの設定

`package.json`にスクリプトを追加します。

json { "name": "vite-base-coding", "version": "1.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "sass": "^1.77.0", "vite": "^5.2.0", "vite-plugin-image-optimizer": "^1.1.8" } } 

`npm run dev`で開発サーバーを起動、`npm run build`で本番用ビルドを実行できます。

4. vite.config.jsの設定

プロジェクトルートに`vite.config.js`を作成し、以下のように設定しました。

javascript import { defineConfig } from "vite"; import { ViteImageOptimizer } from "vite-plugin-image-optimizer"; export default defineConfig({ root: "./", base: "./", build: { outDir: "dist", emptyOutDir: true, }, css: { preprocessorOptions: { scss: { additionalData: `@use "src/scss/variables" as *;`, }, }, }, plugins: [ ViteImageOptimizer({ png: { quality: 80 }, jpg: { quality: 80 }, webp: { quality: 80 }, }), ], });

この設定で、Sassのコンパイルと画像のWebP変換が自動化されます。

Viteを使って感じたメリット

1. とにかく速い

開発サーバーの起動が本当に一瞬です。これまでビルドツールを使っていなかった私でも、この速さには感動しました。`npm run dev`を実行すると、ほぼ待ち時間なしでブラウザが立ち上がります。
また、HMR（Hot Module Replacement）の反映速度も驚異的です。Sassを編集すると、保存した瞬間にブラウザのスタイルが更新されます。ページ全体がリロードされるのではなく、変更した部分だけが更新されるため、作業効率が大幅に向上しました。

2. Sassのコンパイルが簡単

Viteでは、Sassのパッケージをインストールするだけで、特別な設定なしにSassファイルをコンパイルできます。`@use`や`@forward`といったモダンなSass記法にも対応しており、変数やmixinの管理も快適です。

これまでは、Sassのコンパイルのためだけに別のツールを用意していましたが、Viteひとつで完結するようになりました。

3. 画像の最適化が自動化された

`vite-plugin-image-optimizer`を導入することで、PNGやJPGファイルを自動的にWebPに変換できるようになりました。これまでは画像を別のツールで手動変換していたので、この自動化は非常にありがたいです。
WebPはPNGやJPGと比較してファイルサイズが小さく、ページの表示速度向上に貢献します。SEOの観点からも、画像の最適化は重要なポイントです。

補足：このプラグインによる画像の最適化は、主に`npm run build`（本番ビルド）の実行時に行われます。開発中（`npm run dev`）にリアルタイムで全画像を変換し続けるわけではないので、開発時のパフォーマンスに影響する心配はありません。

4. 設定ファイルがシンプル

上で紹介した`vite.config.js`を見ていただければわかるように、設定ファイルは非常にシンプルです。Webpackの設定ファイルと比較すると、記述量は圧倒的に少なく、何をしているのかが直感的に理解できます。
ビルドツール初心者の私でも、公式ドキュメントを読みながら迷わず設定できました。

つまづいたポイント：パスの指定

Viteを使い始めて、最初につまづいたのがパスの指定です。
開発環境と本番環境でパスの解決方法が異なるため、最初は画像やCSSが正しく読み込まれないことがありました。特に、HTMLファイル内で相対パスを使っている場合、ビルド後にパスがずれてしまう問題が発生しました。

この問題は、`vite.config.js`の`base`オプションを適切に設定することで解決できます。特に、レンタルサーバーのサブディレクトリ（例：`example.com/project-a/`）にアップロードする場合、この設定は必須です。

javascript export default defineConfig({ base: "./", // その他の設定 });

また、JavaScript内で画像を読み込む場合は、`import`文を使うか、`public`フォルダに静的ファイルとして配置することで、パスの問題を回避できます。

ビルドツールを初めて使う方は、このパス周りの挙動に最初は戸惑うかもしれません。しかし、一度理解してしまえば、むしろ明確なルールがあることで管理しやすくなります。

まとめ：Viteはコーダーの強い味方

導入のハードルが低く、設定もシンプル。それでいて開発体験は劇的に向上します。Sassのコンパイル、画像の最適化、HMRといった機能が統合されており、コーディング作業に集中できる環境が簡単に構築できます
（claudeやantigravityなどAIを使って環境を構築してもらうことも可能です。）
特に、これまでビルドツールを使っていなかった方や、Gulpの設定に疲弊している方には、Viteを強くおすすめします。モダンなWeb制作の現場では、Viteのようなビルドツールの知識は必須になりつつあります
まだ使い始めて間もないため、すべての機能を使いこなせているわけではありませんが、基本的なベースコーディングには十分な機能が揃っています。今後はさらに深掘りして、より効率的な開発環境を追求していきたいと思います。
Viteを使ったことがない方は、ぜひ一度試してみてください。きっと、もっと早く使えばよかったと思うはずです。

参考リンク

– [Vite公式ドキュメント](https://ja.vitejs.dev/)
– [vite-plugin-image-optimizer](https://github.com/FatehAK/vite-plugin-image-optimizer)