Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
ビルドツール▸ビルドツール基礎

Vite: 開発サーバと本番ビルド(dev / build)

hands-on所要 25分最新草稿
前提: ビルド: なぜ必要(トランスパイル・バンドル・最小化)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
Vite=準備室と出荷梱包

開発中はすぐ試せる準備室(dev/HMR)、出荷時はきっちり梱包(build→dist)。Viteは両方を高速にこなす作業場。

概要

📍 ビルドツール ▸ ビルドツール基礎 ▸ Vite | 種別: hands-on | facts_as_of 2026-06(Vite 8.0)

公式ドキュメント — hands-on

🎞 スライド

Vite=高速フロントエンドツール

開発サーバ(HMR)と本番ビルドを提供

3つのコマンド(テキスト図)

npm run dev ──▶ 開発サーバ(即起動・HMRで即反映)
npm run build ──▶ 最適化して dist/ に出力
npm run preview ──▶ ビルド結果を本番相当で確認

Vite 8.0

バンドラは Rolldown(Rust)で高速。設定は vite.config.ts

—
出典(sources)

vite.dev ; 2026-06確認

確認問題(Review-Questions)
Vite 8.0が採用したバンドラは?択一
基礎公式
解答・解説▾ 開く

Rolldown(Rust製)。

Viteで開発サーバと本番ビルドのコマンドは?コード
基礎公式
解答・解説▾ 開く

npm run dev(開発)/ npm run build(本番→dist)。

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2026-12-15
周期: 12か月
版: Vite 8.0 (Rolldown)

概要

Vite は高速なフロントエンドツール。開発サーバ(HMR)と本番ビルドを提供。Vite 8.0 は Rolldown(Rust)バンドラで高速。

公式ドキュメント準拠(Vite 8.0)

npm create vite@latest my-app   # 雛形生成
cd my-app && npm install
npm run dev       # 開発サーバ(約即起動・HMR)
npm run build     # 本番ビルド → dist/
npm run preview   # ビルド結果を確認
  • dev=開発(即時反映)、build=最適化して dist/ に出力、preview=本番相当を確認。設定は vite.config.ts。

出典: Vite

🧭 誤解訂正集

よくある誤解 正しい理解
preview も開発用 preview はビルド結果の確認用(本番相当)
環境変数はそのまま読める クライアント公開は VITE_ 接頭辞+import.meta.env

📖 用語

  • Vite … 高速なフロントエンド開発/ビルドツール。
  • 開発サーバ / HMR … 変更を即時反映する開発用サーバ(Hot Module Replacement)。
  • build / dist … 本番向けに最適化した出力(dist/)。
  • preview … ビルド結果を本番相当で確認するコマンド。
  • Rolldown … Vite 8.0 が採用する Rust 製バンドラ。
  • vite.config.ts … Vite の設定ファイル。

✅ 確認の目安(can-do)

dev/build/preview の役割を区別し、**「今は開発か・本番確認か・どのコマンドを使うか」**を判断できる。

⚠️ エラー復旧集

症状 原因 復旧
本番で画面が白 パス/base設定 vite.config の base を確認
環境変数が読めない 接頭辞 VITE_ 接頭辞+import.meta.env