Claude Codeで簡単なToDoアプリを作成してみた

2026/10/2

自分で作成した箇条書きの要求を基にAI（Claudeチャット）に要求仕様書（SPEC.md）を作らせ、それをClaude Codeに渡してToDoアプリを作成してみた記録です。
仕様書づくり → 実装 → 動作確認の3ステップで、実際に使ったファイルやコマンドをまとめます。

完成したToDoアプリ

完成したToDoアプリのPC表示。左にタブ一覧、右にタスクリストが並ぶ2カラム画面
※デモ用のデータで表示しています
スマートフォン表示。上部に横スクロールのタブバー、下にタスクリストが並ぶ1カラム画面
※デモ用のデータで表示しています
  • タスクを「仕事」「プライベート」などのタブ（カテゴリ）ごとに管理
  • タスクの追加・編集・削除、完了チェック、ドラッグ＆ドロップでの並び替え
  • 優先度（高・中・低）の色分け、期限切れタスクの強調表示
  • フィルタ（すべて／未完了／完了済み）とキーワード検索
  • PC・スマホ両対応のレスポンシブデザイン、ダークモード
  • メールアドレスとパスワードでのログイン（ユーザーごとにデータを分離）

作成プロセス

  1. 要求仕様書の作成：箇条書きの要求をClaudeに渡し、仕様書 SPEC.md を作らせる
  2. 実装：SPEC.md をClaude Codeに読み込ませて、バックエンド → フロントエンドの順に実装させる
  3. 動作確認：ブラウザ（PC・スマホ）とテストで動作を確認する

開発環境と技術スタック

項目内容
OS / シェルWindows / PowerShell
バックエンドPython 3.11、FastAPI、SQLAlchemy 2.0、Pydantic v2、Uvicorn
データベースSQLite（開発用）→ PostgreSQLにも対応
フロントエンドReact 19 + TypeScript、Vite、Tailwind CSS v3、Radix UI、TanStack Query、dnd-kit
認証bcrypt（パスワードハッシュ）+ JWT
テストpytest + FastAPIのTestClient

要求プロンプトから要求仕様書（SPEC.md）を作る

Claudeに渡した要求

Claudeに伝えた要求は、次の6つだけです。チャット機能で下記要求でToDoアプリを作成してと伝えました。

  • PC・スマホの両方で使える
  • バックエンドはFastAPI
  • フロントエンドはおまかせ
  • 見た目は販売できるレベルのモダンさ
  • データはDBに保存（最初はSQLite）
  • タスクをタブで管理できる

できあがった仕様書の中身

この要求から、Claude Docsの仕様書として次の内容が作られました。最後にMarkdown形式の SPEC.md としてエクスポートしています。

  • 要求事項一覧と技術スタック（フロントエンドは React + TypeScript + Tailwind CSS + shadcn/ui を提案）
  • 機能要件（タブ管理・タスク管理・検索・件数バッジなど）
  • 画面設計（768px を境にPCは2カラム、スマホは1カラム）
  • データベース設計（tabs / tasks テーブル）
  • API設計（REST、/api 配下）
  • ディレクトリ構成と非機能要件

API設計はこのような表で定義されていました（タスク部分）。

メソッドパス説明
GET/api/tabs/{tab_id}/tasks指定タブのタスク一覧（status・sort対応）
POST/api/tasksタスク新規作成
PUT/api/tasks/{task_id}タスク更新
PATCH/api/tasks/{task_id}/toggle完了／未完了の切り替え
DELETE/api/tasks/{task_id}タスク削除

あいまいな点はAIが確認したうえで仕様書を作成してくれた

「タブで管理」の要求に関しては、なんのタブをさしているのかがあいまいな表現となっていました。
Claudeはタブの解釈を複数の選択肢で私に確認したうえで仕様書を作成してくれました。

ポンコツプログラマ

要求があいまいでも、誤った解釈のまま進めないところはClaudeの強みだと思います！
業務ではGeminiを使用していますが、確認しないでとんちんかんな回答をしてくることが多々あるような気がします・・・。

SPEC.mdを読み込ませて実装する

実装の進め方

  1. プロジェクトフォルダの直下に SPEC.md を置く
  2. フォルダで claudeClaude Codeを起動しプロジェクトフォルダを開く
  3. 「@SPEC.md の仕様に従って実装して」と、@でファイルを指定して指示
  4. まず backend/ を実装 → /docs（Swagger UI）でAPIを確認
  5. 続けて frontend/ を実装 → ブラウザで画面を確認
  6. PC・スマホで表示を確認しながら、気になる点を修正させる
cd ToDoApp
claude

できあがった構成

backend/
  app/
    main.py        FastAPIエントリポイント、CORS、ルーター登録
    database.py    DB接続（SQLite / PostgreSQL切替）
    models.py      SQLAlchemyモデル（User, Tab, Task）
    schemas.py     Pydanticスキーマ
    crud.py        DB操作ロジック
    security.py    パスワードハッシュ化・JWT発行
    deps.py        認証の依存関数
    routers/       auth.py / tabs.py / tasks.py
  tests/           pytestのテスト
frontend/
  src/
    api/           fetchラッパー、API呼び出し
    hooks/         TanStack Queryのカスタムフック
    components/    TabBar, TaskList, TaskItem, TaskModal など

仕様書から変わったところ・追加したところ

  • Viteのテンプレートが React 19 を入れたので、仕様書の React 18 ではなく 19 を採用
  • shadcn/ui のCLIは対話式で自動化しにくいため、同じ構成（Radix UI + Tailwind）を手書きで用意
  • Tailwind CSS は仕様書の設定ファイル形式に合わせて v3 を指定してインストール
  • 仕様書になかったログイン機能（メールアドレス + パスワード、JWT）を追加
  • SQLiteからPostgreSQLへの移行スクリプトと、PostgreSQL接続への対応を追加

実装で押さえていたポイント

  • DBの切り替え：環境変数 DATABASE_URL でSQLiteとPostgreSQLを切り替え
  • カスケード削除：タブを消すと中のタスクも消える。SQLiteは外部キー制約が既定で無効なので、接続時に PRAGMA foreign_keys=ON を実行
  • 部分更新：メモや期限日を「空に戻す」操作のため、Pydanticの model_fields_set で実際に送られた項目だけを更新
  • ユーザーごとのデータ分離：他人のタブ・タスクにアクセスすると404を返し、存在の有無も分からないようにする
  • 楽観的更新：完了チェックや並び替えは画面を先に更新してから通信し、操作の反応を速くする

つまずいたところ

  • Node.jsが入っていなかった：winget install OpenJS.NodeJS.LTS でインストール
  • インストール直後に npm が見つからない：開いていたターミナルにPATHが反映されていなかった。新しいターミナルを開けば解決
  • PowerShellで npm.ps1 がブロックされる：スクリプトの実行ポリシーが原因。npm.cmd を直接呼ぶか、実行ポリシーを見直す
winget install OpenJS.NodeJS.LTS

動作確認

起動コマンド

バックエンドとフロントエンドを、それぞれ別のターミナルで起動します。

# バックエンド
cd backend
.venv\Scripts\python -m pip install -r requirements.txt
.venv\Scripts\python -m uvicorn app.main:app --reload

# フロントエンド
cd frontend
npm install
npm run dev

開発中は、Viteのプロキシ機能で /api へのアクセスをバックエンド（http://localhost:8000）に転送しているので、CORSの設定を気にせずに動かせます。

画面の確認

ToDoアプリのログイン画面。メールアドレスとパスワードの入力欄がある
※デモ用のデータで表示しています
タスク追加のモーダル。タイトル、メモ、優先度、期限日、タブを入力できる
※デモ用のデータで表示しています
ダークモードに切り替えたToDoアプリの画面
※デモ用のデータで表示しています
  • ログイン後、タブの追加・名前変更・並び替えができる
  • タスクの追加・編集・削除、完了チェックで取り消し線が付く
  • 期限切れのタスクは赤く強調される
  • 右上のボタンでダークモードに切り替わる
  • スマホでは上部のタブバーを横にスクロールできる

スマホの実機で確認するときは、npm run dev -- --host で起動し、表示される Network: のURLをスマホのブラウザで開きます。

テストの実行

cd backend
.venv\Scripts\python -m pytest
28 passed

タブ・タスクのCRUD、ログイン、ユーザー間のデータ分離などをテストする28件がすべて通りました。

やってみて感じたこと

要求仕様書の作成も生成AIにお願いすることで曖昧な要求をなくすことができるのと、観点としてなかった非機能要求も作ってくれるので自分が作りたいものが精度良く作ることができたと思います。もっといいものを作ろうと思ったら要求仕様書作成の段階で生成AIで壁打ちして作り込んだ上で実装させることでより良いものができると思います！

まとめ

  • 箇条書き6項目の要求から、Claudeで要求仕様書（SPEC.md）を作成
  • SPEC.mdをClaude Codeに読み込ませ、FastAPI + React のToDoアプリを実装
  • ブラウザ（PC・スマホ）とpytest（28件）で動作を確認

今回作成したプログラムのソースコードは、GitHubで公開しています。
👉 【todo-app】（GitHub）

次の記事ではつくったプログラムをVPS上にデプロイし、Webサービスとして常時稼働させる方法を紹介したいと思います！

コメント

タイトルとURLをコピーしました