AI搭載型のCursorエディタの使用方法


はじめに

今回は普段の開発を格段にスピードアップできるAI搭載型のCursorエディタについて紹介します。筆者はフリーランスでwebエンジニアをしております。

インストール

公式サイトから自分のOSにあったものをインストールします。

アプリ起動時にVScodeのプラグインを移行するか?と聞かれると思うので使用している方はYesと答えると便利です。

Cursorアカウントでログイン

※アプリ起動時にログイン画面が表示されるかもです。表示されなかった場合やログインをスキップした場合は以下方法でログインできます。

エディタ右上の歯車マークを押した後に「Sign in」ボタンを押します。画像はMacのものでwindowsだと少しUIが違うかもしれません。

ブラウザが開くのでログインするか、cursorのアカウントを持っていなければ作成します。

プライバシーモードをオンにする

プライベートで使う場合は問題ないと思いますが、仕事で使う場合などではコードが保存・学習されないようにプライバシーモードを設定することをオススメします。
右上の歯車マークを押したあとにPrivacy modeをenabledにします。

参考:https://cursor.sh/privacy

基本的な機能

Tab

Cursorには、次の編集を予測する強力なオートコンプリート機能があります。 一度有効にすれば、常に有効で、最近の変更を考慮して、複数行にわたるコードの編集を提案します。

https://www.cursor.com/features

コード上にカーソルを合わせると提案コードが表示され、Tabキーを押すことで自動でコードを記述してくれます。実際の動作例は以下ドキュメント内のgif画像で見ることができます。
https://docs.cursor.com/tab/overview

筆者は以前このオートコンプリート機能でgithub copilotを使用していましたが、CursorのTab機能を使ってみたところ便利だったのでCursorに移行しました。主な違いは以下でcursorの方ができることが多く、精度もいいと感じています。

  • github copilot:新規コードの挿入

  • curor Tab:新規コードの挿入に加えて、既存コードの編集・削除もしてくれる

GitHub Copilotからの移行についてドキュメントにも記載があります。
https://docs.cursor.com/tab/from-gh-copilot

Command K + Chat

Command K
windowsの場合はCtr + Kです。

コマンドKを使えば、AIを使ってコードを編集したり書いたりすることができる。編集するには、いくつかのコードを選択して「Edit」をクリックし、コードをどのように変更するかを記述する。まったく新しいコードを生成するには、何も選択せずにコマンドKをタイプするだけです。

https://www.cursor.com/features

ドキュメント:https://docs.cursor.com/cmdk/overview

Chat

チャットは、あなたのコードベースを見ているAIと会話することができます。チャットは常にあなたの現在のファイルとカーソルを見ることができるので、次のような質問をすることができます:「ここにバグがありますか?Command+Shift+Lまたは"@"で、特定のコードブロックをコンテキストに追加できる。Command+Enterでコードベース全体とチャットできる。

https://www.cursor.com/features

ドキュメント:https://docs.cursor.com/chat/overview

Command KとChatの使用例として、以下Youtube動画がわかりやすかったので引用して添付させていただきます。

Composer

Command + I(windowsならCtr + I)で起動できます。チャットと同じようにメッセージを送りますが、composerはファイル作成やコード変更まで自動で行ってくれます。変更後の提案コードが表示されるので、承認するか拒否するかを選択します。

Composerの使用例として、こちらもわかりやすかった動画を引用して添付させていただきます。

その他の機能は公式サイト参照

LP機能紹介ページ:https://www.cursor.com/features
ドキュメント:https://docs.cursor.com/get-started/migrate-from-vscode

+α:プロンプトの書き方

Cursor(AI)に対してどのように質問や指示したらいいか?疑問に思うことはないでしょうか?個人的には情報が多ければ回答の精度が良くなるので、なるべく具体的に質問することだと思います。以下がその例になります。

  • 悪い例:「リストの重複を削除して」

    • → どの言語なのか?リストの中身はどんな値が入ってるのかなどがこれではわからない

  • 良い例:「JavaScript ES6を使用しています。[1, 2, 2, 3, 1]というリストの重複を削除して、元の順序を保ったまま[1, 2, 3]という結果を得たいです。Setを使わずに解決する方法を教えてください。」

良い例の解説

  • 要件を明示する

    • 「JavaScriptでリスト内の重複を削除する方法を教えてください。ただし、元の順序を保持したいです。」

    • → リストの順序を保持するかどうかを明記することで、順序を維持したまま重複を削除する方法(例: Setやfilter()を使用)を提案しやすくなる。

  • 使用環境を明確にする

    • 「JavaScript ES6を使っています。リスト内の重複を削除する方法を教えてください。」

    • → 使用しているJavaScriptのバージョンを明記することで、そのバージョンで使用可能な最新の機能を利用した回答を得られる。

  • 望む結果の例を添える

    • 「JavaScriptでリスト内の重複を削除する方法を教えてください。例えば、[1, 2, 2, 3]を入力したら[1, 2, 3]としたいです。」

    • → 具体的な例を添えると、AIは質問の意図を正確に理解できる。

  • 制約条件を伝える

    • 「JavaScriptでリスト内の重複を削除する方法を教えてください。ただし、Setを使わずに解決したいです。」

    • → 特定の方法を避ける条件を明確に伝えることで、他の解決策(例えば、filter()やreduce()を使う方法)を提案してもらえる。

最初から完璧な情報を提示するのは難しいと思うので、期待した回答が来なかったらあとから情報を追加していくのでもいいと思います。

おわりに

筆者自身、Cursorを使用してから開発効率が大きくアップしました。Cursorには無料プランもありますので少しでも気になった方は是非使用してみてはいかがでしょうか?


いいなと思ったら応援しよう!