新時代のコードエディタ、Cursorのメリット・できることを網羅的に解説した

まえがき

VScodeを今まで使用していたが、あまりにもCursorの話題が入ってくるので実際に使ってみたら、正直デメリットほぼないというレベルで良かったので、Cursorで何ができるかまとめることにしました。記事もまだまだ少ないと思うので参考にしていただければ幸いです。 最後にデメリットというか個人的に困ってる部分があるのでわかる方ぜひ教えて(助けて)ください。

What is Cursor?

AI-firstのコードエディタ。ChatGPTとの連携が強く、エディタ内で質問、修正をしてくれるのが特徴。

Cursorのいいところ

• ダウンロードしてみるとわかるが、VScodeの拡張機能の移行がめちゃめちゃ簡単
• VScodeにレイアウトがめちゃめちゃ似せてあるので(VScodeのフォークなので)、Cursor使ってるとVScodeをAIの方向に大規模アップデートしたみたいな感覚になる
• もちろんGitHub Copilotも使える
• GPT PLUSのGPT-4よりも強いGPT-4が使える(後述)
• APIkey登録でGPT使える

code .

でVScode開いて

cursor .

でCursor開くから一応共存できる(お試ししやすい)

上記のようにコードエディタを開くコマンドを分けるために、既にcodeコマンドをVScodeで使っている方はcursorダウンロードの際にcursorコマンドのみインストールするようにしてください。codeの方もインストールすると、codeコマンドでVScodeとCursorどちらも開いてしまうようです。

Cursor主要機能紹介

cmd + Shift + L or cmd + L でGPTとChat機能

エディタ上で画面右にGPTに質問できるサイドバーが出現する。何も選択してないと無から質問できる状態になっていて、コードを選択した状態で開くとそのコードがあらかじめ引用された状態になっている(別の部分のコードもどんどん追加できる)。

↑10~21行目をcmd + Lした後に31~33行目を追加でcmd + Lした画像

cmd + K　でAI Edit機能

コードを選択した状態でcmd + Kして指示を出すことでAIが自動でコードを修正してくれる。

↑こんな感じで指示を出すと、

↑修正してくれる。赤背景が削除されたコードで、緑背景が追加されたコード。部分ごとにAcceptするかRejectするか選ぶ

Symbol機能

chat内で、@ファイル名　とすると、そのファイル全体を読み込んでくれる。ChatGPTにファイル内のコード全コピペする必要が無くなった。複数のファイルも簡単に参照できるので嬉しい。

↑@App.tsxと打つと中身が参照されている

CodeBase機能

chat内で　@CodeBase と打つと、プロジェクト全体のコードを読み込んでくれる。 とてつもなく嬉しい。何度GPT-4に「〇〇の実装の中身を見ないと判断できません。詳細な実装のコードを...」的な回答をされたか。まとめて全部コードを読み込んでくれるのは多くのプログラマーにとって嬉しい機能ではないだろうか。

Docs機能

AIがネット上の記事を読み込んで勉強してくれる機能。モダンなWebアプリを作っている人とかは、たとえばNext.jsの最新のアプデ内容について質問がある、みたいな状況があると思うが、そういった最新情報にも対応できる。AIに公式ドキュメント読ませて鍛えられる機能優秀すぎる。
Chat上で@を打つ→Docsを選択→ Add new doc→学ばせたいサイトのURLを入力 で学習してくれる。

↑とりあえずNext.jsの公式ドキュメント勉強させてみた

↑体感1分弱程度で全部読み終えたらしい

本当に理解しているのか確認してみる

よく考えたら僕がNext.js触ったことないからあってるか分からなかった。 調べたところ最新バージョンの変更点を正しく理解できているようだ。このバージョンアップは2023年10月末にされたものなので、もちろんGPT-4が元々知っていたということはない(2023年11月現在のGPT-4は2023年4月までのデータを学習している)。

New FileでAIに0からコードを書いてもらう機能

もはや何をしたいかを伝えるだけでコードを全部書いてもらえる。 未来を感じる。

↑File内のNew AI Projectを選択すると、何を作りたいか聞かれるので指示を出すとコードを全部書いてくれる。

Auto Debug機能,Fix Lint機能

これらはまだ使ったことないですが、ここら辺の機能に関しては今までのVScodeの拡張機能やESLintの環境があるのでそこまで画期的な何かという感じはなさそう？使ってみて特筆したいことがあれば追記します。

料金とGPTの性能,APIkey

• Freeプラン
  • 無料で使える。質問は、　Slow　GPT-4(後述)は50回まで(おそらく月毎とかでなく合計)
  • GPT3.5-turboは200回/月
• Proプラン
  • 20$/月
  • Fast GPT-4を500回/月
  • Slow GPT-4は無制限

Fast/Slow GPT-4とは

• OpenAIとCursorが独自の連携をしていることで、GPT Plusのユーザーが普通にGPT-4に質問するより素早く回答を得られるらしい。これが課金すると使えるようになるFast GPT-4。
• Slow GPT-4でもWeb上で普段使うGPT-4と速度は変わらないように感じた

ちなみにAPIKey設定することでコードエディタ内のChatで自分のGPT-4を使うこともできる (GPT Plusユーザーは全員ある程度はAPI叩けるもんだと思ってて(実際は普通にAPI使用料払う必要あり)ずっとエラーでて苦戦してました恥ずかしい) 。

Cursorに移行して感じたデメリット

これはデメリットというかシンプルに自分の知識不足で解決できていないだけにも感じるが、
cmd + L と cmd + Shift + Lがchat開くショートカットキーに使われているせいで今まで使っていたショートカットが使えない。
(解決方法わかる方いれば教えてくださいお願い致します)
VScode上では、
cmd + L → 現在の行を選択、
cmd + Shift + L → ファイル内で現在選択している文字列と完全一致するものを全選択
がデフォルトで設定されているはずだ。前者は特によく使うし、後者は頻度こそ少ないがtailwindとかで一気に複数個のborderを太くするみたいなタイミングで一気に時短できることがあり、どちらも個人的にはないと困るショートカットである。VScodeだと左下に歯車マークがありそこでショートカットキーの設定も変えられるのだが、Cursorは左下に歯車マークはなく、右上の設定ボタンから探してもショートカットキーの設定的な項目が見つからない。割と困っている(こんなに見た目VScodeに寄せてるのになぜ設定だけ違うんだ)。解決策見つかれば追記します。

以下追記です。普通にできました。恥ずかしい限りです。

ショートカットキーの変更

画面上部の Cursor → Preferences → Keyboard Shortcuts でショートカット一覧の画面に遷移できる。(winは確かFile → Preferences...だったはず)
検索欄で「aichat」と調べると

• aichat.newchataction
• aichat.insertselectionintochat

という項目が、cmd + Shift + Lとcmd + Lに対応していることがわかる。右クリック → Remove Keybindingでショートカット削除する。これでVScode上の元のショートカットが使えるはず...

と思ったら、cmd + Shift + Lは使えるが、現在の行を選択するcmd + Lはうまくいかない。
ここで、現在の行を選択するショートカットキーのキーバインディングを確認するために、検索欄で「expand line selection」を調べると... なぜかcmd + Pが割り当てられている。 cmd + Pってファイル検索だよなと思いつつコード上で使ってみると、やはり行の選択は行われずファイル検索のコマンドが実行される。なので
expand line selectionを右クリック → Change Keybindingでcmd + Lを登録。これでいつも通りのVScodeのショートカットが使えるようになった。
ちなみに、aichat.newchatactionのショートカットは流石に登録しておかないとすぐにchat機能が使えないので、option/alt + cとかに割り当てておいた。

あとがき

総合的にみてめちゃめちゃいい機能がたくさんあるのと、以降がものすごい楽で、一部ショートカットキーの問題はありますが 大半はVScodeそのままという感じで使いやすさもあるので、今後はCursorをメインのコードエディタとして使っていくと思います。課金に関しては、CursorのProも全然課金する価値があるように感じますが、GPT plusはplusでコーディング以外にも使うので、両方に課金して40$/月の出費は結構痛いということで一旦CursorはFreeで使っていこうかなと思います。

追記
想定より数十倍伸びていてびっくりしています(本当にありがとうございます🙇)...急ぎでXアカウント作成したのでもしよろしければフォローお願いします🙇開発風景や執筆記事、おすすめ記事投稿する予定です！