Go to Qiita Advent Calendar Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AI・機械学習 Qiita Tech Festa 2025
Qiita Tech Festa20252025年7月15日まで開催中！
@tama0931

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

Posted at

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

はじめに

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

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

🎯 今回実装した機能

  • 日次学習目標設定システム
  • 学習記録自動化システム
  • 学習ストリーク（連続学習日数）計算
  • リアルタイム進捗追跡
  • 設定画面UI

🛠️ 技術スタック

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

📋 システム設計の考え方

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

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

テーブル構成の基本思想

🎯 設計のポイント

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

🔧 実装アーキテクチャ

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

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

// セッション管理の基本構造（概念図）
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統合のポイント

// 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設計の要点

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

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

// スライダーによる目標設定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 のフォールバック処理

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

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

3. 複数行className構文エラー

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

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

// ❌ 問題のあるパターン
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. 自動データ初期化システム

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

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

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
ファイル理解 手動コピペが必要 自動でプロジェクト構成を把握
編集効率 全文置き換え 差分編集で高速
エラー対応 手動でエラー報告 リアルタイムでログ監視
作業継続性 セッション断絶で情報喪失
(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では更なる挑戦が待っています。
継続的な学習を楽しい習慣に変える仕組みづくり、ご期待ください！

🔗 関連リンク

📝 技術スタック詳細

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

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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?