【AI駆動開発】ChatGPTとシームレスにつながる開発環境「Cursor」紹介。アプリ開発効率を大きく変えるツールが登場!

この記事は1年以上前に投稿されました。情報が古い可能性がありますので、ご注意ください。
はじめに
米Microsoft(マイクロソフト)が提供する高機能エディター「Visual Studio Code」(以下、VSCode)はソフトウエア開発のデファクトスタンダードツールと言えますが、そのVSCodeをフォーク(ソースコードを複製して新たな機能を追加したりカスタマイズすること)して、ChatGPT内蔵でAIと組み合わせて更に強化された最強とも言えるエディタCursorが提供されました。特に注目なのは、AI Chat 機能で、ChatGPT(OpenAI API)と接続されていることで、普段利用しているVSCodeを利用しながらAI ペアプロが実現できます。自社サービスの開発に携わっている方は顧客満足度の向上のための継続的な機能追加や改善、開発会社で携わっている方は顧客への素早く価値提供をするためにアプリケーション開発の高速化が求められます。そのために開発現場では生産効率の継続的な向上が必要となり、Cursorが実現するAI ペアプロは、強力な相棒の出現となるのではないでしょうか。今回は、Cursorの機能について説明していきます。

Cursorの概要
Cursorは、AI ファーストの開発に向けて開発されたコードエディタ(IDE)ですが、GitHub Copilotと比較すると、シンプルで100行程度のコードを生成することが可能であったり、カーソルを当てたブロックの編集を依頼することも可能です。更に、現時点のソースコードを理解する ChatGPT スタイルのインターフェースを搭載していることでより使いやすくなってます。

また、Cursorは既に多くの企業のエンジニアから認知されており、「ChatGPT(チャットGPT)」を開発するOpenAI ともパートナーシップを組んでいるのもかなりの強みになります。Cursorのプロジェクトの開発チームでは、「世界で最も生産的な開発環境にする」「リファクタリング途中のコードを自動修正」「AIを利用してのドキュメント作成」などのビジョンやロードマップが掲げられており、大きな将来性があると言えます。

更に、Cursorは、OpenAIが新興投資ファンドを組成する、AIスタートアップの出資対象12社に含まれており、今後の機能開発の更なる進化が期待されます。

現在は、Mac, Windows, Linuxに対応してます。インストール手順はシンプルで流れにそって進めることで特にトラブルなく自身のPC端末にインストール可能です。
[1] ダウンロードとインストール

[2] アカウント作成と、Githubと連携

[3]Githubと連携完了

[4] Cursor起動とcommandインストール

インストールが完了すると今までVSCodeでインストールして利用していたものが移行されて継続利用できるようになってます。

料金プラン
以下のようにBasic, Pro, Businessの3段階のプランが提供されています。それぞれ機能やリクエスト数などが異なりますが、最初に試してみるならBasicで十分かと思います。今回は機能を紹介するためにもProでスタートしています。

各種機能について
せっかくなので、cursorのサイト上にあるAI(ChatGPT)に各種機能について質問したみたいと思います。
Command + K

例えば、今回は、最近取り組んでいてブログでも公開している、「Event-Driven Architectureへの道」に関連して、Apache Kafka の javaコードをpythonコードに変えてみるコード生成をしてみたいと思います。上記の通り、Command + Kを押してから対話形式で依頼内容と、javaのコードを渡してみました。生成には、Generateを押すとエラーのないpythonのコードが一瞬で生成されます。


その後、生成したpythonコードで警告のエラーがありまして見てみると、cursorが解決策を提示してくれるようで、AI Fix Chat ボタンを教えてみると解決策の提示(pip install kafka-python)で反応してくれます。

提示(pip install kafka-python)の内容をターミナルより実行したら当然ですが無事に警告のエラーが解消されます。簡易的な内容ではありますが、cursorのターミナルも非常に軽量で強力なChatGPTが開発の中におけるターミナルの操作で違和感なく使いやすいです。

Command + Shift + L
続いて、実際のコードをAI Chat機能を利用して質問してみます。今回は、質問したいコードを選択して Add to Chat を押してみました。右側には、CHAT タブが表示されているので、コードに対する質問を行いコードの修正案を提示してもらいました。質問した内容は簡単な内容ですがコードにコメントを追加してもらいました。もちろんApache kafkaの内容などは情報として伝えてませんが、適切な内容で質問に答えてくれました。当然、AI Chat機能のみですので実際の修正までは行いません。

依存関係やコードの表示
Command + K から"@"を入力すると、AIに特定のコードや依存関係を表示することができます。ファイル(File)、コード(Code)、ドキュメント(Docs)、チャット履歴(Chat History)、などから選択ができます。

Ask about your codebas
こちらの機能は、プロジェクト全体、コードベース全体に関する質問をChatベースで回答してくれます。Command + k のCHATからCommand+Enterを押して、「with codebase」ボタンをクリックして質問を行います。


Browse documentation
Docsの機能は、AIがサードパーティのライブラリを理解してくれます。URL を指定してクローリングして最新のライブラリを学習します。開発する上では、さまざまな製品ドキュメント、OSSのマニュアルなどを参照することは日常で行われていて意外と手間のかかる作業ですが、相棒であるAIペアプロにも自分が理解したいマニュアル類などを共有することで劇的に作業効率や相棒(AIペアプロ)からの助言の質を高められることを期待できます。CHATまたはCommand + K @LibraryNameを入力したり、実際のURLを貼り付けます。
ここでは、分散型イベントストアおよびストリーム処理プラットフォームであるApache Kafkaのドキュメントを追加してみました。指定のドキュメントを理解した上でこのドキュメントを軸に質問を繰り返し行なって自分の期待値である回答に結びつけることができます。


Publish to GitHub
Cursorの操作しているフォルダをGitHubレポジトリに直接公開が可能です。公開すると、gitおよびGitHubを利用したコード管理にアクセスすることができます。これは、Privateレポジトリとして登録してセキュアで利用することが前提となりますが、VSCodeでもGitHubと連携させることはあると思いますので今まで通りの利用ではないでしょうか。

Auto debug
Auto debugは、ターミナル(TERMINAL)上でエラーが出た際にボタン選択すると、Auto debugが機能して修正内容を提示してくれます。今回は非常に簡単な事例ですが、CHATと連携してコード上の不要な文字の修正提示と、実際のデバックが非常に役立つ機能になってます。


続いて、ソースコードを読み込んで内容を分析するリンターの機能ですが、選択したカーソルに対して自動的にリンターエラーとスタック トレースを調査し、バグの根本原因を特定してくれます。

まとめ
今回の記事では、ChatGPTを組み込んだエディターツール「Cursor」について紹介しました。「GitHub Copilot」と悩まれている方も多いと思いますが、「Cursor」も各機能が強力で、アプリケーション開発の生産性を向上させるためには非常に役に立つツールです。Cursorを使うことで素早く開発を行い、その分の時間を顧客理解や業務改善などにあてることにより組織全体の生産性の大幅な向上や、サービスの顧客満足度の向上が図れます。
今回の記事が皆さんの日々の開発業務の改善につながり、またAI駆動開発(AI-Driven Development)についての関心と導入につながれば大変幸いです。
お気軽にご相談ください
AI駆動開発について興味関心があり、
ご相談があれば以下よりお問い合わせください