はじめに

この記事は、https://qiita.com/advent-calendar/2024/gsacademyの企画に参加して書いております。他の記事もぜひ読んでみてください！

著者について

元々は営業やHR、ファイナンス畑出身で、起業時代に自社プロダクトとして採用プラットフォームを作成はしたが、エンジニアとしての経験はほぼなし。

まず、 AI editor 「Cursor」とは？

一言で言うと、VSCodeをベースとして開発された「AIを搭載したコードエディター」です。
コードを書き込むにあたって使う「コードエディター」にAIを搭載してアプリケーション化したものということです。

特徴について

実は、2022年時にChatGPTが発表されてからAI×プログラミングの領域はたくさんのアプリケーションが出てきていました。VSCodeにも拡張機能でAIを連携させるアプリケーションはいくつかあったそうです。
その中で、拡張機能としてではなく単独のアプリケーションとして出すことでより高度なAI連携を可能にしたのが「Cursor（カーソル）」と言われています。（公式ドキュメントより）
Microsoftの開発している「VSCodeをフォーク」しておりUXは大きく変わらないため、ユーザーはそのまま移行できるのも魅力の一つです。

あと、OpenAIのファンドやGithubの創業者などから累計1,100万ドルの資金調達もしているそうで、成長スタートアップとしても注目されています。

まずは、Cursorのセットアップを

インストール

まずは、インストールを以下のサイトから実施。

初期設定（※文章が長いので、既に使っている人は飛ばしてください。）

ダウンロードされたアプリケーションを実行すると、初期設定が始まります。項目としては、４つ（2024/12当時）以下を参考にしてください。

「Continue」ボタンを押すと、次に「VS Code Extensions」が出てきます。これは「VS Codeで使っていた拡張機能を引き継ぎますか？」という質問になりますので、基本的には「Use Extensions」ボタンを押せば大丈夫です。

次の画面では、データをCursorに学習させるかについて聞かれます。基本的に仕事などでも使っている人は、「Privacy Mode」にしとくと安心かと思います。

これで初期設定完了です。最後の画面では、アカウントログインの画面が出るので、既にサイトでCursorのアカウントを作成している人は「Log in」、まだの人は「Sign Up」から作成してください。EmailかGoogleアカウント、Githubなどで認証して作成可能です！

それでは、Cursorの基本機能を使ってみよう

ログインしてアプリケーションを開くと、上のような画面が出てくると思います。※ 私は使ってしまっているので消えてしまいましたが、左上にチュートリアルやWelcomeの画面が開かれている場合もあります。

エディター内でAIとチャットして指示を出せる機能

右側に表示されているウィンドウで「CHAT」を選ぶとエディター上でAIとチャットすることができます。左下を押すと対応するAIも選べます。※画像は「gpt-4o-mini」

このチャット内で、さまざまな指示が出せます。
例えば、「index.htmlのファイルを作成してほしい。」、「index.htmlにおしゃれなデザインを追加して欲しい」などができます。

「index.htmlのファイルを作成してほしい。」と入れた場合

すぐに、サンプルコードの提案が来るので赤丸の「Accept」を押し、ファイル構造を選ぶと、以下のようにファイルと中身が作成がされます。緑の部分が変更された内容でまた「Accept」を押すと変更が入力され、ファイルを保存したら作成完了です。
これ以外でもAIから提案された内容については、基本的にはお願いした内容が良ければ「Accept」、ダメなら「Reject」で覚えるといいと思います。

「index.htmlにおしゃれなデザインを追加して欲しい」の場合

同様にチャットで送信すると、以下のように提案が出て、「Accept」していくと変更ができます。ちなみにGitなどを既に使っていたらわかるかもですが、緑が修正で追加される内容、赤が修正で削除される内容です。部分ごとに追加と削除を選べるので確認してみてください。

チャットにおいてファイル指定やDocを指定して質問ができる。

Cursorのチャットで質問する中で、ChatGPTなどをアプリケーションとして使うよりも便利な部分があって、＠を使うと「ファイルやコード」を指定して指示出しができます。
例えば、以下の場合は「index.html」のファイルを指定して指示を出せる状態になってます。
なので、index.htmlを指定した状態で「コードを綺麗にリファクタリングして」などということもできます。
複数ファイルも選べて、@codebaseにすると全体を選んで指示出しができます。

予測変換やコード補完ができるCo-pilot機能

上記のように同じclassを複数で編集したいという時ありませんか。
さすがにもうそこは反復練習しなくてもいいなという部分をCo-pilot機能が手伝ってくれます。
一つ目のclassを入れたときに、グレーの提案表示がされて、「tabキー」を押せば自動挿入されます。ショートカットの方法もあるのですがより早いです。
あとは、予測変換でコードをゴリゴリ提案してくれるので、「こういう時にはこうやって書くのもあるんだなあ」といった学びにもなります。
すごい便利ですね。

実際に便利だった、便利に思っているユースケースの紹介

おすすめ：☆　エラーチェック　

ファイル作成の時に、「ファイル名に空白を入れちゃった。」というような失敗よくあると思います。
このようなエラーチェックの際は、チャットで複数ファイルを指定し見比べてチェックしてもらうことで直ぐに見つかったります！

他のエラーの場合でも、俯瞰した立場からAIが意見をくれることで、エラーを解決する糸口につながることも多いです。
特に初めのうちは、エラーパターンを知らないからこそ、使うことで知識を増やしていけると思います。

おすすめ：☆☆　コマンドのトレーニング

個人的に良かったのがコマンドの練習です。
以下のような画面、エンジニアになるまで避けてきました、、、

でも、環境設定だったり、Gitだったり触らないといけないですよね

<!-- Git コマンドの例-->
git init - 新しいGitリポジトリを初期化
git clone [URL] - リポジトリをクローン
git add [ファイル] - 変更をステージング
git commit -m "[メッセージ]" - 変更をコミット
git status - 現在の状態を確認
git log - コミット履歴を表示
git branch - ブランチ一覧
git branch [ブランチ名] - 新しいブランチ作成
git checkout [ブランチ名] - ブランチを切り替え
git merge [ブランチ名] - ブランチをマージ
git remote add origin [URL] - リモートリポジトリを追加
git push - 変更をリモートにプッシュ
git pull - リモートから最新の変更を取得
git fetch - リモートの変更を取得（マージはしない）
git diff - 変更点を表示
git reset - 変更を元に戻す
git stash - 作業中の変更を一時退避
git tag - タグを作成

この苦手意識をなくしてくれるのにも役立ちました。

おそらくVSCodeではできない認識なんですが、Cursorだとターミナル部分のCommand＋a（全文選択）ができます。

これが大きくて、全文をコピペすることで、流れも含めて今どんな状態なのか（エラーなのか）をAIに詳しく教えてもらえます。

例えば、以下のような感じです。

これによって、「何のエラーなのか」、「そのコマンドで何が起きたのか」などを背景を理解しながらターミナルと戯れることができました。

git コマンドなどでやらかしてしまった時、焦ってしまうと思いますが、そんな時こそ、落ち着いて状況を見て選択肢をくれるAIくんと一緒に頑張りましょう。

まとめ

今回は主だったCursorの紹介とユースケースだけでも長くなってしまったのでここでまとめておきます。

Cursorを使うことで、エンジニアとしての学ぶスピードやレベルアップを早めることができているのではと思っています。

将来を見据えて、教わったこと無しには自走できるレベルでまだまだないので、今後自走していかないといけないタイミングが来る時には補助輪としての役割を期待しています！

他にもAIエージェントが国内でもかなり盛り上がってきているので、今後もリサーチ続けていきたいと思います。

参考

アイキャッチ画像の引用元：

※上記わたしも購入した本。アフィリエイトリンクになりますが興味ある方はぜひ。以下はTwitterでのAIエージェントについて参考の投稿。