Vite｜制作中の確認と公開用ファイルの作成

Viteは、Webアプリを作っている途中の画面をブラウザで確認し、公開用のファイルも作れる開発ツールです。HTML、JavaScript、CSSなどをまとめて扱うため、フロントエンド向けのビルドツールと呼ばれます。

作っている途中の画面を確認する

Viteが用意する確認用の仕組みをPCで動かすと、制作中の画面をブラウザから開けます。この仕組みが開発サーバーです。ソースコードは必要に応じて、ブラウザが読み込める形へ変換されます。

ファイルを変更すると、対応している部分だけをページ全体の再読み込みなしで差し替えられます。この仕組みはHMR（Hot Module Replacement）と呼ばれます。Viteが担当するのは開発環境とファイルの変換であり、アプリ固有の撮影や描画処理ではありません。

公開するときは、HTMLやJavaScript、CSSなどを、サーバーへ置ける形にまとめます。この処理をビルドと呼び、Viteではvite buildコマンドで実行します。標準の出力先はdistフォルダですが、設定で変更できます。

生成したファイルをサーバーへ配置する処理は、Viteのビルドとは別の作業です。転送と公開の一例は公開作業の記録にまとめています。

公開先がサイトの途中の場所にある場合は、画像やJavaScriptの場所を示すパスも合わせる必要があります。Viteでは、この参照先をビルド時に調整するbaseという設定を使えます。

ViteはTypeScriptのファイルをJavaScriptへ変換できます。ただし、文字や数値などの値が想定どおりに扱われているかを調べる型検査は行いません。本番用ビルドと型検査は役割が違うため、必要に応じてtsc --noEmitなどを別に実行します。