LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

デジタルキューブグループAdvent Calendar 2024

Day 12
@KKoichi276052

CursorのAIとの上手な付き合い方

Last updated at Posted at 2024-12-11

この記事は デジタルキューブ ＆ ヘプタゴン Advent Calendar 2024 の 12月12日分の記事として執筆しています。

自己紹介

デジタルキューブでフロントエンドエンジニアとして働いている片岡です。最近はShifterという自社サービスのバックエンドも触らせてもらってます。

この記事ではAIとズッ友になるための方法を今話題のエディタであるCursorを題材に、（時々VSCodeとGitHub Copilotにも目を当てて）、様々な記事を読んで知った活用方法についてまとめてました。少しでも参考になる部分があれば幸いです。
また理解が誤っていたりする部分等もあるかもしれませんので、その際はご指摘くださいませ。

初めに：Cursorとは

生成AIとコーディングすることを前提に作られた、VSCodeライクなテキストエディタで、Code - OSSのフォークなので外観や使用感もほぼ VS Codeと同じです。
寛大な無料プランが用意されており、筆者は枠を使い切ることがほぼありません（もちろん使い方によりますが）。
公式サイトがめちゃくちゃかっこいいので、使いたくなっちゃいますね（逆にダサいと使おうという気持ちが半減してしまうのは私だけでしょうか）。

image.png

活用方法①：まずはAIの得意なことを知る

こちらCursorに限らずですが、AIと上手に付き合っていくためには、まず何が得意かを知っておくのが吉です。VSCodeのこちらのドキュメントから引用すると

  1. テストと反復的なコードを書く
  2. デバッグと構文エラーの修正
  3. コードへのコメントと説明
  4. 正規表現の生成

の4つのようです。過度な期待をして、げんなりするのはやめてあげましょう。何事も期待しすぎなければ、裏切られたときの悲しみは少ないです。

活用方法②：いい質問（プロンプト）を心がける

こちらはコーディングに限らず、そしてヒトに対しても同じことが言えますが、いい回答を得るためにいい質問をしたほうがよいです。
「いい質問ですね」と言われるとちょっとだけ誇らしい気持ちになるのは私だけでしょうか。
以下のことを意識して質問するとよいです。

  • 具体的、そして正確に求めているものを簡潔に伝える
  • 複雑、もしくは大きなアウトプットが予想される場合は段階的に分けて依頼する
    • 基本的に小さくアウトプットさせるほうがベターです
  • 一回で見限らない
    • 違うと教えたら、次はそれを考慮してくれます。ただし、何をして欲しくないではなく、こうして欲しいと伝える

変なことを言ってきたら、自分が変なこと言ってるかもと一度疑ってみましょう。なんでも人のせいにせず、客観的な視点を持つのはとても重要です。

活用方法③：文脈（コンテキスト）を与える

一つ前の活用方法と若干被る部分がありますが、文脈（コンテキスト）を与えるとAIはとても喜んで、いい回答をしてくれます。
何の話してるかという前置きがあるかないかで、理解度が変わるのは人間も同じですね。

具体的には以下を与えてあげると、想定していることと全然違うことが返ってくることが減る印象を持っています。

  • チャットの場合

    • @で適切なコンテキストを指定する
      image.png

      私がよく使うのは

      • @Web：でインターネット上の情報を参照する（GitHub Copilot in VS Codeも可能）
      • @Docsで公式のドキュメント（候補を出してくれますが、存在しない場合は自分で登録することも可能。すごい）。を参照する（GitHub Copilot in VS Codeではできない）
      • @Codebase：いい感じに開いているプロジェクトを読み取って回答をしてくれます。まだ明確にやりたいことが決まってない、抽象的な質問の場合などはこちらを使うのが無難です

    • サンプルコード

      • こんな感じのコードをイメージしてるよと貼ってあげると、それに準じたコードを生成してくれる

    • 画像

      • なんと画像をインプットにすることもできます（GitHub Copilot in VS Codeではできない）
        image.png

  • 自動補完の場合

    • イメージしているコードの出だしを書いてあげる
    • いいコメントを入れる
    • いいコードを書く
      • 例）命名規則など統一感のあるコードを書く
      • 例）理解しやすい関数名にする
        • 例えば、fetchData（）とかは✕、もっと具体的な名前にする

活用方法④：ルールを定めてあげる

回答の約束事を設けてあげると、AIの迷いを少なからず減らしてあげられます。

CursorではAIのルールを決められる設定があるので、そこに守ってほしいルールを書いてあげましょう（Cursor Setting）。
image.png

どんなことを書けばいいか分からない方は、まとめサイトを参考に書いてみるのがいいと思います！
https://cursor.directory/
https://github.com/PatrickJS/awesome-cursorrules

Cursorでよく考えられていると思うのは、ルートディレクトリに.cursorrulesというファイルを作成して、ルールを記述すればエディタ単位ではなく、プロジェクト単位での設定も可能なことです。
このプロジェクトではこの技術スタックだからこのルールでお願いといった棲み分けもできます。

エディタ単位でルールを定めてあげるのはGitHub Copilot in VS Codeでも最近できるようになったみたいです。
https://dev.classmethod.jp/articles/custom-instructions-now-available-in-github-copilot-in-vs-code/
ただCursorと比べるとだいぶめんどくさそうなのと、プロジェクト単位での設定はできなさそうです。

こんなこともできるよCursor

他にも便利な機能として、Composerがあります
composerはプロンプトを入れると、こんなのどう？とファイルやコードの更新を提案してくれるすごい機能です。ここは採用するけど、ここはしないなどといった柔軟な使い型ができます。（最近リリースされたCopilot Editsが似たような機能です）

他にもまだベータ版ですが、Notepadsという機能も面白そうです。
公式ドキュメントには、composersとチャット間のコンテキスト共有をさらに便利にする、.cursorrulesの強化版というようにかかれています。
.cursorrulesにはできないファイルの添付が可能なようです。

他にもAI Reviewがベータ版でリリースされています。（こちらは現在パブリックプレビューでウェイトリストに並ぶ必要があります）

筆者がよく使う機能

兎にも角にも@を使いまくってます。普通のブラウザのAIチャットに相談するとくはどうしてもコンテキストを渡すのが難しいですし、やろうとしても大変です。
一方で、エディタに内蔵されているAIを使えばアプリ間の移動もなくなりますし、なによりAIが欲しいコンテキストを簡単に渡してあげられます。
composersやRules of AIも使っていますが、まだまだ試行錯誤する余地があると感じています。これからどんどん使い倒していきたいです。

最後に：活用方法まとめ

  1. まずはAIの得意なことを知る
  2. いい質問（プロンプト）を心がける
  3. 文脈（コンテキスト）を与える
  4. ルールを定めてあげる

AIを活用して開発者体験を向上させて行きましょう！
またGitHub Copilot in VS CodeもClaude Sonnetが使えるようになったりと目が外せません（Cursorの後追いが否めませんが）。引き続き注視していきます。
ハッピーコーディング！

参考記事URL（どの記事がどの部分の参考かまで）

https://www.builder.io/blog/cursor-ai-for-developers
https://code.visualstudio.com/docs/copilot/prompt-crafting
https://code.visualstudio.com/docs/copilot/copilot-vscode-features
https://docs.github.com/en/copilot/using-github-copilot/best-practices-for-using-github-copilot
https://code.visualstudio.com/docs/copilot/workspace-context
https://github.blog/developer-skills/github/how-to-write-better-prompts-for-github-copilot/
https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/prompt-engineering-for-github-copilot
https://github.blog/ai-and-ml/generative-ai/prompt-engineering-guide-generative-ai-llms/
https://github.blog/developer-skills/github/how-to-use-github-copilot-in-your-ide-tips-tricks-and-best-practices/
https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/finding-public-code-that-matches-github-copilot-suggestions
https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/example-use-cases/example-prompts-for-copilot-chat
https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/example-use-cases/writing-tests-with-github-copilot
https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/example-use-cases/refactoring-code-with-github-copilot
https://docs.cursor.com/tab/from-gh-copilot
https://docs.cursor.com/context/@-symbols/@-docs
https://www.datacamp.com/tutorial/cursor-ai-code-editor
https://myscale.com/blog/3-ways-cursor-ai-enhances-workflow/
https://www.builder.io/blog/cursor-ai-for-developers
https://pieces.app/blog/10-prompt-engineering-best-practices

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?