feat: Feature-based Architecture採用によるダッシュボード機能の実装 by Neon-straySheep · Pull Request #34 · kc3hack/2026_team29

Neon-straySheep · 2026-02-18T13:51:26Z

実装内容

ディレクトリ構成

frontend/src/features/dashboard/ にダッシュボード機能を完全隔離
components/ - UIコンポーネント(StatusCard, BadgeList, SkillRoadmap, DashboardContainer)
types/ - ドメイン固有の型定義(UserStatus, Rank, Badge, SkillNode)
api/ - モックデータAPI

コンポーネント

StatusCard.tsx - ユーザーレベル、経験値、進捗表示
BadgeList.tsx - 獲得済み・未獲得バッジの表示
SkillRoadmap.tsx - 階層的なスキルツリー表示
DashboardContainer.tsx - データフェッチと全体管理

設計理由

Feature-basedの採用により、ドメインごとの機能隔離が実現
app/(dashboard)ページレイヤーではロジックを持たず、features/dashboardに責務を集約
future-proofな構成で、今後の機能追加もスケーラブルに対応可能

セキュリティ考慮

モックデータの利用（バックエンド実装時に切り替え予定）
型安全性をTypeScriptで確保

タイプセーフティ

全コンポーネントに厳密な型定義を適用
ダークモード対応（Tailwind CSS dark: class使用）

実装の概要

技術的な意思決定と「なぜ」

セキュリティに関する自己評価

機密情報のハードコードはないか
入力値の検証（バリデーション）は行っているか
既知の脆弱性パターンへの対策は考慮したか

レビュワー（人間）への申し送り事項

備考

mock含め型定義部分は改修予定

## 実装内容 - Feature-based Architectureに基づく`src/features/dashboard`ディレクトリ構造を構築 - ダッシュボード機能専用の以下のコンポーネントを実装: - StatusCard.tsx: ユーザーレベル、経験値、進捗表示 - BadgeList.tsx: 獲得済み・未獲得バッジの表示 - SkillRoadmap.tsx: 階層的なスキルツリーの表示 - DashboardContainer.tsx: データフェッチと全体管理 ## 設計理由 - Feature-basedの採用により、ドメインごとの機能隔離が実現 - `app/(dashboard)`ページレイヤーではロジックを持たず、`features/dashboard`に責務を集約 - future-proofな構成で、今後の機能追加もスケーラブルに対応可能 ## セキュリティ考慮 - モックデータの利用（バックエンド実装時に切り替え予定） - 型安全性をTypeScriptで確保 ## タイプセーフティ - 全コンポーネントに厳密な型定義を適用 - ダークモード対応（Tailwind CSS `dark:` class使用）

Copilot

Pull request overview

ダッシュボード機能を frontend/src/features/dashboard/ 配下に隔離し、App Router の (dashboard) ルートから表示できるようにするPRです（Feature-based Architecture の導入例としての実装）。

Changes:

features/dashboard に型定義・モックAPI・UIコンポーネント・統合コンテナを新規追加
app/(dashboard) にページ/レイアウトを追加してダッシュボードを表示
ルート app/layout.tsx のメタデータと言語設定を更新

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
frontend/src/features/dashboard/types/index.ts	ダッシュボードドメイン型を定義
frontend/src/features/dashboard/api/mock.ts	ダッシュボード用モックデータ取得関数を追加
frontend/src/features/dashboard/components/StatusCard.tsx	ユーザーステータス（ランク/EXP等）の表示を追加
frontend/src/features/dashboard/components/BadgeList.tsx	獲得/未獲得バッジ表示を追加
frontend/src/features/dashboard/components/SkillRoadmap.tsx	スキルツリーの再帰表示を追加
frontend/src/features/dashboard/components/DashboardContainer.tsx	データフェッチ/状態管理/各コンポーネント統合を追加
frontend/src/app/layout.tsx	アプリ全体のmetadataと言語属性を変更
frontend/src/app/(dashboard)/page.tsx	ダッシュボードページを追加
frontend/src/app/(dashboard)/layout.tsx	ダッシュボード用レイアウト/metadata を追加

Copilot · 2026-02-18T13:57:27Z

frontend/src/features/dashboard/components/SkillRoadmap.tsx

+      {/* 子スキル */}
+      {childSkills.length > 0 && (
+        <div className="mt-4 space-y-4">
+          {childSkills.map((childSkill) => (
+            <SkillNode
+              key={childSkill.id}
+              skill={childSkill}
+              allSkills={allSkills}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}


子要素の描画がデータに完全依存した再帰になっているため、prerequisites に循環参照が含まれると無限再帰（スタックオーバーフロー）になります。visited セットでの循環検知や最大深度制限などのガードを入れてください。

Copilot · 2026-02-18T13:57:28Z

frontend/src/features/dashboard/components/DashboardContainer.tsx

+    const loadDashboard = async () => {
+      try {
+        setLoading(true);
+        const data = await fetchUserDashboard(userId);
+        setUserStatus(data);
+        setError(null);
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : 'ダッシュボードの読み込みに失敗しました'
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadDashboard();


useEffect 内の非同期処理がコンポーネントのアンマウント後も setState し得るため、Reactの警告や不要な更新の原因になります。クリーンアップでキャンセルフラグ（または AbortController）を扱い、アンマウント後は state 更新しないようにしてください。

Suggested change

const loadDashboard = async () => {

try {

setLoading(true);

const data = await fetchUserDashboard(userId);

setUserStatus(data);

setError(null);

} catch (err) {

setError(

err instanceof Error ? err.message : 'ダッシュボードの読み込みに失敗しました'

);

} finally {

setLoading(false);

}

};

loadDashboard();

let isCancelled = false;

const loadDashboard = async () => {

try {

setLoading(true);

const data = await fetchUserDashboard(userId);

if (isCancelled) {

return;

}

setUserStatus(data);

setError(null);

} catch (err) {

if (isCancelled) {

return;

}

setError(

err instanceof Error ? err.message : 'ダッシュボードの読み込みに失敗しました'

);

} finally {

if (!isCancelled) {

setLoading(false);

}

}

};

loadDashboard();

return () => {

isCancelled = true;

};

Copilot · 2026-02-18T13:57:28Z

frontend/src/features/dashboard/components/DashboardContainer.tsx

+export function DashboardContainer({ userId = 'default-user' }: DashboardContainerProps) {
+  const [userStatus, setUserStatus] = useState<UserStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadDashboard = async () => {


userId のデフォルト値が固定文字列（default-user）だと、呼び出し側が渡し忘れた場合に意図せず別ユーザーのダッシュボードとして扱われます。必須にするか、未指定時はエラー/未ログイン表示に寄せる方が安全です。

Suggested change

export function DashboardContainer({ userId = 'default-user' }: DashboardContainerProps) {

const [userStatus, setUserStatus] = useState<UserStatus | null>(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState<string | null>(null);

useEffect(() => {

const loadDashboard = async () => {

export function DashboardContainer({ userId }: DashboardContainerProps) {

const [userStatus, setUserStatus] = useState<UserStatus | null>(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState<string | null>(null);

useEffect(() => {

const loadDashboard = async () => {

// userId が未指定の場合は安全側に倒してエラー扱いとし、API 呼び出しを行わない

if (!userId) {

setError('ユーザーIDが指定されていません');

setUserStatus(null);

setLoading(false);

return;

}

Copilot · 2026-02-18T13:57:29Z

frontend/src/app/layout.tsx

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Dashboard | Skill Tree",
+  description: "Your personal skill development dashboard",
 };


PR説明はダッシュボード機能追加が主旨ですが、アプリ全体の metadata（title/description）をダッシュボード前提の文言に変更しています。ホーム等の他ページも含めた全体影響があるので、ダッシュボード配下に限定する（app/(dashboard)/layout.tsx 側へ寄せる）か、PR説明に意図を明記してください。

Copilot · 2026-02-18T13:57:29Z

frontend/src/features/dashboard/types/index.ts

+export interface Badge {
+  id: string;
+  name: string;
+  icon: string;
+  description: string;
+  unlockedAt?: Date;
+}
+
+export interface Rank {
+  level: number;
+  title: string;
+  progress: number; // 0-100
+  nextLevelExp?: number;
+}
+
+export interface SkillNode {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  completed: boolean;
+  level: number;
+  prerequisites?: string[];
+}
+
+export interface UserStatus {
+  userId: string;
+  displayName: string;
+  avatar?: string;
+  totalExp: number;
+  currentRank: Rank;
+  badges: Badge[];
+  skillRoadmap: SkillNode[];
+  joinedAt: Date;
+  lastActivityAt: Date;
+}


unlockedAt / joinedAt / lastActivityAt を Date 型にしているため、将来バックエンドAPI（JSON）から取得する際に型と実データ（ISO文字列）にズレが出ます。API境界の型として使うなら string（ISO 8601）に寄せるか、string | Date としてデシリアライズ層（api内）で Date へ変換する形にしておくと移行が楽です。

Copilot · 2026-02-18T13:57:30Z

frontend/src/app/layout.tsx

+    <html lang="ja">
      <body


<html lang="ja"> への変更はサイト全体の言語宣言に影響します（既存のホームは英語文言）。i18n方針が未確定なら、まずはダッシュボード配下のみに限定するか、全ページ文言/翻訳対応とセットで変更するのが安全です。

Copilot · 2026-02-18T13:57:30Z

frontend/src/app/(dashboard)/page.tsx

+import { DashboardContainer } from '@/features/dashboard/components/DashboardContainer';
+
+export default function DashboardPage() {
+  return <DashboardContainer userId="user-123" />;


ページ側で userId="user-123" を固定しており、PR説明の「ページレイヤーではロジックを持たない/責務を features に集約」と矛盾します。少なくとも固定値は避け、未指定（デフォルト）にするか、認証/ルートパラメータから取得する形に寄せてください。

Copilot · 2026-02-18T13:57:31Z

frontend/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,17 @@
+/**
+ * Dashboard Layout
+ * ダッシュボード機能用のレイアウト（ロジックはなく、フロートのみ）


コメントの「フロートのみ」は表現として意味が取りづらく、意図（例: 「表示のみ」「レイアウトのみ」「ラッパーのみ」等）が伝わりません。内容に合う語に修正して、読む人が誤解しないようにしてください。

Suggested change

* ダッシュボード機能用のレイアウト（ロジックはなく、フロートのみ）

* ダッシュボード機能用のレイアウト（ロジックはなく、レイアウト定義のみ）

Copilot · 2026-02-18T13:57:31Z

frontend/src/app/(dashboard)/layout.tsx

+
+export const metadata = {


metadata が型付けされていないため、キー名のタイポ等がコンパイル時に検出されません。app/layout.tsx では Metadata 型を付与しているので、ここも同様に Metadata を付けて整合性を取ると安全です。

Suggested change

export const metadata = {

import type { Metadata } from 'next';

export const metadata: Metadata = {

Copilot · 2026-02-18T13:57:31Z

frontend/src/features/dashboard/components/BadgeList.tsx

+                </p>
+                <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
+                  {new Date(badge.unlockedAt!).toLocaleDateString('ja-JP')}
+                </p>


badge.unlockedAt! の non-null アサーションは、後続のリファクタや型変更時に破綻しやすいです。filter 側を型ガードにして unlockedAt が必ず存在する配列型に絞り込む形にすると安全に扱えます。

Neon-straySheep requested a review from Inlet-back February 18, 2026 13:51

Inlet-back requested a review from Copilot February 18, 2026 13:51

Copilot started reviewing on behalf of Inlet-back February 18, 2026 13:52 View session

Copilot AI reviewed Feb 18, 2026

View reviewed changes

Neon-straySheep merged commit 75eb350 into develop Feb 18, 2026
10 checks passed

Neon-straySheep deleted the feature/issue-23-ui-mock branch February 18, 2026 14:00

Inlet-back mentioned this pull request Feb 18, 2026

feat: #32 AI基盤セットアップ (LangChain + LLM統合) #33

Merged

5 tasks

MasachikaUra mentioned this pull request Feb 18, 2026

Backend: AI実装Phase 2 - モックAPIエンドポイント #35

Open

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Feature-based Architecture採用によるダッシュボード機能の実装#34

feat: Feature-based Architecture採用によるダッシュボード機能の実装#34
Neon-straySheep merged 1 commit intodevelopfrom
feature/issue-23-ui-mock

Neon-straySheep commented Feb 18, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Copilot AI Feb 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

	* ダッシュボード機能用のレイアウト（ロジックはなく、フロートのみ）
	* ダッシュボード機能用のレイアウト（ロジックはなく、レイアウト定義のみ）

Conversation

Neon-straySheep commented Feb 18, 2026

実装内容

ディレクトリ構成

コンポーネント

設計理由

セキュリティ考慮

タイプセーフティ

実装の概要

技術的な意思決定と「なぜ」

セキュリティに関する自己評価

レビュワー（人間）への申し送り事項

備考

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments