虎の穴ラボ技術ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

MENU

AIファーストのコードエディタ Cursor 使ってみた #虎の穴ラボ Advent Calendar 2023

技術エントリ AI Cursor VSCode Advent Calendar 2023

こんにちは、虎の穴ラボのMです。
最近はもうAIがないコーディングが考えられないほどAIに助けられながらプログラミングをするようになりました。
あまり知識がない言語をコーディングしている時は特にお世話になっています。

今回はAIを最大限活用したコードエディタ Cursor の紹介です。

Cursor ── AIファーストの次世代コードエディタ

cursor.sh

AI（ChatGPT）内蔵のコードエディタ。
Visual Studio Code（以下「VSCode」とする） をフォークして作成されているため、拡張機能を使いまわせたり新たに使い方を覚える必要が無い点なども魅力です。

今回はCursorを実際に触ってみたいと思います。
まずはインストールを行います。

目次

インストール手順

公式サイト の Download for Mac からダウンロードし、install Cursor を起動します。
その他にも、 Other を選択する事でWindowsとLinuxのOSが選択できます。

初期設定

shortcuts

有名エディタと同じショートカットを扱うことができるため、どれにするかの選択肢。
VSCodeをフォークして作成されているため、デフォルトはVSCode。

選択肢

  • VSCode
  • Jetbrains
  • Sublime
  • Atom

Vim/Emacs

VimとEmacsの拡張機能を最初から入れるかどうかの選択肢。
VimやEmacsを普段使っている方は選択すると良いと思います。デフォルトはNone（インストールしない）。

選択肢

  • None
  • Vim
  • Emacs

Codebase-wide

直訳すると、埋め込まれたコードを元にコード全体の質問に回答するかどうかなので
ONにしておいて問題ないと思います。

選択肢

  • Enabled
  • Disabled

Language

言語選択
選択肢は特にないですが、日本語が選べるのでここでは日本語とします。

Command Line

コマンドラインからcursorを起動するためのコマンドなどをインストールするかどうか選べます。
後からインストールも可能なので一旦はそのままにします。

VSCode の設定をインポートする

VSCodeから設定をそのままインポートすることができるので、普段VSCodeを使っている場合はUse Extensionsを選択しておくと便利です。
エディタのフォントサイズやスタイルなどそのまま引き継がれるため、違和感無く移行できます。

インストール完了

サインインし、エディタ画面が表示されればインストール完了です。

画面右側にデフォルトでgpt-4へのチャットができる点がAIファーストのエディタである事を物語っている感じがしますね。

次の章では、実際にCursorを使ってみます。

Cursor 独自機能

  • AI Code Edit : コードエリアでAIを呼び出す
  • AI Chat : AIに対話型で質問する
  • Docs : ドキュメントを理解しライブラリを説明する

AI Code Edit ── コードエリアでAIを呼び出す

ショートカット : Command + K

コードブロック上の好きな位置でAIを呼び出し、コードの編集や追加をおこなってくれます。
エンジンは gpt-3.5 と gpt-4 から選べます。登録しているプランと相談して選びましょう。今回は gpt-3.5を使います。

試しに、「FizzBuzzを冗長的に書いて」と命令してみます。

コードが生成されました。 Command + Y か、 Command + Enter で承認します。

次は編集を試してみます。
生成されたコードをドラッグして選択し、 Command + K で 「このコードをシンプルに編集して」 と命令してみます。

4行に簡略化されたFizzBuzzが提案されました。差分を確認し、問題なければ同じく Command + Y か、 Command + Enter で承認します。
否認する場合は Command + N で再度生成したり、質問文章を変更してみましょう。
今回はこのまま承認します。

提案されたコードが採用され、無事置換されました。

勝手に置換するのではなく、提案という形で差分を出して確認してから変更できるのは非常に便利だと思います。
提案スピードも0.5秒ほどで、全く問題ありませんでした。
特に色々拡張機能を入れたりしなくても、デフォルトでここまでの機能を使えるのは非常に魅力的です。

AI Chat ── AIに対話型で質問する

ショートカット : Ctrl + Shift + L

Copilot Chat のような形で、対話式に質問できる機能も備えています。
試しに、先ほど作成したコードについて質問してみます。

コードを理解し、提案も行ってくれました。 ここで提案してもらったコードを実際に反映させる事もできます。 ▷ マークをクリックする事で、変更箇所を提案してくれるので承認すれば変更されます。

この機能はコードの最終チェック時などに活用すると便利だと感じました。
例えば、誤字をしているdockerfileに対して修正点を聞いてみると誤字を見つけ修正を提案してくれます。

簡単なコードレビューのような変わりとして使えると思います。

  • ubuntsu -> ubuntu
  • Hollo World -> Hello World

と誤字を修正提案してくれます。

Docs ── ドキュメントを理解しライブラリを説明する

AIにドキュメントを理解させ、詳細な質問ができるようになります。
有名なサードパーティのライブラリは最初からドキュメントが作られており、例えばVue関係のドキュメントだけでもかなりの数が存在します。

面白い機能として、存在しないライブラリを追加させて学ばせることができます。
Perlのフレームワーク Raisin を学ばせてみたいと思います。

現在は Raisin を認識していない状態です。

Add New Doc を選択し、ドキュメントページのURLを入力します。

metacpan.org

Confirm をクリックすると学習が始まります。大体30秒程度で終了しました。
改めて学習させた @Raisin をつけ、質問してみます。

学習した内容に基づいて返答してくれました。
しかもただ内容を返却するだけでは無く、要約して日本語で説明もしてくれるので非常に優秀です。

最後に

ここで紹介した機能以外にも、Terminalで出たエラーを元に直してくれる機能などAIを非常にうまく活用したコードエディタだと感じました。

ただ、コードを入力補完する機能などは無いため入力補完が欲しい場合Github Copilotと併用が必要になります。どこまでAIに任せるかが大事になりそうです。

複雑なセットアップなども不要で、インストールすればすぐにAIを活用できるため無料プランから是非試してみてはいかがでしょうか。

採用情報

虎の穴ラボでは一緒に働く仲間を募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧ください。
toranoana-lab.co.jp