IVYXON
記事一覧に戻る
一般Tips初級🧪 Recipe

「Todoアプリ作って」から始めるClaude Code入門

Claude Codeの使い方入門。「Todoアプリ作って」の一言で始める初心者向けチュートリアル【2026年版】

2026年3月15日3分で読めます

とりあえず投げてみる

難しいこと考えなくていい。Claude Codeを起動して:

Todoアプリ作って。React + TypeScriptで。

これだけで動くアプリが出てくる。マジで。

もうちょい実用的にしたいとき

家計簿アプリ作って。
- Next.js + SQLite
- 収入と支出を登録できる
- 月ごとの集計グラフがある
- 日本語UI

箇条書きで要件を並べるだけ。設計書なんかいらない。

実録:30分でできたもの

Prompt 1: ざっくり依頼

レシピ管理アプリ作って。
自分のレシピを登録して検索できるやつ。
Next.js + SQLiteでシンプルに。

→ プロジェクト作成、DB設計、CRUD画面まで全部やってくれた。

Prompt 2: 気に入らないところを修正

カード型のレイアウトに変えて。
あと写真のURL欄も追加して。

→ UIリファクタリング + DBスキーマ変更まで対応。

Prompt 3: 仕上げ

見た目をもっとおしゃれにして。shadcn/ui使って。

→ コンポーネントインストールからリデザインまで。

計3プロンプト、約30分で実用レベルのアプリが完成。

雑に投げるときのコツ

✅ 技術スタックは指定する

❌ 「アプリ作って」
✅ 「Next.jsでアプリ作って」

スタックを言わないと迷ってJavaScriptの素のHTMLファイルが出てきたりする。

✅ 「動くもの」をまず求める

❌ 「完璧なアプリを設計して」
✅ 「まず動くやつ作って。後で直すから」

最初から完成度を求めると時間がかかる。まず動かして、気に入らないところだけ直すのが最速。

✅ スクショを見せてフィードバック

ここのレイアウトが崩れてる。(スクショ貼付)
この部分のフォントを大きくして。

Claude Codeは画像を理解できるので、スクショ見せて「ここ直して」が通じる。

何が作れる?

実際にClaude Codeに雑投げして作れたもの一例:

  • 📝 Todoアプリ(5分)
  • 💰 家計簿(20分)
  • 🍳 レシピ管理(30分)
  • 📊 CSVビューア(10分)
  • 🎮 マインスイーパー(15分)
  • 📖 Markdown日記アプリ(25分)
  • 🏋️ 筋トレ記録アプリ(30分)

カッコ内は「雑投げ→最低限動く」までの時間の目安。