見出し画像

Cursorを1年弱触っているエンジニアの最近の使い方

こんにちは、ニケです。
皆さん、Cursor 使っていますでしょうか。

私は去年の10月末から使い続けているのであと一ヶ月で1年が経過します。時間が経つのは早いですね。

前回書いた記事(↓)から半年経ち、開発の仕方が少しアップデートされたので改めて記事にしようと思います。

ちなみにこちらの記事ではブラウザ版のClaudeも紹介していますが、Claude-3.5-SonnetがCursorで利用できるようになってからはあまり使っていないです(設計の壁打ちとかでたまに使ったり)。

そのため、この記事ではCursorにフォーカスを当てて紹介していきます(最後に少し他に使用しているAIツールを共有します)。

なお、役割によって使用用途が変わってくると思うので、予め私の属性を提示しておきます。

  • 仕様を考えたりコード書くことがメインの仕事

  • 仕事以外でも暇なときはコードを書いている

  • 0 → 1 での開発は少なめ

  • 扱っているアプリは小〜中規模が多い

  • よく使う言語はTypeScript, Python

 以降で紹介する方法は個人的にハマっている方法なので、これがベストではないです。1つの参考として見てもらい、後はご自身で使ってみて調整していくのが良いと思います。

Cursorについてもっとちゃんと知りたい場合は、下記の本を一読することを強くオススメします。


Cursorとは

VSCodeからフォークされたAIエディタです。
VSCodeの豊富な拡張機能がほぼそのまま使える上、AIによる豊富なアシスト機能が付いています。
私が知っている限りでは、VSCodeの完全上位互換のはずなので、現在もVSCodeを利用している方は可能であれは移行することをオススメします。

$20/500回/月ですが、コードを書く機会が多い人はすぐに元が取れるので今すぐ課金しましょう。
ちなみに私は500回じゃ足りないので倍課金($40/1,000回/月)してます。

設定

あまりイジっていないのでほぼデフォルトだと思いますが念の為載せておきます(最近インストールされた方だと設定が違うかも知れません)。

Role for AI

日本語で返信してください。
コード生成を求められた場合は、変更部分のみをわかりやすく説明し、提示してください。
与えられた情報から問題や課題などを特定できない場合は、必要と思われるソースコードやファイルをユーザに聞き返すようにしてください。足りない情報から推測して回答するのは極力避けてください。
また、質問者の発言が本当に正しいかを吟味し、常に自分で考えた回答するように心がけてください。

日本語で回答させる以外の部分はそんなに効いていない気がしますがとりあえずこんな感じで設定しています。
1年前から変更していないので、ここをこう変えたら劇的に性能が上がった!、みたいな体験談があったらぜひ教えて下さい。

Models

使わないモデル以外は邪魔なので消しておきます。

Features

Beta

AIチャット機能

Cursorのメインウェポン。
エディタにChatGPTが付いただけなのに強すぎる。

モデル

私が使用しているモデルは下記の4種類ありますが、基本的にclaude-3.5-sonnetしか使っていません。

  • claude-3.5-sonnet

  • gpt-4-turbo-2024-04-09

  • o1-mini

  • o1-preview

gpt-4-turbo-2024-04-09は稀にAnthropicのAPIの接続状況が良くないときに使います。gpt-4oファミリーよりも個人的に好みの回答をしてくれます。

o1-mini, o1-previewは、sonnetと同程度の回答をしてくれるときもありますが、回答精度が安定しないので普段遣いはしていません。たまに他の回答が欲しいときに利用することがあります。

基本の使い方

実はCursorでできることはブラウザ版のClaudeでもだいたいできます。同じモデルが使えるので当たり前と言えば当たり前ですね。

Cursorの特筆すべき点は、コードの中身を簡単にAIに渡せる、この一点に尽きます。これからその例を提示していきます。

現在のファイル

Cursorでは今開いているファイルは自動的にAIチャットに読み込まれるようになっています。
そのため、ファイルを開いている状態で「リファクタリングして」と入力・実行するだけでファイル全体を良い感じにキレイにしてくれたりします。

たまに全く何も情報を与えない状態で質問したい、という状況も発生してくると思います。
その時は、AIチャット欄にあるファイル名(上の画像だと「vercelAIChat.ts」)の×ボタンを押して消してから質問しましょう。

特定のコード

特定のコードをピックアップして修正する場合は、コードを選択した状態で ⌘LCtrl + L)を押すと、新しいチャット欄を開いたうえで、指定したコードを載せてくれます。
この状態で「〇〇のように修正して」などと指示を出すと適切に修正案を出してくれます。

なお、このときも先程と同じように開いているファイル全体も一緒に読み込まれているので、指定コードだけでなく周辺コードの内容も鑑みて提案してくれるのでかなり助かります。

また、⌘Lはターミナルでも使用することができるので、エラー文言をすべて選択してから⌘Lし、「このエラーを解決して」みたいに質問することも可能です。

TIPS: 特定のコードを現在のチャットに追加する

⌘L(Ctrl + L)は便利なのですが、毎回新しいチャットを立ち上げてしまうのが難点です。
会話の流れを保ったまま質問したい、ということも多いと思います。

その時は下記のように設定することで回避できます。

  1. Command/Ctrl + Shift + P を押します。

  2. 「preferences: open keyboard shortcuts」(基本設定:キーボードショートカットを開く)に移動します。

  3. aichat.insertselectiontochat を編集して任意のキーコマンドを指定します。

上記は私は例ですが、簡単に使い分けられるように ⌥ + ⌘ + L にしています。
設定後、コードを選択した状態でこのキー操作を実行すると、既存のチャットに指定したコードを追加してくれるようになります。

複数のファイル

アプリ開発をしていると1つのファイルで済む修正、という状況は限られてくると思います。
複数のファイルをAIチャットにわたす方法はいくつかあるのでいくつかのパターンに分けて紹介します。

数ファイル => @ファイルシンボルを使う

シンボルとは@から始まるコマンドことで、様々なものが用意されています。
@を押すと下記のような一覧が表示されるので、Filesを選びます。

するとファイルの一覧が表示されるので、必要なファイルを選択しましょう。@の後にファイル名を入れていくと予測変換でファイルを絞ってくれるのも便利です。

該当のファイルが2-3個とかの場合はこれで済むことが多いです。

~10ファイル => Add contextを使う

複数のファイルを一気に指定するときに便利です。
いちいち画面が閉じないので、ポチポチしていくだけで勝手に選択したファイルがAIチャットに読み込まれていきます。

~10ファイル => Reference Open Editorsを使う

AIチャット欄で / と押すと Reference Open Editors というのが出てきます。
これを選択すると、現在開いているファイルがすべてAIチャット欄に読み込まれます。

ちなみにこの機能は登場時から私がずっと待ち望んでいた機能で、存在を知ったときは大歓喜していました。

それ以上のファイルを渡す => 自作スクリプト x Long Context Chatを使う

え、@フォルダシンボルやCodebase参照は使わないの?
と、Cursorを使っている方は思うかも知れません。

これは個人的な見解ですが、フォルダシンボルやCodebase参照は体感的に期待した精度が出ることが多くないのでほぼ使っていません。

⚠ これらの機能では質問内容に関連するコードの一部のみがAIチャットに渡されていて、実際にすべてのコードの中身が渡されているわけではありません。詳しい仕様については割愛します。

そもそもSonnetは200kまで入力できるので、余程大量のファイルを渡さない限りは問題ないはずです(リポジトリの中身をすべて渡すなど)。

AIチャット欄の右上にある Normal Chat というのを押すと、Long Context Chat というのが選べるので、ここに自作スクリプトを使用して必要なファイルを一纏めにしたファイルを渡します。

じゃあこの一纏めにしたでかいファイルをどうやって作るの? という課題が残りますが、下記の記事や私のリポジトリを参考にしてもらえると良いかも知れません。

エラー対応

何かしらのエラーが出ている場合は通常そのコードに赤線が出るので、カーソルを当てて表示される「AI Fix Chat」ボタンを押してみましょう。勝手にチャットが実行されて代替案を提示してくれます。

このエラー赤線は拡張機能によるものなので、必要に応じて使用している言語の拡張機能はCursorに追加しておきましょう。
「VSCode Python 拡張機能」のように検索すると言語別オススメの拡張機能リストが得られるはずです(検索するときは「VSCode」であることに注意)。

また、「AI Fix Chat」を押すと自動的にチャットが送信されてしまうので、意図を汲み取ってくれずに適した回答をしてくれない場合があります。
この場合は、最初のチャット欄に戻って情報を追加してから再度送信しましょう。

マルチモーダル(画像入力)

Cursorはマルチモーダルにも対応しているので、画像を読み取らせることも可能です。
私は良くブラウザで出たエラーをスクショして雑にそのままドラッグ&ドロップして質問したりしてます。

@シンボル

AIチャット欄の便利機能です。ただ、私はほとんど使用していません。

現在使っているのは、たまに @ファイルシンボル、たまーーに @Docsシンボルです。@ファイルシンボルは先程説明したので割愛します。

@Docsシンボル

このシンボルでは予め用意しておいたドキュメントを使用してAIチャットの回答に利用するというものです。
よく使用するライブラリやgitリポジトリのURLなどを登録しておくと便利です。

ただ、こちらも@フォルダシンボルなどと同じく全ドキュメントを参照させているわけでないので、めちゃくちゃ精度が高いというわけではないです。参考程度に使用します。
最終的にはそのドキュメントやリポジトリを直接見に行ったほうが早かったりするので最近はあまり使用していません。

TIPS: その他の留意事項

1つのチャット量はあまり長くならないようにしましょう。
基本的に会話ターンが長くなれば長くなるほど精度が下がるので、キリがよいところで別のチャットに切り替えたほうが良いです。
ちなみに、私は毎ターンのチャットは使い切りだと思っているので、ほとんど履歴を遡ることはありません。

変更を反映(Apply)する前にgitステージしましょう。
会話を長く続けていると、どこまで正しく動いていて、どこでエラーが出るようになったのかわからなくなることがあります。
その時はgitをうまく使用し、正しく動いていたところまではステージしておく、などとルールを決めておくと良いと思います。
gitの使い方についてはCursorに聞いて下さい。

Composer

一気にファイルを操作するのに便利な話題の機能ですが、私はほぼ使っていないので使用方法の解説は省きます。

使っていない理由(≒ AIチャットを使う理由)

任意のコメントに戻ることができない。
私はAIチャットの方に慣れてしまったせいか、途中の会話からやり直すという行為を頻繁に行うため、これができないのはかなり使いづらいです。

一度に更新されるのが扱いにくい。
AIチャット欄だと複数ファイルの更新もチャット形式でスクロールしながら確認することができます。
Composerはファイル毎にタブが分かれているので、確認が面倒くさくて一気にApplyしがちでした。この、コードを全く確認しないまま進んでいってしまうこと、が個人的にはあまりハマりませんでした。

AIチャットでもファイルを簡単に指定できるようになった。
Composer登場時はファイルが選択しやすくて使いやすいと思っていたのですが、前述の Add context と Reference Open Editors がAIチャットでも利用できるようになったので、Composerを利用する理由が減りました。

良い点

新規ファイルを自動で作ってくれる(AIチャットにも早く実装されないかな…)。

⌘K

コードで使用

行を指定(複数可)して⌘Kを押すとフォームが出てくるので、そこに選択した行をどう編集したいかを書き込むと修正案を出してくれます。

この機能では、実行しているファイルの中身は自動的に全部読み込んだうえで返答してくれるので、実際に編集したい行のみ選択すればOKです。
他のファイルを読み込みたいときは @ファイル名 で呼び出すこともできます。

ただし、修正案の提示のみで解説はしてくれないので、意図を汲み取った修正をしてくれないことが割とあります。
少しでも複雑な指示をするときは大人しく⌘LでAIチャット欄を使用することも多いです。

ターミナルで使用

⌘Kはターミナルでも使えます。
例えば、「1つ前のコミットに戻したい」など、あの操作ってどうやるんだっけ…、みたいなコマンドを指示するだけですぐに提示してくれます。
⌘ + Enterでそのまま実行もしてくれるのも便利です。

Copilot++

Github Copilotに似た機能でカーソルを併せたコードを予測して補完してくれます。ちょっとした修正を複数行にまたがって直したいときに勝手に補完してくれるの便利すぎる。

タブを押しているだけで欲しい機能が出来上がっていくのを見てると、いよいよエンジニア要らない問題が現実味を帯びてくる気がしてきます。

その他、Cursorの機能一覧は下記から見れるので確認しておきましょう。

その他のAIツール

他にも私が使っているAIツールを紹介します。
ただし、個人的に様々なAIツールを使い分けるのはめんどくさいのであまり他のツールは使っていません。普通に会話するのもCursorでできますしね。

Claude

ブラウザ版Claudeです。月$20。

コードに関連すること以外、設計の壁打ちや仕事とは関係ない質問などをするときに利用します。
コード性能に限らず、私はClaude-3.5-Sonnetの回答が好きなのでChatGPTやその他のAIモデルはほとんど使用しません。

ChatGPTのo1ファミリーは用途によってはSonnetよりも精度の高い回答するようですが、私の使用用途ではSonnetで間に合うことが多いです。

Perprexity

質問に対して、Webから検索したうえで回答してくれます。
そのため、AIが知らない直近の出来事などについても調べられるのは便利です。月$20。

無料で使用できる同様なサービスのGensparkがありますが、個人的にはPerprexityの方が好みの回答をしてくれます。

v0などのフロントツール

v0、GPT-Engineer、Creat.xyzなど、最近様々なフロントアプリ起点のAIツールが登場しています。

これらは大変便利で、私も何回かこのツールを使用してから大枠を作成し、Cursorで微調整をしていく、のような使い方をしたことがあります。

ただ、私の役割的に0からアプリを作るという状況があまり多くないので積極的には使用していません(いずれも未課金)。

Dify

ノーコードでできるLLMアプリ開発サービスです。
簡単にAIを使用したアプリ(API)を作ることができるので、思いつきを試したいときに良く使います。

フロントアプリを先程紹介したv0などのツールで作成してからDifyと結合させると誰でも簡単にAIアプリを作成できるので興味がある方はぜひ試してみてください。

ローカル環境の構築がめんどくさいけど、サービスに課金する($59/月)のは高い、と思う方は下記のやり方を参考にご自身の環境を用意するのも良いと思います。

終わりに

以上、Cursorを中心とした私のAIツール活用法について紹介しました。

あくまで私に合う方法なのでこれが絶対というわけではありません。
ぜひご自身に合う開発スタイルを見つけてみてください。

宣伝

AITuberKitという誰でも簡単にAIキャラチャット、AITuber開発ができるOSSを開発しています。興味のある方はぜひ試していただけると嬉しいです!

私のXアカウント(@tegnike)


この記事が気に入ったらサポートをしてみませんか?