まずはじめに

最近は生成AIブームで、Cursorを用いた開発も増えてきていると思いますが、
実際に機能を活用して困ったことが結構あったので、軽くそれをまとめようと思い立った次第です。

実体験ベースなので、参考になるかは分かりませんが、気軽に見てもらえると嬉しいです！

概要

Cursorのチャット機能のコツと注意
Tab補完機能を過信しすぎると・・・

Cursorのチャット機能のコツと注意

Cursorにはチャット機能があり、コードベースで解析・コード生成等を簡単に行ってくれます。

ただしいくつか注意しながら使用を行わないと、結構雑に返ってきてしまい、
「あれ？これ自分で調べた方が早かったんじゃない？」
なんてことが起こりうると・・・

極端ではありますが、ちょっといけてない例も踏まえてまとめていきます。

例えば、以下のような機能実装したいとする。

- 概要
    - X機能画面の入力フォームに対してバリデーションを設けたい
    - バリデーションはフォームのすぐ上に出す
        - 赤文字
        - フォントサイズはxxx
    - バリデーションが通った場合は、Y機能画面に遷移する仕様は変更しない
- 画面項目
    - A入力欄
        - 必須チェック
        - 文字数チェック
    - B入力欄
        - メールアドレスチェック
        - 必須チェック
- 注意
    - バリデーションの実装方法はzodで行いたい

NG例

以下のように丸投げしてしまうと、

以下の機能を実装したいので、やり方を教えてほしい
@Aフォルダ

・入力欄にバリデーションチェックを入れたい

「どうやって実装しますか？」「どこに対してですか？」「バリデーションが通った場合はどうしますか？」
など何回も質問攻めを喰らいます。

その後情報を追加して、学習させていくことで解決していくことは多いですが、かなり労力がかかります（気力が削られる）

OK例

以下のような機能を実装したいので、注意点を踏まえて実装方法を教えてほしい。
もしも複数のパターンがある場合は、「ファイルの構成」欄に記載しているコードを解析し、
コードベース上の仕様に合う方針で固めたい。

- 概要
    - X機能画面の入力フォームに対してバリデーションを設けたい
    - バリデーションはフォームのすぐ上に出す
        - 赤文字
        - フォントサイズはxxx
    - バリデーションが通った場合は、Y機能画面に遷移する仕様は変更しない
- 画面項目
    - A入力欄
        - 必須チェック
        - 文字数チェック
    - B入力欄
        - メールアドレスチェック
        - 必須チェック
- 注意
    - バリデーションの実装方法はzodで行いたい
- ファイルの構成
    - @Aフォルダ
        - X画面機能が一通りまとまっている
    - @Bフォルダ
        - Y画面機能が一通りまとまっている
- 補足
    - X機能は~~~~
    - Y機能は~~~~
    - フォームはこのような~~~~

大げさなくらいな概要で書きましたが、何かしら機能を実装する場合は、
これくらい情報を提供しないと、的外れな答えが返ってきたりするので注意が必要です（自分が過去そうでした・・・）

補足

もしもこれでも足りない場合は、情報を追加して学習させていきましょう！
的確に仕様の情報を与えることで、より正確なコードが生成される場合があります。

余談

コードベースで解析させながら、機能丸ごと作ってもらおうとして、
上記のNG例みたいな書き方をし続けた結果、
2日くらいで終わる作業が1週間以上かかって怒られた苦い経験があるので、
AIだからではなく、人に説明するような感じで丁寧に投げましょう！

Tab補完機能を過信しすぎると・・・

CursorにはTabキーを押すことで、予測でコードを入力していってくれる機能があります。

const testName = TestObject.name;
// TestObjectから以下にemailの値を取ってきた、const定義をしたい場合

const testEmail = TestObject.email;

のようなものが灰色で表示されるので、Tabを押すと一瞬で実装が完了します。

const testName = TestObject.name;
// Tabを押して下記のようなものが出てくる
const testEmail = TestObject.mail;

ただしこれを過信しすぎると、
「本当はこの値も定義が必要だった」
「なんか登録処理進めてたのにエラーになる」
「エラーは出ないけど、なんか動かない」
みたいなことが起きます・・・

なので補完した後は、はいおしまい！はやめましょう。

まとめ

AI生成は非常に便利であり上手く使いこなせれば、工数の大幅削減が見込めます。
ですが、使い方次第では工数が膨れたり余計な作業が増えてしまったりするので、
色々試してたくさん失敗してみるのも大切です。

また、以下のことは自分の中での教訓なので、少しでも役に立てれば幸いです。

工数があればCursorルール機能を用いて、プロジェクトの仕様やコード生成の仕様をあらかじめ固めておく
人間に説明するようにAIに対しても丁寧な対応をする
機能を活用することも大事だが、丸投げする思考にはならないようにする
生成されたコードは必ず自分の目で確かめて、品質面や仕様面で問題ないかを担保できるようにする （レビューの時にコード仕様も分からずに提出は絶対にNG）