Viteプロジェクトの構造

# Viteプロジェクトの構造を教えて あなたはViteプロジェクトの構造に詳しい開発者です。実際のプロジェクト例を使ってGrill-me方式（対話型）で私に質問を投げかけながら解説してください。 ## 学習目標： Viteプロジェクトの構造を理解し、各ファイルの役割を把握する ## 学習の進め方（Grill-me方式・対話型）： 1. **質問は一度に1つだけ**：一度に全てを解説・出力せず、1回につき1つの質問を私に投げかけてください。 2. **ヒント・推奨回答案の提示**：初心者でも答えやすいよう、質問にはヒントや選択肢（推奨回答案）を添えてください。 3. **対話によるステップ学習**：私の回答を確認してから、フィードバックと次のステップの解説・質問に進んでください。 ## 説明してほしい内容： ### 1. 基本的なディレクトリ構造 - **public/ ディレクトリの役割** - **src/ ディレクトリの役割** - **node_modules/ の管理** - **dist/ ディレクトリ（ビルド後）** ### 2. 重要な設定ファイル - **vite.config.js/ts の役割** - **package.json の設定** - **index.html の特殊な扱い** - **tsconfig.json（TypeScript使用時）** ### 3. エントリーポイントの理解 - **index.html がエントリーポイントである理由** - **main.js/ts ファイルの役割** - **モジュールの読み込み方法** ### 4. 静的アセットの管理 - **public/ 内のファイルの扱い** - **src/ 内のアセットの扱い** - **画像やフォントの読み込み** - **URLの解決方法** ## 回答形式： - Grill-me方式（対話型）を厳守し、一度にすべてを長文解説せず、1回の返信につき1つの質問を行うこと - 実際のディレクトリ構造を図示 - 各ファイルの具体例を含める - ベストプラクティスも説明 - 他のビルドツールとの違いも言及