こんにちは、かっぺいです。
前回、Codexで要件定義をするときの一番大事な使い方、音声入力とプランモードについて書きました。
今回はいよいよ実践編です。
実際に要件定義から始めて、Codexにアプリを一つ、丸ごと作ってもらいました。
結論から言います。
数時間で、ちゃんと動くWebアプリができました。
もうこれ、すごくないですか。
いや、すごいんです。
この記事でわかること
- 今回作ったアプリの概要
- 要件定義からプラン承認までの流れ
- 実装中に見えるインアップブラウザの便利さ
- 差分（diff）確認とスクリーンショット活用
- エラーが出たときの向き合い方
先に結論
Codexは要件を詰めてプランを承認すると、あとはかなり自律的にコードを書き進めてくれます。開発者でなくても、インアップブラウザで動作確認しながら「ここをこうして」と伝えるだけで、実用レベルのアプリが数時間でできあがります。
今回作りたかったもの
今回作ろうと思ったのは、画像に対してコメントをつけてフィードバックできるツールです。
たとえば、バナー画像やYouTubeのサムネイルがあったとして、
「この部分、もう少し文字を大きくしてほしい」
というようなフィードバックを、画像の該当箇所にピンを立てて、コメントで残せるようにしたい。
よくデザイナーへのフィードバックで使われる、あの感覚のツールです。
こういう外部サービスは他にもありますが、月額数千円かかったりします。
だったら自作したい、とずっと思っていました。
ついに、それを作るタイミングが来た、というわけです。
まず要件を音声入力で伝える
前回書いた通り、最初にやったのは音声入力での要件定義です。
作りたいものの概要をひとしきり話し、あえて細かい部分は伝えすぎずに、プランモードに投げました。
理由はシンプルで、抜け漏れがあった方が、プランモードの質問による深掘りが働きやすいからです。
質問には、こんな感じで答えていきました。
- 利用者の範囲：社内チームで完結する想定
- 最初のリリース（MVP）：画像アップロード、ピンコメント機能のみに絞る
- バージョン管理：あり
- アクセス制御：共有URL中心（ログインなし）
- 通知：アプリ内通知も一旦なし
最初に提示されたプランは、思っていたよりも機能が多めでした。
なので、
「まずは動くものを作りたいので、通知や承認機能は不要です。画像アップロードして、位置にコメントできる、本当に一番重要な機能のみをまず作ってください」
と伝えて、範囲を絞り直しました。
プランを承認すると、あとはCodexが計画に沿ってタスクを一つずつ実行していきます。
実装が進む様子は、意外と見ていて飽きない
Codexは、作業をステップごとに区切りながら、今何をしているかを表示してくれます。
「今これをやってるよ」がわかりやすいので、待っている間の不安が少ないです。
技術構成（Next.js、TypeScriptなど）も表示されますが、正直、詳しくなくても大丈夫です。
分からない単語が出てきたら、サイドチャットという機能で聞けます。
サイドチャットが便利な理由
- メインのやり取り（スレッド）を汚さずに質問できる
- 「〇〇とは何ですか？」くらいの気軽さで聞ける
- 別の作業を並行して頼むこともできる
メインのチャットに質問ばかり入れると、会話の文脈がどんどん長くなって、Codexが参照する情報も散らかってきます。
気になったことは、サイドチャットに逃がす。
これだけで、開発全体の見通しがだいぶよくなります。
インアップブラウザで、その場で確認・修正
Codexの実装が終わると、アプリ本体が表示され、開発サーバーが起動します。
ここで地味にすごいのが、アプリ内にブラウザが搭載されていることです。
外部のブラウザを別途開かなくても、Codexの画面の中でそのままアプリの動作確認ができます。
しかもこのインアップブラウザ、ただ見るだけじゃありません。
- 画面をそのままスクリーンショットして、ワンクリックでチャットに貼り付けられる
- 画面の要素をクリックして、そこだけピンポイントで修正指示を出せる
「この文字、小さいから大きくして」と言葉で伝えるより、実際にその文字をクリックして「これを大きくして」と伝える方が、圧倒的に速いし正確です。
これまでのAIチャット開発だと、「あの画面の、あそこの」と言葉で説明する手間がありました。
これがなくなる、というのは想像以上に体験が変わります。
差分（diff）確認で、何が変わったか見える
もう一つ便利だったのが、変更内容の差分確認です。
Codexが数百〜数千行のコードを書いてくれた後、その変更点を見比べる機能があります。
削除された部分と追加された部分を、色分けして比較できる。
開発をしたことがある人にはおなじみの感覚だと思いますが、開発経験がなくても「何が変わったか」を視覚的に把握できるのは安心材料になります。
気に入らない変更があれば、その場で元に戻すこともできます。
エラーが出ても、慌てなくていい
開発の途中、当然エラーも出ます。
今回も、アプリを開いたら画面が真っ白になる、というエラーに遭遇しました。
正直に言います。
私はエラーの中身をちゃんと読んでいません。
Codexにスクリーンショットを撮って、そのまま投げただけです。
Codexには、ショートカットキー一つでスクリーンショットを撮って、そのままチャットに送る機能があります。
画像だけでなく、画面の情報をテキストとしても一緒に渡してくれるので、Codex側も状況を理解しやすいようです。
これを送ると、原因を調べて、修正して、再度動作確認までしてくれました。
できあがったもの
最終的に、
- 画像をアップロードできる
- 画像の好きな位置にピンを立ててコメントできる
- コメントには「対応中」「解決済み」のようなステータスをつけられる
- 画像のバージョン管理ができる（V2を追加してもV1のコメントは残る）
というアプリが、数時間で完成しました。
もちろん、最初から全部を作ったわけではありません。
まず一番シンプルな形（画像アップロード＋ピンコメント）を作り、そこに機能を少しずつ追加していく、という進め方をしています。
いきなり完璧を目指さず、動くものから育てていく。
このアプローチが、結果的に一番早く形になる近道でした。
まとめ：手を動かしながら育てるのが一番早い
今回、実際にCodexでアプリを一つ作ってみて感じたのは、
- 要件定義さえ丁寧にやれば、実装はかなり自律的に進む
- インアップブラウザとスクリーンショット機能で、フィードバックのやり取りが圧倒的に速い
- エラーも、正しく情報を渡せば、任せて大丈夫
ということです。
完璧なものを最初から作ろうとしない。
まずは動くものを作って、そこに育てていく。
このマインドセットが、AIを使った個人開発では一番大事なのかもしれません。
次回は、サブエージェントやプラグインを使って、Codexをもっと使いこなす方法について書きます。
かっぺい