フロントエンド開発をしていると、「ビルドに時間がかかりすぎる...」と感じることはありませんか？

特に大規模なプロジェクトでは、ビルド時間が長くなりがちで、開発効率が落ちてしまうことも多いです。

そんな悩みを解決してくれるのが、今回紹介する「Vite」というビルドツールです。

Viteを使えば、フロントエンド開発の速度が劇的に向上し、ストレスフリーな開発環境を手に入れることができます。

そもそも「ビルドツール」とは？

フロントエンド開発において、ビルドツールは欠かせない存在です。

でも、「ビルドツールって何？」と思う方もいるかもしれませんね。

簡単に言えば、ビルドツールは「人間が書いたコードを、ブラウザが理解できる形に変換するツール」です。

例えば、最新のJavaScriptの機能を使って書いたコードを、古いブラウザでも動くように変換したり、複数のファイルを1つにまとめたりする役割を担っています。

これらの処理を手動でやろうとすると、とても時間がかかってしまいます。

ビルドツールを使えば、これらの作業を自動化できるので、開発者は本質的な開発作業に集中できるのです。

Viteの登場背景

従来のビルドツールには、WebpackやParcelなどがありました。

これらは確かに優れたツールですが、プロジェクトが大きくなるにつれて、ビルド時間が長くなるという問題がありました。

「コードを書いて、保存して、ブラウザで確認する」というサイクルが遅くなると、開発効率が落ちてしまいます。

Viteは、このような問題を解決するために開発されました。

特に、ES Modulesを活用することで、驚くほど高速な開発環境を提供しています。

Viteとは

Viteの概要

Viteは、フランス語で「速い」という意味を持つ言葉です。

その名の通り、Viteは非常に高速なビルドツールとして知られています。

Vue.jsの作者であるEvan You氏によって開発され、2020年4月に初めてリリースされました。

Viteの特徴は、開発時の高速なサーバー起動とHMR（Hot Module Replacement）、そして本番用のビルドの最適化です。

従来のビルドツール

従来のビルドツールといえば、WebpackやParcel、Rollupなどが有名です。

これらのツールは、JavaScriptモジュールをバンドル（まとめる）することで、ブラウザで実行可能な形式に変換します。

例えば、Webpackの場合、以下のような流れでビルドが行われます。

エントリーポイント（最初に読み込まれるJavaScriptファイル）を特定
依存関係を解析
モジュールをバンドル（まとめる）
最終的な出力ファイルを生成

この方法は確かに効果的ですが、プロジェクトが大きくなるにつれて時間がかかるようになります。

従来のビルドツールとの違い

Viteが従来のビルドツールと大きく異なるのは、開発時にバンドルを行わない点です。

代わりに、ブラウザのネイティブES Moduleを利用します。

ES Moduleとは、JavaScriptの公式の機能で、ファイルを分割して管理できる仕組みのことです。

Viteは、開発サーバーの起動時にプロジェクト全体をバンドルする代わりに、ブラウザからリクエストがあった時に必要なモジュールだけを変換して返します。

これにより、プロジェクトの規模に関係なく、常に高速な開発環境を維持できるのです。

Viteの特徴

高速な開発サーバー

Viteの開発サーバーは、従来のビルドツールと比べて圧倒的に速いです。

なぜそんなに速いのでしょうか？

それは、Viteが「必要なものだけを、必要な時に処理する」アプローチを取っているからです。

従来のツールでは、サーバーを起動する際にすべてのファイルをバンドルしていました。

一方、Viteは必要なモジュールだけをその場で変換します。

例えば、Reactで App.js というファイルを編集したとします。

import React from 'react';

function App() {
  return <h1>Hello, Vite!</h1>;
}

export default App;

このファイルをブラウザが要求したとき、Viteはこのファイルだけを変換してブラウザに送信します。

他のファイルは、要求されるまで処理されません。

これにより、大規模なプロジェクトでも、サーバーの起動が数秒で完了するのです。

最適化されたビルド

本番環境用のビルドでは、ViteはRollupを使用して最適化されたバンドルを生成します。

Rollupは、ESモジュールをサポートしていない古いブラウザ向けに、効率的なコードを生成することができます。

例えば、以下のようなコードがあるとします。

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add } from './math.js';

console.log(add(5, 3));

Viteは、本番ビルド時にこのコードを以下のように最適化します。

function add(a, b) {
  return a + b;
}

console.log(add(5, 3));

使用されていないsubtract関数は削除され、モジュールのインポート/エクスポートも解決されています。

これにより、ブラウザがダウンロードするファイルサイズが小さくなり、Webサイトのパフォーマンスが向上します。

プラグインシステム

Viteは、豊富なプラグインシステムを備えています。

これにより、様々な機能を簡単に追加することができます。

例えば、Sassを使用したい場合は、以下のようにプラグインをインストールし、設定するだけです。

npm install -D sass

そして、vite.config.jsファイルに以下のように記述します。

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  }
})

これだけで、Sassのサポートが追加され、すべての.scssファイルで$injectedColor変数が使えるようになります。

TypeScriptサポート

Viteは、TypeScriptのサポートも充実しています。

特別な設定なしで、TypeScriptファイルを直接使用することができます。

例えば、以下のようなTypeScriptファイルがあるとします。

// greet.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

// main.ts
import { greet } from './greet';

console.log(greet('Vite'));

Viteは、開発サーバー起動時にこれらのファイルを自動的にJavaScriptに変換します。

型チェックは別のプロセスで行われるため、開発サーバーの速度が落ちることはありません。

モジュールのプリセット

Viteには、よく使用されるフレームワークやライブラリ用のプリセットが用意されています。

例えば、Reactプロジェクトを始める場合、以下のコマンドを実行するだけでプロジェクトのセットアップが完了します。

npm create vite@latest vite-project -- --template react

このコマンドを実行すると、React用の基本的な設定が施されたプロジェクトが作成されます。

他にも、Vue、Svelte、Vanilla JS、TypeScriptなど、様々なプリセットが用意されています。

Viteのメリット

開発効率の向上

Viteを使用することで、開発効率が大幅に向上します。

特に、高速な開発サーバーとHMR（Hot Module Replacement）の恩恵は大きいです。

例えば、以下のようなReactコンポーネントがあるとします。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

このコンポーネントを編集して保存すると、Viteは瞬時に変更を反映します。

ページ全体をリロードする必要がないため、カウンターの現在の状態を保ったまま、UIの変更を確認できます。

これにより、小さな変更を素早く繰り返し行うことができ、開発のスピードが格段に上がります。

ビルド時間の短縮

Viteは、本番環境用のビルドも高速です。

これは、Rollupを使用して効率的なコード分割を行っているためです。

例えば、以下のようなimport文があるとします。

import('./large-module.js').then(module => {
  // large-moduleの処理
});

Viteは、このlarge-module.jsを別のチャンクとして分割し、必要なときだけロードするようにします。

これにより、初期ロード時間が短縮され、ユーザーエクスペリエンスが向上します。

設定の簡素化

Viteは、多くの一般的なユースケースに対してデフォルトの設定を提供しています。

これにより、複雑な設定ファイルを書く必要性が大幅に減ります。

例えば、静的アセット（画像やフォントなど）の処理は、特別な設定なしで自動的に行われます。

<img src="./img/logo.png" alt="Logo" />

このようなコードがあれば、Viteは自動的に画像を処理し、最適化されたパスを生成します。

もし追加の設定が必要な場合でも、vite.config.jsファイルで簡単に行うことができます。

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        }
      }
    }
  }
})

この設定により、すべてのnode_modulesからのコードがvendorチャンクにまとめられ、キャッシュ効率が向上します。

モダンな開発体験

Viteは、最新のWeb標準に基づいて設計されています。

これにより、モダンな開発体験を提供し、将来的な拡張性も確保しています。

例えば、CSS Modulesのサポートが標準で組み込まれています。

/* styles.module.css */
.button {
  background-color: blue;
  color: white;
}

import styles from './styles.module.css'

function Button() {
  return <button className={styles.button}>Click me</button>
}

このように、CSSをJavaScriptにインポートして使用することができます。

Viteは自動的にクラス名をユニークなものに変換し、スタイルの衝突を防ぎます。

Viteの使い方

プロジェクトの作成

Viteでプロジェクトを作成するのは、とても簡単です。

以下のコマンドを実行するだけで、新しいプロジェクトを作成できます。

npm create vite@latest my-vite-project -- --template vanilla

このコマンドを実行すると、いくつかの質問が表示されます。

プロジェクト名や使用するフレームワーク（VanillaJS、React、Vue.jsなど）を選択できます。

開発サーバーの起動

プロジェクトを作成したら、以下のコマンドで開発サーバーを起動できます。

cd my-vite-project
npm install
npm run dev

これで、高速な開発サーバーが立ち上がります。

通常、http://localhost:3000でアクセスできます。

プロダクションビルド

開発が完了し、本番環境用のビルドを行う際は、以下のコマンドを実行します。

npm run build

このコマンドを実行すると、最適化された静的ファイルがdistディレクトリに生成されます。

例えば、以下のようなファイル構造が生成されるかもしれません。

dist/
├── assets/
│   ├── index-1234abcd.js
│   └── vendor-5678efgh.js
└── index.html

これらのファイルは、静的ホスティングサービスにデプロイすることができます。

静的アセットの扱い

Viteは、静的アセット（画像、フォント、その他のファイル）の処理も簡単に行えます。

例えば、以下のようにして画像を読み込むことができます。

import imgUrl from './img/logo.png'
document.getElementById('logo').src = imgUrl

Viteは、ビルド時にこの画像を適切に処理し、最適化されたURLを生成します。

大きなファイルの場合は、自動的に別ファイルとして扱われ、小さなファイルの場合はbase64エンコードされてインライン化されます。

ViteでReactプロジェクトを作成する

では、実際にViteを使ってReactプロジェクトを作成してみましょう。

インストールしている Node.js のバージョンが 18、または 20 以上であれば使用できるはずです。

※コマンド実行時に Warning が表示される場合は、Node.js のバージョンをアップデートしてください。

Viteプロジェクトの作成

ViteでReactプロジェクトを作成するのは非常に簡単です。

以下のコマンドを実行するだけで、Reactプロジェクトのテンプレートが作成されます。

npm create vite@latest

このコマンドを実行すると、以下のように対話形式でいくつかの質問が表示されます。

こちらの例では、プロジェクト名を vite-project として、ReactとTypeScriptを選択しています。

$ npm create vite
Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) y


> npx
> create-vite

✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/masuyama/Desktop/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

Reactのインストール

プロジェクトが作成されたら、必要なパッケージをインストールします。

以下のコマンドを実行してください。

cd vite-project
npm install

このコマンドで、package.jsonに記載されている全ての依存パッケージ（ReactやViteを含む）がインストールされます。

ViteでReactを動かしてみる

パッケージのインストールが完了したら、以下のコマンドで開発サーバーを起動できます。

npm run dev

このコマンドを実行すると、ローカルサーバーが起動し、通常はhttp://localhost:3000でアクセスできます。

ブラウザでこのURLを開くと、Reactアプリケーションが表示されるはずです。

例えば、src/App.jsxファイルを以下のように編集してみましょう。

import React, { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Vite + React</h1>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </div>
  )
}

export default App

このコードを保存すると、Viteの高速なHMR（Hot Module Replacement）機能により、ブラウザ上で即座に変更が反映されます。

カウンターをクリックしてみてください。状態が保持されたまま、UIが更新されているはずです。