AIを使って初めてのアプリを作りたいけど、どこから始めたらいいかわからない？TODOアプリはバイブコーディングを始めるのに最適なプロジェクトです。1時間で、タスクを追加・チェック・削除できる動作するアプリケーションを作ります。プログラミング知識は一切不要。Claude Codeに欲しい機能を説明するだけで、AIがコードを生成してくれます。このガイドでは、何を書くべきか、どの順序で進めるか、よくある問題の解決方法を詳しく説明します。最後には、実際に使えるアプリが完成し、それを見せたり、改善したり、毎日使ったりできます。

なぜバイブコーディングでTODOアプリから始めるのか？

TODOアプリは、技術的な複雑さなしに開発の基礎をすべて学べます。 タスクリストを作るとき、情報の表示、新しいデータの追加、編集、削除を学びます。この4つの操作（業界用語でCRUD：Create、Read、Update、Deleteと呼ばれます）は、現代のアプリケーションの80%を占めています。

バイブコーディングは、従来の方法では初心者に数週間かかるプロジェクトを1時間で実現可能にします。JavaScriptの構文、DOMイベント、状態管理を理解する必要はありません。欲しい機能を説明するだけで、Claude Codeがあなたの意図を動作するコードに変換します。

2025年にGitHubが発表した研究によると、AIアシスタントを使う開発者は、手動でコーディングする開発者より55%速くプロジェクトを完成させています。完全初心者にとっては、その効果はさらに劇的です。数ヶ月の学習期間が数時間の実践に短縮されます。

この最初のプロジェクトは、バイブコーディングの仕組みを理解するための具体的な基盤も提供します。説明がどのようにインターフェースに変わるか、エラーを修正する方法、アプリを段階的に改善する方法をリアルタイムで見ることができます。

最初のプロジェクトに必要なツール

3つのもの必要です：Claude Codeのアカウント、モダンなウェブブラウザ、基本的なテキストエディタです。 インストールも設定も不要。Claude Codeは完全にオンラインで動作し、ブラウザで直接テストできるコードを生成します。

Claude Codeのアカウントを作成するには、claude.aiにアクセスしてメールアドレスで登録します。このプロジェクトには無料版で十分です。1日50メッセージが使え、TODOアプリの作成と改善に十分です。初期設定の詳細については、初心者向けClaude Codeチュートリアルを参照してください。

ブラウザはChrome、Firefox、Safari、Edgeどれでも大丈夫です。ローカルのHTMLファイルをブラウザで開いてアプリをテストするだけです。このプロジェクトではウェブサーバーは不要です。

テキストエディタについては、Windowsのメモ帳やMacのTextEditでも動作しますが、Visual Studio Code（code.visualstudio.comで無料）をお勧めします。コードが自動的に色分けされるので、まだすべてを理解していなくても読みやすくなります。

オプションとして、パソコンにプロジェクト用のフォルダを作成しておくといいでしょう。例えば「my-todo-app」という名前にします。Claudeが生成するファイルをここに保存します。

TODOアプリを始めるプロンプト

このプロンプトから始めてください：「HTML、CSS、JavaScriptで1つのファイルにシンプルなTODOアプリを作ってください。タスクを追加でき、完了としてチェックでき、削除できるようにしたいです。デザインはミニマルでモダンにしてください。」 このプロンプトには、まだ習得していない技術的な詳細に入らずに、必要な要素がすべて含まれています。

「1つのファイル」という指定は初心者にとって重要です。Claudeは、ページの構造、ビジュアルスタイル、機能ロジックをすべて含むHTMLファイルを生成します。管理するファイルは1つだけなので、非常にシンプルです。

「ミニマルでモダンなデザイン」という指定は、Claudeをシンプルで見栄えの良いインターフェースに導き、コードを複雑にする装飾を避けます。高度な機能は後で追加できます。

このプロンプトを送信すると、Claudeは通常10～20秒で完全なコードブロックで応答します。<!DOCTYPE html>で始まり</html>で終わるコードが見えます。これが正常です。これはあなたのアプリケーションのコードです。

このコード全体をコピーして、テキストエディタに貼り付け、プロジェクトフォルダにtodo.htmlという名前で保存します。その後、このファイルをダブルクリックするとブラウザで開き、すでに動作する最初のアプリケーションが見えます。

Claudeが複数の別ファイル（HTML、CSS、JS）を提供した場合は、再度リクエストしてください：「すべてを1つのHTMLファイルにまとめてもらえますか？」Claudeがすべてを統合してくれます。

アプリをテストして段階的に改善する

ブラウザでtodo.htmlファイルを開き、各機能をテストします：タスクを追加し、チェックし、削除します。 すべてが最初から動作したら、素晴らしい！そうでなければ、何が動作していないかを正確にメモします。例えば：「追加をクリックしても何も起こらない」または「タスクは表示されるが削除できない」。

Claudeに戻って、自分の言葉で問題を説明します。なぜバグが起きているかを理解する必要はありません。観察したことを説明するだけです。Claudeが生成したコードを分析し、修正案を提案します。新しいコード全体をコピーして、ファイルの古いコードを置き換え、保存してブラウザをリロード（F5）します。

このテスト→修正→テストループがバイブコーディングの中核です。自分でコードをデバッグする必要はありません。何が動作していないかを説明するだけで、AIが修正します。Anthropicのデータによると、Claude Codeは問題の説明が明確な場合、73%のバグを最初の試みで解決します。

基本機能が動作したら、段階的にアプリを改善します。アプリを大きく変える簡単なリクエストをいくつか紹介します：

  • 「残りのタスク数を表示するカウンターを追加してください」
  • 「背景色を薄い青に、ボタンを緑に変更してください」
  • 「完了したタスクは打ち消し線が引かれ、グレーアウトするようにしてください」
  • 「タスクを削除するときにアニメーションを追加してください」
  • 「タスクをlocalStorageに保存して、ブラウザを閉じても残るようにしてください」

各リクエストは30秒で書け、Claudeが修正を生成するのに20秒かかります。コピーして、テストして、確認します。10分で、基本的なアプリを本当に個人的なものに変えることができます。

よくあるエラーと解決方法

エラー1番：新しいコードを貼り付けた後、ファイルを保存し忘れる。 Claudeからコードをコピーして、ブラウザをリロードしても何も変わりません。解決策：常に保存してください（Ctrl+SまたはCmd+S）。ブラウザをリロードする前に。

2番目のよくあるエラー：コードの一部だけをコピーする。Claudeの応答は長いことがあり、下までスクロールしないと最後を見落とします。常に<!DOCTYPE html>から</html>まで（両方を含む）コピーしていることを確認してください。

3番目の落とし穴：矛盾した指示を出す。「ボタンを赤にしてください」と言ってから、2メッセージ後に「すべてを青のテーマにしたい」と言うと、Claudeは両方を調整しようとして、結果がおかしくなる可能性があります。解決策：気が変わったら明確に言ってください：「実は赤は忘れて、すべてを青にしたいです」。

4番目の問題：ファイルがテキストエディタで開き、ブラウザで開きません。これは拡張子が.txtではなく.htmlの場合に起こります。保存するときは、必ず.htmlを含めてtodo.htmlと入力してください。Windowsでは、ファイルエクスプローラーのオプションでファイル拡張子の表示を有効にする必要があるかもしれません。

5番目のエラー：一度にやることが多すぎる。「カテゴリ、期限、優先度システム、ダークモードを追加してください」は、おそらくバグのあるコードを生成します。段階的に進めてください：一度に1つの機能、テスト、確認、次へ。

何度試しても何も動作しない場合は、Claudeに再度リクエストしてください：「1つのHTMLファイルに完全なTODOアプリを生成してください。最もシンプルなバージョン、タスクの追加と削除だけ。」このミニマルな基盤から始めて、段階的に構築します。

TODOアプリの後、さらに進む

TODOアプリが動作したら、バイブコーディングの基礎を習得し、より野心的なプロジェクトに取り組めます。 ロジックは同じです：欲しい機能を説明し、テストし、修正し、改善します。ただし、より複雑なアプリケーションを目指すことができます。

次の自然なステップ：データの永続性を追加します。Claudeに依頼してください：「ブラウザのlocalStorageにタスクを保存して、閉じた後も残るようにしてください」。この機能はTODOアプリを毎日使える実用的なツールに変えます。

次に、カテゴリを探索します：「異なるリスト（仕事、個人、買い物）を作成でき、タブで切り替えられるようにしてください」。1行のコードも書かずに、より複雑なデータ構造を扱い始めます。

さらに進むには、AIを使った完全なアプリケーション作成を学びます。このガイドは、シンプルなプロジェクトから、データベースと認証を備えた本物のウェブアプリケーションへの移行方法を示します。

プロンプトエンジニアリングの技術を適用してプロンプトを改善することもできます。Claudeとのコミュニケーションが上手になるほど、生成されるコードが正確に欲しい内容になります。

最後に、プロジェクトを多様化します：チップ計算機、ランダムな名言ジェネレータ、ポモドーロタイマーを作成します。各プロジェクトで新しい可能性を発見します。Skilzyでは、完全初心者から機能するアプリケーション作成者へと導く12個の段階的なプロジェクトをガイドします。

バイブコーディングは、数ヶ月の構文学習なしに、想像したものを構築できる世界を開きます。TODOアプリは最初の一歩です。実験を続け、テストし、質問してください。これが学び方です。

まとめ

バイブコーディングで初めてのアプリケーションを作成しました。1時間で、ゼロから使用・改善できるTODOアプリに到達しました。この方法により、理論に溺れることなく、初日から実際のプロジェクトを構築できます。他のアイデアで実験を続け、Skilzyに参加して、段階的なプロジェクトと個人的なサポートで学習を構造化してください。