Cursorを知ったきっかけ

「Github Copilot」を知る

プログラミング学習で使っているエディタは「VSCode」と「Pycharm」なんですが、アプリ開発に生成AIを活用するようになり、使い方を調べたりしているときに、VSCodeの拡張機能として、「GitHub Copilot」というコーディングサポートをしてくれるものが出ていると知りました。

YouTubeなどで検索してみると、コードを書き始めると、予測してコードの続きを提案してくれるそう。
開発業界では、効率化されて話題になっているとのこと。

下記は、公式ページより抜粋

この、Github Copilotを調べていると、「Cursor」というエディタとの比較をしている動画が多くあり、「Cursor」についても同様に調べてみました。

「Cursor」に出会う

こちらは、VSCodeの拡張機能ではなく、独立したエディタ。ただ、VSCodeの引継ぎ機能があり、ほぼ同じように使えるようです。無料枠（下記画像のBasicプラン）があったので、実際に使用してみました。

主な機能については、翻訳が必要ですが、公式ページで説明されています。

「Cursor」を使ってみる

Cursorを知るまでにやっていたこと

前回の記事で、Chat GPTなど、生成AIにプログラムコードを生成してもらうプロンプトを作成していると書きました。

プロンプトの書き方は「Kai｜生成AI」さんの記事にわかり易く説明がありましたので、引用させていただきます。

私がやろうとしていたのは、コードの一部を生成してもらうのではなく、アプリ開発全体のファイルを作成してもらえるプロンプトを作成することでした。
プロンプトエンジニアリングの学習をしながら、生成AIと何度もやりとりをして、何とか形になるようにたどり着いたプロンプトの導入部分が下記です（ほぼ1ヶ月費やしました…）。

### 指示（id=1）###
あなたには私のWebアプリケーションの開発者として機能していただきます。
あなたのゴールは、私が提供する`要件定義書(id=2)`と`機能リスト（ID=3.1～ID=3.7）`をすべて網羅した、Webアプリケーション開発に必要なファイルを作成し、それぞれのファイルに記述する具体的なコーディングを行うことです。

# ルール
- 私は、`要件定義書(id=2)`と`機能リスト（ID=3.1～ID=3.7）`を、分割してあなたに提供します。
- 機能リストが提供されたら、必要なファイルを生成し、具体的なコーディングを行う
- ディレクトリとファイルを明示する
	例）templates/index.html 
- 1返答に付き1ファイルを出力する
- コメントアウトでコードの解説を付加する
- 機能リストを完全に実装するために具体的なコーディングを行う
- 出力するファイルに記述するコードはすべて記述する

無料枠で使用していたこともあり、約4000文字という文字数制限があったので、上記の導入部分、要件定義書、各機能リストを分割して生成AIに提供することで、開発を進めていました。
ただ、やりとりの回数が増えると、途中で最初の指示を忘れているような返答が出てきたりして、プロジェクト全体を作成するのが難しい状態でした。

「Cursor」を試す

Cursorでまず試したことは、これまでの生成AIとのやりとりで作成していたプロンプトを、Cursorのチャット機能を使って実践してみることでした。
始めの印象は、他の生成AIと同様の返答で、「ページを切り替える手間が省ける」程度のものでした。それでも、同一ページで作業できることに便利さを感じていました。
引き続き、Cursorの使用方法などを調べていると、「作成したいアプリを入力すると、必要なファイルを作成し、コーディングまでやってくれる」ということを知り、まさに私が求めていた機能だと感動して、その機能を試すことにしました。

Cursorでプロジェクトを立ち上げる方法

① 「file」→「New AI Project …」を選択する

下記のような画面で、どのようなプロジェクトを作成するかを入力する画面に切り替わります。

② 「ここにどのようなアプリを作りたいかを入力する」（実際には英文で書かれています）の部分に、作成したいアプリの情報を入力する

私は、作成していた要件定義書を貼付して「Next」ボタンをクリックしました。

すると…
しばらく自動で動いて、なんと、必要なファイルを作成し、それぞれのファイルにコーディングまでしてくれました。

この機能にたどり着くまでに、Cursorのチャット機能を試したりしていたので、ここで、無料枠を使い切ってしまい、この先に進むことができなくなりました。

生成AIのチャット機能でアプリ開発をしているときは、生成されたコードをエディタに、その都度コピペして作成していましたが、今回は、左にあるファイルを自動で作成して、コードまで記述してくれました。

私がアプリ開発のプロンプトで、「すべてのファイルを作成してもらうには？」と四苦八苦していたのが、要件定義書だけで、ここまで作成してくれたことに感動しています。

先に進めていないので、コードが正常に動くのかはまだ検証できていませんが、エラーについてもチャット機能で訂正できたりするみたいなので、動作するコードにできると思います。
また、作成されたファイルのディレクトリ構造をみると、各フレームワーク（今回はFlask）のディレクトリ構造にファイルを移動する必要もありそうです。

参考にしたYouTubeでは、Javascriptで簡単なゲームやクイズを作成して、実際に動いていました。

プロジェクトに必要なファイルとコーディングを一気にやってくれるので、そこからチャット機能を使って実装したい機能を追加していけば良さそうなので、開発は速くなりそうな予感がしています。

まとめ

もともと使用していたVSCodeとほぼ同じ操作感なので、移行もスムーズにできるし、今後は「Cursor」で開発していくことになりそうです。
※入力内容が、サーバーに保存される点は他の生成AI同様で、機密情報は入力しないよう注意が必要とのことです。

生成AI分野では、GoogleでGeminiが日本でも公開されたり、リートンも大幅アップデートで複数のAIチャットから選択できたりと、日々進展があり、Github Copilotにも動きがありそうな情報もあるので、「Cursor」の使用について、今、下記のように思案しているところです。

• 30日後に制限が解除されるのを待つ

• Chat GPTのAPI（CursorでAPIが利用可能）で従量課金に注意しながら使用

• Cursor Pro（上記価格表参照）で月額のサブスク利用

• Github Copilot（CursorでVScode同様に拡張機能で利用可能）で月額のサブスク利用

進展は、また、記事にしていきたいと思います。

おまけ

おまけ①

Webアプリケーション開発のプロンプトを生成AIに作成してもらったやりとりを残していなかったので、当時のようにGeminiに投げかけてみたので記載しておきます。

あなたは、熟練のプロンプトエンジニアです。 
Webアプリケーション開発の汎用プロンプトを作成してください。
汎用部分は{{}}でコメントしてください。

Geminiの返答が下記。当時（当時はBard）も複数の生成AIに質問しましたが、下記のような返答があったので、それをもとに、要件定義書と機能リストを作成しました。