AIと一緒にToDoアプリを15分で作る

料理でいうと、これまで「卵の割り方」「フライパンの熱し方」を一つずつ練習してきましたよね。今回はそれら全部を組み合わせて、1品のオムライスを完成させる――そんな総仕上げの演習です。

ただし、今回はAIという優秀なアシスタント料理人と一緒に作ります。あなたは「こういう料理を作りたい」と伝える係、AIは実際に手を動かしてくれる係です。15分でピシッと1品仕上げましょう。

この演習は「いままでのAtomをある程度進めている人」向けです。次の3つが準備できているか確認してください。

• AIコーディングツールが使える状態になっている
  • Claude Code（ターミナルで動くAIアシスタント）、Cursor（AIが組み込まれたコード編集ソフト）、ChatGPT（ブラウザで使えるAI）のどれか1つでOKです
• ブラウザ（Chrome、Safari などインターネットを見るアプリ）で画面を開いて確認できる
• データの基本操作の意味を知っている
  • 追加・読み取り・更新・削除の4つ。頭文字をとって「CRUD（クラード）」と呼ばれます

もし「CRUDって何？」という場合は、先に「Supabaseにデータを書き込む」Atomを復習してから戻ってきてくださいね。

どのAIツールを使うかで、指示の出し方が少し変わります。自分が使いやすいものを1つ選んでください。

おすすめ: Claude Code か Cursor なら、コードの保存やファイル操作もAIがやってくれるので手間が少ないです。

まずは下ごしらえです。AIツールの入力欄に、次の指示をそのままコピー＆ペーストして送信してください。

next.js の app router を使った ToDo アプリのひな形を作ってください。
TypeScript は使わず、JavaScript だけでお願いします。
スタイルは CSS Modules を使って、シンプルで見やすいデザインにしてください。

これは「Next.js（ネクストジェイエス＝Webアプリを作るための道具セット）で、ToDoアプリの土台を作って」とAIにお願いする指示文です。

AIが返してくれるもの

• app/page.js ── アプリのメイン画面
• app/layout.js ── 画面の外枠（ヘッダーやフッターの位置決め）
• app/page.module.css ── 見た目のデザイン指定

Claude Code や Cursor なら自動でファイルが作られます。ChatGPTの場合は、返ってきたコードをそれぞれのファイル名で保存してください。

ポイント: AIが「他にも質問はありますか？」と聞いてきたら、「いいえ、次のステップに進みます」と答えればOKです。

土台ができたら、次は「タスクの追加・完了・削除」ができるように指示を出します。

次の指示文をそのままAIに送ってください。

このToDoアプリに、次の3つの機能を追加してください。
1. テキスト入力欄にタスク名を書いて「追加」ボタンを押すと、リストに表示される
2. タスクをクリックすると完了状態になり、取り消し線とグレー文字になる（もう一度クリックで元に戻る）
3. 各タスクの右にゴミ箱ボタンをつけて、押すとタスクが削除される
見た目は、追加ボタンを青色、ゴミ箱ボタンを赤色にしてください。

良い指示の出し方・悪い指示の出し方

良い例（具体的で分かりやすい）:

• 「タスクの追加ボタンを押したら、入力欄が空になるようにして」
• 「完了したタスクはグレーの取り消し線を付けて、背景を薄いグレーにして」
• 「タスクが0個のときは『タスクはまだありません』と表示して」

悪い例（曖昧で伝わらない）:

• 「いい感じにして」← 何をどうしてほしいのかAIにも伝わりません
• 「もっとオシャレに」← 「オシャレ」の基準が分からないので、色やフォントなど具体的に伝えましょう

コツ: 同僚にメモを渡すつもりで「誰が読んでも同じ結果になる言葉」で書くと上手くいきます。

コードができたら、実際にブラウザで動くか確かめます。

開発サーバーを起動する

AIに次の指示を送ってください。

開発サーバーを起動して、ブラウザで確認できるようにしてください。

開発サーバー（＝あなたのパソコン上だけで動く、テスト用の仮想Webサーバー）が立ち上がったら、ブラウザで http://localhost:3000 を開きます。

ChatGPTを使っている場合: AIは自動でサーバーを起動できません。ターミナル（黒い画面）を開いて、プロジェクトのフォルダに移動してから npm run dev と打ち込んでEnterキーを押してください。

チェックリストで確認する

次の4つすべてに「はい」と言えれば、あなたのToDoアプリは完成です！

• テキスト入力欄にタスク名を書いて「追加」ボタンを押すと、リストに表示される
• タスクをクリックすると取り消し線がつく（もう一度クリックで元に戻る）
• ゴミ箱ボタンを押すとタスクが消える
• ページをリロード（再読み込み）しても画面が壊れない（※データが消えるのは正常です）

1つでも「いいえ」がある場合: AIに「〇〇が動きません。修正してください」とそのまま伝えてください。AIが原因を調べて直してくれます。

完成した画面の証拠として、ブラウザのスクリーンショット（＝画面の写真。スマホで言う「スクショ」と同じです）を撮りましょう。

良いスクリーンショットの撮り方

良い例:

• タスクが3つ以上追加されていて、うち1つは完了状態（取り消し線つき）の画面
• ブラウザのアドレスバー（localhost:3000）も見えている

悪い例:

• タスクが1つもない空っぽの画面 ← アプリが動いている証拠にならない
• 画面の一部しか写っていない ← 全体が分からない

スクリーンショットの撮り方

• Mac: Command + Shift + 3（画面全体）または Command + Shift + 4（範囲選択）
• Windows: Windows + Shift + S（範囲選択）または Print Screenキー（画面全体）

よくあるトラブルと、AIへの伝え方をまとめました。

一番大切なコツ: 分からなくなったら、今の状況をありのままAIに伝えること。「〇〇というエラーが出ました」「画面が〇〇になっています」と書けば、AIが原因を特定して直してくれます。完璧な説明でなくて大丈夫です。

おつかれさまでした！ AIという強力なパートナーと一緒に、短い時間でWebアプリを1つ完成させることができました。

今回やったことを振り返ると:

1. AIに土台を作ってもらった（プロジェクト生成）
2. 機能を具体的に指示した（追加・完了・削除）
3. 自分の目で動作を確かめた（チェックリスト確認）
4. 成果物を記録した（スクリーンショット）

この「伝える → 確認する → 記録する」の流れは、今後どんなアプリを作るときにも使える基本パターンです。次はもっと大きなアプリや、自分だけのオリジナル機能にも挑戦してみましょう！