JavaScript モジュールバンドラの Vite についてまとめる。
Vite とは？
まず バンドル とは、複数のファイルを１つのファイルにまとめて出力することです。
ブラウザで実行される JavaScript は通常、複数の .js ファイルを 1 つのファイルにまとめて minify されています。
これを実現するツールを モジュールバンドラ と呼びます。
既存のモジュールバンドラには Webpack などが挙げられますが、 Vite には以下の特徴があります。
- 高速ビルド
- ブラウザの Native ES Modulesを使用して、より高速なビルドを実現
- 高速ホットリロード
- HMR(Hot Module Replacement)のメカニズムをNative ES Modules上で実行して実現
ちなみに Vite（ヴィート）と発音するようです。
フロントエンド界隈でデファクトとなっている React の初期プロジェクトを作成する「create-react-app」は 2023 年春頃からメンテナンスが止まっています。
Vite には「create-react-app」の代替となる機能を有しており、その事もあって「Vite + React」の組み合わせが人気となっています。
私見ですが、 Vite は React 以外にも他のフロントエンド開発にも対応していますので、本記事執筆時点では、JavaScript/TypeScript プロジェクトを作成する場合、使いたいフレームワーク・ライブラリのテンプレート（後述）があれば、とりあえず Vite を使えばいいのではないかと思います。（ Next.js は Vite と競合しますので例外とします。）
使い方
プロジェクト作成
Vite では以下のコマンドでプロジェクトを作成します。
$ npm create vite@latest [プロジェクト名] -- --template [テンプレート]
公式テンプレート には以下のようなものがあります。
（ -ts とつくと TypeScript のプロジェクトになります。）
- vanilla / vanilla-ts
- Vanilla JS のプロジェクト
- vue / vue-ts
- Vue.js のプロジェクト
- react /react-ty
- React のプロジェクト
話はずれますが、 Vanilla とは素の JavaScript を意味します。「バニラ」はアイスクリームのフレーバーの 1 つでもあり、「余分なものや装飾品のない、シンプルなもの」転じて退屈で地味な物事、を意味するようです。そのことから Vanilla は素の JavaScript というわけです。
Vanilla JS は、純粋な JavaScript またはプレーンな JavaScript と同義で、ライブラリやフレームワークなどの外部ツールを使用しません。
ここでは Vanilla JS を用いてプロジェクトを作成してみます。
$ npm create vite@latest vanilla-ts-sample -- --template vanilla-ts
$ cd vanilla-ts-sample
$ npm install
$ npm run dev
また、 Vite には上記の公式テンプレートの他に コミュニティが管理するテンプレート も存在します。
