こんにちは。エンタープライズ第一本部 戦略ソリューション 1 部の英です。
普段はWebアプリやスマホアプリの案件などを担当しています。あと、趣味でAIを勉強しています。
OpenAIから新しいCodexが発表されたのでさっそく遊んでみます。
https://help.openai.com/en/articles/11096431-openai-codex-cli-getting-started
- 1.環境構築
- 2.インストール
- 3.デモアプリを作る
- 4.デモアプリで遊んでみる
- 5.デモアプリで遊んでみる(再)
- 6.デザインを整える
- 7.テストコードを書かせてみる
- 8.テストコードを追加してみる
- さいごに
1.環境構築
詳細は割愛しますが、手元で以下を行ってください。
筆者の環境はWindowsです。
2.インストール
VSCodeで新規のターミナルを開き、以下を実行します。
npm実行の際に、権限系で止められたら各自で追加してください。
npm install -g @openai/codex
次に以下を実行します。
codex
これで動かせます。早い。
3.デモアプリを作る
さて、さっそくアプリを作ってみましょう。
そうですね。
「愚痴を吐いたらAIが励ましてくれるようなサービス」なんてどうでしょうか。
アイデアの引き出しで放置していたのですが、ここで消費してみようと思います。
Codexに以下のプロンプトを送信してみます。
Node.js + Express を使って、愚痴を投稿すると複数の仮想キャラクター（陽キャ・理系・スパルタ・癒し系）が ChatGPT API を使って日本語で励ましのコメントを返してくれるWebアプリを作ってください。UIはEJSで構築し、すべて日本語表示にしてください。 ChatGPTのAPIキーはenvファイルにセットする仕組みとしましょう。 モデルはgpt-4o-miniなんてどうでしょう？
思考が始まりました。かわいいですね。
mkdirのコマンドを叩きたいと要求してきました。許可してみます。
実行できなくて困ってますね。かわいいですね。
すごい手前で躓いているので情報を足してみます。
package.jsonを作成していいかと聞かれました。「Y」で肯定しておきます。
ファイルが作られました。
次はnode_modulesのディレクトリとenvファイルの作成を提案してきました。「Y」で肯定しておきます。
READMEの作成を提案してきました。「Y」で肯定しておきます。
やっと中身のコーディングに入りました。index.jsの提案が来ました。「Y」で肯定しておきます。
このペースでスクショを載せていると長くなりそうなので、CodeXが考えに詰まるまでスキップしますね。
4.デモアプリで遊んでみる
Yを10回くらい押したらアプリができたようです。
以下は最後の出力で、このアプリの実行方法を教えてくれています。手順に従ってみます。
エラーを吐きました。もう一度Codexを開いて、この事実を伝えます。(全文コピペでOK)
デバッグ方法を考え始めました。しばらく提案を受けましょう。
「Y」を5回くらい叩くと、バグ修正が終わったみたいです。
5.デモアプリで遊んでみる(再)
再度実行するとうまく起動しました。
さっそくlocalhostにアクセスしてみます。
気になっていたのですが、CSSは書いていない(そもそも命令していない)ので単純なHTMLが表示されています。
上手くいきました。
急に4人から励まされるとびっくりしますね。
ちなみに、ChatGPT APIへのプロンプトは以下のように設計されていました。
const personas = [
{ key: 'yo', name: '陽キャ', system: 'あなたは陽キャのキャラクターです。明るく元気な言葉でユーザーを励ましてください。' },
{ key: 'rikei', name: '理系', system: 'あなたは理系のキャラクターです。論理的で落ち着いた言葉でユーザーを励ましてください。' },
{ key: 'sparta', name: 'スパルタ', system: 'あなたはスパルタのキャラクターです。厳しくも的確な言葉でユーザーを励ましてください。' },
{ key: 'iyashi', name: '癒し系', system: 'あなたは癒し系のキャラクターです。優しく温かい言葉でユーザーを励ましてください。' },
];
6.デザインを整える
シンプルなHTMLだとちょっとダサすぎるので、いまっぽいデザインに書き換えてみましょう。
デザイン修正だけなのに「Y」を10回くらい叩かされました。
以下に理由を書いていますが、CodeXに文脈を伝えるのが少し面倒でした。
この辺はGitHub Copilotの方が操作性は高いと感じます。
7.テストコードを書かせてみる
自動生成のソースコードはテストコードとセットで作成するべきだと個人的には考えています。
今回もテストコードを書かせてみます。
先ほどのCSSの作成の時もそうでしたが、CodeXが現状を把握をするのにすごく時間がかかります。
以下のプロンプトはかなり有効だったのでお試しあれ。
テストコードが提案されました。
テストに実行方法も記載してくれているので実行してみます。
コケました。
Codexに伝えて、原因を探ります。
修正が完了したため、再テストしてみます。
GETとPOSTの2本のテストに通過しました。
8.テストコードを追加してみる
テストコードが少なすぎるので、Codexに愚痴をこぼします。
愚痴をこぼしたあとのページの確認がテストコードに追加されました。
submitのPOSTも含めてテストに通過しました。めでたしめでたし。
さいごに
さて、今回はCodexの検証を行いましたが、コンテキストの渡し方以外は特に不便な点はありませんでした。
反省点としては、スタート地点でデザインについても言及するべきだったな・・・、と。
今回の検証でかかったコストは$2～$3くらいでした。
無駄なキャッチボールが多かったので、初期のプロンプトを最適化すればもっと安く済むと思います。
これからもAWSやAI関連の検証記事をたくさん書いていきます。
↓ のスターを押していただけると嬉しいです。励みになります。
最後まで読んでいただき、ありがとうございました。
エンタープライズ第一本部では一緒に働いてくださる仲間を募集中です。以下のリンクからお願いします。
執筆：英 良治 (@hanabusa.ryoji)、レビュー：@nakamura.toshihiro
（Shodoで執筆されました）
