Codex使ってみた報告

本日、ChatGPTから出たCodex使ってみました。

githubリポジトリと連携して、プロンプトの指示に沿って開発を行い、PR作成まで実行してくれるAIエージェントです。

結論

簡単な機能でしたが、しっかりやってくれそうした！
※ 少しだけUI修正すればリリースできるレベルでした。

codexは現状、ChatGPTの月額3万円のProプランからしか使えませんが、

今までは、これと同じ機能を使うには、Devinに月額7.5万円課金するしかなかったので、ある意味安く使える機能が生まれた感じです。

実装内容

JS Gymのトップページに問い合わせフォームを作ってみました。

プロンプト

トップページに問い合わせの機能を作ってください。

要件一覧
・右下fixedの「問い合わせボタン」を押したら、問い合わせフォームをモーダルで開く
・フォームの項目はメールアドレス、問い合わせ本文の２項目。どちらも必須
・入力したら「入力内容を確認」ボタンを押して、入力内容の確認画面を表示
・入力内容家訓画面で「問い合わせを送信」を押すと送信実行
・送信すると、問い合わせ内容はDB保存不要で、問い合わせ者にメール通知＋運営にSlack通知。route.tsも実装
・送信処理完了後、モーダル内で完了を表示。２営業日以内に返信しますという旨。

実装ルール
.cursor/rules/index.mdc

Slack通知は以下のクラスを使用
src/app/_serevices/SlackService.ts

メール送信は以下のクラスを使用
src/app/_serevices/SendGridService.ts

作成されたPR

https://github.com/bubekichi-inc/jsgym/pull/52/files

→既存コンポーネント、カスタムフック、クラスも使ってくれていて、基本問題なしでした。

動作画面

補足

以下、プロンプト内で指定している、.cursor/rules/index.mdc の中身です。

Cursorで用いる、プロジェクト共通の指示をプロンプトにまとめるテンプレファイルですが、
Devinやcodexでもプロンプトに含めると読み取ってくれるので、便利です。

- Next.jsのV15で、App Routerを使ってください。
- 基本的にコンポーネントはすべて "user client" で作成し、バックエンドはRouteHandlerで実行してください。
- APIのデータフェッチとステート管理は、src/app/_hooks/useFetch.tsを用いて、それをラップした、useHoge.tsを作成してください。例: src/app/_hooks/useQuestion.ts
- その他のAPIリクエスト（PUT, POST, DELTE）は、src/app/_utils/api.tsを用いてください。
- UIはTailwindCSSを用いてください。
- バックエンドのroute.tsで、ログインユーザーの認可処理は、src/app/api/_utils/getCurrentUser.tsを用いてください。
- できるだけコンポーネントやカスタムhookは細かく分割し、同ディレクトリ内に、_components、_hooks、_utilsディレクトリを作成してください。
- バックエンド実装時は、常に prisma/schema.prisma を参照してください。
- APIのリクエストボディとレスポンスボディのTypeScriptの型情報は、バックエンドのroute.ts内で定義して、フロントエンドでもその型を参照する様にして、型を常に共通化してください。
- Iconは、fontawesomeを用いてください。例: <FontAwesomeIcon icon={faUser} />
- useContextなど、Providerは使わないでください。
- any型は使わないでください。
- バックエンドのroute.tsでparamsを受け取る際は、Promise<{param: string}>の型を用いてください。（Next.js v15以降の仕様です。）