はじめに
AIエディタのCursorにAIエージェント機能のComposerが追加されてたので使ってみました。
Composer機能とは
自然言語で入力したプロンプトを基にAIが関連するファイルのコード生成を行ってくれる機能。
特定のファイルということではなく、プロンプトを基に一度にプロジェクト全体的にコード生成が可能です。
条件
既存プロジェクトで実行しています。
バックエンドにLaravel、フロントにNext.jsを使用しています。
3回勝負のじゃんけんゲームの作成を行ってみます。
ユーザーとコンピューターが3回じゃんけんを行い先に2勝した人がゲームの勝者とするルールです。多分、一般的な3回勝負のじゃんけんルールです。
使用するモデルはデフォルトのclaude-3.5 sonnetを使用します。
コード生成
実際にプロンプトを与えてコード生成させてみます。
最初に細かい仕様は指定せずざっくりしたプロンプトを与えてみます。
与えたプロンプト：「バックエンドをlaravelで、フロントnext.jsを使い、じゃんけんゲームを実装してください。じゃんけんは3回勝負として2回以上勝った方をゲームの勝者とします。」
すると、必要なファイル/コードがプロジェクトに合わせて適切なパスに生成されました。
- app/Http/Controllers/JankenController.php（新規作成）
- src/app/janken/page.tsx（新規作成）
- routes/api.php（既存ファイルに追記）
ブラウザ表示してみると、それっぽい画面になっています。まだ文字色が見にくく、じゃんけんボタンクリックした時に通信エラーが発生しています。
修正するようにプロンプトを与えます。
与えたプロンプト：「文字色を見やすく全体的にアイコンと文字フォントを大きくしてください。通信エラーを解消してください。」
きちんと見れる様になりました。3回勝負の途中経過が分かる様なUIにもなっています。
しかし実際に動かすと意図する3回勝負の仕様なっていないので、もう少し具体的なプロンプトを与えてみます。
与えたプロンプト：「じゃんけんを3回行い、勝った数の多い方をwinnerとします。あいこの場合は、じゃんけんが成立しないので回数としてカウントしません。画面上は今何回目のじゃんけんかを表示してください。3回じゃんけんが成立して、winnerが決まったら、winnerを表示してください。画面でユーザーとコンピューターの勝ち数を表示してください。3回じゃんけんが成立したら、再度ゲームをするボタンを表示して、再度ゲームできるようにして。」
仕様が近くなりましたが、あいこの時に勝敗をリセットされています。ついでにUIもそれらしく改善されています。
あいこの時のプロンプトを与えます。
与えたプロンプト：「あいこの場合に勝敗をリセットしないでください。あいこの場合は、じゃんけんが不成立として、勝敗はそのままで3回勝負の1回としてカウントしないでください。」
まだ、あいこの時の処理や3回勝負のカウントが意図しない形のままです。
この後も何度かプロンプト与えてみましたが、結果として意図した仕様にはなりませんでした。
感想
タスク内容として難しいことをやらせたわけではないですが、それでも、プロンプトで指示を与えるだけでコードを一切触らずに既存プロジェクトで適切な箇所にファイルを生成し、ざっくりプロンプトを基に必要なファイルを都度編集される事は単純にすごいなと思いました。
今回はプロンプトの内容があまりよくない（使う人間側の能力が足りてない・・・）様な気もするので、ある程度仕様書レベルでプロンプトを組んであげればまた結果も違いそうです。
タスク内容に依るでしょうが、現状でも影響範囲が限定的なタスクなら最低でも雛形レベルの実装を行なってくれて、開発工数をぐっと節約してくれそうです。
さいごに
AIによるコード生成界隈の変化は非常に大きいので、定期的にキャッチアップして紹介したいと思います
おすすめ書籍
