[プログラムの自動生成に再挑戦] Cursorに挑戦

１．勘違い

先日、Cline+Claude 3.5 Sonnetで、それなりにプログラムの自動生成ができました。

今度は、Cursorを試そうと思いましたが、前回のClaude 3.5 Sonnetの費用が中々のものだったので、躊躇していました。そこで、ふと見たWebの記事で、勘違いに気づきました。

Curosrはプラン内で、Claude 3.5 Sonnetも使えるじゃないか。
なんで、GPT-4, GPT-4oだけだと思っていたんだろう。
以前に読んだ古い記事の内容を、自身がアップデートを、できてなかったようです😅

下記は、Cursor各Subscriptionで使用可能なPremium Modelの詳細です。

２．死屍累々

作成対象は、前と同じくTwitter風のアプリ作成としましたが、苦戦しました。
下記は、途中で断念したプロジェクトフォルダの山です。３０回ほど試行錯誤しましたね😅

失敗理由は、主に下記の通りでした。

(a) Windows/Powershellのコマンドを生成してくれないことがある

・コマンドの連結に"&&"を使う
・一回の"mkdir"コマンドで、複数のフォルダを作成しようとする。
・Linuxの"rm"コマンド、"mv"コマンドを使おうとする。
・指示をすると、直後は直るのだが、また繰り返す。

この類のエラーが多発するたびに、AIが馬鹿になっていく感じもします。
おそらく、状況確認の大量のログのせいで、大事な情報が抜けていくのではないかと推測しています。

(b)フォルダ構成の不整合を理解してくれない

こちらの方が、より大きな問題で、下記のようなフォルダ構成になりがちです。
ＡＩは、"npx create-next-app"コマンドで、"twter-clone"フォルダ下に、プロジェクト環境を作るのに、ルート直下に、別のフォルダ／ファイルを作り始め、同一目的のファイルが複数存在する不整合な状態になります。😵

そして、下記のようにうまくいきませんでした。

・間違いを指摘しても、また繰り返す。
・指示してファイルを移動させて、また繰り返す。
・人で出直しても、また繰り返す。
・ファイル（ｂ）の参照を指示し「わかりました。修正します。」と言いながらファイル（ａ）を直す。
・".cursorrules"ファイルに、フォルダ構成を記載しても、繰り返す。

.
├─ prisma
│  └─ schema.prisma・・（ａ）
├─ twitter-clone
│  ├─prisma
│  │   └─ schema.prisma・・（ｂ）
   ├─src 
      └・・・

ちなみに、前回のClineではどうだったかというと、Cursorと同様に"twitter-clone"フォルダを作りましたが、エラーを直しているうちに、必要なファイルを全てルートフォルダ直下に生成しました。ただし、大量の残骸ファイルをあちこちに残しましたが😅

３．解決

きのぴーさんのポストの情報をもとに、やってみることで、進むようになりました。

３．１．実際の手順

環境は、Windows 11、PowerShell、Node.js 22.13.0、corsor 0.44.11+Claude 3.5 Sonnetです。

３．１．１．Rules for AIの設定

Cursor Settings → General → Rules for AIに、下記を設定します。

- 回答は日本語で出力してください。
- 環境は、Windows 11上のPowershellです。コマンドはPowerShellのものを使用してください。
- コマンドの結合に'&&'を使用することは禁止です。代わりに';'を使用してください。
- ディレクトリ構成の確認には、'tree'コマンドを使用してください。
- 'mkdir'コマンドで、複数のフォルダを同時に作成することはできません。一つずつ作成してください。
   禁止例） mkdir folderA folderB folderC
   許可例)　mkdir folderA; mkdir folderB; mkdir folderC

３．１．２．Next.jsのプロジェクトを作成

おおよそ、きのぴーさんのポストのとおりです。

①新しいフォルダを開く

②新しくTerminalを開き、下記コマンドを実行。

 npx create-next-app@latest . --yes

Windowsには、"yes"コマンドがなく、ポストから変更が必要でした。
今は、"npx create-next-app"コマンドに"--yes"オプションがあるようです。

③きのぴーさんが公開しているリポジトリの".cursorrules"ファイルのv5をルートフォルダ直下に配置する。

https://github.com/kinopeee/cursorrules

④".cursorrules"ファイルの 技術スタック、プロジェクト構成のブロックを選択して、「Add Symbol to New Composer」

⑤Composer で「技術スタック、プロジェクト構成を現在のプロジェクトに合わせて更新して」

３．１．３．ここからアプリ作成の本番

①Composerに「Twttier風のチャットアプリを開発します。適切な技術スタック、プロジェクト構成を検討して、.cursorrulesファイルを更新してください。」と指示。

②Agentに「Twttier風のチャットアプリの開発を進めてください。」とお願い。

③あとは対話して進める😄

・"npm"/"npx"によるパッケージインストール
・"mkdir"によるフォルダ作成
で、人手で"Run Command"を実行する以外は、一定の機能を作成するまで、ノンストップでした。

④引き続き、Twttier風のチャットアプリの開発を進めてください。」の指示を繰り返す。

⑤どれから実装するか聞いてきたので、「1番から順にお願いします。」と指示

⑥どれかを繰り返します。

・「引き続き、Twttier風のチャットアプリの開発を進めてください。」
・「1番から順にお願いします。」
・下記のようなエラーが出て止まったら、「修正を継続してください。」

⑦「静的解析を実行し、エラーを修正してください。また、自動実行可能なテストを計画し、テストコードを作成し、テストを実行してください。静的解析と自動テストが、すべて正常に終了するまで、繰り返してください。npm及びnpxの実行権限を与えます。」とチャレンジングな指示をしてみました。

テストコードを作成し始めましたが、自動実行にはなりませんでした😅

自動テストをすべてクリアするようになったのですが、それなりに動作するまで、手間がかかりました。下記はデバッグの指示です。（７）のバクでは、だんだん指示がヒートアップしていきますが、強い指示の方がAIもいろいろ考えるようです😅

（１）起動時にエラーが出いました。原因を調査し修正してください。必要なテストも追加してください。		（２）新規登録を押下したら、画面遷移時にエラーが出ました。原因を調査し、類似の箇所も含めて修正してください。必要に応じて、テストも追加してください。						
（３）ユーザ登録時に、アカウントを作成ボタンを押下すると、setUser is not a functionというエラーが表示されました。原因を調査し、類似の問題も含め解決してください。必要に応じて、テストも追加してください。	
（４）アカウントの作成ボタンを押下したら、"アカウントの作成に失敗しました"と表示されました。
　　　→ユーザが既に登録されているということなので、上記のエラー時に途中まで走ったのかも。			（５）新規ユーザ登録はできましたが、ログインボタンを押下性手も画面が変わらず、ログインできません。
（５）’ 引き続きログインできません。
（５）’’ 引き続きログインできません。						
（６）ログインで画面が切り替わりましたが、エラーが出ました。原因を究明し、類似した問題も含めて、解決してください。必要に応じてテストも追加してください。						

（７）起動時にエラーが出ます。	
（７）’ 起動時に違うエラーが出ます。						
（７）’’ エラーは解決していません。						
（７）’’’ 依然としてエラーは解決していません。考えられる可能性を網羅的に検討し、類似問題も含め洗い出したのち、すべての不具合を解決してください。必要に応じて、テストも追加してください。
    →これ入れたら頑張りだした！！						
（７）’’’’ 依然として解決していません。必死に頑張ってください。
（７）’’’’’ 依然として解決していません。画面上には下記のエラーが出ています。
            Each child in a list should have a unique "key" prop. Check the render method of `MessageList`. See https://react.dev/link/warning-keys for more information.
（７）’’’’’’ 起動時に、明示的なエラー文言は表示されませんが、添付のイメージのように、ログイン画面に遷移しません。				
（８）AIの指摘
　Error: Route "/api/messages/[messageId]/like" used `params.messageId`. `params` should be awaited before using its properties.
（８）’　いいねを押すとエラーが出るようですね。
（８）’’’　なおりませんね。
（９）メッセージの投稿で、"TypeError: createMessage.mutateAsync is not a function"のエラーが出ました。						

４．まとめ

人間がやっていることは、
　・"Run Command"のクリック
　・「引き続き、・・・の開発を進めてください」
　・「1番から順にお願いします。」
　・「修正を継続してください」
の繰り返しでした。

途中で、「静的解析を実行し、エラーを修正してください。また、自動実行可能なテストを計画し、テストコードを作成し、テストを実行してください。静的解析と自動テストが、すべて正常に終了するまで、繰り返してください。」を入れたけど、これは本来最初に与えておくべき指示なのでしょう。

印象として、Cline+Cluade 3.5 Sonnetでは、新人に付きっ切りな対応をした感じでしたが、
今回のCusor+Claude 3.5 Sonnetは、横で見ていて
　「たまに、どう調子は？」
「こう、こうこういう状態です」
「そう、じじゃ続けてお願いします」
という感じでした。

とはいえ、横で張り付いて状況確認をしているので、1時間、２時間、放置できるようにしたいです。

次のステップとして、下記のクリアを目指したいと思っています。

・自走の方法をもっと調べて試してみよう。

コマンドの自動実行とか、ブラウザ上での自動テストとか。

・テストを作らせて実行させたけど、ブラウザ上での動作確認と修正が長かった。

・複数のCusrorにそれぞれ、サブ機能の開発を分担できないか。

そうすれば、張り付いていても、効率N倍だし。
ただ、そのためにはAgent間の連携とか、上位Agent(仕様、インタフェース管理か？）との連携が必要になってきますね。

５．おまけ

根拠がなく感じたことですが、障害調査の突破力はClineの方があるように思います。
突拍子もない変更をする代わりに、突拍子もない方法で解決をすることもあるのかもしれません。

最初に、ルートディレクトリ直下に、next.jsの環境を用意しないと、素のCursorはお手上げのようでしたが、Clineはあちこちにログを埋め込んで、大量のごみファイルと引き換えに、動くところまで持っていきました。保守性も、何もあったもんじゃない状況でしたが😅

Cursorを基本に動作させて、ここぞというときに、Clineの意見も聞いてみるとかできると、面白いかもしれません。

2025.01.23 山崎作成