![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/26103159/image-3.png)
次世代AIコードエディタCursorエディタをサクッとインストールしてみた
公開日:
2024.11.21
こんにちは、エンジニアのmiyagiです!
急に寒くなってきて、秋はいつきたのか?季節感を掴めていない今日この頃です。
今日は、Cursorエディタが良いという情報を目にしたので、Cursorとはどんなエディタなのか、何が良いのか気になったので、調べたことを紹介したいと思います!
Cursorについて
VSCodeからフォークされたAIを活用した開発に特化したコードエディタになります。
VS Codeの拡張機能も使えるみたいです。
料金について
料金はFree、Pro、Businessの3パターンあるみたいです。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/15145247/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-16.57.56.png)
インストール
Freeをインストールしてみて、使ってみたいと思います。
以下からダウンロードします。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/15145343/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-16.59.29.png)
- otherクリックするとWindowsとLinuxが選択できるみたいです。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/15145401/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.00.44.png)
初期設定
- インストール後に起動すると、初期設定画面が表示されます。
Language:日本語
Codebase-wide:ソースコード全体がEmbedding(埋め込み)される設定
Add Terminal Command:Cursorを開くためのショートカットキーの設定
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/15145426/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.02.53-14.49.26.png)
VS Codeの拡張機能
- Use Extentionsをクリックすると移行してくれるみたいです。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/15145443/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.05.45-14.49.26.png)
アカウント作成
- Cursorのアカウントを作成します。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/15145507/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.07.02.png)
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/15145531/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.07.29.png)
- アカウント持っていないので、以下で新規作成します。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/15145545/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.08.28.png)
- Cursorを起動します。一瞬VSCodeが起動されたかと思いました。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/15145603/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.09.59-14.49.26.png)
command + L
- ファイルを選択した状態で、command + L をクリックすると、Chat機能が使用できます。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/20200031/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.21.42-1024x643.png)
@ファイルシンボル
- 先ほどのChat内で@を使用すると以下のようになります。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/20200049/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.24.35.png)
- 例えば、index.htmlを要約してというと、こんな感じになります。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/20200105/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.27.19-490x1024.png)
Docs
- @Docsを選択すると、ドキュメントを使用してAIチャットの回答に利用するという機能になるみたいです。デフォルトだと以下の内容があります。ない場合は、Add new docで追加できるみたいです。
![](https://s3.ap-northeast-1.amazonaws.com/assets.c-limber.co.jp/wp-content/uploads/2024/11/20200116/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2024-11-10-17.33.48.png)
まとめ
個人用のエディタでVSCode使用していましたが、今日からCursorに乗り換えました!
触りながら、使い方を学びつつ、どんどん利用していこうかなと思います。Cursorで書いたコードはサーバーに保管されていくので、仕事用は今まどおりPhpStormを愛用していきたいな〜と思います!