Merge pull request #76 from kc3hack/74-skill-tree-integration

feat: #74 スキルツリーのバックエンドAPI統合

Author: Inlet-back

.github/decisions/014-skill-tree-coordinate-auto-layout.md

@@ -0,0 +1,79 @@
+# 014 スキルツリーの座標自動レイアウト生成
+
+## ステータス
+
+- [x] **決定**
+
+## コンテキスト (課題と背景)
+
+Issue #74でスキルツリーのフロントエンド・バックエンドAPI統合を行う際、バックエンドから返されるノードデータをCanvas上にどう配置するかを決定する必要があった。
+
+### 背景
+- バックエンドのJSONには`prerequisites`(前提スキル)の依存関係のみが存在し、X/Y座標情報は存在しない
+- 6カテゴリ(web/ai/security/infrastructure/game/design)それぞれに対応する必要がある
+- 将来的にカテゴリやスキルノード数が増減する可能性がある
+- ハッカソン期間のため、実装時間を最小化したい
+
+## 決定 (Decision)
+
+**APIデータから`prerequisites`の深さに基づいてtier（階層）を計算し、X/Y座標を自動生成する方式を採用**
+
+### 実装方針
+- 前提スキルを持たないノードを tier 0 とする
+- 各ノードのtierは、その前提スキルの最大tier + 1 で計算
+- Y座標: `tier * 120 + 60` (tier間距離120px)
+- X座標: 同一tier内のノードを等間隔に配置 (横幅800pxを基準に分散)
+
+## 代替案との比較 (Options)
+
+### 1. 静的レイアウトJSONを作成（カテゴリ別）
+
+- **Good**: 
+  - デザイナーが最適な配置を手動で決定できる
+  - 視覚的に美しいレイアウトが実現可能
+- **Bad**: 
+  - 各カテゴリごとに座標データを手動作成する必要がある（6カテゴリ × 平均20ノード = 120座標）
+  - カテゴリ追加やノード変更のたびに座標データのメンテナンスが必要
+  - 実装時間が長い（推定4-6時間）
+  - **却下理由**: ハッカソン期間の時間制約に合わない
+
+### 2. 全カテゴリ共通の静的座標プリセット
+
+- **Good**: 
+  - 実装が比較的簡単
+  - 全カテゴリで一貫したレイアウト
+- **Bad**: 
+  - カテゴリごとにノード数が異なるため、スペースの無駄や重なりが発生
+  - スケーラビリティがない（10ノードと30ノードで同じレイアウトは不適切）
+  - **却下理由**: 柔軟性に欠け、ユーザー体験を損なう可能性
+
+### 3. 力学モデル（Force-Directed Graph）
+
+- **Good**: 
+  - グラフ理論に基づく自然な配置
+  - ライブラリ（D3.js等）が存在する
+- **Bad**: 
+  - ピクセルアート風デザインと相性が悪い（動的なアニメーションが発生）
+  - 初期表示でノードが動くためUXが低下
+  - 実装時間が長い
+  - **却下理由**: プロジェクトのデザイン方針に合わない
+
+## 結果 (Consequences)
+
+### Positive
+
+- ✅ カテゴリ追加時に座標データを手動作成する必要がない
+- ✅ バックエンドJSONに座標情報を持たせないため、データ構造がシンプル
+- ✅ prerequisites依存関係のみでレイアウトが決定されるため、保守性が高い
+- ✅ 実装時間が短い（約1時間）
+
+### Negative
+
+- ❌ ノード配置が機械的で、デザイン性に欠ける可能性
+- ❌ 複雑な依存関係グラフの場合、重なりが発生する可能性
+- ❌ 同一tier内のノード数が多い場合、横に広がりすぎる（現状は考慮していない）
+
+### 将来の改善案
+
+- デザイナーによるレイアウト最適化が必要になった場合、座標オーバーライド機能を追加可能
+- 横幅の自動調整ロジック追加（tier内ノード数に応じて最大幅を制限）

.github/decisions/015-skill-tree-auto-generation-on-first-access.md

@@ -0,0 +1,97 @@
+# 015 初回アクセス時のスキルツリー自動生成
+
+## ステータス
+
+- [x] **決定**
+
+## コンテキスト (課題と背景)
+
+Issue #74でスキルツリーのフロントエンド・バックエンドAPI統合を行う際、ユーザーが初めて特定のカテゴリのスキルツリーにアクセスした場合の挙動を決定する必要があった。
+
+### 背景
+- バックエンドの`GET /api/v1/users/{id}/skill-trees?category={cat}`は、データベースに該当データがない場合は空配列`[]`を返す
+- スキルツリーの生成には`POST /api/v1/analyze/skill-tree`を呼び出す必要がある
+- LLM API呼び出しが含まれるため、生成には最大30秒かかる可能性がある
+- ユーザーに生成ボタンを押させる手間を減らしたい
+
+## 決定 (Decision)
+
+**GETで空配列が返った場合、フロントエンド側で自動的にPOSTエンドポイントを呼び出し、スキルツリーを生成する**
+
+### 実装方針
+```typescript
+export async function fetchSkillTree(
+  userId: number,
+  category: string
+): Promise<SkillTreeData | null> {
+  const response = await fetch(
+    `${API_BASE_URL}/users/${userId}/skill-trees?category=${category}`
+  );
+  const data = await response.json();
+
+  // 空配列の場合は自動生成
+  if (data.length === 0) {
+    return await generateSkillTree(userId, category);
+  }
+  return data[0];
+}
+```
+
+## 代替案との比較 (Options)
+
+### 1. ユーザーに「生成」ボタンをクリックさせる
+
+- **Good**: 
+  - ユーザーが明示的に生成を開始するため、意図しないAPI料金消費が発生しない
+  - 生成が必要かどうかをユーザーが判断できる
+- **Bad**: 
+  - UXが悪い（空の画面→ボタンクリック→待機のステップが発生）
+  - 初回アクセス時に追加操作が必要になる
+  - **却下理由**: ハッカソンのデモとしてシームレスなUXを優先したい
+
+### 2. バックエンドで初回アクセス時に自動生成
+
+- **Good**: 
+  - フロントエンドのロジックがシンプル
+  - バックエンドで生成タイミングを一元管理
+- **Bad**: 
+  - GETエンドポイントが副作用（DB書き込み）を持つことになり、RESTful設計に反する
+  - 初回アクセスの場合、レスポンスが遅くなる（最大30秒）→タイムアウトリスク
+  - **却下理由**: RESTful設計の原則を守り、GET/POSTの責任分離を維持したい
+
+### 3. データベースシーディング時に全ユーザー・全カテゴリのスキルツリーを事前生成
+
+- **Good**: 
+  - 初回アクセスが常に高速
+  - フロントエンドの実装が単純
+- **Bad**: 
+  - ユーザー登録時に6カテゴリ全てを生成するため、LLM API料金が6倍かかる
+  - ユーザーが使わないカテゴリも生成してしまう（無駄なコスト）
+  - **却下理由**: API料金の無駄遣いとスケーラビリティの問題
+
+## 結果 (Consequences)
+
+### Positive
+
+- ✅ ユーザーが手動で「生成」ボタンを押す必要がない
+- ✅ シームレスなUX（初回アクセスでもスキルツリーが自動的に表示される）
+- ✅ RESTful設計を維持（GET/POSTの責任分離）
+- ✅ ユーザーがアクセスしたカテゴリのみ生成されるため、API料金を最小化
+
+### Negative
+
+- ❌ 初回ロードが遅くなる（LLM API呼び出しで最大30秒）
+- ❌ ユーザーが意図せずAPI料金を消費する可能性がある（カテゴリ切り替え時に自動生成が走る）
+- ❌ ローディング中のユーザー体験がやや低下（待機時間の発生）
+
+### 軽減策
+
+- **10分間のキャッシュ**: バックエンドで生成結果を10分間キャッシュすることで、同じカテゴリへの再アクセスは高速
+- **ローディングスピナー**: 待機状態を視覚的に明示し、ユーザーに進行状況を伝える
+- **エラーハンドリング**: 生成失敗時は明確なエラーメッセージを表示し、再試行を促す
+
+### 将来の改善案
+
+- バックエンドで生成状況をWebSocket等でリアルタイムに通知（プログレスバー表示）
+- ユーザー設定で「自動生成」のオン/オフを切り替え可能にする
+- 生成処理をバックグラウンドジョブ化し、完了後に通知（非同期処理）

.gitignore

@@ -206,8 +206,10 @@ dist/
 downloads/
 eggs/
 .eggs/
+# Python virtual environment lib directories (but not frontend/src/lib)
 lib/
 lib64/
+!frontend/src/lib/
 parts/
 sdist/
 var/

backend/app/api/endpoints/analyze.py

@@ -28,6 +28,8 @@
 from app.services.skill_tree_service import generate_skill_tree_ai
 from app.services.quest_service import generate_handson_quest
 from app.crud.user import get_user
+from app.dependencies.auth import get_current_user
+from app.models.user import User
 from app.db.session import get_db
 
 router = APIRouter()
@@ -78,28 +80,30 @@ async def analyze_rank(request: RankAnalysisRequest) -> RankAnalysisResponse:
 
 @router.post("/skill-tree", response_model=SkillTreeResponse)
 async def generate_skill_tree(
-    request: SkillTreeRequest, db: Session = Depends(get_db)
+    request: SkillTreeRequest,
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db),
 ) -> SkillTreeResponse:
     """
-    スキルツリー生成（LLM実装 - Issue #54）
+    スキルツリー生成（LLM実装 - Issue #54, 認証必須 - Issue #61）
 
     Args:
-        request: スキルツリー生成リクエスト（user_id, category）
+        request: スキルツリー生成リクエスト（category）
+        current_user: 認証済みユーザー（Cookieから自動取得）
         db: DBセッション
 
     Returns:
         SkillTreeResponse: パーソナライズされたスキルツリーデータ
 
     Note:
-        - user_id から Profile と SkillTree テーブルを参照
+        - 認証済みユーザーのProfile と SkillTree テーブルを参照
         - GitHub APIでリポジトリを分析（習得済みスキル推定）
         - LLMでパーソナライズされたロードマップを生成
-        - キャッシュ機能（7日間）: generated_atが新しければDBから返却
+        - キャッシュ機能（10分）: generated_atが新しければDBから返却
 
     Example:
         Request:
             {
-                "user_id": 1,
                 "category": "web"
             }
 
@@ -116,7 +120,7 @@ async def generate_skill_tree(
     """
     try:
         result = await generate_skill_tree_ai(
-            user_id=request.user_id, category=request.category, db=db
+            user_id=current_user.id, category=request.category, db=db
         )
         return result
     except HTTPException:

backend/app/api/endpoints/auth.py

@@ -64,7 +64,9 @@ def create_access_token(user_id: int) -> str:
         "exp": expire,
         "iat": datetime.now(timezone.utc),
     }
-    return jwt.encode(payload, settings.JWT_SECRET_KEY, algorithm=settings.JWT_ALGORITHM)
+    return jwt.encode(
+        payload, settings.JWT_SECRET_KEY, algorithm=settings.JWT_ALGORITHM
+    )
 
 
 def set_auth_cookie(response: Response, token: str) -> None:
@@ -138,10 +140,14 @@ def github_login() -> RedirectResponse:
     """
     if not settings.GITHUB_CLIENT_ID:
         raise HTTPException(
-            status_code=503, detail="GitHub OAuth は設定されていません (GITHUB_CLIENT_ID)"
+            status_code=503,
+            detail="GitHub OAuth は設定されていません (GITHUB_CLIENT_ID)",
         )
     # JWT 署名用設定が未整備の場合は HMAC を安全に生成できないため早期に失敗させる
-    if not getattr(settings, "JWT_SECRET_KEY", None) or not settings.JWT_SECRET_KEY.strip():
+    if (
+        not getattr(settings, "JWT_SECRET_KEY", None)
+        or not settings.JWT_SECRET_KEY.strip()
+    ):
         raise HTTPException(
             status_code=503, detail="JWT 設定が正しくありません (JWT_SECRET_KEY)"
         )
@@ -194,10 +200,14 @@ async def github_callback(
     # これにより「攻撃者が取得した state を被害者に踏ませる」Login CSRF を防ぐ。
     state_cookie = request.cookies.get("oauth_state")
     if not state_cookie or not secrets.compare_digest(state_cookie, state):
-        raise HTTPException(status_code=400, detail="Invalid or expired state parameter")
+        raise HTTPException(
+            status_code=400, detail="Invalid or expired state parameter"
+        )
     # さらに HMAC 署名を検証してサーバー発行の state かを確認する
     if not _verify_state(state):
-        raise HTTPException(status_code=400, detail="Invalid or expired state parameter")
+        raise HTTPException(
+            status_code=400, detail="Invalid or expired state parameter"
+        )
 
     # --- 2. GitHub アクセストークン取得 ---
     # 環境変数未設定時は外部 API を呼ばずに早期に 503 を返す（運用上の切り分け用）
@@ -234,7 +244,9 @@ async def github_callback(
     access_token: str | None = token_data.get("access_token")
     if not access_token:
         # GitHub は 200 でエラーを返すことがある
-        error_desc = token_data.get("error_description", token_data.get("error", "No access token"))
+        error_desc = token_data.get(
+            "error_description", token_data.get("error", "No access token")
+        )
         raise HTTPException(status_code=400, detail=error_desc)
 
     # --- 3. GitHub ユーザー情報取得 ---
@@ -258,7 +270,9 @@ async def github_callback(
     github_user_id_raw = github_user.get("id")
     github_login_name: str | None = github_user.get("login")
     if not github_user_id_raw or not github_login_name:
-        raise HTTPException(status_code=502, detail="GitHub ユーザー情報の取得に失敗しました")
+        raise HTTPException(
+            status_code=502, detail="GitHub ユーザー情報の取得に失敗しました"
+        )
     github_user_id = str(github_user_id_raw)
 
     # --- 4. 既存ユーザー照合 or 新規作成 ---
@@ -283,7 +297,9 @@ async def github_callback(
         # これにより「User だけが永続化されるゾンビレコード」を防ぐ。
         # create_user / create_oauth_account の flush も含めて全体を囲う（C-1修正）
         try:
-            db_user = crud_user.create_user(db, UserCreate(username=username), commit=False)
+            db_user = crud_user.create_user(
+                db, UserCreate(username=username), commit=False
+            )
             # OAuthAccount 作成（GitHubトークンは暗号化保存: ADR 005）
             crud_oauth.create_oauth_account(
                 db,
@@ -298,16 +314,22 @@ async def github_callback(
             db.commit()
         except Exception as e:
             db.rollback()
-            raise HTTPException(status_code=500, detail="ユーザー登録に失敗しました") from e
+            raise HTTPException(
+                status_code=500, detail="ユーザー登録に失敗しました"
+            ) from e
         db.refresh(db_user)  # commit 後に refresh（rollback 対象外）
 
     if db_user is None:
-        raise HTTPException(status_code=500, detail="User lookup failed after OAuth flow")
+        raise HTTPException(
+            status_code=500, detail="User lookup failed after OAuth flow"
+        )
 
     # --- 5. JWT を httpOnly Cookie にセットしてフロントへリダイレクト ---
     # JWT を URL パラメータに含めない（ブラウザ履歴・Referer への漏洩防止）
     jwt_token = create_access_token(db_user.id)
-    redirect = RedirectResponse(url=settings.FRONTEND_URL, status_code=302)
+    # GitHub OAuth 成功後はダッシュボードへリダイレクト（Issue #74）
+    dashboard_url = f"{settings.FRONTEND_URL}/dashboard"
+    redirect = RedirectResponse(url=dashboard_url, status_code=302)
     set_auth_cookie(redirect, jwt_token)
     # oauth_state Cookie を使用済みにする（ワンタイム化）
     is_https = urlparse(settings.FRONTEND_URL).scheme == "https"
@@ -429,4 +451,3 @@ def login_by_username(
         )
     set_auth_cookie(response, token)
     return {"message": "ログインしました", "user_id": db_user.id}
-

backend/app/core/config.py

@@ -27,6 +27,11 @@ class Settings(BaseSettings):
     # 生成: python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
     ENCRYPTION_KEY: str = ""
 
+    # スキルツリー生成設定
+    SKIP_LLM_FOR_SKILL_TREE: bool = (
+        True  # True: ベースラインJSONを直接返す（開発用）, False: LLMを使用
+    )
+
     # ランク計算（product-spec 4.1 準拠）
     # ランクn に到達するために必要な累積経験値（仕様確定後に調整）
     RANK_THRESHOLDS: list[int] = [

backend/app/core/prompts.py

@@ -89,7 +89,7 @@
 {baseline_json}
 
 ## 生成要件
-1. **未習得スキルの特定**: ベースラインから、ユーザーが次に学ぶべきスキル5-10個を選定
+1. **ベースラインをベースに**: ベースラインスキルツリーの全ノードを含めつつ、ユーザーのレベルに応じてカスタマイズ
 2. **completed判定（最重要）**: 
    - 「習得済みスキル」リストに含まれるスキルIDは必ず `completed: true` に設定
    - 含まれないスキルは `completed: false` に設定
@@ -100,6 +100,7 @@
    - rank 3-5（中級者）: 実践的スキル中心、標準的な学習時間
    - rank 6-9（上級者）: 先端技術・アーキテクチャスキル、短めの学習時間
 5. **優先順位付け**: 次に取り組むべきスキル（next_recommended）を3つ提示
+6. **ベースラインの全ノードを含める**: ノード数を減らさず、ベースラインの20個程度のノードをすべて含めてください
 
 ## 出力形式（JSON）
 {{