【実践】ToDoアプリを30分で作る ── AIと一緒にJavaScript入門
この記事で作るもの
機能的なToDoアプリを30分で。
完成する機能：
- タスクの追加（テキスト入力 + Enterで追加）
- タスクの完了（クリックで取り消し線）
- タスクの削除
- データの保存（ブラウザを閉じても消えない）
- 残タスク数の表示
必要な事前知識: なし
ステップ1: HTMLファイルを作る
フォルダを作ってClaude Codeを起動：
mkdir todo-app
cd todo-app
claude指示：
シンプルなToDoアプリをHTML1ファイルで作ってください。
機能：
- テキスト入力欄 + 追加ボタン
- Enterキーでも追加できる
- タスクをクリックすると完了（取り消し線）
- 各タスクに削除ボタン
- 残りのタスク数を表示
- localStorageでデータ保存（リロードしても消えない）
デザイン：
- 最大幅500px、中央寄せ
- 角丸、影付きのカード風
- 完了タスクはグレーアウト
- 削除ボタンは赤
- フォント: sans-serif 💡
HTML1ファイルに収める理由
初めてのプロジェクトは、ファイルが1つだけのほうが理解しやすい。HTML・CSS・JavaScriptを1つのファイルにまとめることで、全体像が見える。
ステップ2: 動かしてみる
AIが index.html を生成したら、ブラウザで開く：
open index.html # Mac
start index.html # Windowsタスクを追加して、完了して、削除してみよう。もうアプリが動いている。
ステップ3: カスタマイズする
デザインを変える
背景色をダークモード（#1a1a2e）にして。
テキストは白、アクセントカラーは#e94560にして。機能を追加する
タスクにカテゴリ（仕事/プライベート）を選べるドロップダウンを追加して。
カテゴリ別にフィルターできるボタンも追加して。タスクに期限（日付）を設定できるようにして。
期限が過去のタスクは赤色で表示して。 ℹ️
1つずつ追加する
機能は1つずつ追加して動作確認。まとめて追加するとバグの原因がわからなくなる。
ステップ4: 学びを振り返る
AIが書いたコードを眺めてみよう。完全に理解する必要はないが、何となく何をしているかがわかるはず。
このコードの中で、以下の部分を教えて：
1. タスクを追加している処理
2. localStorageに保存している処理
3. タスクを表示している処理
それぞれ初心者にわかるように説明して。 💡
コードを読む必要はないが、読むと楽しい
バイブコーディングではコードを書く必要はない。でも「AIが何をしているか」をざっくり理解すると、より良い指示が出せるようになる。
発展: もっと高度にしたいなら
| やりたいこと | AIへの指示例 |
|---|---|
| ドラッグで順番変更 | 「タスクをドラッグ＆ドロップで並べ替えられるようにして」 |
| サブタスク | 「タスクの中にサブタスクを追加できるようにして」 |
| テーマ切り替え | 「ダークモードとライトモードを切り替えるボタンを追加して」 |
| データ共有 | 「JSONでエクスポート/インポートできるようにして」 |
まとめ
30分で作ったToDoアプリだが、実は以下のプログラミングの基本が全て含まれている：
- 入力 – テキストフィールドからの値取得
- 処理 – データの追加・変更・削除
- 出力 – 画面への表示
- 保存 – localStorageでの永続化
- イベント – クリック、Enter、ボタン操作
これらを「AIに作ってもらいながら学ぶ」のがバイブコーディングの醍醐味だ。
次の記事: もう少し大きなプロジェクトに挑戦してみよう。
