Vite × TypeScript

Viteを使用してTypeScriptを導入します

🔧 Viteとは？
フロントエンド開発のためのビルドツール／開発サーバーです。

🚀 Viteを使用するメリット

1. 爆速な開発環境（起動が超早い）
   従来のWebpackなどでは、開発サーバーの起動に時間がかかることが多いですが、
   Viteは即起動します。
   • 📦 Webpack：アプリ全体を一括でビルドしてから起動
   • ⚡ Vite：必要な部分だけを要求に応じて読み込む
2. 高速なHMR（Hot Module Replacement）
   コードを保存したときの変更反映（リロード）が一瞬で完了します。
3. 設定がシンプル
   最初からTypeScript、Vue、Reactなどに対応していて、少ない設定で始められます。
4. 軽量＆モダンな依存関係
   ViteはRollupを使って本番ビルドを行いますが、
   開発中はesbuildという超高速なビルドツールを利用しており、とても軽快です。

補足

• RollupとはJavaScriptのモジュールバンドラー（ビルドツール）です。
  ざっくり言うと：JSファイルをまとめて、最小・最適化されたファイルを作るツール
• esbuildとは
  超高速なJavaScript/TypeScriptバンドラー＆トランスパイラです。

導入手順

💡 「Node.js」 のインストールがお済みでない方は、公式サイトからインストーラーをダウンロードしてください。

Node.js — Run JavaScript Everywhere

1. Viteプロジェクトを作成

npm create vite@latest

2. 質問にこたえていきます。今回はTypeScriptを使用するので以下のようにします。

Need to install the following packages:
create-vite@6.4.1
Ok to proceed? (y) y

> npx
> create-vite

│
◇  Project name:
│  vite-ts
│
◇  Select a framework:
│  Vanilla
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in ...
│
└  Done. Now run:

  cd vite-ts
  npm install
  npm run dev

3. 以下を実行

cd vite-ts
npm install
npm run dev

4. 開発サーバーにアクセスし、以下画面が表示されれば成功です🎊

まとめ

ViteでTypeScriptを導入してみました。
導入も簡単でサーバーが立ち上がる速さも爆速なのでストレスフリーです。