はじめに
「プログラミングのコードを一切書かずに、AIとのチャットだけで実用的なWebアプリは完成するのか？」
この疑問を検証するため、GoogleのAI（Gemini 1.5 Pro）を相棒に、『月次作業時間トラッカー』というWebアプリの開発に挑戦しました。
この記事では、アイデア出しから完成まで、53回にわたるAIとのリアルな対話の全記録をダイジェストで公開します。成功体験だけでなく、エラー、AIの混乱、そしてそれを乗り越えたブレークスルーまで、開発の裏側をすべてお見せします。
この記事を読むとわかること
- AI（LLM）を開発パートナーとして活用する具体的な方法
- 質の高いコードを生成させるためのプロンプトのコツ
- AIが混乱したときの効果的な対処法（特に「Chatリセット」は必見です！）
対象読者
- AIを使った開発に興味があるエンジニアの方
- プロンプトエンジニアリングの具体的な実践例を知りたい方
- ノーコード/ローコード開発の限界と可能性に関心のある方
🚀 完成したアプリ
まず、この挑戦の末に完成したアプリがこちらです。すべての処理がブラウザ内で完結し、サーバーにデータを送信しないローカルアプリです。
開発の全記録：AIとの53回の対話
ここからは、開発プロセスを章立てでご紹介します。AIへの指示（プロンプト）と、そこから得られた考察をセットで見ていきましょう。
序章：アイデアを言葉にする（指示 1-2）
すべての始まりは「こんなアプリが欲しい」というアイデアでした。これをAIに伝わる言葉に変換することから始めます。
💡 指示 1-2：全体像の提示
「javascriptを使ってHTMLファイル1つでWEBアプリを作成したい。データの永続性はJSONファイルの保存と読込で実現する。」
「月次の作業時間を毎日登録して、最終日になったら月次集計をするアプリを作成したい。日次モードと月次モードの2つの表示モードを持ち...（詳細な仕様説明）」
✅ ポイント：
最初にアプリの「骨格」と「最も重要な要件」をまとめて伝えました。これにより、AIはこれから作るものの全体像を把握でき、一貫性のあるコードを生成しやすくなります。この段階で、驚くほど精度の高いプロトタイプが生成されました。
第1章：機能の肉付け（指示 3-7）
骨格ができたら、具体的な機能を一つずつ追加していきます。
🧩 指示 3-7：機能の追加と配置
「カテゴリの動的編集機能を追加して」「集計表示を見やすいテーブル形式にして」「日次モードでドラッグ選択できるようにして」「月次集計ボタンはヘッダ部に配置して」...
✅ ポイント：
「Aして、Bして、Cして」というように、関連する要望をまとめて指示。AIはこれらの要求を的確に理解し、コードに反映させていきました。この時点では非常にスムーズな対話が続きます。
第2章：予期せぬ壁と粘り強い対話（指示 8-14）
順調だった開発に、最初の壁が立ちはだかります。複雑なUIを実装したことによる「表示崩れ」です。
⚠️ 指示 8：問題の報告
「横スクロールするとカテゴリの表示が作業の表示の裏側にまわって見えなくなる」
👀 観察：
具体的な問題点を伝えると、AIはCSSのposition: stickyやz-indexを使った修正案を提示。しかし、最初の提案ではうまくいきませんでした。🔄 指示 9, 11, 13：試行錯誤
「完全なコードでください」
👍 教訓：
AIが差分（変更部分）だけを提示してきた結果、別の部分で不整合が起きるケースがありました。そこで「完全なコードでください」と要求し、全体を再生成させることで問題を切り分けました。これはAI開発で非常に有効なテクニックです。
第3章：試練の時：AIの混乱とデバッグ地獄（指示 23-31）
最大の難関は、ドラッグ＆ドロップによる並び替え機能の実装でした。高度な要求に対し、AIはついに限界を見せ始めます。
🔥 指示 23：根本的な作り直しを要求
「カテゴリ編集のモーダルは見た目も悪く、操作性も悪い。使用する技術についても最適なものを再検討して実装しなおしてほしい」
挑戦：
AIはSortableJSというライブラリの利用を提案し、コードを大幅に書き換えました。🐛 指示 25-31：エラーの連鎖とAIの"故障"
「カテゴリと作業が分離して表示される」
「Uncaught SyntaxError: Invalid or unexpected token」
🚨 重大な問題：
ここから事態は暗転。生成されたコードは不完全で、文法エラーを連発。エラーメッセージを伝えても、AIは同じ不完全なコードを繰り返し生成するループ状態に陥ってしまいました。
第4章：突破口『Chatリセット』という名の特効薬（指示 33-34）
AIが機能不全に陥ったとき、どうすればいいのか？答えはシンプルでした。「会話をやり直す」ことです。
💬 指示 33-34：Chatをリセットして再挑戦
「これからJavascriptを使ってHTML1つで作成したWEBアプリのコードを共有します。共有後に要件を伝えます」
「カテゴリ編集画面で、カテゴリと作業が分離して表示される問題を解決したい」
🎉 効果は絶大：
このリセット戦略は驚くほど効果的でした。AIはすぐに問題を理解し、正しいコードを生成。その後の細かい問題も一つずつ潰していき、ついに複雑だったカテゴリ編集機能を完成させることができました。
第5章：最終仕上げ（指示 46-52）
主要機能が固まった後、再びChatをリセットし、最後の機能追加とUX改善を行いました。
✨ 指示 46, 48, 50, 52：最後の仕上げ
「タイマーアイコンを配置し、クリックで計測できるようにしてほしい」
「データ更新時に保存ボタンの色を変えてほしい」
「保存ファイル名にタイムスタンプを付けてほしい」
「Escキーでモーダルを閉じるようにしてほしい」
🌟 神は細部に宿る：
ここでの指示は、アプリの「使いやすさ」を格段に向上させるものばかりです。AIはこれらの細かな要望にも正確に応え、アプリの完成度を最後の最後まで高めてくれました。
【まとめ】AIとの協働開発から得られた5つの教訓
53回にわたる対話の旅路から得られた、AIの能力を最大限に引き出すための教訓を5つにまとめます。
1. 指示は「具体的」かつ「段階的」に
最初に全体像を伝え、その後は機能単位で小さく、具体的に指示する。これがAIの能力を最大限に引き出す鍵です。一度に多くを求めすぎないことが重要です。
2. 「完全なコード」を要求する勇気
AIが提示する差分コードで問題が解決しない場合や、修正箇所が多岐にわたる場合は、迷わず「完全なコードをください」と要求しましょう。人間が差分をマージする手間が省け、コード全体の整合性が保たれます。
3. エラーメッセージは最高の"対話の材料"
エラーは失敗ではありません。発生したエラーメッセージをそのままAIに伝えることで、AIは具体的な問題箇所を特定し、より精度の高い修正案を提示できます。最高のデバッグパートナーになります。
4. 最強のデバッグ術は「Chatリセット」
AIが混乱し始めたら、迷わずChatをリセット。「正常なコード」+「解決したい課題」だけを新しいChatで伝え直す。これは、どんな複雑な問題にも通用する最終兵器です。
5. AIはパートナーであり、万能の神ではない
AIは驚くほど優秀ですが、間違うことや混乱することもあります。最終的な判断を下し、方向性を示し、粘り強く対話を続ける「人間」の役割が、良いプロダクトを生み出すためには不可欠です。
さいごに
AIとの対話だけでWebアプリを開発する挑戦は、「可能である」という結論に至りました。完璧ではありませんが、AIは驚くほど強力な開発パートナーになり得ます。この記事が、皆さんのAI活用の一助となれば幸いです。
この記事は、筆者が運営するサイト『AIと創るJavaScriptツールキット』のコンテンツを、Qiita用に再編集したものです。