Claude Codeと共に英語学習アプリ開発の本開発を始動した話【英語学習アプリ開発#7】

# Claude Codeと共に学習継続性システムを実装した話 - AI駆動開発の新体験

## はじめに

個人開発の英語学習アプリで、MVPから本格的な機能拡張フェーズに移行しました。
今回は**Claude Code**という革新的なAI開発パートナーと組んで、学習習慣化システムを実装。

従来のAIコーディングツールとは一線を画す体験と、遭遇した技術課題・解決策を記録します。

### 🎯 今回実装した機能
- 日次学習目標設定システム
- 学習記録自動化システム  
- 学習ストリーク（連続学習日数）計算
- リアルタイム進捗追跡
- 設定画面UI

### 🛠️ 技術スタック
- **フレームワーク**: Next.js 15 (App Router)
- **言語**: TypeScript
- **データベース**: Supabase (PostgreSQL)
- **UI**: Tailwind CSS + グラスモーフィズム
- **開発パートナー**: Claude Code 🤖

---

## 📋 システム設計の考え方

### 学習継続性強化の4つの柱

```mermaid
graph TD
    A[学習継続性システム] --> B[目標設定]
    A --> C[記録自動化]
    A --> D[進捗可視化]
    A --> E[習慣化サポート]
    
    B --> B1[XP目標]
    B --> B2[クエスト目標]
    B --> B3[時間目標]
    
    C --> C1[セッション追跡]
    C --> C2[自動記録更新]
    C --> C3[ストリーク計算]
    
    D --> D1[リアルタイム進捗]
    D --> D2[目標達成状況]
    D --> D3[学習カレンダー]
    
    E --> E1[リマインダー通知]
    E --> E2[継続モチベーション]
    E --> E3[個別最適化]
```

---

## 🗄️ データベース設計の考慮点

### テーブル構成の基本思想

```mermaid
erDiagram
    users ||--|| user_settings : has
    users ||--o{ daily_records : tracks
    users ||--o{ learning_sessions : participates
    
    user_settings {
        uuid user_id PK
        integer daily_xp_goal
        integer daily_quest_goal
        integer daily_time_goal
        boolean reminder_enabled
    }
    
    daily_records {
        uuid user_id PK
        date study_date PK
        integer earned_xp
        integer completed_quests
        integer study_time_minutes
        jsonb goals_achieved
    }
    
    learning_sessions {
        integer id PK
        uuid user_id
        timestamptz start_time
        timestamptz end_time
        integer xp_earned
        integer tasks_completed
    }
```

### 🎯 設計のポイント

1. **正規化**: 設定・記録・セッションを適切に分離
2. **パフォーマンス**: 複合主キーでユニーク制約
3. **拡張性**: JSONBで柔軟なデータ管理
4. **セキュリティ**: Row Level Security (RLS) で完全データ分離

---

## 🔧 実装アーキテクチャ

### セッション管理クラスの設計

学習セッションの自動追跡システムを中心とした設計にしました。

```typescript
// セッション管理の基本構造（概念図）
class SessionManager {
  // プライベートな状態管理
  private sessionId: number | null;
  private userId: string;
  private startTime: Date;
  private stats: LearningStats;

  // セッション開始
  async startSession(): Promise<boolean>

  // 進捗記録
  recordProgress(data: ProgressData): void

  // セッション完了と自動更新
  async completeSession(): Promise<boolean>
}
```

### React統合のポイント

```typescript
// useRefでセッション管理インスタンスを保持
const sessionManager = useRef<SessionManager | null>(null);

// useEffectでライフサイクル管理
useEffect(() => {
  if (user && quest && !sessionManager.current) {
    sessionManager.current = new SessionManager(user.id, quest.id);
    sessionManager.current.startSession();
  }

  // クリーンアップ
  return () => {
    sessionManager.current?.forceEndSession();
  };
}, [user, quest]);
```

---

## 🎨 UI/UX設計の要点

### グラスモーフィズムデザインの実装

設定画面では、直感的な操作性を重視したデザインを採用：

```typescript
// スライダーによる目標設定UI
<input
  type="range"
  min="50"
  max="500"
  step="25"
  value={goalValue}
  onChange={handleGoalChange}
  className="slider-custom"
/>

// リアルタイム進捗表示
<div className="progress-bar">
  <div 
    className="progress-fill" 
    style={{ width: `${progressPercentage}%` }}
  />
</div>
```

### 進捗可視化のアプローチ

- **即座のフィードバック**: 学習完了と同時に進捗更新
- **視覚的な達成感**: プログレスバーとアニメーション
- **ストリーク表示**: 継続学習への動機付け

---

## 😤 つまずいたポイントと解決策

### 1. Client/Server Component の分離問題

**問題**: Next.js App Routerで`next/headers`をクライアントコンポーネントでインポートしてエラー

```
Error: You're importing a component that needs "next/headers". 
That only works in a Server Component.
```

**解決策**: サーバー用・クライアント用のファイルを明確に分離

```
lib/utils/
├── dataUtils.ts        # サーバー用（createServerClient使用）
└── dataUtilsClient.ts  # クライアント用（createBrowserClient使用）
```

### 2. 409 Conflict エラーの対処

**問題**: Upsert操作時にUNIQUE制約で409 Conflictエラー

**解決策**: Update → Insert のフォールバック処理

```typescript
// 1. 既存レコード更新を試行
const updateResult = await updateExistingRecord(data);

if (!updateResult.success) {
  // 2. 更新失敗時は新規挿入
  const insertResult = await insertNewRecord(data);
}
```

### 3. 複数行className構文エラー

**問題**: JSXのテンプレートリテラル内改行が正しく処理されない

**解決策**: 単一行での記述に統一

```typescript
// ❌ 問題のあるパターン
className={`
  flex items-center px-6 py-3
  bg-yellow-400 hover:bg-yellow-500
`}

// ✅ 修正後
className="flex items-center px-6 py-3 bg-yellow-400 hover:bg-yellow-500"
```

### 4. 自動データ初期化システム

**問題**: 新規ユーザーにデータが存在せずエラー状態

**解決策**: フォールバック付きの堅牢な取得システム

```typescript
async function getOrCreateUserData(userId: string) {
  const existingData = await fetchUserData(userId);
  
  if (!existingData) {
    // データなし→デフォルト値で自動作成
    return await createDefaultUserData(userId);
  }
  
  return existingData;
}
```

---

## 🤖 Claude Code との開発体験

### Google AI Studio との圧倒的な違い

| 項目 | Google AI Studio | Claude Code |
|------|------------------|-------------|
| **ファイル理解** | 手動コピペが必要 | 自動でプロジェクト構成を把握 |
| **編集効率** | 全文置き換え | 差分編集で高速 |
| **エラー対応** | 手動でエラー報告 | リアルタイムでログ監視 |
| **作業継続性** | セッション断絶で情報喪失<br>(Driveに保存できていれば問題はない) | コンテキスト保持で継続開発 |
| **デバッグ** | 推測ベース | 実ファイル確認ベース |

### 特に感動した機能

1. **自動ファイル探索**: 関連ファイルを勝手に見つけて確認
2. **リアルタイム編集**: 複数ファイルを同時に正確修正  
3. **エラー追跡**: コンソールエラーから原因特定まで一気通貫
4. **TODO管理**: 複雑なタスクを自動で分解・管理

Claude Codeは開発中のタスクを自動的に細分化し、進捗を管理してくれます：

- 学習記録自動化システムの実装 ✅
- クエスト完了時の学習記録自動更新 ✅  
- 学習セッション追跡システム ✅
- 日次目標達成判定の自動化 ✅
- 学習ストリーク自動更新 ✅

---

## 📈 成果と今後の展望

### ✅ 今回の達成内容

- **学習継続性の基盤完成**: 目標設定→記録→評価のサイクル構築
- **完全自動化**: クエスト完了から進捗更新まで手動作業ゼロ
- **堅牢性向上**: エラーハンドリングとフォールバック機能
- **UX改善**: リアルタイム進捗表示と直感的設定画面

### 🎯 次回の挑戦

1. **称号・バッジシステム**: 達成感とコレクション要素
2. **学習分析AI**: GPT-4を活用した個別診断
3. **ソーシャル機能**: 友達との切磋琢磨システム
4. **ガマフィケーション拡張**: RPG要素の本格導入

---

## 💡 学んだこと・Tips

### Next.js App Router での注意点

1. **Server/Client の明確な分離**が必須
2. **Database操作はServer Component**で実行
3. **状態管理はClient Component**で実行  
4. **共通の型定義**は別ファイルで管理

### Supabase運用のベストプラクティス

1. **RLS必須**: データセキュリティの要
2. **Upsert注意**: UNIQUE制約との兼ね合い
3. **インデックス設計**: 複合キーでのパフォーマンス最適化
4. **Migration管理**: SQLファイルでの変更履歴管理

### AI駆動開発の新しい可能性

**Claude Code**との協働で確信したこと：
- AIは単なるコード生成ツールではなく、**開発パートナー**
- プロジェクト全体を理解した**コンテキスト保持**が開発効率を劇的に改善  
- **自動デバッグ・修正**で開発者はより高次の設計に集中可能

---

## おわりに

Phase 2の実装を通じて、英語学習アプリに学習継続性という**魂**を吹き込むことができました。

特に**Claude Code**との協働は、これまでの開発体験を完全に変えるものでした。
まるで**経験豊富な同僚エンジニア**がペアプロしてくれているような感覚で、
技術的な詰まりポイントを次々と解決し、品質の高いコードを短時間で実装できました。

これまで英語学習で挫折してきた人たちが、このアプリを使って
「**今度こそ続けられる**」と思ってもらえるような体験を作っていきます。

Phase 3では更なる挑戦が待っています。
継続的な学習を**楽しい習慣**に変える仕組みづくり、ご期待ください！

---

### 🔗 関連リンク

- [Supabase公式ドキュメント](https://supabase.com/docs)
- [Claude Code公式サイト](https://claude.ai/code)
- [Next.js App Router](https://nextjs.org/docs/app)
- [Tailwind CSS](https://tailwindcss.com/)

### 📝 技術スタック詳細

- **フレームワーク**: Next.js 15 (App Router)
- **言語**: TypeScript
- **スタイリング**: Tailwind CSS
- **データベース**: Supabase (PostgreSQL)
- **認証**: Supabase Auth
- **デプロイ**: Vercel
- **開発支援**: Claude Code

---

**最後まで読んでいただき、ありがとうございました！**  
**いいね・ストック・コメント**で応援いただけると、開発のモチベーションが爆上がりします 🚀

#Next.js #TypeScript #Supabase #英語学習 #AI開発 #ClaudeCode #個人開発