【初心者必見】3分でできるViteの始め方！爆速開発環境を最短ステップで完全構築【2025年最新版】

Viteとは？初心者向けに概要と魅力を解説

フロントエンド開発の世界は日々進化を続けており、より高速で効率的な開発ツールが次々と登場しています。その中でも特に注目を集めているのがViteです。Vue.jsの生みの親であるEvan You氏によって開発されたViteは、現代のウェブ開発における課題を解決し、開発者体験を大幅に向上させるツールとして急速に人気を高めています。

この記事では、フロントエンド開発初心者の方でも理解できるよう、Viteの基本概念から実践的な使い方まで詳しく解説していきます。すでに他のビルドツールを使っている方も、Viteがもたらす圧倒的な高速性に驚かれることでしょう。

Viteの正しい読み方と名前の由来

まずViteは「ヴィート」と発音します。フランス語で「速い」「素早い」を意味する”vite”から名付けられており、その名の通り「高速な開発体験」を提供することを目的としています。

Viteは開発時にはネイティブES Modulesを活用してバンドル処理を行わず高速に動作し、本番環境ではRollupを使って最適化されたバンドルを生成するというアプローチをとっています。

ViteとWebpackの違い｜高速化の理由とは？

WebpackとViteの違いはアプローチです。

Webpackのアプローチ

Webpackなどの従来のバンドラーは、アプリケーション全体をバンドルしてから開発サーバーを起動します。この方法には次のような特徴があります：

例えば、数千のモジュールを持つ大規模アプリケーションでは、Webpackの初期起動に1分以上かかることも珍しくありません。これは開発者の生産性を著しく低下させる要因となっています。

Viteのアプローチ

対照的に、Viteは次のようなアプローチを採用しています：

このアプローチにより、Viteは従来のツールと比較して驚異的な高速性を実現しています。2022年に行われたベンチマークテストでは、1000のコンポーネントを持つアプリケーションの初期起動時間が、Webpackでは約30秒かかるのに対し、Viteではわずか1.5秒で完了したというデータもあります。

以下に、簡単な比較表を示します：

機能/特徴	Webpack	Vite
初期起動速度	遅い（全体をバンドル）	非常に速い（バンドルなし）
HMR速度	モジュール数に比例	モジュール数に依存しない
設定の複雑さ	比較的複雑	シンプル
エコシステム	非常に成熟	急速に成長中
対応フレームワーク	ほぼすべて	React, Vue, Svelte, Lit他

Viteのメリット・デメリット

Viteのメリット

1. 驚異的な開発サーバー起動速度

Viteの最大の魅力は何といってもその爆速の開発体験です。従来のバンドラーでは数十秒かかっていた開発サーバーの起動が、Viteではほぼ一瞬で完了します。Google Chromeチームの調査によると、待ち時間が長くなるほど開発者の集中力は低下し、生産性も下がるとされています。Viteはこの問題を根本から解決します。

2. 高速なHMR（Hot Module Replacement）

コードを変更した際、その変更を即座に反映する機能（HMR）もViteの強みです。従来のツールではアプリケーション全体または大きな範囲の再バンドルが必要でしたが、Viteでは変更したモジュールとその依存関係のみを更新します。これにより、アプリケーションの規模に関わらず、常に高速な更新が可能です。

3. 優れた開発者体験（DX）

Viteは「設定より規約」の思想に基づき、最小限の設定でスタートできます。また、TypeScript、JSX、CSSプリプロセッサなどに対する組み込みサポートが充実しており、追加プラグインなしですぐに使い始められる点も魅力です。

// vite.config.js の基本例 - シンプルな設定でスタート可能
export default {
  // プロジェクトのルートディレクトリ
  root: '.',
  // 開発サーバーの設定
  server: {
    port: 3000,
    open: true, // 起動時にブラウザを開く
  },
  // ビルド設定
  build: {
    outDir: 'dist',
  },
}

4. 最新のブラウザ機能を活用

ViteはES Modules（ESM）や動的インポートなど、最新のJavaScript機能を積極的に活用しています。これにより、より近代的で効率的な開発が可能になります。

5. 優れたプラグインエコシステム

ViteはRollupプラグイン互換性を持っているため、既存の豊富なRollupプラグインエコシステムを活用できます。また、Vite専用のプラグインも日々増えており、機能拡張が容易です。

Viteのデメリット

1. レガシーブラウザのサポート制限

Viteは最新のブラウザ機能を前提としているため、古いブラウザ（特にIE11など）へのサポートは追加の設定が必要です。@vitejs/plugin-legacyを使用することで対応可能ですが、完全なサポートには限界があります。

// IE11などのレガシーブラウザ対応の設定例
import legacy from '@vitejs/plugin-legacy';

export default {
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
}

2. 比較的新しいツールであること

2023年時点でViteはバージョン4.xに到達しており、安定性は大幅に向上していますが、Webpackなどの長年使われてきたツールと比較すると、エコシステムの成熟度やコミュニティでの解決事例はまだ発展途上の部分があります。

3. 本番ビルドの最適化

開発環境では圧倒的な速さを誇るViteですが、本番環境のビルドではRollupを使用するため、非常に大規模なプロジェクトでは他の特化型ビルドツールと比較して最適化の余地が残る場合があります。ただし、ほとんどのプロジェクトでは十分な性能が得られます。

Viteは従来のバンドラーが抱えていた多くの問題を解決し、フロントエンド開発に新しい風を吹き込んでいます。特に開発環境での圧倒的なパフォーマンスは、一度体験すると他のツールに戻りたくなくなるほどです。

次のセクションでは、実際にViteを使ってプロジェクトを始める方法について、具体的な手順を解説していきます。

Viteの始め方ステップガイド【React・Vue対応】

この章では、Viteを使ったプロジェクトの始め方を、初心者の方でも迷わないよう、段階的に詳しく解説していきます。

Viteは公式にReact、Vue、Preact、Lit、Svelteなどの主要なフロントエンドフレームワークをサポートしており、どのフレームワークを選んでも高速な開発体験を得ることができます。それでは早速、Viteをインストールして新しいプロジェクトを作成していきましょう。

npm create vite@latest とは？コマンドの意味と使い方

Viteプロジェクトを始める最も一般的な方法は、npm create vite@latestコマンドを使うことです。このコマンドは一体何をしているのでしょうか？

create コマンドの仕組み

npm create（またはnpm init）は、Node.jsのパッケージマネージャーであるnpmの機能で、新しいプロジェクトのスキャフォールディング（足場作り）を行うためのショートカットコマンドです。

具体的には、npm create vite@latestは以下の処理を行います：

このコマンドの優れた点は、Viteをグローバルにインストールする必要がないことです。プロジェクトごとに最新のViteを使用できるため、常に最新機能や改善点を活用できます。

基本的な使い方

最もシンプルな使い方は以下の通りです：

# npm を使う場合
npm create vite@latest

# yarn を使う場合
yarn create vite

# pnpm を使う場合
pnpm create vite

このコマンドを実行すると、以下のような対話式のプロンプトが表示されます：

より直接的に指定したい場合は、コマンドラインで直接オプションを指定することも可能です：

# プロジェクト名、フレームワーク、バリアントを直接指定する例
npm create vite@latest my-react-app -- --template react-ts

この例では、my-react-appという名前のプロジェクトを、TypeScript対応のReactテンプレートで作成します。

GitHub上のスターの数を見ると、2023年10月時点でViteは60,000以上のスターを獲得しており、フロントエンドの開発ツールとして非常に高い支持を得ていることがわかります。

Viteのインストール手順（npm / yarn）を詳しく解説

Viteを使い始めるための完全なステップバイステップガイドを紹介します。Node.jsをまだインストールしていない方は、まずNode.jsの公式サイト（https://nodejs.org/）から最新のLTS版をダウンロードしてインストールしてください。

前提条件

Node.jsのバージョンは以下のコマンドで確認できます：

node -v

npm を使ったインストール手順

新しいプロジェクトディレクトリを作成する場所に移動

# 例: デスクトップに移動
cd ~/Desktop

Viteプロジェクトの作成コマンドを実行

npm create vite@latest my-vite-project

プロジェクト設定の選択

プロンプトに従って、使用したいフレームワークとバリアントを選択します。例えば：

✔ Select a framework: › React
✔ Select a variant: › TypeScript

プロジェクトディレクトリに移動

cd my-vite-project

依存関係のインストール

npm install

開発サーバーの起動

npm run dev

これで、通常はhttp://localhost:5173/（または別のポートが表示されます）でアプリケーションが起動します。

yarn を使ったインストール手順

yarnを使う場合も基本的な流れは同じですが、コマンドが若干異なります：

Viteプロジェクトの作成

yarn create vite

プロジェクト名の入力とフレームワークの選択（対話式）

プロジェクトディレクトリに移動

cd my-vite-project

依存関係のインストール

yarn

開発サーバーの起動

yarn dev

pnpm を使ったインストール手順

最近人気が高まっている高速パッケージマネージャーpnpmでも同様に：

Viteプロジェクトの作成

pnpm create vite

以降の手順はyarnと同様で、コマンドはpnpm installとpnpm devになります。

プロジェクト作成から開発サーバー起動までの所要時間は、ネット環境にもよりますが通常30秒〜1分程度です。これは従来のツールと比較して非常に高速であり、Viteの大きな魅力の一つです。

React・Vue・Svelte別のプロジェクト作成手順

Viteはさまざまなフレームワークとの統合が簡単です。ここでは、人気の高い3つのフレームワーク（React、Vue、Svelte）でのプロジェクト作成方法を詳しく見ていきましょう。それぞれのフレームワークで特有の設定や機能がありますので、目的に合わせて選択してください。

Reactプロジェクトの作成と特徴

ReactはFacebookが開発したUIライブラリで、コンポーネントベースの設計が特徴です。Viteを使ったReactプロジェクトは、Create React App（CRA）と比較して圧倒的に高速に動作します。

セットアップ手順

# プロジェクト作成
npm create vite@latest my-react-app -- --template react

# または TypeScript 版
npm create vite@latest my-react-app -- --template react-ts

# ディレクトリ移動
cd my-react-app

# 依存関係インストール
npm install

# 開発サーバー起動
npm run dev

生成されるディレクトリ構造

my-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.jsx  (または App.tsx)
│   ├── assets/
│   ├── index.css
│   └── main.jsx (または main.tsx)
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

React向けの追加機能

Viteでは、React用の高速リフレッシュ（Fast Refresh）が標準で組み込まれています。これにより、コンポーネントの状態を失うことなく、編集内容が即座に反映されます。

また、.jsxおよび.tsxファイルも自動的にサポートされており、特別な設定なしで使用できます。

// App.jsx の例
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <>
      <div>
        <a href="<https://vitejs.dev>" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="<https://react.dev>" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Vueプロジェクトの作成と特徴

VueはEvan You氏（Viteの作者でもある）が開発したプログレッシブフレームワークです。Vueの最新バージョンであるVue 3はViteとの相性が特に良いです。

セットアップ手順

# プロジェクト作成
npm create vite@latest my-vue-app -- --template vue

# または TypeScript 版
npm create vite@latest my-vue-app -- --template vue-ts

# ディレクトリ移動
cd my-vue-app

# 依存関係インストール
npm install

# 開発サーバー起動
npm run dev

生成されるディレクトリ構造

my-vue-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   └── main.js  (または main.ts)
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

Vue向けの追加機能

Viteは、Vue Single File Components（SFC、.vueファイル）に対する組み込みサポートを提供しています。これには、以下の機能が含まれます：

<!-- App.vue の例 -->
<script setup>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

const count = ref(0)
</script>

<template>
  <div>
    <a href="<https://vitejs.dev>" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="<https://vuejs.org/>" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

Svelteプロジェクトの作成と特徴

Svelteは、仮想DOMを使用せず、ビルド時にコンパイルすることで高性能なアプリケーションを実現するフレームワークです。ViteとSvelteの組み合わせは特に効率的です。

セットアップ手順

# プロジェクト作成
npm create vite@latest my-svelte-app -- --template svelte

# または TypeScript 版
npm create vite@latest my-svelte-app -- --template svelte-ts

# ディレクトリ移動
cd my-svelte-app

# 依存関係インストール
npm install

# 開発サーバー起動
npm run dev

生成されるディレクトリ構造

my-svelte-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.svelte
│   ├── assets/
│   ├── lib/
│   │   └── Counter.svelte
│   └── main.js  (または main.ts)
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

Svelte向けの追加機能

Viteは、Svelteコンポーネント（.svelteファイル）のHMRを自動的にサポートしています。また、TypeScriptを使ったSvelteコンポーネント開発も簡単に行えます。

<!-- App.svelte の例 -->
<script>
  import Counter from './lib/Counter.svelte'
  import viteLogo from '/vite.svg'
  import svelteLogo from './assets/svelte.svg'
</script>

<main>
  <div>
    <a href="<https://vitejs.dev>" target="_blank">
      <img src={viteLogo} class="logo" alt="Vite Logo" />
    </a>
    <a href="<https://svelte.dev>" target="_blank">
      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1>Vite + Svelte</h1>

  <div class="card">
    <Counter />
  </div>

  <p>
    Check out <a href="<https://github.com/sveltejs/kit#readme>" target="_blank">SvelteKit</a>, the official Svelte app framework powered by Vite!
  </p>
</main>

<style>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.svelte:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }
</style>

フレームワーク選択のヒント

Viteを使えば、どのフレームワークを選んでも素晴らしい開発体験を得ることができます。実際に手を動かしてみて、あなたのワークフローに最適なものを見つけてください。次のセクションでは、Viteプロジェクトの基本的なワークフローについて解説していきます。

開発から本番公開まで｜Viteの基本ワークフロー

前章では、Viteプロジェクトの始め方とさまざまなフレームワークでの設定方法を学びました。この章では、実際の開発から本番環境へのデプロイまでの基本的なワークフローを詳しく解説します。Viteを使った開発プロセスを理解することで、フロントエンド開発の効率を最大限に高めることができるでしょう。

ローカル開発環境の起動方法と初期ディレクトリ構成

Viteプロジェクトを作成したら、まずはローカル開発環境を起動して開発を始めましょう。開発環境の起動方法と、プロジェクトの基本的なディレクトリ構造について詳しく見ていきます。

開発サーバーの起動

Viteの開発サーバーを起動するには、プロジェクトのルートディレクトリで以下のコマンドを実行します：

# npm を使用する場合
npm run dev

# yarn を使用する場合
yarn dev

# pnpm を使用する場合
pnpm dev

このコマンドを実行すると、通常は以下のような出力が表示されます：

  VITE v4.x.x  ready in 150 ms

  ➜  Local:   <http://localhost:5173/>
  ➜  Network: use --host to expose
  ➜  press h to show help

ブラウザでhttp://localhost:5173/（または表示されたURLのポート）にアクセスすると、アプリケーションが表示されます。

開発サーバーの主な特徴

Viteの開発サーバーには、以下のような優れた特徴があります：

開発サーバーのカスタマイズ

開発サーバーの設定は、vite.config.jsファイルで簡単にカスタマイズできます：

// vite.config.js
export default {
  server: {
    port: 3000, // ポート番号の変更
    open: true, // 起動時にブラウザを自動的に開く
    cors: true, // Cross-Origin Resource Sharing を有効化
    proxy: {
      // APIリクエストのプロキシ設定
      '/api': {
        target: '<http://localhost:8080>',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\\/api/, '')
      }
    }
  }
}

基本的なディレクトリ構成

Viteプロジェクトの標準的なディレクトリ構成は以下のようになっています：

my-vite-project/
├── node_modules/    # 依存パッケージ
├── public/          # 静的アセット（コピーされるだけのファイル）
│   └── favicon.ico
├── src/             # ソースコード
│   ├── assets/      # コンパイル対象の画像やフォントなど
│   ├── components/  # 再利用可能なコンポーネント
│   ├── App.vue      # アプリケーションのルートコンポーネント（Vue の場合）
│   └── main.js      # エントリーポイント
├── index.html       # HTMLエントリーポイント
├── package.json     # プロジェクト設定と依存関係
└── vite.config.js   # Vite設定ファイル

このディレクトリ構造の特徴的な点は、従来のWebpackベースのプロジェクトと異なり、HTMLファイル（index.html）がプロジェクトのルートにあることです。これは、HTMLがViteプロジェクトの実際のエントリーポイントであることを反映しています。

index.html の重要性

Viteプロジェクトでは、index.htmlがビルドプロセスの中心的な役割を果たします：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

注目すべき点は、<script type="module" src="/src/main.js"></script>の部分です。ViteはネイティブESモジュールを活用しており、ブラウザがES Modules構文を直接解釈できるようになっています。

src/main.js の内容

一般的なエントリーポイントファイル（例：React）：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

vite.config.js の基本とカスタマイズ例

vite.config.jsは、Viteプロジェクトの動作をカスタマイズするための中心的な設定ファイルです。この設定ファイルでは、プラグインの追加、ビルドのカスタマイズ、開発サーバーの設定など、様々な側面を制御できます。

基本的な設定ファイル

最もシンプルなvite.config.jsは次のようになります：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
})

defineConfig関数を使用することで、設定オブジェクトに対するTypeScriptの型サポートが提供されます。これにより、IDEでの入力補完が可能になり、設定エラーを防ぐことができます。

よく使用される設定オプション

以下に、vite.config.jsでよく使用される設定オプションをいくつか紹介します：

1. ベースパスの設定

GitHubページなどのサブディレクトリにデプロイする場合、ベースパスを設定する必要があります：

export default defineConfig({
  base: '/my-app/',  // デプロイ先のベースパス
})

2. ビルド設定のカスタマイズ

出力ディレクトリやチャンクサイズの制御など、ビルドプロセスをカスタマイズできます：

export default defineConfig({
  build: {
    outDir: 'dist',             // 出力ディレクトリ
    assetsDir: 'assets',        // 静的アセットディレクトリ
    sourcemap: true,            // ソースマップ生成
    minify: 'terser',           // ミニファイ方法
    chunkSizeWarningLimit: 500, // チャンクサイズ警告のしきい値（KB）
    rollupOptions: {
      // Rollupの設定をカスタマイズ
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
})

3. 解決（リゾルブ）のカスタマイズ

インポートパスのエイリアス設定などが可能です：

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
    },
  },
})

これにより、以下のようなインポートが可能になります：

// 'src/components/Button.jsx' を '@components/Button' としてインポート
import Button from '@components/Button'

4. 環境変数とモード

Viteは、異なる環境（開発・本番など）に対して異なる環境変数を提供するための仕組みを持っています：

export default defineConfig(({ command, mode }) => {
  // `command` は 'serve'（開発）または 'build'（本番）
  // `mode` はコマンドラインの --mode オプションで指定される値（デフォルトは 'development' または 'production'）

  const env = loadEnv(mode, process.cwd(), '')

  return {
    define: {
      'process.env.API_URL': JSON.stringify(env.API_URL),
    },
  }
})

環境変数は.envファイルで定義できます：

# .env.development
API_URL=http://localhost:3000/api

# .env.production
API_URL=https://api.example.com

プラグインの追加と設定

Viteの強力な機能の一つは、プラグインシステムです。以下に、一般的なプラグインの追加例を示します：

1. Vue用のプラグイン

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

export default defineConfig({
  plugins: [
    vue(),         // Vue SFCサポート
    vueJsx(),      // Vue JSXサポート
  ],
})

2. ReactとSWC（高速コンパイラ）の組み合わせ

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
})

3. レガシーブラウザ対応

IE11などの古いブラウザをサポートする必要がある場合：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
  ],
})

4. その他の一般的なプラグイン

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'          // PWAサポート
import ViteCompression from 'vite-plugin-compression' // gzip/brotli圧縮
import autoprefixer from 'autoprefixer'            // CSSベンダープレフィックス

export default defineConfig({
  plugins: [
    react(),
    VitePWA(),
    ViteCompression(),
  ],
  css: {
    postcss: {
      plugins: [
        autoprefixer(),
      ],
    },
  },
})

このように、Viteのプラグインエコシステムは豊富で、多くの一般的なユースケースに対応する既製のソリューションが提供されています。2023年のデータによると、npmに公開されているViteプラグインは1,000以上あり、さまざまな機能拡張が可能です。

本番環境へのデプロイ方法（Vercel・Netlify・GitHub Pages対応）

Viteでアプリケーションを開発したら、次は本番環境へのデプロイです。ここでは、人気のあるホスティングプラットフォームへのデプロイ方法を解説します。

ビルドコマンドの実行

デプロイの前に、まずはプロジェクトをビルドする必要があります：

# npm を使用する場合
npm run build

# yarn を使用する場合
yarn build

# pnpm を使用する場合
pnpm build

このコマンドを実行すると、デフォルトではdistディレクトリに最適化されたファイルが生成されます。出力は次のようになります：

vite v4.x.x building for production...
✓ 45 modules transformed.
dist/index.html                     0.49 KB
dist/assets/favicon.17e50649.svg    0.38 KB
dist/assets/index.c92073ef.css      1.33 KB
dist/assets/index.eeb06afd.js       140.38 KB

ビルドプロセスでは、以下のような最適化が行われます：

ローカルでのプレビュー

本番環境にデプロイする前に、ビルドされたアプリケーションをローカルでプレビューすることができます：

# npm を使用する場合
npm run preview

# yarn を使用する場合
yarn preview

# pnpm を使用する場合
pnpm preview

これにより、ビルドされたアプリケーションをローカルサーバーで確認できます。

Vercelへのデプロイ

Vercelは、フロントエンドプロジェクトに特化したホスティングプラットフォームで、Viteプロジェクトのデプロイが非常に簡単です。

手順：

1. Vercelアカウントを作成し、ログインします
2. GitHubやGitLabのリポジトリと連携するか、Vercel CLIを使用します
3. リポジトリを選択またはプロジェクトをインポートします
4. 以下の設定で構成します：
   • フレームワークプリセット: Vite
   • ビルドコマンド: npm run build（デフォルト）
   • 出力ディレクトリ: dist（デフォルト）
5. 「Deploy」をクリックします

Vercelは自動的にViteプロジェクトを検出し、適切な設定でデプロイします。また、GitHubリポジトリと連携している場合、プッシュするたびに自動的にデプロイが実行されます。

Netlifyへのデプロイ

Netlifyもまた、Viteプロジェクトのデプロイに優れたプラットフォームです。

手順：

1. Netlifyアカウントを作成し、ログインします
2. 「New site from Git」をクリックします
3. GitHubやGitLabのリポジトリと連携します
4. リポジトリを選択します
5. 以下の設定で構成します：
   • ビルドコマンド: npm run build
   • 公開ディレクトリ: dist
6. 「Deploy site」をクリックします

Netlifyでは、以下のnetlify.tomlファイルをプロジェクトのルートに追加することで、設定をさらに最適化できます：

[build]
  publish = "dist"
  command = "npm run build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

最後のリダイレクト設定は、シングルページアプリケーション（SPA）で不可欠で、クライアントサイドルーティングを使用している場合に必要です。

GitHub Pagesへのデプロイ

GitHub Pagesは、GitHubリポジトリから直接ウェブサイトをホストできる無料のサービスです。

手順：

vite.config.jsを更新して、リポジトリ名をベースパスとして設定します：

export default defineConfig({
  base: '/your-repository-name/',  // GitHub Pagesのベースパス
})

GitHub Actions用のワークフローファイルを作成します（.github/workflows/deploy.yml）：

name: Deploy to GitHub Pages

on:
  push:
    branches: ["main"]

  # 手動でのデプロイを許可
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: './dist'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

• GitHubリポジトリの設定から、Pages機能を有効にします：
  • リポジトリページ → Settings → Pages
  • Source を「GitHub Actions」に設定
• 変更をコミットしてプッシュすると、自動的にビルドとデプロイが行われます

静的ホスティングサービスへのデプロイ

Apache、Nginx、Firebase Hosting、AWS S3など、任意の静的ホスティングサービスにもデプロイできます。基本的な手順は以下の通りです：

1. npm run buildを実行してdistディレクトリを生成します
2. 生成されたdistディレクトリの内容を、ホスティングサービスにアップロードします

多くの場合、SPAルーティングのために、以下のような設定が必要です：

• Apache（.htaccessファイル）：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

• Nginx（nginx.conf）：

location / {
  try_files $uri $uri/ /index.html;
}

よくあるエラーと初心者がつまずくポイント集

Viteを使い始めたときに遭遇する可能性のある一般的な問題と、その解決策を紹介します。

1. “Cannot find module” エラー

問題：

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/path/to/your-project/node_modules/some-package'

解決策：

• node_modulesディレクトリを削除して、依存関係を再インストールします：

rm -rf node_modules
npm install

• パッケージがプロジェクトに正しくインストールされていることを確認します：

npm install some-package

2. ポートが既に使用されている

問題：

Port 5173 is already in use

解決策：

• 別のポートを指定して開発サーバーを実行します：

npm run dev -- --port=3000

• または、vite.config.jsで別のポートを設定します：

export default defineConfig({
  server: {
    port: 3000,
  },
})

3. HMRが正しく動作しない

問題：コードを変更しても、ブラウザが自動的に更新されない。

解決策：

• ブラウザのキャッシュをクリアします
• vite.config.jsでHMRを明示的に設定します：

export default defineConfig({
  server: {
    hmr: true,
  },
})

• ウイルス対策ソフトやファイアウォールが干渉していないか確認します

4. 環境変数が認識されない

問題：process.envまたはimport.meta.envで環境変数にアクセスできない。

解決策：

• Viteでは、環境変数はimport.meta.envを通じてアクセスします（process.envではありません）
• 環境変数はVITE_プレフィックスが必要です：

# .env
VITE_API_URL=https://api.example.com

• アクセス方法：

console.log(import.meta.env.VITE_API_URL)

5. ビルド後のパスの問題

問題：開発環境では正常に動作するが、ビルド後にリソースが見つからない。

解決策：

• ベースパスが正しく設定されているか確認します：

export default defineConfig({
  base: '/',  // デフォルト値
})

• アセットへの相対パスを使用します：

// 絶対パス（推奨）
import logo from '/src/assets/logo.png'

// または相対パス
import logo from '../assets/logo.png'

6. CSSモジュールの問題

問題：CSSモジュールのクラス名が適用されない。

解決策：

• ファイル名が.module.cssで終わっていることを確認します：

Button.module.css  // 正しい
Button.css        // CSSモジュールとして認識されない

• インポートと使用方法が正しいことを確認します：

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

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

7. TypeScriptのパスエイリアスが機能しない

問題：tsconfig.jsonで設定したパスエイリアスがViteで認識されない。

解決策：

• vite.config.jsでも同じエイリアスを設定する必要があります：

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

• TypeScriptとViteの両方で同じエイリアス設定を維持します

8. 画像やフォントなどの静的アセットの読み込み問題

問題：静的アセットが適切に読み込まれない。

解決策：

• 静的アセットへの参照方法を確認します：

// public ディレクトリ内のアセット
<img src="/logo.png" />  // public/logo.png を参照

// src ディレクトリ内のアセット（インポートが必要）
import logo from './assets/logo.png'
<img src={logo} />

• publicディレクトリ内のファイルは処理されずにそのままコピーされることを理解します

9. プロダクションビルドでのコード分割の問題

問題：ビルド後のファイルサイズが大きすぎる、またはチャンクが多すぎる。

解決策：

• vite.config.jsでRollupのチャンク設定をカスタマイズします：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          // 他のライブラリグループ
        },
      },
    },
  },
})

10. SVGファイルのインポート問題

問題：SVGファイルをコンポーネントとしてインポートできない。

解決策：

• SVGをReactコンポーネントとしてインポートするには、vite-plugin-svgrを使用します：

npm install vite-plugin-svgr

// vite.config.js
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [react(), svgr()],
})

// 使用例
import { ReactComponent as Logo } from './logo.svg'

function Header() {
  return <Logo width={50} height={50} />
}

---

以上のトラブルシューティングガイドが、Viteを使った開発過程で発生しうる問題の解決に役立つことを願っています。Viteはまだ比較的新しいツールですが、活発なコミュニティと充実したドキュメントにより、多くの情報やサポートを得ることができます。

公式ドキュメントは常に最新かつ詳細な情報を提供していますので、問題が発生した場合はVite公式ドキュメントを参照することをお勧めします。また、GitHub Issuesやコミュニティフォーラムも問題解決に役立つリソースです。

Viteを使った開発から本番環境へのデプロイまでのワークフローを理解することで、モダンで効率的なフロントエンド開発を実現できるでしょう。高速な開発体験と柔軟なカスタマイズ性は、あなたのプロジェクトにおいて大きな利点となるはずです。

Viteで始める最新フロントエンド開発 〜まとめ〜

今回はフロントエンド開発の新たな風「Vite」についてご紹介してきました。

Viteは「ヴィート」と読み、フランス語で「素早い」という意味を持っています。その名の通り、開発体験を劇的に向上させてくれるビルドツールです。従来のWebpackと比べて圧倒的な速さを実現し、多くの開発者から支持されています。

特に押さえておきたいポイントは以下の通りです：

Viteを使ってプロジェクトを開始するのは本当に簡単です。適切なコマンドでプロジェクトを作成し、開発サーバーを起動するだけで、すぐにコードを書き始められます。また、Vercel、Netlify、GitHub Pagesなど、人気のホスティングサービスへのデプロイも驚くほど簡単に行えます。

もちろん、新しいツールなので学習コストはありますが、公式ドキュメントが充実していることと、コミュニティの活発さで初心者でも挫折することなく学べるでしょう。

フロントエンド開発のスピードと効率性を追求されている方は、ぜひViteを試してみてください。一度その爽快感を味わうと、もう従来の開発環境には戻れなくなるかもしれません。

▼Webpackは本当に開発終了したのか？現状と後継候補（Vite・Turbopack）への移行手順まで全まとめ
https://watashi.xyz/webpack-end/