Vite（ヴィート）
Vue.jsの作者が開発した次世代フロントエンドビルドツール。ネイティブESモジュールを活用した超高速な開発サーバー起動とHMR（ホットモジュールリプレース）を実現する。
Viteとは？
Vite（ヴィート、フランス語で「速い」の意）は、Vue.jsの作者Evan You氏が開発したモダンなフロントエンドビルドツールです。開発時はネイティブESモジュール（ESM）を活用してバンドルを省略し、変更ファイルのみを即時更新するHMRで高速な開発体験を提供します。
Webpackとの比較
| 項目 | Webpack | Vite |
|---|---|---|
| 開発サーバー起動 | 全ファイルをバンドル（遅い） | ESMで即時起動（速い） |
| HMR速度 | ファイル数増加で遅くなる | 常に高速 |
| ビルド（本番） | Webpack | Rollup |
| 設定 | 複雑 | シンプル |
対応フレームワーク
- React（
@vitejs/plugin-react） - Vue（
@vitejs/plugin-vue） - Svelte（
@sveltejs/vite-plugin-svelte） - Vanilla JS / TypeScript
基本的な使い方
# プロジェクト作成
npm create vite@latest my-app -- --template react-ts
# 開発サーバー起動
npm run dev
# 本番ビルド
npm run buildまとめ
ViteはCreate React AppやVue CLIの後継として急速に普及しています。新規フロントエンドプロジェクトでは、特別な理由がない限りViteを選択することを推奨します。
関連する用語 (プログラミング)
全33件を見るIT用語: リファクタリングとは｜外から見た動作を変えずに内部を改善する
コードの外部動作を保ちながら内部構造を整理するリファクタリングの目的・手法・タイミングを解説。
Go / Golang (ゴー言語)
Google社が開発した、処理速度が超絶爆速で、大量のアクセスに強い現代的なプログラミング言語。
GraphQL
FacebookがRESTの課題を解決するために開発したAPIクエリ言語。クライアントが必要なデータの形を宣言的に指定して取得でき、オーバーフェッチ・アンダーフェッチを解消する。
Prettier（コードフォーマッター）
コードを自動的に整形するオピニオネイテッドなフォーマッター。JavaScript・TypeScript・CSS・HTML・JSON・Markdownに対応し、チームのコードスタイル論争を終わらせる。
SSR（サーバーサイドレンダリング）
Webページをサーバー側でHTMLとして生成してからクライアントに送信する手法。SPAのSEO問題を解決し、初期表示を高速化できる。Next.js・Nuxt.jsで実装されることが多い。
IT用語: async/awaitとは｜非同期処理をわかりやすく書く構文
Promiseベースの非同期処理をまるで同期処理のように書けるasync/awaitの仕組みとエラーハンドリングを解説。