AIエディタ『Cursor』の開発体験がよかったので紹介します

ChatGPTを搭載したテキストエディタ『Cursor』をつかって、ちょっとしたWebサービスを開発してみました。
その体験が非常に良かったので、どんな感じで使えたか布教してみようと思います。

この記事では、Cursor全体の紹介ではなく「僕がどんな使い方をしてどんな体験を得られたか」にフォーカスしてまとめます。仕様や料金を知りたい場合は他の方がまとめてくれているのでそちらがおすすめです。

今回開発したもの

まずは今回どんなものを作ったか紹介させてください。

https://talk-boost.com/

話題に困ったとき代わりに考えてくれるサイトです。
ただ単に話題を提供するだけでなくキャラクターの表情も楽しめるので新鮮な気持ちで使えます。

ざっくり開発プロセス

開発期間は1~2日です。
使っているものをざっくりまとめます。

• エディタ：Cursor
• フレームワーク：Nuxt.js
• デザイン：Tailwind
• サーバ：Netlify

Cursorのサポートを受けながらNuxt（Vue.js）を爆速で書いて、デザインはTailwindにおまかせでcssを書く労力を軽減、デプロイもGithubとNetlifyを連携して超簡単に。
といった具合です。

「いつもVue-cli使っているから、たまにはNuxt使ってみたいかも~」とノリで完成までもっていけたので非常に良い体験でした。

Cursorはいいゾ

本題です。

『Cursor』はVScodeをベースにChatGPTを搭載したエディタです。
https://cursor.sh/

見た目はVScodeそのままなので、普段からVScodeを使っているならば特に違和感なく開発をスタートできます。覚えるのはAI機能の呼び出し方くらいでした。

正直のところ、僕はもともとChatGPTを頼って開発していたので、VScodeにChatGPTがついたところで今までと大して変わらないだろうと思っていましたが、大きな間違いでした。

ここからはCursorでどんな体験ができたかまとめていきます。

前提条件の入力がいらない

本家ChatGPTにプログラミングのことを聞こうとすると、前提条件を丁寧に入力しなければなりません。
どんな言語を使っていて...今どこまで開発していて...こんなエラーがあって...などなど。

丁寧に入力するほどちゃんとした答えが返ってきますが、大変といえば大変です。（一生懸命調べるより楽ですが）

Cursorであれば作業ファイル全体を勝手にみてくれている様で、前提条件を一から説明することなく簡単な要望に答えてくれました。

▲ 「⌘K」でチャットを呼び出し要望を入力します。コードを書いてくれるのでAcceptを押せば即反映してくれます。

新しく追加するだけでなく、既存のコードの修正も提案してくれるので便利です。
上の画像ではHTMLでしたが、vueのコードでも同じ感じで書いてくれます。

僕の場合はtailwindを使っていたので、クラス名を忘れた時に重宝しました。
該当のコードを選択してAIを呼び出し、「tailwindで中央寄せして」と頼めばしっかりtailwindのclassを追記してくれるのでドキュメントをわざわざ開く手間が省けます。

修正性能が高い

本家ChatGPTのようにチャットで色々聞くこともできます。
「⌘L」で右側にチャットが表示されます。

ここでは本家と同じように「現在時刻を表示する方法を教えて」といった聞き方ができます。
先ほど紹介した通り、前提条件となる「Vue.jsを使っていること」は入力する必要はありません。
今回の聞き方では日本語での説明+コードが返答されました。

ChatGPTを使っていると返答されたコードを使おうとしても、汎用的な内容のあまりそのまま使えないこともあるかと思います。
GPTの回答を元に自分のコードと照らし合わせて調整するみたいな。

この部分をCursorであれば上手いことやってくれるのは、とても助かりました。

例えば「〇〇する方法を教えて」と入力すれば一般的な実装方法を提示してくれます。ただ、そのままコピペするだけでは使えない場合もあります。
すでに実装しているjsに組み込む必要があったり、html側でも修正が必要だったり...。

画面右側に生成されたコードの「▶︎ボタン」を押すと、実際のファイルに反映してくれます。
コード内の緑色の部分がそれです。
コードを追記してくれたり、必要であれば修正までしてくれるので、本当にやることはありません。
想定通りに動くかは実装者側にある程度の知識が必要でしょうが、超時短ができるので便利過ぎます。

他に便利な機能があるみたい

僕はあまり使わなかったのですが、ターミナル上ででたエラーの対策もしてくれます。
ターミナル内でもAIを呼び出せるので、使い方はテキストエディタ内で使うのと同じです。
一番面倒なのが謎のエラーにハマった時なので助かりますね。

他にもライブラリのドキュメントを学習させて使うこともできるそうです。
まだ試していないのでどんな感じか気になるところですが、莫大なドキュメントを読まずにどうにかしてくれるのでしょうか。

Cursor便利だ...

個人開発をする上でここまでサポートしてくれるのはとても助かりました。
設計やデザイン、マーケといった開発以外の部分に時間を割けるのは個人開発者の味方ですね。

今後もたくさん使っていこうと思います！