今話題のエディタ「Cursor」とは

AI

筆者はこれまでプログラミングに使うテキストエディタは「Visual Studio Code」を使用していましたが、AIを搭載した新たなテキストエディタが出てきたことを知り、試用期間を経て乗り換えたので実際に使ってみた感想をお伝えしようと思います。

Cursor アイコン
  • 主な使用言語:PHP、Javascript
  • OS:Mac OS(MacBook Air M2)

対象読者

 Cursorを触ったことのない方

 Cursorってなんぞやって方

スポンサーリンク

Cursorってなんですか

Cursor(カーソル)はVSC(Visual Studio Code)をベースに開発されており、ぱっと見の外観はほとんど変わりません。そのため、長年VSCを触ってきた人でも違和感なく乗り換えることができるでしょう。

また、VSCをベースに開発されているのでVSCでできるエディタ画面のカスタマイズなどは全てCursorでも行うことができます。

そして、、VSCをベースに開発されているということは?そうです。VSCの拡張機能が使えます。

ついでにエクスポート、インポートも可能なので設定などもそのままに拡張機能を移行することができます。

つまり、VSCと外見上ほぼ同一のテキストエディタということになります。

じゃあVSCでいいじゃないかと思いますよね。ではCursorにはどんな魅力があるのでしょうか?

VSCとの違い・Cursorの魅力

Cursorの目玉機能はなんといっても「AI搭載」というところです。もちろん、VSCでも拡張機能を入れることでAIを使用できます。

しかしCursorにはAIが標準機能として搭載されているのです。

ここで一つ注意が必要なのが無料版では標準搭載のCopilot++は合計2000回までのみしか使えないのに加え、AIモデルはGPT-4の遅延型が50回、Cursor-smallが200回までと制限がかかっています。

本格利用をするなら有料版の購入を検討するか、すでに所持しているAIのAPIキー、Copilot++を使用してください。

AI

百聞は一見に如かずということで、実際に画面をお見せしましょう。

ディレクトリを作成し、index.htmlを作成した画面です。

普通にVSCodeと変わりませんよね。私がもともと使っていたVS Codeと違うところと言えば左にあったエクスプローラーボタンや拡張機能ボタンのメニューがファイルエクスプローラーエリアの上に移動したくらいです。

自動補完(Copilot++)

さて、実際にAIの力を見てもらいます。(もっともこれはCopilotなので契約していればVSCodeでも拡張機能で使用できますが)

私が<span>リスト</span>と打つと自動保管でリストコードを書いてくれました。いや〜最近のAIはすごいですね。

AIはコードを書けば書くほどより賢くなるのでかなりのファイル数を書いたウェブアプリケーションなどだと次に書きたい処理をしっかりと提案してくれます。

(上の画像では作成したばかりなのでテキストも「リスト1」「リスト2」と意味のない文字列になっています)

また、このように提案されたコードはTabキーを押すことで実際に使用できます。

自動生成

Command + Kを押すことでエディター内にAIのプロンプト入力欄が現れます。ここに指示を入力することでコードを生成してくれます。

試しに、適当な文章で適当にコードを作ってもらいました。

すごいですね。ちゃんと指示に沿ったコードを書いてくれました。(本当はこんな曖昧な文章ではなく、より範囲を絞ってより正確に指示を出すことで適切なコードを得ることができます。ただ、このようにフレームだけ生成させるという手もあります。)

現在青色になっているところがAIが生成したところで、複数箇所にわたって変更があった場合、それぞれ個別にCommand + Yをすることもできますし、一括Command + Enterで確定することもできます。

ここまでで完成したHTMLがこちらです。

非常にコメントし難い出来栄えですね。

まあここまでほぼ全てAIで部分的な指示を組み合わせただけと考えればなかなかだと思います。

修正・生成

コードの修正、ページの全体にわたって修正が必要になった場合、Command + Lを押すことでより簡単に、そしてより使いやすいAIプロンプト入力画面が現れます。

上の画像のように特に対象としたい場所を選択した状態でCommand + Lを押すとその部分が自動的にプロンプトに入力されます。

このように出力されました。ここで出力されたコードの上にある「Apply」ボタンを押すことでコードがファイルに出力されます。

それでできたのがこちらのメニューです。

デザインもしっかりしててすごいですね。感動。

デザインを整えてモダンなサイトを完成させてと指示をしたら、下のサイトが出来上がりました。

すごいですね。

次はAI Chatを詳しく見てみましょう。

現在「gpt-4」と書かれているところではモデルの変更ができます。

2024年6月20日時点でProユーザーが使用できる言語モデルは以下の通りです。

  • GPT-4
  • GPT-4o
  • Cursor-small
  • GPT-3.5

次に「@Mention」と書かれているところではファイル、フォルダーなどが指定でき、特定のファイルについて生成を実行してもらったら、特定のファイルを元に、別のファイルのコードを生成してもらうこともできます。

選択できる選択肢はこのようになっています。

「Image」では名前の通り画像をアップロードして分析してもらうことができます。

「no context」ではコンテキストに基づかない回答を得ることができます。私はほぼ使いません。

「chat」では通常通り、現在開いているファイル、またはメンションしたファイルなどに基づいて回答が行われます。

「with codebase」ではディレクトリ内の全てのファイルが読み取られ、そのデータを元に回答が行われます。

ドキュメント

また、公式ドキュメントも豊富にあります。困ったらここを見ればあらかた解決することができます。

言語は英語です。

Cursor - Built Software Faster

結局…?

CursorはAIとの連携に優れたエディターです。もちろん、別途Github Copilot++を契約している方やGPT-4を契約してVSCodeで拡張機能で紐付けている方は特段乗り換える必要性もないかもしれませんが、より高いモデルをコスパよく使うことできるのがCursorの良いポイントです。

GPT-4、GPT-4oなどもProユーザーから使用することができます。

まだAIをプログラミングで本格活用していない方は簡単に始められるという点でCursorで初めてみてはいかがでしょうか。一度使ってしまうともう戻れませんが…

では最後に値段について解説します。

値段

Cursor 年額料金(https://www.cursor.com/pricing

上は公式サイトから引用した6月20日時点での年額料金です。ほとんどの方はProで支障ないと思います。米ドルですので日々変動はしていますが、日本円でおよそ3万円程度です。

企業などで使用し、よりAIに関するプライバシーを強化したいならBusinessプランが必要になってくると思います。

最後に

というわけでCursorについて解説をしてきました。AIは開発の手助けをしてくれるいいツールです。効果的に活用していきましょう。

気になった方は公式ホームページからチェックしてみてください。

Cursor
The AI Code Editor

それではまた次の記事でお会いしましょう。

コメント

タイトルとURLをコピーしました