Claude CodeでTODOアプリを作成｜React・GitHub Pagesで公開する流れ

「Claude Codeでアプリ作成は実際どこまで任せられるのだろう」と思い、今回はTODOリストアプリを作ってみました。この記事では、どのようにしてClaude Codeを使って実現できたのか紹介します。

やりたかったこと

普段の業務では、ちょっとした管理表や確認用のツールがほしい場面があります。

ただ、毎回きちんとしたシステムを作るほどではないことも多いです。

そこで今回は、Claude Codeでは、どこまで形にできるのかを試してみました。

Claude Codeとは？

Claude Codeは、AIと会話しながらコード作成や修正を進められる開発支援ツールです。

今回私が試したのは、Reactを使った小さなWebアプリ作成です。Reactは、Web画面を部品ごとに作るための仕組みです。

専門的な説明よりも、今回は「AIに相談しながら画面付きのアプリを作る」体験として試しました。

指示内容

Claude Codeには、まず「TODOリストアプリを作りたい」と伝えました。

あわせて、次の機能を入れたいと指示しました。

• タスクの追加
• 完了状態の切り替え
• タスクの編集と削除
• 優先度の設定
• フィルタリング
• 完了済みタスクの一括削除
• ブラウザへの保存

細かい画面設計をすべて先に書かなくても、Claude Code側から実装の形を組み立ててくれました。

実装の流れ

最初に、TODOアプリの基本機能をまとめて実装しました。

タスクの追加、完了切り替え、編集、削除、優先度、フィルター、完了済みの一括削除まで、一通りの操作ができる形になりました。

その後、GitHub Pagesで公開できるようにGitHub Actionsを設定しました。

ここで一度つまずきました。ローカル環境では問題なく動いていたのですが、GitHub PagesではURLの途中にリポジトリ名が入るため、配信パスの設定が合わなかったのです。

そこで、GitHub Actions上でビルドするときだけ公開用のパスを使うように修正しました。

完成したTODOリスト

完成したTODOリストでは、基本的なタスク管理はひと通りできました。

タスクを追加し、完了に切り替え、必要があれば編集や削除もできます。

また、優先度を付けたり、表示するタスクを絞り込んだりできます。

小さなアプリではありますが、「業務で使う簡易管理ツールのたたき台」としては十分に形になったと思います。

できたこと

• TODOアプリの基本機能を短時間で形にできた
• ローカルストレージで入力内容を保存できた
• GitHub Pagesへの公開設定まで進められた
• デプロイ時のパス設定の問題に気づけた
• 後追いでもテストを整備できた

Claude Codeは、作りたいものがある程度決まっていると、実装の初速を上げるのに向いていると感じました。

できなかったこと

一方で、うまくできなかったこともあります。

最初の段階では、テストを後回しにしてしまいました。

そのため、あとからテストを書くときに「空文字を入力した場合はどうするか」など、細かい仕様を確認し直す必要がありました。

また、デプロイして初めて本番環境でのパス設定の問題に気づきました。

Claude Codeを使って感じたこと

Claude Codeを使って感じたのは、「丸投げする道具」ではなく「一緒に作業する相手」に近いということです。

やりたいことを伝えると、実装案を出しながら手を動かしてくれます。

一方で、何を優先するか、どこまで作るか、どの仕様を正とするかは人間側が決める必要があります。

特に中小企業で使う場合、いきなり大きな社内システムを作るより、今回のような小さな業務ツールから試すほうが現実的だと思いました。

次に挑戦したいこと

次は、最初からテスト方針も含めてClaude Codeに指示してみたいです。

また、TODOリストを少し業務寄りにして、担当者、期限、ステータス、CSV出力なども試してみたいです。

まずは自分の業務で困っている小さな作業をひとつ選び、Claude Codeで形にしてみるところから始めるのがよさそうです。

関連記事

• Codex Computer UseでPower BI Desktopを自動操作してみた
• Claudeスキル機能で月次報告資料を自動作成してみた
• ブログ作成がぐっと楽になった！Claudeのスタイル機能を使ってみた！