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