Frontend Academy · レッスン

Vite：開発サーバーとビルド

Vite プロジェクトを開始し、即時反映される HMR 開発サーバーを使い、build コマンドを実行して、本番用出力をプレビューします。

「Vite：開発サーバーとビルド」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Viteとは

Vite は、Vue の作者である Evan You が作成した次世代のフロントエンドビルドツールです。ネイティブ ESM と esbuild を使用した非常に高速な開発サーバーと、Rollup を基盤とした本番ビルドを提供します。

Viteプロジェクトの作成

npm create vite@latest は新しいプロジェクトのひな形を作成します。フレームワーク（Vanilla、React、Vue、Svelte、Preact、Lit）とバリアント（JS または TS）を選択します。設定は必要なく、すぐに使用できます。

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

開発サーバー — 即時起動

Vite は開発時にバンドルを作成しません。各ファイルをネイティブ ESM モジュールとして配信し、ブラウザーがそれらを直接インポートします。バンドルを作成しないため、プロジェクトの規模に関係なくコールドスタートは100ミリ秒未満です。HMR では変更されたファイルだけが再コンパイルされます。

HMR — ホットモジュール置換

Vite の HMR は、ページ全体を再読み込みせず、実行中のアプリで変更されたモジュールだけを置き換えます。@vitejs/plugin-react を使った React では、HMR 中もコンポーネントの状態が保持されます。変更は50ミリ秒未満で反映されます。

vite.config.js / vite.config.ts

Vite は vite.config.ts ファイルで設定します。よく使うオプションには、プラグイン、resolve のエイリアス、サーバーのポート、API 呼び出し用のプロキシ、ビルド出力ディレクトリがあります。

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

環境変数

Vite は、VITE_ で始まる環境変数を import.meta.env 経由で公開します。環境変数は .env、.env.development、.env.production に保存します。秘密情報には決して VITE_ を付けないでください。ブラウザー用のバンドルに含まれてしまいます。

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

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — 本番ビルド

npm run build は内部で Rollup を呼び出し、アプリをバンドル、圧縮、ツリーシェイキングします。出力は dist/ フォルダーに保存され、デプロイできる状態になります。

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

バンドルの分析

vite-bundle-visualizer または rollup-plugin-visualizer を使うと、バンドルの内容をツリーマップとして生成できます。サイズの大きい依存関係や、遅延読み込みに適した箇所を見つけるのに役立ちます。

npm run preview

npm run preview は、本番用の dist/ ビルドをローカルで配信します。アプリが開発モードでない場合にのみ発生する問題を見つけられるため、デプロイ前の本番ビルドの確認に使用してください。

Viteでのコード分割

動的な import() 文は、自動的に別々のチャンクを作成します。React Router の遅延ルートや Vue の defineAsyncComponent でも分割が行われます。チャンクのサイズはビルド出力で確認してください。

ライブラリ向けのVite

Vite のライブラリモード（build.lib）は npm ライブラリをビルドし、ESM と CJS の両方の形式で出力します。React のような peer dependencies がバンドルされないように、外部依存関係のリストを指定してください。

確認問題

Vite の開発サーバーが webpack より高速なのはなぜですか？

まとめ：Vite

npm create vite@latest はプロジェクトのひな形を即座に作成します。開発サーバーはネイティブ ESM を使用するため、バンドルなしで HMR も即座に実行されます。プラグイン、エイリアス、プロキシは vite.config.ts で設定します。ブラウザーで安全に使える環境変数には VITE_ プレフィックスを付けます。npm run build は最適化された Rollup バンドルを生成します。npm run preview は本番ビルドをローカルでテストします。

よくある質問

「Vite：開発サーバーとビルド」レッスンは無料ですか？

はい。「Vite：開発サーバーとビルド」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Vite：開発サーバーとビルド」で何を学びますか？

Vite プロジェクトを開始し、即時反映される HMR 開発サーバーを使い、build コマンドを実行して、本番用出力をプレビューします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Vite：開発サーバーとビルド」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る