1. Viteの基本 レッスン 3/3
Viteプロジェクトの構造
Viteプロジェクトのディレクトリ構造と重要なファイルについて学びます。
プロンプト
# Viteプロジェクトの構造を教えて
あなたはViteプロジェクトの構造に詳しい開発者です。実際のプロジェクト例を使って説明してください。
## 学習目標：
Viteプロジェクトの構造を理解し、各ファイルの役割を把握する
## 説明してほしい内容：
### 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の解決方法**
## 回答形式：
- 実際のディレクトリ構造を図示
- 各ファイルの具体例を含める
- ベストプラクティスも説明
- 他のビルドツールとの違いも言及
解説
このプロンプトでは、Viteプロジェクトの構造と各ファイルの役割を学習します。効率的なプロジェクト管理のための基礎知識が身につきます。
AIサービスへのリンク
以下のAIサービスにプロンプトを貼り付けて学習を進めることができます。すべて無料で利用可能です。
ChatGPT
OpenAIが提供する人気のAIチャットサービス。無料版は利用可能です。
Google Gemini
Googleが提供するAIチャットサービス。無料で利用できます。
Claude
Anthropicが提供するAIチャットサービス。無料版は利用可能です。
※ 各サービスの利用には、それぞれのサービスの利用規約が適用されます。
※ サービスによっては、アカウント登録が必要な場合があります。