作ってみる

この章でわかること: 題材のオリジナル機能つきTODOアプリを、Claude Code に指示して実際に作り、手元のプレビューで確認するまで。

ステップ

作業フォルダを用意して Claude Code で開く

分かりやすい場所(例: 書類/my-todo)に空フォルダを作り、Claude Code デスクトップ版でそのフォルダを開きます(環境構築の最後で試しに作ったものは動作確認用。ここでは新しい空フォルダで作り直します)。
最初の指示を出す(まず基本のTODO)

いきなり全部ではなく、まず動く基本形から。

Next.js で、シンプルなTODOアプリを1ページ作って。できることは「タスクを追加する」「完了のチェックを付ける」「削除する」の3つ。スマホで片手でも使いやすいレイアウトに。データはいったんブラウザ内(localStorage)に保存して、再読み込みしても消えないように。まずは動く形を見せて。
提案を確認して進める

Claude Code がファイルを作り、必要なコマンドの実行許可を求めてきます。内容をざっと見て、問題なければ承認します。判断に迷ったら「これは何をするコマンド?」と聞いてOKです。
プレビューで動きを見る

「開発サーバーを起動して、プレビューを見せて」と頼みます。表示されたら、実際にタスクを追加・完了・削除して試します。リロードしても残れば成功です。
オリジナル機能を1つ足す

題材で選んだ自分用の機能を頼みます。例(「今日完了した数」):

完了したタスクのうち今日完了した数を、画面の上に大きく表示して。 1つ完了するたびに増えるようにして、進捗が一目で伝わる見た目にして。

ほかにも「3日たった未完タスクに『⚠ 停滞中』を付けて」など、自分のペインに合わせて頼みましょう。気になる点は会話で微調整します。
区切りでコミットする

いい状態になったら「ここまでをコミットして。変更内容がわかるメッセージで」と頼みます。これで安全に巻き戻せる地点ができます(Git とは)。

うまくいかないとき

チェック(次に進む前に)

タスクを追加・完了・削除でき、リロードしても残る
自分で選んだオリジナル機能が動いている
スマホ幅(ブラウザを細くする)でも崩れず使える

できたら、公開して共有するへ進みましょう。

なぜ大事か

一度この流れを通すと、「指示する→見る→直す」のリズムが体に入ります。次からは題材が変わっても、同じリズムで作れます。