話題のGPT搭載エディター「Cursor」を使って開発体験と生産性を向上させよう
まえがき
今話題のCursorを個人開発で使ってみたところ開発体験が向上し、同時に生産性も向上したため、AIエディターを活用した開発に興味がある方や、「Cursorって何ができるの？」と疑問を持つ方に向けて、具体的な機能と使用感を共有します。
Cursorとは
Cursorは、AIを活用してプログラミングのサポートを行うChatGPT搭載のエディターです。
OpenAIから800万ドルの投資を得ているため、将来性もとても期待されているエディターです。
AIを活用して生産性向上させたり、開発体験をさらに良いものにしたい方にとってはとても便利なエディターになっております。
なにができるの？
- 自動コーディング
- ソースコードに対してChatGPTで質問できるチャット機能
- 自動デバック・エラー修正機能
- プロジェクト全体についてAIで質問できるチャット機能（CodebaseAnswers）
- VSCodeの拡張機能も同じ設定のまま引き継いで使える
- GitHub Copilotとも併用可能
などなど
Cursorの導入方法
Cursorは、こちらの公式ページからダウンロードすることができます。
Macユーザーは以下のボタンをクリックするとダウンロードできます。
使用する際のプランは、Basicプラン（無料）とProプラン（有料）、あとビジネスプラン（有料）がありますが、BasicプランでもGPT plusと同じGPT-4が使用できるため（上限50回）、最初はBasicプランで使用感を確かめてみるのをおすすめします。
使用例1
今回修正するコードは、Javascriptで書かれたコードです。
修正を加えたいコードを選択して、「Command + K」でコードを編集機能を起動させて、編集内容を指示します。
するとGPTがソースコードを基に自動でコードを変更してくれました。
最後に、変更した内容で問題なければそのコードを受け入れて完了です。
GitHub Copilotでもコメントを書くことで似たようなことは実現可能ですが、Cursorは直接変更したいコードを指示して使用できるため、使い勝手はCursorの方が便利だなと感じました。
使用例2
ReactのuseStateで定義された recruitmentPostList を使用しているところがエラーになっているため、AIチャット機能を利用して修正します。
エラーになっているところにカーソルを合わせると、 「AI Fix In Chat」 というボタンが表示されているのでクリックします。（ショートカットコマンドでも可）
この機能を利用すると、AIチャット機能が自動でエラーを分析して改善案を提出してくれます。
実際に使ってみると以下のような回答をいただきました。
定義されている名前が違うとのことなので、定義元を確認すると確かに間違っていました。
さらにこのコードをAIチャット機能を使ってみると、しっかりエラー内容を把握した上で改善案を提供してくれました。
改善案をそのまま反映させたいので、提供してくれたコードの右上にある「▶️」ボタンをクリックします。
するとチャット機能がソースコードを参照してエラー箇所を改善案のコードへ変更してくれます。
変更が完了するとチャットに 「Performing edit... done!」 と表示されます。
変更箇所を確認すると、変更前後のコードが表示されているため、変更内容に問題がなさそうなら、チャット機能に表示されている 「Accept Edit」 ボタンをクリックします。これで改善案のコードが実際のソースコードに反映されて修正完了です。
使ってみて感じた良いポイント
ユーザーフレンドリーなUIでGPTを活用しやすい
VSCodeでもGPTは利用できますが、CursorはよりユーザーフレンドリーなUIでGPTをエディター内で利用できるため、開発体験は間違いなくCursorの方が高いです。
過去に、VSCodeでGitHub Copilot ChatやGithub Copilot Labsなども利用してみましたが、Cursorの方が断然使いやすかったです。提供されるコードの正確性もCursorの方が高いのかなと感じました。
コードリーディングの時間が短縮される
Cursorには「@Symbols」という機能があり、プロジェクト内の特定ファイルを簡単に参照できます。これにより、ファイルの内容に関する質問や、コードの意図を理解するのが容易になりました。
起動したチャット機能で「@」を入力すると、「Files」があるので、そこから参照したいファイルを選択して利用することができます。
実際に利用してみると以下のような回答を出してくれました。
この機能は、特にコードレビューや触ったことのない既存システムの改修の際などでコードリーディングをする時間の短縮につながりました。
公式ドキュメントを基に質問ができる
「Command + L」で起動するチャット機能に備わっているドキュメントを参照してくれる機能があるため、そちらを利用することで公式ドキュメントを基により正確性の高いやり取りができます。
チャット機能を起動して、フォームに「@」を入力すると「Docs」が出てくるので、それを選択するとたくさんのドキュメントが表示されます。
その中から参照して欲しいものを選択することで、選択したドキュメントの内容も踏まえてチャットしてくれるようになります。
万が一、検索しても一致するドキュメントがない場合は、参照させたいドキュメントのURLを「Add new doc」から追加することもできるため、そちらから追加してみてください。
普段react-selectをよく利用するため、そちらのドキュメントを追加しました。
こちらの機能やcodebaseなどは、内部でEmbedding APIが使われて、テキストやソースコードをベクトル化して参照されていると思われます。
VSCodeからスムーズに移行できる
Cursorは、VSCodeをフォークして開発されたエディターなので、VSCodeの拡張機能や設定も簡単に引き継ぐことができます。普段からVSCodeを使用して開発している私も、とてもスムーズに利用することができました。
GitHub Copilotも使用できる
VSCodeで使用していた時と同じように、GitHub Copilotとも連携して使用できるため、状況に合わせてGitHub Copilotを使ったり、GPTを利用してコーディングしたりと使い分けもできるためとても便利です。
もちろんコード保管機能も使えます。
プランによっての開発体験の比較（感想）
はじめはBasicの無料プランを利用したのちに、Proプランへ変更して開発を行いました。
結論、無料のBasicプランでも充分満足のいく開発体験でした。
私は普段からGPT PlusのGPT-4を利用していますが、そちらと特に変わらないくらいのレスポンス速度でチャット機能を利用することができましたので、無料プランでも充分かなと感じました。
Proプランだと、Fast GPT-4が利用できるため、Cursorのサーバーが混んでいても、Proプランのユーザーが優先して利用することができます。安定した環境でGPTを利用できるのは嬉しいポイントです。
また、CursorはOpenAIとパートナーシップを結んでいるため、OpenAIのAPIよりも速い速度で利用できるため、さらに開発生産性を高めたい方であればProプランを利用してみるのもおすすめです。
実際にProプランを利用してみたところ、確かにGPT PlusのGPT-4よりも速いレスポンスでGPTを利用できました。
さらに、OpenAIのAPI Keyを設定することで、Cursorのチャットで自分のGPT-4を利用でき、使用した分だけしか課金されないため、お試しでそちらで利用してみるのも良いのかなと思いました。
ちなみにAPI keyの設定は、エディター右上にある歯車の設定ボタンをクリックすると表示される場所で設定することができます。
注意点
OpenAIにプロンプトデータが送信されるので使い方には注意
Cursorのチャット機能などで送信されるプロンプトデータは、Private Data Controlsを用いてデータの保存を制御できますが、OpenAIにはプロンプトデータが送信されて保存されてしまうため、他のAIサービスを利用していた時と同様に機密情報は送信しないように気をつける必要があります。
ただし、ビジネスプランに入ることで、OpenAI zero-data retentionが利用でき、プロンプトデータを一切保存されないように制御することが可能になるため、OpenAIへのプロンプトデータ保存を回避したい場合は、ビジネスプランを使用できると安心して利用できそうです。
まとめ
以上でCursorを使ってみた感じたことや使用感の共有を終わりたいと思います。
今までVSCodeを利用していましたが、今後はCursorを利用して開発することになりそうです。
Cursorには様々な機能が備わっているため、他にも様々なユースケースがありそうです。コードレビューやリファクタリングなどにもとても良さそうなので、Cursorを活用して開発体験と生産性を高めるために、今後も引き続き使用していきたいと思います。
Discussion