LoginSignup
4
1

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

Last updated at Posted at 2023-12-16

はじめに

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

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

やること

今回はインストール手順は省いてCursorのAI機能を使ってPHPでコードを書いていこうと思います。

Command + K AIでコードを生成する

スクリーンショット 2023-12-13 18.28.12.png

エディタ上でCommand + kを押すとウィンドウが表示されます。
質問をするとAIがコードを生成してくれます。
試しに質問してみました。

僕: DBのtodosテーブルからデータ一覧を取得するクラスを生成してください。

AI:
スクリーンショット 2023-12-07 19.50.00.png

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

提案された内容がずれていた場合はFollow-upで情報を渡すことで再提案をお願いできます。

1回目の質問をする

スクリーンショット 2023-12-13 18.24.28.png
質問内容に問題もありますが、意図した内容になっていません。

追加情報を入力して質問内容を補足する

スクリーンショット 2023-12-13 18.25.15.png
関数に対してコメントアウト(説明)を追加してくれました!

Command + L チャットでAIに質問する

スクリーンショット 2023-12-13 18.34.19.png

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

チャットでAIに質問してみます。

僕:
todosテーブルにレコードを追加するクラスを生成してください

AI:
スクリーンショット 2023-12-07 19.56.01.png

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

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

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

AI:
スクリーンショット 2023-12-07 19.59.46.png

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

@ Symbols

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

指定できるシンボル

チャットウィンドウで@を押すとドロップダウンでサジェストを表示してくれます。

@Symbols Description
@Files 既存のファイルを参照
@Folders 既存のフォルダを参照
@Code 既存のコードを参照
@Docs 公式ドキュメントを参照
@Lint errors Lintのエラーをチェック
@Git GitHub上のブランチと差分を比較する
@Codebase ディレクトリ内全てのコードを参照

@Files

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

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

AI:
スクリーンショット 2023-12-13 14.27.25.png

@Folders

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

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

AI:
スクリーンショット 2023-12-13 15.29.09.png

@Code

既存のコードをAIに参照してコードの提案してもらったり、コードのについて質問することができます。
実際に入力してみるとドロップダウンで参照するコードを表示してくれます。
スクリーンショット 2023-12-13 15.38.22.png
プルダウンから選択するとファイルの中身が全て参照されるようです。
@Filesとの使い分けが思いつかないのでAIに質問してみることにしました。

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

AI:
スクリーンショット 2023-12-13 15.37.49.png

なるほど!
使い方に加えて具体的な使用例も提案してくれました。
ファイル内に複数の関数がある、部分的にコードの意味を知りたい、部分的にコードを再利用したい時に便利ですね!

Chat
@Code(Todo/AddTodo.php, 1, 16)

@Docs

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

試しにPHPのenumについて質問してみます。

僕:
@PHP enumの書き方を教えてください

AI:
スクリーンショット 2023-12-13 16.39.49.png

@Lint errors

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

スクリーンショット 2023-12-09 16.47.09.png

@Git

GitHubと連携することにより、差分をチェックしてくれるようです。
スクリーンショット 2023-12-13 16.56.03.png

@Codebase

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

試しに質問してみます。

僕:
htmlでtodoの一覧を表示してください。

AI:
スクリーンショット 2023-12-07 21.15.38.png

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

デバック

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

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

スクリーンショット 2023-12-07 20.35.52.png

最後に

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

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

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

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1