ChatGPTと小さなアプリを作る手順｜仕様・保存・失敗時の戻し方

最初のアプリは、ログインや課金を持たない小さなメモ帳にすると、完成したかを自分で確かめやすくなります。AIへ要望を伝えるだけで完成を保証できるわけではありません。仕様、保存方法、動作確認、公開を一工程ずつ進めます。

まず「完成」を五つの操作で決める

練習用メモ帳の仕様例です。実際のサービス開発や利用実績ではありません。

1. メモを入力して保存できる。
2. 一覧から保存済みのメモを開ける。
3. 再読み込みしても残る。
4. 一件だけ削除でき、別のメモは消えない。
5. 空欄の保存を防ぎ、理由が表示される。

初版は一台のブラウザー内だけに保存する想定にします。別端末との同期、複数人での共有、バックアップは含まれません。保存先がブラウザーなら、サイトデータの削除で失われる可能性も説明に含めます。

依頼文に保存先と禁止事項を書く

「HTML、CSS、JavaScriptで練習用メモ帳を作ってください。ブラウザー内に保存し、上の五条件を満たしてください。外部通信、ログイン、課金は追加しないでください。ファイル構成、起動方法、確認手順も示してください」と依頼します。

必要なのは利用可能なコード生成機能と実行環境です。特定の有料プランを必須とはしません。既存フォルダーを編集させる場合は、Codex IDE拡張の公式説明で環境とサインイン方法を確認します。

実装後は正常系と失敗系を分ける

説明用のテストデータとして「買い物」と「読書」の二件を保存します。再読み込み後に両方残り、「買い物」だけを削除して「読書」が残ることを確認します。次に空欄、日本語、改行、長い文章を試します。

AIへの不具合報告は「保存できない」だけでなく、操作、期待、実際、エラーの四点にします。例えば「二件保存して再読込すると一件しか残らない。二件とも残る想定。Consoleの最初のエラーは…」です。秘密情報を含むログは貼りません。

修正に失敗したら最後に動いた状態へ戻す

変更前のファイルをコピーするか、Gitで動作確認済みの変更をコミットします。修正後は差分を読み、対象外の機能や設定が変わっていないか確認します。無関係なファイルをまとめて削除したり、変更を確認せず上書きしたりしません。

一つの失敗を直してから五条件を再確認します。「AIが修正済みと言った」ことと、ブラウザーで再現しなくなったことを区別します。

公開前に練習用の限界を表示する

第三者に使ってもらう前に、保存場所、データが消える条件、対応ブラウザー、問い合わせ先を説明します。公開URLでも五条件を試します。ホスティングの利用条件は契約前に確認し、広告や課金を含むサイトを無料枠で運用できると決めつけません。

ログインや共有機能を足す段階では、認証、アクセス権、バックアップを別の設計課題として扱います。小さく動くものを確かめながら進めることが、この練習の目的です。