【実践】ToDoアプリを30分で作る ── AIと一緒にJavaScript入門
この記事で作るもの
機能的なToDoアプリをAIの力を借りて30分で完成させる。プログラミング経験ゼロでも大丈夫。AIに指示を出すだけで、本格的に動くWebアプリが手に入る。
完成する機能一覧
| 機能 | 説明 |
|---|---|
| タスク追加 | テキスト入力 + Enterキーまたはボタンで追加 |
| タスク完了 | クリックで取り消し線が表示される |
| タスク削除 | 各タスクの削除ボタンで個別に消せる |
| データ保存 | ブラウザを閉じても消えない（localStorage） |
| 残タスク数表示 | 未完了タスクの数がリアルタイムで更新される |
最終的にはカテゴリ分類、期限設定、ドラッグ並べ替えまで拡張していく。
必要な事前知識: なし。ターミナルの基本操作だけ知っていれば十分。
全体の流れ
まずは完成までの全体像を確認しよう。
環境準備
フォルダ作成とAIツール起動
2分基本機能の生成
AIに指示してToDoアプリの土台を一発生成
3分動作確認
ブラウザで開いて追加・完了・削除をテスト
2分デザインカスタマイズ
ダークモードやカラー変更で見た目を整える
5分カテゴリ機能追加
仕事/プライベートの分類とフィルター
5分期限機能追加
日付設定と期限切れの赤色表示
5分ドラッグ並べ替え
タスクの順番をドラッグ&ドロップで変更
5分学びの振り返り
コードの解説をAIに聞いて理解を深める
3分ツールの選択: Bolt vs Claude Code
このハンズオンはBoltとClaude Codeのどちらでも進められる。それぞれの特徴を把握して自分に合ったほうを選ぼう。
| 比較項目 | Bolt（ブラウザ型） | Claude Code（ターミナル型） |
|---|---|---|
| 起動方法 | ブラウザでbolt.newにアクセス | ターミナルでclaudeコマンド |
| プレビュー | 画面内にリアルタイム表示 | 自分でブラウザを開いて確認 |
| ファイル管理 | 自動（クラウド上） | ローカルフォルダに保存 |
| 向いている人 | すぐ試したい初心者 | ローカル開発を学びたい人 |
| 無料枠 | 日ごとのトークン制限あり | Claude Proプラン必要 |
どちらを選んでもOK
この記事ではClaude Codeでの手順をメインに解説するが、Boltの場合は「ターミナル操作」の部分をスキップして、チャット欄に同じ指示を貼り付ければ同じ結果が得られる。
ステップ1: 環境を準備する
Claude Codeの場合
フォルダを作ってClaude Codeを起動する。
mkdir todo-app
cd todo-app
claudeBoltの場合
- ブラウザで bolt.new を開く
- チャット欄が表示されるので、そのまま指示を入力すればOK
フォルダ名は英語で
日本語のフォルダ名は後々トラブルの原因になる。プロジェクト名は必ず英語（半角英数字とハイフン）でつけよう。
ステップ2: 基本機能を一発生成する
以下の指示をそのままコピペしてAIに渡す。
シンプルなToDoアプリをHTML1ファイルで作ってください。
機能：
- テキスト入力欄 + 追加ボタン
- Enterキーでも追加できる
- タスクをクリックすると完了（取り消し線）
- 各タスクに削除ボタン
- 残りのタスク数を表示
- localStorageでデータ保存（リロードしても消えない）
デザイン：
- 最大幅500px、中央寄せ
- 角丸、影付きのカード風
- 完了タスクはグレーアウト
- 削除ボタンは赤
- フォント: sans-serifHTML1ファイルに収める理由
初めてのプロジェクトは、ファイルが1つだけのほうが理解しやすい。HTML・CSS・JavaScriptを1つのファイルにまとめることで、全体像が一目で把握できる。慣れてきたらファイルを分割すればよい。
AIが生成するコードは約150〜200行程度。たった1回の指示で、これだけの機能が揃ったアプリが出来上がる。
ステップ3: 動かして確認する
AIが index.html を生成したら、ブラウザで開く。
open index.html # Mac
start index.html # WindowsBoltの場合はプレビュー画面に自動で表示される。
確認チェックリスト
以下をすべて試して、正しく動作するか確認しよう。
- テキストを入力して「追加」ボタンをクリック → タスクが表示されるか
- テキストを入力してEnterキーを押す → タスクが追加されるか
- 空欄のまま追加ボタンを押す → 追加されない（バリデーション）か
- タスクをクリック → 取り消し線がつくか
- 削除ボタンをクリック → タスクが消えるか
- ブラウザをリロード → タスクが残っているか
- 残タスク数が正しく更新されるか
うまく動かない場合
AIの生成結果が完璧でないことは普通にある。動かない場合はエラー内容をそのままAIに伝えよう。「ブラウザのコンソールにエラーが出ている」「追加ボタンを押しても反応しない」など、具体的な症状を伝えるのがコツ。
ステップ4: デザインをカスタマイズする
基本機能が動いたら、見た目を自分好みに変えていこう。
ダークモードにする
背景色をダークモード（#1a1a2e）にしてください。
テキストは白（#eee）、アクセントカラーは#e94560。
追加ボタンはアクセントカラーで角丸に。
完了タスクは opacity: 0.5 にして。カラーバリエーション例
好みに合わせて色を変えてみよう。AIへの指示で色コードを指定するだけ。
| テーマ名 | 背景色 | アクセント色 | 雰囲気 |
|---|---|---|---|
| ダーク | #1a1a2e | #e94560 | クールで落ち着いた印象 |
| オーシャン | #0a192f | #64ffda | 海のような爽やかさ |
| フォレスト | #1b2d1b | #a8e6cf | 自然で穏やかな印象 |
| ミニマル | #ffffff | #333333 | シンプルで読みやすい |
| サンセット | #2d1b2d | #ff6b6b | 温かみのある雰囲気 |
デザイン変更は気軽に試そう
バイブコーディングなら「やっぱり元に戻して」の一言で戻せる。失敗を恐れずどんどん試すのが上達のコツ。
ステップ5: カテゴリ機能を追加する
ここからが本番。基本のToDoアプリに機能を段階的に追加していく。必ず1つずつ追加して、そのたびに動作確認するのが鉄則。
AIへの指示（コピペ用）
タスクにカテゴリ機能を追加してください。
追加する内容：
- タスク入力欄の横にカテゴリ選択のドロップダウンを追加
- カテゴリ: 「仕事」「プライベート」「買い物」「その他」
- 各タスクにカテゴリ名をバッジ（小さいラベル）で表示
- カテゴリ別のフィルターボタンを上部に設置（「すべて」「仕事」「プライベート」「買い物」「その他」）
- 選択中のフィルターボタンはアクセントカラーでハイライト
- localStorageの保存データにもカテゴリ情報を含める動作確認のポイント
- カテゴリを選んでタスクを追加すると、バッジが表示される
- フィルターボタンを押すと、該当カテゴリのタスクだけ表示される
- 「すべて」ボタンで全タスクに戻る
- リロードしてもカテゴリ情報が保持されている
1つずつ追加する理由
機能をまとめて追加すると、バグが出たときに原因の特定が難しくなる。「カテゴリを追加 → 確認 → 期限を追加 → 確認」と段階的に進めよう。プロの開発者もこのやり方で進める。
ステップ6: 期限機能を追加する
AIへの指示（コピペ用）
タスクに期限（日付）機能を追加してください。
追加する内容：
- タスク入力欄の横に日付ピッカー（input type="date"）を追加
- 期限は任意（設定しなくてもOK）
- タスク表示に期限日を小さく表示（例: 「〜4/10」）
- 期限が今日以前のタスクは赤色のテキストまたは赤いバッジで「期限切れ」と表示
- 期限が今日のタスクはオレンジ色で「今日まで」と表示
- 期限が明日のタスクは黄色で「明日まで」と表示
- localStorageの保存データにも期限情報を含める動作確認のポイント
- 期限を設定してタスクを追加すると日付が表示される
- 期限なしでもタスクを追加できる
- 過去の日付を設定すると赤色表示になる
- リロードしても期限情報が保持されている
ステップ7: ドラッグ&ドロップで並べ替え
AIへの指示（コピペ用）
タスクをドラッグ&ドロップで並べ替えられるようにしてください。
要件：
- 各タスクの左端にドラッグハンドル（≡ アイコン）を追加
- ドラッグ中のタスクは半透明にする
- ドロップ先にはハイライト線を表示
- 並べ替え後の順序もlocalStorageに保存
- HTML5のDrag and Drop APIを使用（外部ライブラリ不要）
- モバイルでも動くようにtouchイベントも対応動作確認のポイント
- ドラッグハンドルをつかんでタスクを移動できる
- ドラッグ中に視覚的フィードバックがある
- 並べ替えた順番がリロード後も維持される
- 他の機能（完了・削除・カテゴリ・期限）が引き続き正しく動く
既存機能が壊れていないか確認
新しい機能を追加したら、必ず以前の機能もテストしよう。ドラッグ並べ替えを追加した後に「削除が動かなくなった」ということは珍しくない。壊れていたらAIに「ドラッグ機能を追加した後、削除ボタンが反応しなくなった。修正して」と伝えよう。
ステップ8: 学びを振り返る
ここまでで相当な機能を持つToDoアプリが完成した。AIが書いたコードを眺めて、何が起きているのかを理解してみよう。
AIに解説を頼む
このコードの中で、以下の部分をそれぞれ初心者にわかるように説明してください。
1. タスクを追加している処理（どこでデータを作っているか）
2. localStorageに保存している処理（いつ保存が実行されるか）
3. タスクを画面に表示している処理（HTMLをどう生成しているか）
4. フィルター機能の処理（どうやって表示/非表示を切り替えているか）
5. ドラッグ&ドロップの処理（何のイベントを使っているか）このアプリで学べるプログラミングの概念
ToDoアプリには、Web開発の基本概念がほぼすべて詰まっている。以下の表で整理しよう。
| 概念 | ToDoアプリでの使われ方 | 一言解説 |
|---|---|---|
| CRUD操作 | タスクの追加・表示・更新・削除 | Create/Read/Update/Deleteの略。あらゆるアプリの基本 |
| DOM操作 | タスクリストのHTML要素を動的に生成・変更 | JavaScriptからHTMLを操作する技術 |
| イベント処理 | クリック・Enter・ドラッグなどのユーザー操作を検知 | ユーザーのアクションに反応する仕組み |
| localStorage | ブラウザにデータを保存・読み込み | サーバーなしでデータを永続化する方法 |
| JSON | タスクデータをJSON形式で保存・復元 | データを文字列に変換してやりとりする形式 |
| 配列操作 | filter/map/findでタスクを絞り込み・変換 | データの一覧を効率的に処理する方法 |
| 条件分岐 | 期限切れかどうかの判定、フィルター条件の切り替え | 状況に応じて処理を変える仕組み |
| CSS設計 | Flexbox配置、状態に応じたスタイル切り替え | 見た目を整える技術 |
| HTML構造 | input、button、ul/liなどの要素の組み合わせ | Webページの骨組みを作る技術 |
コードを読む必要はないが、読めると強い
バイブコーディングではコードを書く必要はない。でも「AIが何をしているか」をざっくり理解できると、より的確な指示が出せるようになり、トラブル対応も速くなる。
発展: さらに高度な機能を追加する
基本のToDoアプリを土台にして、さらに実用的な機能を追加してみよう。それぞれのAIへの指示もそのまま使える。
テーマ切り替え（ライト/ダーク）
ダークモードとライトモードを切り替えるトグルボタンを右上に追加してください。
- 太陽/月のアイコンで切り替え
- 選択したテーマはlocalStorageに保存
- ページ読み込み時に前回のテーマを復元
- CSS変数を使ってテーマカラーを管理データのエクスポート/インポート
タスクデータをJSONファイルでエクスポート/インポートできる機能を追加してください。
- 「エクスポート」ボタン: 現在のタスクをJSONファイルとしてダウンロード
- 「インポート」ボタン: JSONファイルを選択して読み込み
- インポート時に既存データと「マージ」するか「上書き」するか選べるようにする検索機能
タスクをキーワードで検索できる機能を追加してください。
- ページ上部に検索バーを設置
- リアルタイムで入力に応じてフィルタリング（インクリメンタルサーチ）
- タスク名だけでなくカテゴリ名にもマッチ
- 検索中は「◯件ヒット」と表示統計ダッシュボード
タスクの統計情報を表示するセクションを追加してください。
- 総タスク数、完了数、未完了数
- カテゴリ別のタスク数を棒グラフ（CSSのみで実装）
- 今日完了したタスク数
- 完了率（パーセンテージ + プログレスバー）Reactへの移行
ある程度機能が増えてきたら、1ファイルのHTMLからReactなどのフレームワークに移行する選択肢もある。
このToDoアプリをReact（Vite + React）に移行してください。
- 現在の全機能をそのまま移植
- コンポーネント分割: App, TodoInput, TodoItem, TodoFilter, TodoStats
- 状態管理はuseStateで
- localStorageとの同期はuseEffectで移行のタイミング
1ファイルのHTMLが500行を超えてきたら、フレームワークへの移行を検討するとよい。AIに頼めば移行作業自体も自動化できる。
よくあるトラブルと対処法
バイブコーディングでToDoアプリを作る際に遭遇しやすいトラブルと、その対処方法をまとめた。
トラブル1: 追加ボタンが反応しない
原因: JavaScriptのイベントリスナーが正しく設定されていない。
対処: ブラウザの開発者ツール（F12キー）でConsoleタブを開き、赤いエラーメッセージがあればそれをそのままAIに伝える。
追加ボタンを押しても何も起きません。
コンソールに以下のエラーが出ています:
[エラーメッセージをここに貼り付け]
修正してください。トラブル2: リロードするとデータが消える
原因: localStorageへの保存処理が正しく実装されていない、またはJSON変換でエラーが起きている。
対処:
タスクを追加してもブラウザをリロードすると消えてしまいます。
localStorageへの保存と読み込みの処理を確認して修正してください。
保存のタイミングは、タスクの追加・削除・完了切り替え・並べ替えの各操作後にしてください。トラブル3: ドラッグ&ドロップが動かない
原因: HTML5のDrag and Drop APIはイベントの設定が複雑で、AIが一部を忘れることがある。
対処:
ドラッグ&ドロップが動きません。
dragover イベントで e.preventDefault() を呼んでいるか確認してください。
また、draggable="true" 属性が各タスク要素に設定されているか確認してください。トラブル4: スマホで表示が崩れる
原因: レスポンシブ対応のCSSが不足している。
対処:
スマホで表示するとレイアウトが崩れます。
以下のレスポンシブ対応を追加してください:
- viewport metaタグの追加
- 画面幅480px以下ではボタンを縦並びに
- フォントサイズを少し大きく（タップしやすいように）
- 入力欄の幅を100%にトラブル5: カテゴリフィルターと検索が競合する
原因: 複数のフィルター条件を同時に処理するロジックが不十分。
対処:
カテゴリフィルターで「仕事」を選んだ状態で検索すると、
全カテゴリから検索結果が出てしまいます。
フィルターと検索を同時に適用するように修正してください。
（カテゴリが「仕事」かつ検索ワードにマッチするもの、という AND 条件）FAQ
Q1. ToDoアプリなんて簡単すぎない？もっと複雑なものを作るべき？
ToDoアプリは「簡単」に見えるが、CRUD操作・データ永続化・UI更新・イベント処理というWeb開発の核心技術がすべて含まれている。実際にカテゴリ・期限・ドラッグ並べ替え・テーマ切替・統計ダッシュボードまで拡張すれば、かなり本格的なアプリになる。まずToDoアプリを完璧に作れるようになってから、次のプロジェクトに進むのが最短ルート。
Q2. HTML1ファイルで作るのは良くない方法？
学習目的なら最適な方法。全体像を一目で把握でき、ファイル間の関係を考える必要がないため、プログラミングの基本概念に集中できる。実務やチーム開発ではファイル分割やフレームワークを使うが、それは基本を理解した後のステップ。
Q3. AIが生成したコードにバグがある場合どうする？
AIは完璧ではないので、バグは普通に発生する。対処法は簡単で、症状を具体的にAIに伝えるだけ。「動かない」ではなく「追加ボタンを押しても画面に表示されない」「コンソールにTypeError: Cannot read property ‘value’ of nullと出る」のように、何が起きているかを正確に伝えよう。開発者ツール（F12）のConsoleタブに表示されるエラーメッセージをコピペするのが最も効果的。
Q4. localStorageの容量制限はある？
localStorageの容量はブラウザによって異なるが、一般的に5MB程度。ToDoアプリ程度の文字データであれば数万件のタスクを保存しても問題ない。ただし画像データなどを保存しようとすると上限に達する可能性がある。大量のデータを扱うアプリを作る場合は、IndexedDBやサーバーサイドのデータベースを検討する。
Q5. このToDoアプリを他の人に使ってもらうには？
HTMLファイルをそのままGitHub Pagesなどの無料ホスティングにデプロイすれば、URLを共有するだけで誰でも使えるようになる。ただしlocalStorageはブラウザごとに独立しているため、AさんとBさんのデータは共有されない。データ共有が必要なら、サーバーサイド（Firebase、Supabaseなど）のデータベースを使うステップに進む必要がある。
Q6. Bolt と Claude Code、最終的にどちらを使い続けるべき？
どちらにも長所がある。Boltはブラウザ内で完結するためセットアップ不要で手軽。Claude Codeはローカルのファイルを直接操作するため、Gitでのバージョン管理やデプロイとの連携がスムーズ。最初はBoltで慣れて、開発に本格的に取り組むならClaude Codeに移行するのが王道パターン。
Q7. JavaScriptを勉強してからのほうがいい？
バイブコーディングのアプローチでは、先に勉強する必要はない。実際に動くものを作りながら「これは何をしているんだろう？」と疑問に思ったタイミングでAIに質問すれば、実践と学習を同時に進められる。ただし、ある程度JavaScript の基本（変数・関数・配列）を知っていると、AIへの指示の精度が格段に上がるのも事実。必要を感じたタイミングで学べばよい。
まとめ
30分で段階的に作り上げたToDoアプリだが、振り返ると以下のWeb開発の基本がすべて含まれている。
| 学んだこと | 具体的な内容 |
|---|---|
| 入力の取得 | テキストフィールド・ドロップダウン・日付ピッカーからの値取得 |
| データの処理 | タスクの追加・変更・削除・フィルタリング・並べ替え |
| 画面への出力 | HTMLの動的生成・条件に応じたスタイル変更 |
| データの永続化 | localStorageでのJSON保存・読み込み |
| イベント処理 | クリック・Enter・ドラッグ&ドロップ・フィルター切替 |
| UI/UXデザイン | ダークモード・レスポンシブ・視覚的フィードバック |
バイブコーディングの本質は、「AIに作ってもらいながら、動くものを通じて学ぶ」 こと。コードを1行も書かなくても、指示の出し方と動作確認のやり方を身につければ、これだけのアプリが作れる。
次のステップとして、このToDoアプリで得た経験をベースに、ポートフォリオサイトやAPIを使ったダッシュボードなど、より大きなプロジェクトに挑戦してみよう。
