Claude Code x MVP開発の作業フロー（のメモ）

つい最近までの使い方についてメモ。

ほぼ前回までの記事で詳述しているので、主に Claude Code の設定とプロンプトの実行手順について。

技術スタック概要

• 言語 / フレームワーク: TypeScript, Next.js (App Router)
• UI: TailwindCSS + shadcn/ui（v0）
• 状態管理 / フォーム: zustand + react-hook-form
• パッケージ管理: pnpm
• 開発環境: GitHub, VSCode, Vercel

詳しくはこちら

AI フレンドリーなプロジェクト構成

• ディレクトリ構成は 機能別（feature-based） にシンプル化する
  例: features/profile, features/mintなど
• docs/ に開発方針や 仕様などのドメイン知識を集約
  Claude が読みやすく、理解しやすくなる
• ファイル名・コンポーネント名は具体的かつ意味が明確に

詳しくはこちら

UI・Styling 要件 の最小化

フロントエンドは AI のボトルネックだが、リッチにしたとてビジネス上のメリットが薄い。

• TailwindCSS + shadcn/ui で表現しやすいものに留め、複雑な独自デザインは避ける
• 色は 白・黒・グレーを基調とし、カラフルな装飾は避ける
• 画像やアイコンは極力使わず、CSS と絵文字で代用
• Light/Dark Mode 切り替えも廃止

詳しくはこちら

静的チェックでコード品質を担保

AI にも人間にも助けになる品質管理の仕組みを整備することが重要です。

ESLint + Prettier の導入

コードの一貫性と品質を保つため、以下の静的解析ツールを導入します：

• ESLint: TypeScript/React のベストプラクティスに従ったコード品質チェック
• Prettier: コードフォーマットの自動統一
• これらのツールにより、Claude Code が生成するコードも人間が書くコードも同じ品質基準で管理

GitHub Actions による自動 CI

PR（プルリクエスト）ごとに自動でチェックを実行する仕組みを構築：

• コードフォーマットの確認
• ESLint ルールの準拠チェック
• TypeScript の型チェック
• ビルドエラーの早期発見

この自動化により、Claude Code で生成されたコードの品質を継続的に保証できます。

Claude Code の設定

効率的な開発のため、Claude Code の設定は最小構成を心がけます。

CLAUDE.md の最小構成

• CLAUDE.md ファイルは基本的な設定のみに留める
• 複雑な仕様や用語解説は docs/ 配下に分離して記述
• CLAUDE.md 内から import 文で必要な情報を呼び出す構成

MCP（Model Context Protocol）の使用について

• MCP は基本的に使用しない方針
• トークンサイズを圧迫する割にメリットが薄いと判断
• CLAUDE.md と docs/ の組み合わせで十分なコンテキスト提供が可能

.claude/ 配下の設定

• CLAUDE.md と docs/ を適切に設定すれば、.claude/ 配下にコンテキスト知識ファイルを設定する必要はない
• Claude Code 用の Rules や Config ファイルの設置については検討中（WIP）

プロンプトの実行

効率的で安全な開発のため、プロンプト実行には以下の手順を推奨します。

プロンプトの分割と配置

• プロンプトはタスクごとに分割して管理
• /claude/prompts/TASK.md のように配置して実行
• 各プロンプトは原則として英語で記述（Claude は英語に最適化されているため）

ブランチ戦略

• タスクのまとまり毎にブランチを切る
• デグレード対策として、問題があればブランチを破棄してやり直し可能な構成
• 各ブランチで独立したタスクを実行

コミット管理

• プロンプトの内容をコミットメッセージとして使用
• 修正差分をわかりやすくするため、何のタスクでどのような変更が行われたかを明確に記録
• 後から変更履歴を追跡しやすくなる

人間による確認プロセス

• プロンプト実行毎に人間がローカルサーバーとコードで確認
• タスク毎に人間が責任を負う体制
• AI が生成したコードの品質と動作を必ず人間が検証してから次のタスクに進む

参考

シリーズ記事

Claude Codeを使用した開発フロー（特にdApps）に最適なテンプレートを構築中で、各項目についてメモを残しています。

1. Claude Code x MVP開発に最適なdApps要求定義
2. Claude Code x MVP開発に最適なNext.jsディレクトリ構成
3. Claude Code x MVP開発に最適なUXデザインガイド
4. Claude Code x MVP開発に最適なNext.jsの状態管理パターン [Zustand, React Hook Form, TanStack Query]
5. Claude Code x MVP開発の作業フロー（のメモ）
6. AO dApps × Next.jsのnpmライブラリ選定 [2025年]
7. EVM dApps x Next.jsのnpmライブラリ選定 [2025 年]
8. Solana dApps × Next.jsのnpmライブラリ選定 [2025年]

参考文献

『LLMのプロンプトエンジニアリング ―GitHub Copilotを生んだ開発者が教える生成AIアプリケーション開発』
『生成AIのプロンプトエンジニアリング ―信頼できる生成AIの出力を得るための普遍的な入力の原則』
『開発者とアーキテクトのためのコミュニケーションガイド ―パターンで学ぶ情報伝達術』