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

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

https://qiita.com/michihiro88/items/acb3cd36144beb6ecc79

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

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

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

https://docs.cursor.com/get-started/usage#subscription-tiers

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

![スクリーンショット 2025-01-23 01.47.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982568/f9c94b80-0b31-895c-2bbd-14966ecd47b3.png)

失敗理由は、主に下記の通りでした。
<dl>
  <dt>(a) Windows/Powershellのコマンドを生成してくれないことがある</dt>
  <dd>
  ・コマンドの連結に"&&"を使う<br/>
  ・一回の"mkdir"コマンドで、複数のフォルダを作成しようとする。<br/>
  ・Linuxの"rm"コマンド、"mv"コマンドを使おうとする。<br/>
  ・指示をすると、直後は直るのだが、また繰り返す。<br/><br/>
  この類のエラーが多発するたびに、AIが馬鹿になっていく感じもします。<br/>
  おそらく、状況確認の大量のログのせいで、大事な情報が抜けていくのではないかと推測しています。
  </dd><br/>
  
  <dt>(b)フォルダ構成の不整合を理解してくれない</dt>
  こちらの方が、より大きな問題で、下記のようなフォルダ構成になりがちです。<br/>
  ＡＩは、"npx create-next-app"コマンドで、"twter-clone"フォルダ下に、プロジェクト環境を作るのに、ルート直下に、別のフォルダ／ファイルを作り始め、同一目的のファイルが複数存在する不整合な状態になります。😵<br/><br/>  

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

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

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

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


https://x.com/kinopee_ai/status/1881240955917054057

### ３．１．実際の手順
環境は、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のプロジェクトを作成
おおよそ、きのぴーさんのポストのとおりです。

<dl>
    <dt>①新しいフォルダを開く</dt>
    <dt>②新しくTerminalを開き、下記コマンドを実行。</dt>


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

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

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

https://github.com/kinopeee/cursorrules

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

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

### ３．１．３．ここからアプリ作成の本番
<dl>
<dt>①Composerに「Twttier風のチャットアプリを開発します。適切な技術スタック、プロジェクト構成を検討して、.cursorrulesファイルを更新してください。」と指示。</dt>
<dt>②Agentに「Twttier風のチャットアプリの開発を進めてください。」とお願い。</dt>
<dt>③あとは対話して進める😄</dt>
<dd>
	・"npm"/"npx"によるパッケージインストール<br/>	
	・"mkdir"によるフォルダ作成<br/>
	で、人手で"Run Command"を実行する以外は、一定の機能を作成するまで、ノンストップでした。
</dd><br/>
	
<dt>④引き続き、Twttier風のチャットアプリの開発を進めてください。」の指示を繰り返す。</dt>
<dt>⑤どれから実装するか聞いてきたので、「1番から順にお願いします。」と指示</dt>

![スクリーンショット 2025-01-22 21.42.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982568/acc503f5-790c-23d4-ae7f-51ef9c3b49aa.png)

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

![スクリーンショット 2025-01-22 22.08.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3982568/7ad8a1cd-9bc6-9805-b690-335eb7606802.png)

</dd>

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

</dl>

自動テストをすべてクリアするようになったのですが、それなりに動作するまで、手間がかかりました。下記はデバッグの指示です。（７）のバクでは、だんだん指示がヒートアップしていきますが、強い指示の方が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時間、２時間、放置できるようにしたいです。

:::note
次のステップとして、下記のクリアを目指したいと思っています。
<dl>
<dt>・自走の方法をもっと調べて試してみよう。</dt>
    <dd>コマンドの自動実行とか、ブラウザ上での自動テストとか。</dd><br/>

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

<dt>・複数のCusrorにそれぞれ、サブ機能の開発を分担できないか。<dt>
<dd>そうすれば、張り付いていても、効率N倍だし。<br/>
ただ、そのためにはAgent間の連携とか、上位Agent(仕様、インタフェース管理か？）との連携が必要になってきますね。</dt>

:::

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

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

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


2025.01.23 山崎作成