話題のAIエディタ「Cursor」を使ってみた

UH
2023-12-08
2023-12-08
目次

Cursorというエディタが最近話題になっており、とても便利だという声を耳にするので、今回はインストール方法、AIでのコード生成の流れをご紹介いたします。

Cursorとは

AIを活用した開発に特化したコードエディタで、chatGPTを活用してコードの自動生成、補完、デバッグなどをサポートしてくれる機能があります。

VSCodeをフォークして開発されているので、普段VSCodeを活用してる方でも移行しやすくなっております。

Cursorのインストール

Cursorを検索してダウンロードページからダウンロードしていきます。

0.install

ダウンロードできたらインストールしていきます。

Languageの項目には日本語と入力します。

その下のCommand Lineの項目は「install cursor」をクリックしておきます。こちらをクリックしておくと、ターミナルでcursorと入力するだけでCursorが立ち上がるようになります。

0-1.setup

VSCodeの拡張機能を使いたいので、画像のUse Extensionsをクリックします。

0-3.setup

この画面でPrivacy Modeを選択することでCursorで書いたコードはサーバーに保管されないようにすることができます。

0-4.setup

ログイン画面が出てくるので、アカウントがない場合はSign Upから作成していきます。

0-5.setup

インストールが完了し、Cursorが立ち上がりました!

VSCodeをフォークして作ってるだけあって、見た目はほぼVSCodeなのでかなりとっつきやすそうです。

0-6.setup

READMEが表示されていますが、サンプルのプロジェクトがあらかじめ入ってるのでそちらを確認していきます。

対話しながら簡単開発

インストール後にあらかじめ用意されているprojects/python/main.pyを開きます。

1-1.tutor

Ctrl + Kで指示を入力する枠が出てきます。gpt-4かgpt-3.5を選択できます。

Step 1に記載してあるようにCLIベースで三目並べのゲームを作成するよう指示を出します。

1-4.tutor

指示した内容でコードが生成されました。追加の指示を出したり、生成されたコードを直接編集したりもできます。

今回はそのまま受け入れますので、画像左上青色ボタンのAcceptもしくは右上緑色ボタンのYを押してコードを確定させます。

1-5.tutor

生成されたコードを実行していきます。

実行すると構文エラーが出ました。エラーの内容を右側のCHATの枠内に貼付けてエラーを修正するように指示を出してみます。

エラーの説明と修正案が表示されました。こちらで問題なければApply to Current Fileをクリックすると元のコードに反映されます。

2-4.tutor

2-5.tutor

修正前後の差分が表示されるので問題なければCtrl + Shift + Yもしくは緑のボタンを直接押すことで修正後のコードに変更されます。

2-6.tutor

再度実行してみると、ターミナル上で三目並べが無事動きました!

3-2.tutor

勝ち負け判定もちゃんと機能しています。

3-3.tutor

Step3に記載している通り、三目並べに色をつけて見やすく修正していきます。

指示を出して提案されたコードを同様に反映させます。

3-5.tutor

再度実行すると、色がつき見やすくなりました!

3-8.tutor

コードやプロジェクト全体の説明をしてもらう

コードを範囲選択してAdd to Chatを押すことで、右側のCHAT欄にそのコードを選択した上で指示を出すことができます。

4-1.tutor

今回は選択した範囲の処理内容について教えてもらいます。

4-2.tutor

4-3.tutor

処理の概要、各メソッドの説明が表示されました。

また、コードだけでなくプロジェクト全体、リポジトリに対しても質問や指示ができます。

この処理はどこでやっているかといったことや、各プログラムの役割についても確認できます。

画像ではリポジトリの説明を聞いています。

指示を入力する枠の右下に記載してる通り、回答をchatもしくはコードベースで選択できますが、今回はコードベースで回答してもらいます。

5-1.tutor

5-2.tutor

次はmain.pyを説明するREADMEを書いてもらいます。

新しくREADME.mdを作成した後、ファイル内でCtrl + Kを押して指示する枠を出し、@を入力した後Codeを選択してコードを参照できるようにします。

6-1.tutor

6-2.tutor

画像の通り、main.pyを説明するREADME.mdが作成できました。

6-4.tutor

このように単純な指示から処理内容やリポジトリの説明を確認したり、コードの作成まですることができました。

AIとのチャットではコードやプロジェクトに関する指示はもちろんのこと、関係のない内容についても普通のchatGPT同様に使用することができます。

仕様、料金

料金はBasic、Pro、Businessの3パターンあります。

無料のBasicではgpt-4は50回、gpt-3.5はひと月200回コールできます。

有料版では制限ありのgpt-4 turboひと月500回と無制限のgpt-4、gpt-3.5を使うことができます。

OpenAI Keyを使うことで、無料版を使いながら制限を超えてgptを使うこともできます。

cursor_plan

さいごに

VSCodeでもGitHub Copilotを導入することで、今回紹介したコード補完やチャットによる開発といったことができますが、Cursorは元々それらの機能が付いたものとしてより使いやすく感じました。

今回挙げてない機能として、外部サイトのドキュメントを直接読み込ませて、その情報を利用することで導入・開発を楽に進めるといった機能もあるようです。

VSCodeをフォークして開発されているのでこれまでのVSCodeの拡張機能も使うことができ、操作についてもVSCode同様にできるといったことや、全ての作業がエディタ内で完結するので手間が省けるといったことからCursorに移行を考えようかと思います。

もちろんAIの提案が最善とは限らないため使う側が理解することも必要ですが、Cursorを使うことでコーディングが効率的になり、開発スピードも上がるのでぜひお試しください。