最終回となる第4回目では、TODOアプリをフレームワークを使って作成し、その際生じるエラーへの対処もClaude Codeにやってもらいます。
最後にClaude Codeにテストコードを書いてもらう方法とCLAUDE.mdへのテストの注意点の記載の仕方について解説します。

UIのデバッグをさせる

前回は一番シンプルなやり方でTODOアプリを作成しました。

HTML+CSSとJavaScriptのみのシンプルなアプリケーションだったので、今回はフレームワークを指定して作り直してみましょう。

1回のプロンプトでアプリケーションが立ち上がることも多いのですが、環境やバージョンによって表示バグが出ることがあります。

ここでは初歩的なバグの修正の仕方を試してみましょう。

Next.jsでTODOアプリを作ってみる

今回はフロントエンドフレームワークのデファクトスタンダードとなっている「Next.js」を使うようにClaudeに指示してみます。

Next.jsを使うことでサーバー処理も存在する、拡張性のある、より本格的なアプリケーションを作成することが可能になってきます。

まずは、前回と同じようにディレクトリを作成しgit initコマンドを実行します。

# 「todo-next」というディレクトリを作成
mkdir todo-next
# 「todo-next」ディレクトリに移動
cd todo-next
# Gitの初期化
git init

次にフレームワークを指定して作成を指示してみましょう。

> TODOリストのアプリケーションをNext.jsで生成してください。

今回も数分でアプリケーションを作ってくれました。

表示エラーを修正する

今回、筆者の環境ではアプリケーションの立ち上げ当初、偶然CSSライブラリのバージョンの関係で、CSSが適用されていないような見た目となりました。

そこで見た目の改善をしていきましょう。

今回は、前回作成したTODOアプリの画面のキャプチャを撮影しVS Codeに貼り付けてから「このように修正して」と指示してみたいと思います。

画面の選択範囲をキャプチャする方法はWindows、Mac共にショートカットが用意されています。

WindowsだとWindows+Shift+s、MacだとCommand+Shift+Control+4で画面の選択範囲をクリップボードにコピー可能です。

画面の選択範囲をクリップボードにコピーし、VS Codeなどのエディタの画面上でCtrl+vで貼り付けるとImageファイルが自動で生成されます。

それをそのまま対話モードにドラッグ&ドロップして参照させることが可能です。

# クリップボードから貼り付けた様子

│ > [Image #1] │

⏵⏵ auto-accept edits on (shift+tab to cycle)

どうもCSSが適用されていないように感じられるため、このキャプチャ画像を元に以下のようにClaude Codeに修正を指示しましょう。

│ > [Image #1] CSSが効いてないようです。確認してもらえますか？ │

⏵⏵ auto-accept edits on (shift+tab to cycle)

以下がClaude Codeの返答です。PostCSSの設定に問題があったようです。

⏺ PostCSSの設定に問題があります。正しい設定に修正します。
⏺ PostCSS設定を修正し、必要な依存関係をインストールしました。開発サーバーも正常に起動しています。ブラウザをリロードすると、CSSが正しく適用されるはずです。

修正が終わったようです。ターミナルに以下のように入力してTODOアプリを立ち上げてみましょう。

npm run dev

以下の画面になりました。

まだ思ったように修正ができていないようです。

このままエラーメッセージをコピーするか、再度画面のキャプチャを見せましょう。

> `npm run dev`で起動すると下記のエラーが出ます。 │
[Pasted text #1 +21 lines] │

なお、Claude Codeは長いエラーメッセージやコードスニペットは上記の[Pastedtext #1 +21 lines]のように、テキストで置き換えて閉じておいてくれます。

Claudeからは以下の返答がありました。

⏺ エラーメッセージによると、@tailwindcss/postcssパッケージをインストールする必要があります。
⏺ PostCSS設定を更新して、@tailwindcss/postcssを使用するように変更します。

その後も筆者の環境では、Reactのサーバーとクライアントの描画が異なることで起きるハイドレーションエラーや、TurbopackとTailwind CSSの互換性のエラーが出ました。

Claude Codeに同じようにエラーテキストの内容を貼り付けての指示を何回か繰り返すことで、無事起動しTODOアプリを動かすことができました。

画面、動作ともにバッチリです。

まとめ

デプロイ先の相談や、VercelのライブラリのインストールについてもClaude Codeに指示して実行してもらうことができます。

フレームワークとしてNext.jsを使用したので、Next.jsと相性のいいVercelにアプリをデプロイしています。

今回作ったTODOアプリケーションをVercelにデプロイしたバージョンを以下のURLにアップしていますので参考にしてください。

URL: https://todo-app-six-lilac-86.vercel.app/

テストコードを書いてもらう

次にClaude Codeに「テストコード」を書かせてみましょう。

その中で起きがちな問題と、簡単な解決のコツなどをお伝えします。

CLAUDE.mdにテストの注意点を記載する

テストコードはClaude Codeが作り上げたアプリケーションを安心して動かすために必要です。

しかし、Claude Codeはテストとしてはあまり意味のないコードを書いて通したり、コード内をハードコード（直接データなどをソースコードに書き込むこと）に直したりしてしまうことがあります。

そこでClaudeにテストに対する考え方やルールを適用しておく必要があります。

コード全体に対して重要な事柄なので、~/.claude/CLAUDE.mdに記載し、全てのプロジェクトに適用することをおすすめします。

たとえば、一つの例ですが以下のような内容を記述することで上記のような問題は防ぎやすくなります。

# テストコード作成時の厳守事項
## 絶対に守ってください！
### テストコードの品質
- テストは必ず実際の機能を検証すること
- `expect(true).toBe(true)` のような意味のないアサーションは絶対に書かない
- 各テストケースは具体的な入力と期待される出力を検証すること
- モックは必要最小限に留め、実際の動作に近い形でテストすること
### ハードコーディングの禁止
- テストを通すためだけのハードコードは絶対に禁止
- 本番コードに `if (testMode)` のような条件分岐を入れない
- テスト用の特別な値（マジックナンバー）を本番コードに埋め込まない
- 環境変数や設定ファイルを使用して、テスト環境と本番環境を適切に分離すること
### テスト実装の原則
- テストが失敗する状態から始めること（Red-Green-Refactor）
- 境界値、異常系、エラーケースも必ずテストすること
- カバレッジだけでなく、実際の品質を重視すること
- テストケース名は何をテストしているか明確に記述すること
### 実装前の確認
- 機能の仕様を正しく理解してからテストを書くこと
- 不明な点があれば、仮の実装ではなく、ユーザーに確認すること

さて上記のような記述をユーザールートのCLAUDE.mdに書いた上で、以下のように指示しました。

> こちらのアプリケーションのtsxファイルのテストコードをVitestを使用して書いてください。

このように一言プロンプトを指示するだけでClaude Codeが自律的にエラーを直しながらテストコードを書き加えていってくれます。

その上で以下のように結果を出力してくれました。

⏺ テストコード作成完了
Vitestを使用して、以下のテストコードを作成しました：
作成したテストファイル
1. components/TaskForm.test.tsx - タスク追加フォームのテスト（10件）
- 入力フィールドの表示確認
- タスク追加機能
- バリデーション
- IME対応のEnterキー処理
- 期限のクリア機能
2. components/TaskItem.test.tsx - タスクアイテムのテスト（12件）
- タスク情報の表示
- 完了状態のスタイリング
- 期限の色分け表示
- 編集機能
- 削除機能（確認ダイアログ含む）
3. components/TaskList.test.tsx - タスクリストのテスト（4件）
- 空状態の表示
- タスクの表示
- コンポーネント間のprops受け渡し
4. components/TaskFilter.test.tsx - フィルターのテスト（7件）
- チェックボックスの動作
- コールバック関数の呼び出し
5. hooks/useTodos.test.ts - カスタムフックのテスト（7件）
- 初期状態
- データロード
- CRUD操作
- フィルタリング
テスト結果
- 全40件のテストが成功
- コンポーネントのカバレッジ: 99.02%
- フックのカバレッジ: 97.22%

無事テストコードを作成し、高いカバレッジを実現できました。

まとめ

今回は、TODOアプリをフレームワークを使って作成し、エラーの初歩的な解決方法を解説しました。

その後、Claude Codeにテストコードを書いてもらう方法と、Claudeがテストコードを自力で記述する際にCLAUDE.mdに記載すべき注意点も解説しました。

12月5日（金）に発売予定の書籍『Claude CodeによるAI駆動開発入門』では、Claude Codeを使って「AI駆動開発」するためのさらに詳しい解説や使いこなすためのコツをハンズオン形式で詳しく解説しています。

ぜひ書籍の方も手に取ってみてください。