話題のエディタ Cursor の便利機能

# はじめに
普段はvimを使っていますが、今話題のエディタ [Cursor](https://cursor.sh/) の便利機能を試してみたいと思います。
VSCodeを使用している方であれば設定、拡張機能をそのまま引き継げるので違和感なく移行できると思います。
僕のVSCodeはvimのキーバインドで操作できるように設定していますが、問題なく操作できました。

僕のVSCodeの設定を記事にしているので良ければ見てみてください。

https://qiita.com/TAKUYA_1228/items/31df83a57ac6003ca004
# やること
今回はインストール手順は省いてCursorのAI機能を使ってPHPでコードを書いていこうと思います。

# Command + K AIでコードを生成する
![スクリーンショット 2023-12-13 18.28.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/a38b5d49-8ed7-7090-a08b-002ba9b5a4e0.png)

エディタ上で`Command + k`を押すとウィンドウが表示されます。
質問をするとAIがコードを生成してくれます。
試しに質問してみました。
> 僕： DBのtodosテーブルからデータ一覧を取得するクラスを生成してください。

> AI：
![スクリーンショット 2023-12-07 19.50.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/8a6a94dd-f45c-df73-c42d-de8c329b5c38.png)

言語指定はしていませんが拡張子から判断しているのか、PHPでクラスを生成してくれました！
単純なクラスではありますが問題なく生成されていると思います。

提案された内容がずれていた場合は`Follow-up`で情報を渡すことで再提案をお願いできます。
### 1回目の質問をする
![スクリーンショット 2023-12-13 18.24.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/d2b34517-d9c4-ccbd-9bcc-08fdaef220e4.png)
質問内容に問題もありますが、意図した内容になっていません。

### 追加情報を入力して質問内容を補足する
![スクリーンショット 2023-12-13 18.25.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/88937d1c-e6a4-1728-8fa1-f20223a6fa37.png)
関数に対してコメントアウト（説明）を追加してくれました！

# Command + L チャットでAIに質問する
![スクリーンショット 2023-12-13 18.34.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/3d399d66-f2d1-a77c-e9e9-134f89d4c8a8.png)

エディタ上で`Command + L`を押すとチャットからAIに質問をすることができます。
コードの生成だけでなくAIが解説もしてくれるので、複雑な処理であったり、新規でアサインした案件で全体を把握できていないプロジェクトなどで使うと便利です。
新規にプロジェクトにアサインした場合は、既にプロジェクトにアサインしているメンバーに質問する場面もあると思います。
CursorでAIとペアプロ感覚で実装できるので作業効率があがりそうです。

チャットでAIに質問してみます。
> 僕： 
todosテーブルにレコードを追加するクラスを生成してください

> AI：
![スクリーンショット 2023-12-07 19.56.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/edb5c375-e0cd-d811-e2c3-bf1f45092181.png)

AIが生成したクラスの解説とコードを提案してくれました！
Cursorは他のファイルを参照してくれます。
弊社ではクラス名を`execute`にする慣習がありますが、`GetTodos.php`を参照してしっかり考慮してコードを生成してくれています！

カラムはAIがテーブル名からある程度推測してくれているようです。
カラム名を指定してみます。

> 僕：
todosテーブルのカラムはcontent, created_at, updated_at, deleted_atになります

> AI:
![スクリーンショット 2023-12-07 19.59.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/48958c14-98d2-5606-a986-69fea1d5c70f.png)

指定したカラムを追加してクラスを再生成してくれました！

# @ Symbols
`Command + K`, `Command + L`でAIでのチャットウィンドウで`@Symbols`　を入力すると
AIに参照するファイル、フォルダ等をあらかじめ指定することができます。
AIがより精度の高い答えを教えてくれます。

### 指定できるシンボル
チャットウィンドウで`@`を押すとドロップダウンでサジェストを表示してくれます。
| <span>@</span>Symbols        | Description                 |
|:-----------------------------|----------------------------:|
| [@Files](#files)             | 既存のファイルを参照             |
| [@Folders](#folders)         | 既存のフォルダを参照             |
| [@Code](#code)               | 既存のコードを参照               |
| [@Docs](#docs)               | 公式ドキュメントを参照             |
| [@Lint errors](#lint-errors) | Lintのエラーをチェック            |
| [@Git](#git)                 | GitHub上のブランチと差分を比較する |
| [@Codebase](#codebase)       | ディレクトリ内全てのコードを参照      |

# <span>@</span>Files
既存のファイルを参照してAIにコードを提案してもらったり、ファイルに書いてあるコードについて質問することができます。
今回はコードの内容を質問してみます。

> 僕：
@GetTodos.php このファイルについて教えてください。

> AI：
![スクリーンショット 2023-12-13 14.27.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/e44394a1-d99a-9b1b-a9fc-46daca94bd9a.png)

# <span>@</span>Folders
既存のフォルダを指定してAIにコードを提案してもらったり、フォルダ全体について質問することができます。

> 僕：
@Todo このフォルダについて教えてください

> AI:
![スクリーンショット 2023-12-13 15.29.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/3ffdf7ba-3c7c-5b50-cb86-eff68b677980.png)

# <span>@</span>Code
既存のコードをAIに参照してコードの提案してもらったり、コードのについて質問することができます。
実際に入力してみるとドロップダウンで参照するコードを表示してくれます。
![スクリーンショット 2023-12-13 15.38.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/253d0c67-bbea-bba5-25b8-c5fe52afc049.png)
プルダウンから選択するとファイルの中身が全て参照されるようです。
`@Files`との使い分けが思いつかないのでAIに質問してみることにしました。

> 僕：
@Codeの使い方を教えてください

> AI：
![スクリーンショット 2023-12-13 15.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/1c5628ee-8309-3bf2-4e03-6c8839877c12.png)

なるほど！
使い方に加えて具体的な使用例も提案してくれました。
ファイル内に複数の関数がある、部分的にコードの意味を知りたい、部分的にコードを再利用したい時に便利ですね！
```text:Chat
@Code(Todo/AddTodo.php, 1, 16)
```

# <span>@</span>Docs
公式ドキュメントを参照してAIがコードの提案と説明をしてくれます。
使用している言語、ライブラリ等の公式ドキュメントを参照して提案してくれます。

試しにPHPのenumについて質問してみます。
> 僕：
@PHP enumの書き方を教えてください

> AI：
![スクリーンショット 2023-12-13 16.39.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/3884deee-ab53-3fc6-4bb4-d3ac37e370f7.png)

# <span>@</span>Lint errors
AIがLintのチェックをしてくれます。
何も指定しない場合はPHPとして構文に問題ないかをチェックしてくれるようです。
コーディング規約を追加することで指定した規約に沿っているかも確認してくれます。

![スクリーンショット 2023-12-09 16.47.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/6a7c3bf3-3b58-0c73-8c97-0c6caac79cfe.png)

# <span>@</span>Git
GitHubと連携することにより、差分をチェックしてくれるようです。
![スクリーンショット 2023-12-13 16.56.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/93ea3f71-7ca8-0261-4760-e2fb895d3876.png)

# <span>@</span>Codebase
全体のコードを参照してAIがコードの提案と説明をしてくれます。
何もシンボルを指定しない場合はデフォルトで`@Codebase`が使われているようです。

試しに質問してみます。
> 僕：
htmlでtodoの一覧を表示してください。

> AI：
![スクリーンショット 2023-12-07 21.15.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/d93416bb-9580-4987-e4d6-dc1d35655b73.png)

既存のクラスを使用してコードを提案してくれています。
また、セキュリティも考慮してあり、あくまでサンプルであることも一言添えられてます。
さすがです！

# デバック
コードを書いている時にエラーがある場合は<font color="Red">赤い波線</font>が出ると思います。
マウスオーバーするとウィンドウが表示されて、エラーの内容と`AI Fix in Chat`のボタンが表示されます。
クリックするとAIがバグの理由と修正案を教えてくれます。

:::note info
`Commond + Shift + E`がショートカットキーになっています。
:::

![スクリーンショット 2023-12-07 20.35.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566444/489e25d8-e6a8-6089-09dd-a248decbaed6.png)

# 最後に
いかがでしょうか？
今回試したのは簡単な内容でしたが、初めてアサインされたプロジェクトで全体像を把握するためのサポート、ペアプロ感覚で実装の手助けになると感じました！

サービスは [有料](https://cursor.sh/pricing) なので若干の抵抗はありますが、効率を上げてくれるエディタだと思うので本格導入を検討したいと思います。
OpenAI APIと連携ができるようなので、すでに登録されている方はAPI連携で試してみるのもおすすめです。

少しでも参考になれば幸いです。
ありがとうございました！