手順1（必要なら）: 不足しているモジュールをインストールする

仮想環境をアクティベートしてから
(プロジェクトルート)/backendで
pip install -r requirements.txt

(プロジェクトルート)/frontendで
npm install
npm run build

手順1.5　Gemini API キーを設定する

• 1. Google AI Studio で Gemini API キーを取得する:
     • Google AI Studio にアクセスし、Googleアカウントでログインします。
     • 左側のサイドバーにある「Get API key」または「API keys」をクリックし、新しいAPIキーを生成してコピーします。
     • [Image of Google AI Studio APIキー取得画面]
• 2. .env ファイルを作成し、APIキーを設定する:
     • backend ディレクトリの直下に、.env という名前の新しいファイルを作成します。
     • そのファイルに、コピーしたAPIキーを以下の形式で記述します。

       GENAI_API_KEY='ここに取得したGemini APIキーを貼り付けます'
       

     • この .env ファイルはGitのバージョン管理から除外されていること（.gitignore に /.env が含まれていること）を必ず確認してください。 APIキーは機密情報です。

手順2a: データベースのマイグレーション

[バックエンド] (プロジェクトルート)/backend　で
もし db.sqlite3 というファイルがあったら削除する（しなくてもいけるときもあるけど一応）。
python manage.py migrate

手順2b:ローカルサーバーを立てる

[バックエンド] (プロジェクトルート)/backend　で　python manage.py runserver 8080
[フロントエンド] (プロジェクトルート)/frontend　で　npm run dev

手順3: ブラウザで確認

勝手にブラウザが立ち上がってVite+Reactのページが見られる。
もし見られなかったら、 http://localhost:5173 にアクセスする。
http://localhost:5173/api/training にアクセスするとバックエンドAPIのエントリーポイントをのぞける

バックエンド側では　http://localhost:8080/api/training

---

プロジェクト概要

このプロジェクトは、Django REST Framework を用いたバックエンドAPIと、Vite + React を用いたシングルページアプリケーション (SPA) のフロントエンドで構成されるWebアプリケーションです。

フォルダ構成

プロジェクトは大きく backend と frontend の2つの主要なディレクトリに分かれています。

---

backend/

Django (Python) のバックエンド関連のファイルが格納されています。主にAPIエンドポイントの提供、データ管理、ビジネスロジックを担当します。

backend/
├── api/                  # APIエンドポイントと関連するビジネスロジックをまとめるための層。
│   ├── __pycache__/      # Pythonが実行時に生成するバイトコードファイル。Git管理から除外されます。
│   ├── services/         # 外部サービス連携や複雑なビジネスロジックを配置する場所。
│   │   └── gemini_service.py # 例: Gemini APIとの連携ロジックを記述。
│   ├── training/         # Djangoのアプリケーション（APIエンドポイントの具体的な実装）。
│   │   ├── __pycache__/  # Pythonのバイトコードキャッシュ。
│   │   ├── migrations/   # データベースのスキーマ変更履歴（マイグレーションファイル）が格納されます。
│   │   ├── __init__.py   # Pythonパッケージを示すファイル。
│   │   ├── admin.py      # Django管理サイトに関する設定。
│   │   ├── apps.py       # アプリケーションの設定ファイル。
│   │   ├── models.py     # データベースのテーブル構造（モデル）を定義します。
│   │   ├── tests.py      # アプリケーションのテストコードを記述します。
│   │   ├── urls.py       # `training` アプリケーション固有のURLルーティングを定義します。
│   │   └── views.py      # REST APIのエンドポイント（ビジネスロジック、データの取得・処理）を定義します。
│   └── __init__.py       # Pythonパッケージを示すファイル。
├── config/               # Djangoプロジェクト全体のメイン設定フォルダ。
│   ├── __pycache__/      # Pythonのバイトコードキャッシュ。
│   ├── __init__.py       # Pythonパッケージを示すファイル。
│   ├── asgi.py           # ASGI互換Webサーバーエントリーポイント（非同期処理用）。
│   ├── settings.py       # Djangoプロジェクト全体の各種設定（データベース、インストールアプリ、CORSなど）。
│   ├── urls.py           # Djangoプロジェクト全体のURLルーティングを定義します（`api/`を含める場所）。
│   └── wsgi.py           # WSGI互換Webサーバーエントリーポイント（同期処理用）。
├── .gitignore            # Gitのバージョン管理からバックエンド固有の除外ファイルを指定します（例: `venv/`, `db.sqlite3` など）。
├── db.sqlite3            # 開発中に使用するSQLiteデータベースファイル。
└── manage.py             # Djangoプロジェクトを管理するためのコマンドラインユーティリティ。

backend/ の主な役割

• API提供: フロントエンドからのデータ要求に応えるAPIエンドポイントを提供します。
• データ管理: データベース（SQLite）とのやり取りや、データの永続化を行います。
• ビジネスロジック: アプリケーションの中核となる処理ロジックを実行します。

---

frontend/

Vite + React のフロントエンド関連のファイルが格納されています。ユーザーインターフェース (UI) の構築と、バックエンドAPIとの連携を担当します。

frontend/
├── public/               # 静的ファイルが置かれるディレクトリ（ビルド時に直接配信されます）。
│   └── vite.svg          # Viteのロゴ画像（デフォルトで生成される）。
├── src/                  # Reactアプリケーションのソースコードが格納されます。
│   ├── assets/           # 画像、アイコンなどの静的リソース。
│   │   └── react.svg     # Reactのロゴ画像（デフォルトで生成される）。
│   ├── App.css           # `App.jsx` に紐づくCSSファイル。
│   ├── App.jsx           # Reactアプリケーションのルートコンポーネント。JSX形式で記述されます。
│   ├── index.css         # グローバルなCSSファイル。
│   └── main.jsx          # Reactアプリケーションのエントリーポイント。
├── .gitignore            # Gitのバージョン管理からフロントエンド固有の除外ファイルを指定します（例: `node_modules/`, `.env`, `dist/`など）。
├── eslint.config.js      # ESLintの設定ファイル（コードの品質やスタイルをチェックするツール）。
├── index.html            # ReactアプリケーションのエントリーポイントとなるHTMLファイル。
├── package-lock.json     # Node.jsパッケージの依存関係の正確なバージョンを記録するファイル。
├── package.json          # Node.jsプロジェクトの設定、依存関係、スクリプトなどが定義されます。
├── README.md             # フロントエンド固有の説明、セットアップ手順などが記述されます。
└── vite.config.js        # Viteの設定ファイル（ビルド設定、開発サーバー、プロキシ設定など）。

frontend/ の主な役割

• UI構築: ユーザーが直接操作する画面やコンポーネントをReactで作成します。
• API連携: fetch APIなどを利用して、バックエンドのDjango APIとデータの送受信を行います。
• ルーティング: React Routerなどのライブラリを用いて、クライアントサイドでのページ遷移を管理します。
• Vite プロキシ: 開発時には、vite.config.js のプロキシ設定により、/api へのリクエストがDjangoバックエンドに転送され、CORS問題を回避しつつ相対パスでのAPIアクセスを可能にしています。

---

プロジェクトルートのファイル

.
├── .gitignore            # プロジェクト全体のGitバージョン管理から除外するファイルを指定します。
├── package-lock.json     # プロジェクト全体のNode.jsパッケージの依存関係の正確なバージョンを記録するファイル。
└── README.md             # プロジェクト全体の概要、セットアップ手順、開発ガイドなどが記述されます。

その他の重要なファイル

• .gitignore: Gitのバージョン管理に含めたくないファイルやフォルダ（例: 仮想環境、ビルド成果物、一時ファイルなど）を指定します。これがないと、不要なファイルがGitリポジトリにコミットされてしまいます。
• package-lock.json: Node.jsプロジェクトの依存関係の正確なバージョンを固定し、チームメンバー間で開発環境を統一するために重要です。

---