Cursorを使ってみた

## はじめに
AI技術の進化により、エディタの分野でも新たな進展が見られます。その中でも、GitHub CopilotとAI搭載エディタのCursorは特に注目されています。本記事では、Cursorを実際に利用してみた所感を記します。

:::note warn
注意
Vue.jsのプロジェクトで利用したのでキャプチャもそのようになっています
:::

## Cursorについて
ChatGPTが標準搭載されており、VsCodeをフォークして作成されているエディタのため、Cursorをセットアップした段階でVsCodeにインストール済みの拡張機能まで同期されます。
これによりVsCodeユーザにとって導入のハードルは低くなるはずです。

ダウンロードは[こちら](https://cursor.sh/)から（インストール手順は割愛）

![Monosnap vue_test 2024-02-20 22-14-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706259/ec635cb3-a363-68e6-1f9f-0ac7898a0df6.png)
UIはよくある構成に+α、右側の赤枠内にChat欄が存在しているくらいです。

## Cursorの特徴
通常のChatとは別にCodebase Answersがあり、これによりプロジェクト全体のコード（どこまで網羅してくれのかは不明）を読み込んで回答をしてくれます。
![Monosnap .gitignore — vue_test 2024-02-19 23-59-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706259/9e63fab7-0378-c6a4-cc3e-0bff76d70b75.png)

例えば、「○○の機能を追加して」と問いかけるとAのファイルにはこの記述を、Bのディレクトリに新たにCという名称のファイルを作成し、その中身はこれです！という感じで、ディレクトリ構造を考慮した上で回答がかえってきます。

さらにタイポについてもしれっと指摘修正してくれたりします。
![Monosnap App.vue — vue_test 2024-02-20 18-33-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706259/c9caadd8-2913-0fa4-eba3-9470734afbd4.png)

:::note info
クラスや関数の説明もしてくれるので**PJへの新規参画者や、初学者には特に優位に働く機能**となっています。
:::

ただしここまでの話はgpt4を利用したもので、実際gpt3.5と4には大きな差がありました。（gpt4の利用条件は後述の料金体系で
**「ID、名前、備考を表示する一覧の機能を追加してください」** というプロンプトに対してgpt3.5ではvuejsでコーディングしてくれるものの`items`自体の定義は提案してくれていません。
![Monosnap App.vue — vue_test 2024-02-20 21-20-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706259/17951405-3625-58e4-8f8a-636e38311897.png)

対してgpt4の場合だと、処理の説明や`items`もコーディングしてくれています。（実際はコードの下にさらに説明を加えてくれています）
![Monosnap App.vue — vue_test 2024-02-20 21-22-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706259/6d4ad5d3-9346-7602-19a9-8f09b0ba366c.png)

何度か試した結果、gpt3.5だと以下のような結果でした。

:::note alert
・自然言語での解説がない
・繰り返し処理にforを使ってくれないときが稀にある
・表示しているcurrent fileに対して+αでコーディング提案はしてくれない
:::

Cursorにはその他にいくつかの機能があります。
+ **＠Symbols** プロジェクト内のファイルを瞬時に参照できる機能
+ **Auto-Debug** ターミナルでコードのエラーが発生した際に原因を自動で検出してくれる機能
+ **Fix Lints** lintエラーの上にマウスオーバーすると青ボタンが表示され修正してくれる機能
+ **Docs** サードパーティライブラリのドキュメントをAIに読み込ませる機能

この**Docs** という機能は読み込み先のURLからドキュメントを学習させることができます。

![Monosnap App.vue — vue_test 2024-02-20 23-18-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706259/8d41f546-0f14-eef1-99bf-098c36bcdd82.png)

「+Add new doc」押下でURL入力用テキストボックスが表示され任意のライブラリを追加します。

![Monosnap App.vue — vue_test 2024-02-20 23-21-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706259/0ce7f8a2-fd33-8bc6-63aa-66b296bb4cff.png)
Chat欄に登録したライブラリをメンションすることでコードとの関連性を確認することができます。
公式ライブラリだけでなく、用意した要件定義書を学習させることで、要件を満たしているかの判定をしてくれるような運用ができれば夢が広がります。


余談ですが、ChatGPTなのでなにもコーディングに関連した質問にだけ応じてくれるわけではありません。
![晩ご飯.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706259/18279ce1-4f01-a443-d570-8a617be3ce88.png)
これによりコーディングをしながらブラウザを跨ぐことなく全く別ジャンルの提案も行ってくれます。

## 料金体系
<table>
  <thead>
    <tr>
      <th>プラン</th> <th>価格</th><th>GPT-3.5</th><th>GPT-4</th>
    </tr>
  </thead>
  <tr>
    <td> Basic </td> <td>無料</td><td> 200回 / 月 </td> <td>50回（リセットなし）</td>
  </tr>
  <tr>
    <td> Pro </td> <td>$20 / 月</td><td> 無制限</td> <td>無制限（高速verは500回 / 月）</td>
  </tr>
  <tr>
    <td> Business </td> <td>1名ごとに$40 / 月</td><td> 無制限 </td> <td>無制限</td>
  </tr>
</table>

Proプラン以下だと、OpenAI社のサーバにプロンプトや出力結果が保管されますがBusinessプランの場合、OpenAI社の**サーバにデータが保管されなくなるのでよりセキュア**になります。

ただしPro以上の有料プランにしなくても自身のOpenAI Keyを利用することも可能です。
![openai.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706259/fa62045c-19dd-1e8c-6d3a-96368d7e8543.png)




## まとめ
VsCodeをフォークしているだけあって、エディタとしての使い勝手は悪くないです。
不満点を挙げるとするとGitHub Copilotに比べて有料プランは個人・ビジネスともに料金は2倍なのでランニングコストはかなりかかります。
ただBasic（無料プラン）で一度利用してみるのは十分アリだと感じました。

Fix Lintsの機能なんかはLinterの拡張機能を入れていればいいかなという所感もありましたが、自分にとってはCodebase Answersがかなり楽しかったです。

Cursorにはコード保管機能がないため、この点がGitHub Copilotに劣っているので今後の機能追加に期待したいです。

## appendix
Cursor公式ページ

https://cursor.sh/