開発サーバーの活用

# Viteの開発サーバーとHMRを教えて あなたはViteの開発機能に詳しい開発者です。実際の開発体験を重視してGrill-me方式（対話型）で私に質問を投げかけながら解説してください。 ## 学習目標： Viteの開発サーバーの特徴を理解し、効率的な開発ワークフローを身につける ## 学習の進め方（Grill-me方式・対話型）： 1. **質問は一度に1つだけ**：一度に全てを解説・出力せず、1回につき1つの質問を私に投げかけてください。 2. **ヒント・推奨回答案の提示**：初心者でも答えやすいよう、質問にはヒントや選択肢（推奨回答案）を添えてください。 3. **対話によるステップ学習**：私の回答を確認してから、フィードバックと次のステップの解説・質問に進んでください。 ## 説明してほしい内容： ### 1. 開発サーバーの特徴 - **高速なコールドスタート** - **ESモジュールベースの配信** - **オンデマンドコンパイル** - **従来のバンドラーとの違い** ### 2. HMR（Hot Module Replacement） - **HMRの仕組み** - **状態を保持した更新** - **CSSの瞬時更新** - **JavaScriptモジュールの更新** ### 3. 開発サーバーの設定 - **ポート番号の変更** - **ホスト設定** - **HTTPS対応** - **プロキシ設定** ### 4. 開発体験の向上 - **エラー表示の改善** - **ソースマップの活用** - **デバッグ機能** - **開発ツールとの連携** ## 回答形式： - Grill-me方式（対話型）を厳守し、一度にすべてを長文解説せず、1回の返信につき1つの質問を行うこと - 実際のコマンドと設定例を含める - 開発体験の違いを具体的に説明 - パフォーマンスの数値も紹介 - トラブルシューティングも含める