Cursor_AIとのペアプログラミング(Next.js中心)

## はじめに
2023年の11月に発表されたエディタのCursorですが、
3ヶ月間Proの契約継続をしている程素晴らしいエディタでしたので、
導入方法および使用方法・料金について記事にしました。

## 目次

- [Cursorとは](#cursorとは)
  - [1. プログラミングの支援](#1-プログラミングの支援)
  - [2. コードベースでの質問](#2-コードベースでの質問)
  - [3. VSCodeからの一括移行](#3-vscodeからの一括移行)
- [インストール方法](#インストール方法)
  - [1. ダウンロード](#1-ダウンロード)
  - [2. 初期設定](#2-初期設定)
  - [3. 拡張機能引き継ぎ設定](#3-拡張機能引き継ぎ設定)
  - [4. Privcyモードの設定](#4-privcyモードの設定)
  - [5. ログイン](#5-ログイン)
- [基本的な使い方](#基本的な使い方)
  - [1. Command K](#1-command-k)
  - [2. Chat](#2-chat)
  - [3. Fix Lints](#3-fix-lints)
  - [4. @ Symbols](#4--symbols)
  - [5. Codebase Answers](#5-codebase-answers)
  - [6. Docs](#6-docs)
  - [7. Auto Debug](#7-auto-debug)
- [料金プラン](#料金プラン)
  - [感想](#感想)
  - [BasicとProを使用しての感想](#basicとproを使用しての感想)
    - [Basic](#basic)
    - [Pro](#pro)
- [まとめ](#まとめ)

## Cursorとは

CursorはAIとペアプログラミングができるコードエディタです。
主に下記３点の特徴があります。

### 1. プログラミングの支援
AIとのチャット形式で、メソッドやクラス全体を修正したり、新しいコードを生成することができます。

### 2. コードベースでの質問
従来でもブラウザ上のChatGPTに質問をして開発することが可能ですが、Cursorを使えばウインドウの移動を行うことなく、エディタ内で質問をしてコードの編集を行うことができます。

### 3. VSCodeからの一括移行
CursorはVSCodeをforkしているため、VSCodeを既に使用している方は拡張機能を含めて同じ使用感で使い始めることができます。

## インストール方法

### 1. ダウンロード
下記のURLにアクセスし、Download for Mac(Windows)をクリックしてください。
[Cursor公式ホームページ](https://cursor.sh/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/06ff445c-b3c4-1bf4-5252-b2d87622f8b2.png)

### 2. 初期設定
インストールが完了したらContineueをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/cfc6c61d-3c88-6716-5711-a1a90a5f5b40.png)

### 3. 拡張機能引き継ぎ設定

VSCodeを使用している場合はUse Extensionsをクリックし、拡張機能や設定を引き継ぐことが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/2fb2e15e-9491-ff88-4ebc-e917e7b8ad8e.png)

### 4. Privcyモードの設定
データを学習に使用したくない場合はPrivacy Modeを選択してください。
企業などで使用する場合はPrivacy Modeを推奨します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/7a6b1cd2-fc11-7525-0492-a7bdf68ad7e9.png)


### 5. ログイン
Loginをクリックし、開かれたページでアカウントを作成しログインしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/76c7e83f-4852-8674-d9c4-a56b0dc1aa4c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/1dced23f-8fae-43c8-71e9-e78aba46a956.png)

以上でCursorの使用が可能になります。

## 基本的な使い方

| No | 機能 | 内容 |
|:------------:|:------------|:------------|
| 1 | [Command K](#1-command-k) | AIにコード作成及び修正を指示 |
| 2 | [Chat](#2-chat) | ChatGPTに対して会話形式で質問やコード生成 |
| 3 | [Fix Lints](#3-fix-lints) | Lintエラーの修正方法を提案 |
| 4 | [@ Symbols](#4--symbols) | フォルダ内の別ファイルを参照して回答 |
| 5 | [Codebase Answers](#5-codebase-answers) | プロジェクト内全体を参照して回答 |
| 6 | [Docs](#6-docs) | 任意のドキュメントを参照して回答 |
| 7 | [Auto Debug](#7-auto-debug) | コンソールのエラーを修正 |

### 1. Command K

機能：AIにコード作成及び修正を指示
使用方法：cmd + k

下記のようにファイル上でログイン画面作成の指示を出したところ、
react-hook-formを使ってログイン画面を作成してくれました。
（この場合、react-hook-formは自身でインストールする必要があります。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/e686ab86-25d5-66ed-d36a-4c1530c9f05e.png)

こちらの変更は[cmd + Enter]または[cmd + y]で適用することができます。

### 2. Chat

機能：ChatGPTに対して会話形式で質問やコード生成
使用方法：cmd + l

ChatではChatGPTに対して会話形式で質問やコード生成ができます。
Command Kよりも、現在のファイルに直接関係ない質問ができるため、汎用性が高いです。
下記ではCommand Kで使われているreact-hook-formに関して質問してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/c46187ea-0edd-298f-635f-0d081f923dfc.png)


### 3. Fix Lints

機能：Lintエラーの修正方法を提案
使用方法：エラー箇所にカーソルを合わせて[AI Fix In Chat]をクリック

Command Kではコードを生成できましたが、そのままではエラーが発生しています。
ここでエラー箇所にカーソルを合わせて[AI Fix In Chat]をクリックすると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/b2a067cb-1943-5b84-7002-1d5cde25595e.png)

Chatで修正方法を提案してくれます。
ここで、修正提案の右上にカーソルを当てることで、
[Apply to Current File]が表示されるのでクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/99bba8be-69b1-adb1-2e5c-caf867ce976c.png)

すると、ファイル上で修正提案を行ってくれます。
赤：修正前
緑：修正提案

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/53973833-8230-6484-01d9-137c08d3f4ea.png)

修正提案を受け入れる場合は[cmd + y]、
もしくはChat上の[Accept Edit]をクリックすることでコードに修正を適用することができます。
エラーが出ている箇所にFix Lintsを複数行った結果、
次のようにエラーが出ないように修正することができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/4940af2a-38ed-9161-541b-e93a83b40acf.png)


### 4. @ Symbols

機能：フォルダ内の別ファイルを参照して回答
使用方法：@

Command KやChatで@を入力すると、以下のドロップダウンが表示されるので[Files]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/f0ccc3be-796b-f0b8-c6ee-2607226a3f14.png)

ここで参照したいファイルを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/5a36651d-388f-2b2a-4e21-44694488d5eb.png)

下記のように質問の一部として選択したファイルのコードが入力されるので、
そのまま質問内容を追加すると選択したファイルのコードを含めて回答をしてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/7a2a5575-4783-dafa-7807-a1986c3c7044.png)

### 5. Codebase Answers

機能：プロジェクト内全体を参照して回答
使用方法：cmd + Enter

下記はfirebaseの認証を行っているプロジェクト内で、
「firebaseの認証はどこで行っていますか」と質問しました。
結果としてプロジェクト全体を探索し、関連するファイルを抽出、それぞれの処理に関して解説をしてくれました。
各解説のコードをクリックすると該当箇所に飛ぶことも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/a913253b-0842-1b5d-a83a-ffd46a136cea.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/8a372666-e6ff-5b04-6b31-3e76b0a55388.png)


### 6. Docs

機能：任意のドキュメントを参照して回答
使用方法：@symbolからDocsを選択し、参照したいドキュメントのURLを入力

@symbolからDocsを選択し、[Add new doc]を選択します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/06a37335-d111-f666-023b-27c4d8cc0733.png)

ここではreact-hook-formのドキュメントを追加してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/f863eba7-f877-0b39-40b8-c956cc0e1689.png)

追加した情報を元にログインページのリファクタリングをお願いしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/c8723b37-45e9-7bc0-dca9-c9d7b3e6f314.png)

結果、リファクタリング案を提案してくれました。
こちらの結果はドキュメントを読み込まなくても行ってくれた可能性は高いですが、
ドキュメントを参照して改善の提案を行ってくれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/5404f6b2-4891-9e89-053f-c9d3cc26cb30.png)


### 7. Auto Debug

機能：コンソールのエラーを修正
使用方法:Debug with AIを選択

jsonファイルにコメントを追加して強制的にエラーを起こします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/537d495e-1ff5-71a1-548b-df78d1e7a0dd.png)

エラーが発生したので、[Debug with AI]を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/7857fe94-3d2b-7854-efe9-c0fef836d609.png)

問題部分のコメントを削除する修正を行ってくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425282/00944145-0d85-9262-cd53-84371eea2f9f.png)

## 料金プラン

### 各プランの違い

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を使用している方は違和感なく使用することができますので、
まずは無料で試してみることをおすすめします。