はじめに
2023年の11月に発表されたエディタのCursorですが、
3ヶ月間Proの契約継続をしている程素晴らしいエディタでしたので、
導入方法および使用方法・料金について記事にしました。
目次
Cursorとは
CursorはAIとペアプログラミングができるコードエディタです。
主に下記３点の特徴があります。
1. プログラミングの支援
AIとのチャット形式で、メソッドやクラス全体を修正したり、新しいコードを生成することができます。
2. コードベースでの質問
従来でもブラウザ上のChatGPTに質問をして開発することが可能ですが、Cursorを使えばウインドウの移動を行うことなく、エディタ内で質問をしてコードの編集を行うことができます。
3. VSCodeからの一括移行
CursorはVSCodeをforkしているため、VSCodeを既に使用している方は拡張機能を含めて同じ使用感で使い始めることができます。
インストール方法
1. ダウンロード
下記のURLにアクセスし、Download for Mac(Windows)をクリックしてください。
Cursor公式ホームページ
2. 初期設定
インストールが完了したらContineueをクリックしてください。
3. 拡張機能引き継ぎ設定
VSCodeを使用している場合はUse Extensionsをクリックし、拡張機能や設定を引き継ぐことが可能です。
4. Privcyモードの設定
データを学習に使用したくない場合はPrivacy Modeを選択してください。
企業などで使用する場合はPrivacy Modeを推奨します。
5. ログイン
Loginをクリックし、開かれたページでアカウントを作成しログインしてください。
以上でCursorの使用が可能になります。
基本的な使い方
| No | 機能 | 内容 |
|---|---|---|
| 1 | Command K | AIにコード作成及び修正を指示 |
| 2 | Chat | ChatGPTに対して会話形式で質問やコード生成 |
| 3 | Fix Lints | Lintエラーの修正方法を提案 |
| 4 | @ Symbols | フォルダ内の別ファイルを参照して回答 |
| 5 | Codebase Answers | プロジェクト内全体を参照して回答 |
| 6 | Docs | 任意のドキュメントを参照して回答 |
| 7 | Auto Debug | コンソールのエラーを修正 |
1. Command K
機能：AIにコード作成及び修正を指示
使用方法：cmd + k
下記のようにファイル上でログイン画面作成の指示を出したところ、
react-hook-formを使ってログイン画面を作成してくれました。
（この場合、react-hook-formは自身でインストールする必要があります。）
こちらの変更は[cmd + Enter]または[cmd + y]で適用することができます。
2. Chat
機能：ChatGPTに対して会話形式で質問やコード生成
使用方法：cmd + l
ChatではChatGPTに対して会話形式で質問やコード生成ができます。
Command Kよりも、現在のファイルに直接関係ない質問ができるため、汎用性が高いです。
下記ではCommand Kで使われているreact-hook-formに関して質問してみました。
3. Fix Lints
機能：Lintエラーの修正方法を提案
使用方法：エラー箇所にカーソルを合わせて[AI Fix In Chat]をクリック
Command Kではコードを生成できましたが、そのままではエラーが発生しています。
ここでエラー箇所にカーソルを合わせて[AI Fix In Chat]をクリックすると、
Chatで修正方法を提案してくれます。
ここで、修正提案の右上にカーソルを当てることで、
[Apply to Current File]が表示されるのでクリックします。
すると、ファイル上で修正提案を行ってくれます。
赤：修正前
緑：修正提案
修正提案を受け入れる場合は[cmd + y]、
もしくはChat上の[Accept Edit]をクリックすることでコードに修正を適用することができます。
エラーが出ている箇所にFix Lintsを複数行った結果、
次のようにエラーが出ないように修正することができました。
4. @ Symbols
機能：フォルダ内の別ファイルを参照して回答
使用方法：@
Command KやChatで@を入力すると、以下のドロップダウンが表示されるので[Files]を選択します。
ここで参照したいファイルを選択します。
下記のように質問の一部として選択したファイルのコードが入力されるので、
そのまま質問内容を追加すると選択したファイルのコードを含めて回答をしてくれます。
5. Codebase Answers
機能：プロジェクト内全体を参照して回答
使用方法：cmd + Enter
下記はfirebaseの認証を行っているプロジェクト内で、
「firebaseの認証はどこで行っていますか」と質問しました。
結果としてプロジェクト全体を探索し、関連するファイルを抽出、それぞれの処理に関して解説をしてくれました。
各解説のコードをクリックすると該当箇所に飛ぶことも可能です。
6. Docs
機能：任意のドキュメントを参照して回答
使用方法：@symbolからDocsを選択し、参照したいドキュメントのURLを入力
@symbolからDocsを選択し、[Add new doc]を選択します。
ここではreact-hook-formのドキュメントを追加してみます。
追加した情報を元にログインページのリファクタリングをお願いしてみます。
結果、リファクタリング案を提案してくれました。
こちらの結果はドキュメントを読み込まなくても行ってくれた可能性は高いですが、
ドキュメントを参照して改善の提案を行ってくれています。
7. Auto Debug
機能：コンソールのエラーを修正
使用方法:Debug with AIを選択
jsonファイルにコメントを追加して強制的にエラーを起こします。
エラーが発生したので、[Debug with AI]を選択
問題部分のコメントを削除する修正を行ってくれました。
料金プラン
各プランの違い
Cursorの料金プランは以下になります。
| Basic | Pro | Business | |
|---|---|---|---|
| 料金 | 無料 | $20/月 | $40/ユーザー毎/月 |
| ChatGPT-3.5 | 200回/月 | 無制限 | 無制限 |
| ChatGPT-4(slow)※１ | 50回/月 | 無制限 | 無制限 |
| ChatGPT-4(fast)※2 | 利用不可 | 500回/月 | 無制限※3 |
| プライバシーモード | 制限可能 | 制限可能 | 制限可能※4 |
※１：ChatGPTのリクエスト混雑時に順番待ちの待機状態になります。
※２：ChatGPTのリクエストが優先的に処理されます。
※３：Businessの契約をしたことがないため、完全に回数が無制限かはわかりません。
※4：デフォルトでは学習に使用しない場合でも、不正利用監視などのためにデータがOpenAIのサーバーに30日間保存されますが、Businessではその保存がされません。
感想
私はBasicとProの両方を試しました。
Basicで機能を気に入れば、Proを継続使用する価値が十分にあると考えています。
下記は二つのプランの感想です。
BasicとProを使用しての感想
Basic
- ChatGPT-4(slow)の回答の精度はなかなか良いです。
- ただし、2~3日使用した段階ですぐに制限に到達しました。
- ChatGPT-3.5は、web上のChatGPT-3.5よりも精度が低いと感じました。
Pro
- ChatGPT-4(fast)はスムーズに回答が返ってきます。
- ChatGPT-4(slow)は朝や昼などの時間帯では順番待ちがあまり発生せず、ChatGPT-4(fast)と比較しても大きなストレスは感じませんでした。
- ChatGPT-4(slow)は夜は30人ほどの待ち時間が発生して待機する時間がありますが、web上に確認しに行ってドキュメントを探す作業を考えると、待っている時間に次の操作や別のことを考える時間があると考えると悪いものではありませんでした。
- 何よりChatGPT-4(slow)は無制限に使えるため、この時はどういった返答が返ってくるのだろうと気軽に試せる点が良いです。
まとめ
以上。
導入方法および使用方法・料金について説明させていただきました。
VSCodeを使用している方は違和感なく使用することができますので、
まずは無料で試してみることをおすすめします。