はじめに
前回は Claude Code を使って簡単なアプリ（HTML, CSS, JS）を作成してもらいましたが、今回はフレームワークを使用してアプリを作成してもらおうと思います！
アプリの動作確認ができたらテストコードも追加で書いてもらえるようなプロンプトを実行して結果を見ていきたいと思います。
前回の記事 ↓
フレームワークを指定してアプリ作成
今回使うためのディレクトリを作成し、いざ Claude Code！
mkdir todo-next
cd todo-next
claude
アプリを作成してもらったら、て少し修正も加えてみましょう。
1. アプリ作成
今回は Next.js で TODO アプリを作ってもらおうと思います！
以下のプロンプトを実行します。
TODOリストのアプリケーションをNext.jsで生成して。
アプリ生成には10分ほどかかりました。
実行途中でエラーが出ていたみたいですが、Claude Code 君が勝手に修正していい感じにしてくれてました笑
実行中のログもしっかり出てくれて、処理を実行するたびに確認も挟まるので、心配な時はエラーログをしっかり確認してから実行するようにすると安心です。
実際に動作確認してみると、動作はもちろんデザインもいい感じの TODOアプリが完成していました！
シンプルな TODOアプリなのであまり変化は感じられないかもしれませんが、前回紹介した 拡張思考モード を使った時の差も見てみたいなと思いました。
修正を依頼するプロンプト実行
ちょっと修正を加えてみたいので、TODO・DOING・DONEの状態を追加してそれぞれの状態でソートする機能を追加するプロンプトを実行してみます。
タスクの状態をTODO,DOING,DONEで分け、それぞれの状態のタスクをソートする機能を追加してください。
ログには変更前後のコードの差分が表示され、その下に追加した機能と操作方法が記載されていました。ホスピタリティですね。。
● タスクの状態管理機能を追加しました。
追加した機能:
1. 3つの状態カラム - TODO / DOING / DONE のカンバンボード形式 2. 状態の移動 - タスクにホバーすると矢印ボタンが表示され、状態を前後に移動可能
3. ソート機能 - 3つのオプション
- 新しい順
- 古い順
- あいうえお順（日本語対応）
4. サマリー表示 - 各状態ごとのタスク数を表示
操作方法:
- < ボタン: 前の状態に戻す (DONE→DOING→TODO)
- > ボタン: 次の状態に進める (TODO→DOING→DONE)
- ゴミ箱アイコン: タスクを削除
npm run dev で開発サーバーを起動して確認できます。
動作確認すると、指示通りに状態が追加され、ソート機能も追加されてました！
カラムが3つに分かれたことで個人的には見やすくなりましたが、人によってはゴチャついて見えるかも。。？
正解を導き出す工程が奥深そうですね。
テストコート作成
調べた感じ、Claude Code はテストに関してはあまり得意じゃない？そうなので対応策をとる必要があるみたいです。
対応策
./.claude/CLAUDE.md にテストの注意事項を記載することで対応することができそうです。
CLAUDE.mdとは：
Claude Codeが起動時に自動的に読み込む設定ファイルで、アーキテクチャの説明、コーディング規約、よく使うコマンドなど、プロジェクトで必要な情報をすべて記載しておける。
作業用のディレクトリを作成したのち/initコマンドで作成される。
# テストコード作成時の厳守事項
## 絶対に守ってください！
### テストコードの品質
- テストは必ず実際の機能を検証すること
- `expect(true).toBe(true)`のような意味のないアサーションは絶対に書かない
- 各テストケースは具体的な入力と期待される出力を検証すること。
- モックは必要最小限にとどめ、実際の動作に近い形でテストすること
### ハードコーディングの禁止
- テストを通すためだけのハードコードは絶対に禁止
- 本番コードに `if (testMode)` のような条件分岐を入れない
- テスト用の特別な値（マジックナンバー）を本番コードに埋め込まない
- 環境変数や設定ファイルを使用して、テスト環境と本番環境を適切に分離すること
### テスト実装の原則
- テストが失敗する状態から始めること (Red-Green-Refactor)
- 境界値、異常系、エラーケースも必ずテストすること
- カバレッジだけでなく、実際の品質を重視すること
- テストケースの名は何をテストしているか明確に記述すること
### 実装前の確認
- 機能の仕様を正しく理解してからテストを書くこと
- 不明な点があれば、仮の実装ではなく、ユーザーに確認すること
CLAUDE.md が設定できたので以下のプロンプトを実行します！
こちらのアプリケーションのtsxファイルのテストコードをVitestを使用して書いてください。
Vitestのインストール、テストコード記述、テスト実行をが走り、2分ほどして処理が完了しました。
実行ログにはテストの実行結果と新規作成ファイル、テストケース一覧が出力されました。
● テストが完成しました。22件のテストがすべてパスしています。
作成したファイル: - vitest.config.ts - Vitest設定
- src/test/setup.ts - テストセットアップ - src/app/page.test.tsx - テストコード
テストケース一覧:
┌──────────────────┬─────────────────────────────────────────────────────────────────────┐
│ カテゴリ │ テスト内容 │
├──────────────────┼─────────────────────────────────────────────────────────────────────┤
│ 初期表示 │ タイトル、3カラム、入力欄、ソートセレクト、空メッセージ │
├──────────────────┼─────────────────────────────────────────────────────────────────────┤
│ タスク追加 │ ボタンクリック、Enterキー、空文字拒否、入力クリア、TODOカラムに追加 │
├──────────────────┼─────────────────────────────────────────────────────────────────────┤
│ タスク削除 │ 削除ボタンで削除 │
├──────────────────┼─────────────────────────────────────────────────────────────────────┤
│ 状態移動 │ TODO→DOING、DOING→DONE、DOING→TODO、DONEの取り消し線 │
├──────────────────┼─────────────────────────────────────────────────────────────────────┤
│ ソート機能 │ 新しい順、古い順、あいうえお順 │
├──────────────────┼─────────────────────────────────────────────────────────────────────┤
│ サマリー表示 │ 非表示/表示、各状態のカウント │
├──────────────────┼─────────────────────────────────────────────────────────────────────┤
│ ヘッダーカウント │ カラムごとのタスク数 │
└──────────────────┴─────────────────────────────────────────────────────────────────────┘
実行コマンド:
npm test # ウォッチモード
npm run test:run # 1回実行
テストコードに目を通しましたが、個人的に無駄なテストはなく網羅的に検証で来ているように感じました！これにて検証がしっかりなされた TODOアプリの完成です！
さいごに
しっかりプロンプトを投げれば必要なもののインストールやテストまで書いてくれる Claude Code すごい！毎回驚かされてばかりで触っていてすごく楽しいです笑
CLAUDE.md はこれからもしっかり使っていき有効活用できるようになりたいなと思いました。
次はどうしようか考えられていませんが、なにか思いついたら記事にしようと思います！！