Claude CodeでTODOの画面を作る

完成イメージを確認しよう

前回の記事で、Next.jsのプロジェクトを立ち上げました。でもまだ中身は空っぽで、ブラウザで開いてもNext.jsの初期画面が出るだけの状態です。今回はここに、自分のTODOアプリの画面を入れていきます。

作るものの完成イメージはこんな感じです。

• 上にテキスト入力欄と「追加」ボタンがある
• 追加したTODOが一覧で並ぶ
• 各TODOにチェックボックスがあり、クリックすると完了になる
• 各TODOに削除ボタンがあり、クリックすると消える

シンプルですよね。でもこの中に「画面を作る」「操作を受け取る」「表示を更新する」というアプリの基本が全部入っています。

それでは、前回セットアップしたプロジェクトを使って、Claude Codeにこの画面を作ってもらいましょう。

Claude Codeに画面を作ってもらおう

Claude Desktopを開いて、前回作った my-todo-app フォルダを開きます。

フォルダを開いたら、Claude Codeにお願いしてみましょう。

Claude Codeがファイルを編集し始めます。途中で「このコマンドを実行していいですか？」と聞かれることがあります。これはClaude Codeがファイルを作ったり変更したりするための許可を求めています。自分のプロジェクト内の作業なので、許可して大丈夫です。

しばらく待つと、コードが出来上がります。開発サーバーがまだ動いていない場合は、Claude Codeに「開発サーバーを起動して」と頼んでください。

ブラウザで http://localhost:3000 にアクセスすると、TODOアプリの画面が表示されるはずです。

実際に使ってみよう

画面が表示されたら、まず動かしてみましょう。

1. テキスト入力欄に「牛乳を買う」と入力して「追加」ボタンを押す
2. 「洗濯物を干す」「メールを返す」も追加してみる
3. 「牛乳を買う」のチェックボックスをクリックして完了にする
4. 「メールを返す」の削除ボタンをクリックして消す

どうですか？追加したTODOが一覧に表示され、チェックや削除ができていますよね。これだけで、もうアプリとして動いています。

気に入らないところを直してもらおう

動くものができたら、次は見た目や使い勝手を調整します。ここがClaude Codeの真骨頂です。

たとえば、こんなことをお願いできます。

Claude Codeがコードを修正すると、ブラウザの画面が自動で更新されます。変わらない場合は、ブラウザの更新ボタンを押してみてください。

思った通りにならなかったら、遠慮なく追加の修正をお願いしましょう。

こんなふうに 「動かす → 気になるところを伝える → 直してもらう」 を繰り返すのが、Claude Codeでのアプリ作りの基本サイクルです。

うまくいかないときは

Claude Codeが作ったコードが一発で完璧に動くとは限りません。画面が真っ白になったり、ボタンを押しても反応しないことがあります。正直に言うと、自分が初めてやったときも追加ボタンを押しても何も表示されなくて「壊れた？」と焦りました。

でも大丈夫。起きていることをそのまま伝えれば、Claude Codeが直してくれます。

エラーの内容がわからなくても問題ありません。「動かない」「表示がおかしい」「ボタンが反応しない」——それだけ伝えれば、Claude Codeが原因を調べて修正してくれます。

もし何度やっても直らない場合は、思い切ってやり直すのもありです。

コードを書くのはClaude Codeなので、やり直しのコストはほぼゼロです。気軽にやり直せるのが、AIと一緒にものづくりをする最大の利点です。

まとめ

今回やったことをおさらいします。

• Claude Codeに TODOアプリの画面 を作ってもらった
• TODOの 追加・一覧表示・完了チェック・削除 が動くようになった
• 見た目の修正も会話だけで完結
• うまくいかないときは 症状を伝えるだけ でOK

ここまでで 「見た目」と「操作」ができるアプリ が完成しました。でも、ひとつ問題があります。ブラウザを閉じて開き直すと、追加したTODOが全部消えてしまいます。

次の記事では、データを保存する仕組みを追加して、画面を閉じてもTODOが残るようにします。