【Claude Code】ToDoアプリケーションを作成してみる

Claude Codeを利用して、ToDoアプリケーションを作成してみました.これは、かなりいい.
Git操作もいけるようですし、Proプランを継続決定ですね!
UIに指定した画像とほぼ同じですし、Firebase Studioより、精度が高い.
他の言語も試してみよう.

Video

Coding

App Operation

Prompt

Image

Text

# アプリ名
ToDo

## 概要
ToDoの作成・一覧ができるWebアプリケーション

## 技術仕様
    言語: JavaScript
    DB　: JSONファイル

## UI
    /home/mniyk/Study/LLM/sample-claude-code/image.png

### 作成セクション
    薄い灰色背景の箇所
    入力フォームとなっている箇所は、inputタグで作成
    日時は、datetime-local
    プルダウンは、selectとoptionで、「低」「中」「高」
    テキストは、text

### 一覧セクション
    薄い青色背景の箇所
    完了の横は、inputタグのcheckboxで作成

## 機能

### 作成セクション
    登録を押下すると、JSONファイルに登録
    優先度は、低が「1」、中が「2」、高が「3」

#### エラーハンドリング
    タイトルが、空文字の場合はエラーメッセージ
    期限日時に、過去の日時を指定した場合はエラーメッセージ

### 一覧セクション
    未完了のToDoの一覧を表示
    表示順は、優先度と期限日時の順番で降順
    完了にチェックを入れたら、非表示にし、完了に更新

#### エラーハンドリング
    なし

## DB
    title      (string): タイトル
    priority      (int): 優先度(低:1、中:2、高:3)
    dueDate (timestamp): 期限日時
    completed (boolean): 完了(未完了:false(デフォルト)、完了:true)

おまけ

インタラクティブモードのhelp

 Claude Code v1.0.24

 Always review Claude's responses, especially when running code. Claude has read access to files in the current directory and can run commands and edit files with
 your permission.

 Usage Modes:
 • REPL: claude (interactive session)
 • Non-interactive: claude -p "question"

 Run claude -h for all command line options

 Common Tasks:
 • Ask questions about your codebase > How does foo.py work?
 • Edit files > Update bar.ts to...
 • Fix errors > cargo build
 • Run commands > /help
 • Run bash commands > !ls

 Interactive Mode Commands:
  /add-dir - Add a new working directory
  /bug - Submit feedback about Claude Code
  /clear - Clear conversation history and free up context
  /compact - Clear conversation history but keep a summary in context. Optional: /compact [instructions for summarization]
  /config - Open config panel
  /cost - Show the total cost and duration of the current session
  /doctor - Checks the health of your Claude Code installation
  /exit - Exit the REPL
  /help - Show help and available commands
  /ide - Manage IDE integrations and show status
  /init - Initialize a new CLAUDE.md file with codebase documentation
  /install-github-app - Set up Claude GitHub Actions for a repository
  /login - Sign in with your Anthropic account
  /logout - Sign out from your Anthropic account
  /mcp - Manage MCP servers
  /memory - Edit Claude memory files
  /migrate-installer - Migrate from global npm installation to local installation
  /model - Set the AI model for Claude Code
  /permissions - Manage allow & deny tool permission rules
  /pr-comments - Get comments from a GitHub pull request
  /release-notes - View release notes
  /review - Review a pull request
  /status - Show Claude Code status including version, model, account, API connectivity, and tool statuses
  /upgrade - Upgrade to Max for higher rate limits and more Opus
  /vim - Toggle between Vim and Normal editing modes