こんにちは、かっぺいです。
Claude Codeの使い方はわかった。頼み方もわかった。CLAUDE.mdの意味もわかった。でも、実際に何を作ればいいのかがわからない。あなたも、そこで手が止まっていませんか？
正直に言う。最初のアプリは、地味でいい。むしろ地味なくらいがちょうどいいんです。派手なアプリを最初から目指すと、途中で何が起きているかわからなくなって、結局怖くなって手を止めてしまう。
この記事では、ToDoリストという一番シンプルなアプリを例に、Claude Codeでの開発の流れを最初から最後まで体験します。実際に手を動かすときのイメージが掴めるはずです。
この記事でわかること
- 最初のミニアプリになぜToDoリストが向いているのか
- 企画から完成までの実際の流れ
- Claude Codeへの頼み方の実例
- 作った後にやるべきこと
①なぜ最初のアプリはToDoリストがいいのか
先に結論
ToDoリストは「追加・表示・削除」という3つの基本動作しかない。この3つは、どんなアプリにも共通する土台。最初に体で覚えておくと、あとの応用が全部ラクになります。
家計簿でも、メモアプリでも、習慣トラッカーでも、根っこにあるのは同じ動きです。データを入れる、データを見る、データを消す。ToDoリストはこの3つを一番シンプルな形で練習できます。
デザインを凝る必要もない。ボタンが並んでいるだけの見た目で十分です。まずは動くものを作り切る経験が、次のアプリへの自信になります。
②企画：何を作るか、3行で決める
いきなりClaude Codeに向かう前に、作りたいものを3行くらいで整理しておくと、後の頼み方が驚くほどスムーズになります。
企画メモの作り方
- 何をするアプリか（例：やることを追加・完了・削除できる）
- 誰が使うか（例：自分ひとりが毎日使う）
- どこで動かすか（例：ブラウザで開くだけでいい）
これだけで十分です。仕様書を作る必要はありません。メモ帳に3行書くだけで、次のステップに進めます。
③Claude Codeへの頼み方の実例
練習用フォルダを作ってから、Claude Codeにこう頼みます。
やることを追加・完了・削除できる、シンプルなToDoリストアプリを作りたいです。
ブラウザで開くだけで動くものにしてください。
まず、どんな技術構成で作るか提案してもらえますか？
まだファイルは編集しないでください。いきなり「作って」と言わず、まず提案してもらう。ここがポイントです。Claude Codeは提案の理由も説明してくれるので、専門用語が出てきたら、その場で「それって何？」と聞き返せば大丈夫です。
最初は提案の8割が理解できなくても平気です。「それ、初心者向けに言い換えて」と聞けば、ちゃんと言い換えてくれます。
提案に納得したら、次はこう頼みます。
その構成で進めてください。
まずは「追加」だけができる状態を作ってもらえますか？
完了・削除は、追加ができてから追加で頼みます。一気に全部を頼まない。追加ができたら動作確認、次に完了機能、また確認、最後に削除機能。この刻み方が、初心者が迷子にならない一番のコツです。
④動いたら、まず触ってみる
機能ができたとClaude Codeが報告してきたら、すぐに次を頼まず、まず自分で触ってみましょう。
触ってみるときに見ること
- 思った通りに追加できるか
- 見た目は許容範囲か（完璧でなくていい）
- エラーが出ていないか
- 次に直したいところはどこか
気になるところがあれば、そのまま伝えればいい。「追加ボタンを押した後、入力欄が空にならないのが気になる」くらいの粒度で十分伝わります。
⑤完成したら、開発ログとして記事にする
ToDoリストが動くようになったら、そこで終わりにしなくていい。作る過程そのものが記事のネタになります。
何につまずいたか。どう頼んだら解決したか。次に何を作りたいか。これをそのままブログに書けば、あなたと同じところで迷っている人の助けになります。
まとめ：まずは「追加」だけを動かす
最初から完璧なアプリを目指さなくていい。ToDoリストの「追加」機能だけを、まず動かしてみてください。
そこから先は、Claude Codeと一緒に、少しずつ育てていけばいい。完成させることより、まず動かし切ることが最初のゴールです。
参考
- Claude Code Common workflows：https://code.claude.com/docs/en/common-workflows