初めに
2025年5月17日(日本時間)に、ChatGPTにCodexというものが追加されました。
CodexはCloud上で動作するSWEエージェントと呼ばれる代物です。
Githubと連携した上で、リポジトリ内のコードを読みバグを見つけたり
リファクタリングが可能とのこと。
前にCursorエディタの記事を書いたりもしましたが、
今回も新ツールへの好奇心で早速触ってみます!
Codexでできること
- 既存コードの解析(依存/構成/テスト状況の把握)
- 実装・修正・リファクタの提案
- バグ修正・テストコードの自動生成・更新
- Pull Request作成を簡易化・レビュー支援
- 並列タスク実行(重い解析+軽い修正を同時進行)
そして上記タスクを並行して実施できることも、
開発をより便利にしてくれそうな予感がします!
使い方
準備
まずはChatGPTを開き、左ナビゲートからCodexへ遷移します。
Codexへ遷移すると、このような画面が出てくるはずなのでクリックしましょう!
ご使用のGitHubに接続します。
(色々使用例が書いてあって、ワクワクしますねえ)
GitHubに接続したら、利用したいリポジトリを選択しましょう。
Codexがリポジトリを確認し、バグを発見したりリファクタリングしたりできるように!
注意
エージェントのインターネットアクセスですが、有効にしたままですと
コストなどがかかったりするので注意しましょう
(※以下の記事で詳しく説明してくれてます)
リポジトリを決定すると、コードの確認をしてくれるそうです!
私は個人開発のリポジトリを選択したので、バグを取り上げていただいたりすると
嬉しいですねえ〜
コードの修正を提案してもらう
タスクを開始すると、動き出しました!
上記の3つのタスクを実行してくれていそうです!
(並行に実施しているのがすごい・・・!)
3分程度待つとタスクが完了してました!
どうやらバグらしき内容を検知し、修正を求めてくれていますね!
そして修正した箇所のテストコードまで書いてくれている・・・!
バグの箇所だけでなく必要そうなケースを提案して記載してくれてるに見えて嬉しい。
右上のPR作成ボタンを押下し、Githubに行くと確かにCodexにてPRの作成がされいてることがわかります。
CI(テスト)もバッチリ通ってました!
タスクごとに状況を記載してくれてることは便利だなと思いました!
この辺りがタスクごとに確認できそうです
- タイトル
- PR作成したかどうか
- PRのステータス(マージされたか等)
- コード変更ステップ数 (添付画像であれば、+82 -1)
作成してくれたプルリクエスト
参考までにPRを置いておきます。
個人開発なので、たいしたコードは書いてませんが・・・笑
0からサービスを作成することも可能!
当然できます!
リポジトリを新しく作成し、Codexに読み込ませた上でプロンプトを書きます。
やってみる
では早速プロンプトを記載して、タスクを依頼してみましょう!
今回はReact + TypeScriptでサウナサイトらしきものを作成依頼します!
Codexを開き、新規リポジトリを指定
新規作成なので、読むコードもないためSkip!
依頼しよう!
さてプロンプトを記載して、早速依頼してみましょう!
(実際に記載したプロンプトは後程載せておきます)
タスクの実行に失敗したら・・・
注意
下記のようにまっさらな作りたてリポジトリに対して、
プロンプトを記載するとタスクの実行に失敗します。
README.mdの作成だけするなどして、
mainブランチ的なものを作成してから依頼すると良さそうです!
ここまで用意しよう!
成果物を確認!!
今回はサウナの紹介サイトみたいのを作成して欲しかったので、
依頼しました!
サウナ一覧画面
色々な施設が並んでいます。
サウナ詳細モーダル
任意のサウナカードをタップすると・・・
検索機能
簡単な検索もできそうです!
デザインは少々イマイチですが、デザインの方も注文すればおしゃれにできる
未来が見えます!
(デザインについてプロンプトで触れなかったのもありますが・・・)
今回試した成果物
せっかくなのでリポジトリを貼っておきます!
実際に依頼したプロンプトもREADME.mdに記載してあります!
参考になれば幸いです!
タスクに時間がかかる場合
時間がかかる理由
Codex はクラウドのサンドボックスで並列実行できますが、
コードの規模・依存の解決・テストの重さで時間は伸びます。
インターネットアクセスを有効にすると依存取得などが可能になる一方、
完了までの時間は増えがちです。
用途に応じてオン/オフを切り替えましょう(既定はオフ)。
高速化するには?
- タスクを 小さく分割(1PR=1目的)
- 編集や依頼の対象となるファイルを指定する
編集対象の記載例
編集範囲:
- src/components/RecentItemsCarousel.tsx(新規)
- src/pages/Home.tsx(組み込みだけ)
利用料金
各プランの料金体系は、以下の記事にまとまってそうです!
まとめ
少し前にバイブコーディングというワードが出てきましたが、
実際に触ってみるといよいよここまで来たかという感じですね!
GitHubの知識が多少必要ではありますが、
非エンジニアでも開発の参入が可能になりつつありそうです。
参考資料