【Cursor.ai】ChatGPT搭載のAIエディタでコーディングを効率化！

こんにちは、お久しぶりです！
なんと、前回の記事から気づけば1年…。
社会人1年目だった自分も、あっという間に2年目に突入しました。

この1年では特にAIに触れ合うことが多く、ChatGPTをはじめとするさまざまなAIツールを日常的に使うようになりました。
その中でもコーダーの自分にとって特に便利と感じたのが今回紹介するAIコードエディタのCursorです。
今回は、実際に使ってみた感想も交えながら、ざっくり紹介していきます。
気になっていた方も、初めて聞いた方も、ぜひ参考にしてみてください。

Cursorとは？

Cursor（カーソル）とは、Visual Studio Code（VScode）をベースに開発された
業務を自動化できるAIツールです。

Visual Studio Code（VScode）をベースに開発されたものなので、
見た目や操作感もほぼ同じなので移行もスムーズに行えます！

以前、VSCodeの使い方の記事も投稿していますので詳しく知りたい方は下記の記事を合わせてご確認ください！

『大人気コードエディタ 』VSCode (Visual Studio Code) の使い方解説！【基本編】

Cursorの特徴について

• chatGPT（GPT-4）を活用してコードの自動生成・編集
• code内でチャットでの質疑応答
• 自動デバッグ・エラー修正
• 日本語で利用可能（様々な言語対応）

といった特徴があります。
それぞれの特徴について詳しく解説いたします。

chatGPT（GPT-4）を活用してコードの自動生成・編集

CursorにはchatGPT（GPT-4）が搭載されており、どんな言語や曖昧な指示でも意図を汲み取ってコードを生成してくれます。
特に繰り返し処理や複製が必要な場面では、たった一文伝えるだけで自動的に反映してくれるため、作業の効率が大幅に向上します。

code内でのチャットでの質疑応答

上記のcodeに関する生成に以外にも説明や文章の作成なども可能になっております。
code全体に対して、「こちらのコードはどんな意味？」などとチャットすると、サイトに表示される内容から細かい処理まで丁寧に説明してくれます！
またCursorの機能に関しても質問可能なので作業でわからないことがあれば、直接Cursorに聞くことで作業のやり方も回答してくれます。

自動デバック・エラー修正

Cursorには自動デバック・エラー修正というのがあります。
長時間コードを書いていると、どうしてもミスは避けられず、バグが発生した際には原因の特定に時間がかかることもしばしばです。
しかし、Cursorならミスをその場で検知してくれるため、余計な修正作業を未然に防ぐことができます！

日本語で利用可能（様々な言語対応）

Cursorの初期設定は基本的には英語ですが、日本語にも対応しているので日本人でも気軽に利用できるものとなっています。

料金や仕様について

CursorはHobby、Pro、Businessの3つの料金プランがあります。
それぞれの機能の違いは下記のとおりです。

	Hobby	Pro	Business
料金	無料	月額20ドル 月額16ドル（年額払い）	月額40ドル 月額32ドル（年額払い）
slow GPT-4、GPT-4o	50回／月	無制限	無制限
fast GPT-4、GPT-4o	×	500回／月	500回／月
o1-mini	×	10回／日	10回／日
AIコーディング機能	〇	〇	〇
データのプライバシー確保	〇	〇	〇
コミュニティサポート	〇	〇	〇
プライバシーモードの強制	×	×	〇
OpenAIへのデータ送信の制御	×	×	〇

上記の表で分かる通り、基本的には無料プランでも基本的な機能は使えるので気軽に始められるものになっていると思います！
Cursorを本格的に業務に導入したい方や、より多くの機能を活用したい方はPro・Businessプランに加入するのがおすすめです。

Cursorのインストール方法

①Cursorの公式サイトにアクセスし、［Download for Windows］をクリック
（※Mac の方は [Download for Mac]をクリック）

②ダウンロード後インストールすると、下記のような設定画面が出てくると思います。
基本的にはデフォルトのままでOKです！
日本語にする際は、Languageの言語を日本語に設定することで変更できます！

③利用の用途を選びます。（基本的にはデフォルトの左で大丈夫です！）
内容としては、左側が個人で使う人やCursorを気軽に使う人など
右側が重要なデータを扱うものや会社などで使うものを扱ったりなど

④アカウントを作成する（Sign UP）もしくはログイン（Log In）を行う。
（アカウントはメールアドレスやGoogleアカウントなどで登録できます）

以上で始めるまでの作業は終了です！

Cursorのよく使う機能

• Ctrl + K
• Ctrl + L
• ＠Symbols
• Auto-Debug

自分がよく使う機能として上記のものがあります。
どれも操作として、とても簡単なのでぜひ使えるようになりましょう！

テスト html を作ってみたので、そちらにそれぞれの機能を試してみます！

Ctrl + K （Command K）

Ctrl + Kの機能としては、指定したcode（場所）の編集・自動生成です。
やり方としては、下記のように指定したところで Ctrl + K を押すとチャット欄が出てくるのでそちらに書きたいcode・編集してほしい内容を記入するだけです！

今回はわかりやすいよう「川柳を書いて」と言ってみました。
そして Enter を押すと…

無事書いてくれましたね！
しかもStyle反映しやすいようにしているのかclassなども書かれています！すごいですね。。。
まだこの状態では表示されているだけで、反映はされてはいないので
Ctrl + Shift + Y (Ctrl + Y)を押しましょう！（ Ctrl + N を押したら変更されません。）
操作はたったのこれだけ！

Ctrl + L （Command L）

Ctrl + L の機能は、指定したファイル、指定したcodeにAIチャットを使い文章を書いたり複数のcode編集などができるものです！

先程の川柳を書いた html を選択した状態で Ctrl + L を押すと右側にチャットが表示されます。
今回は「書いてある川柳はどういう意味の川柳？」と聞いてみました！

この状態で Enter を押すと。。。

回答が来ましたね！
codeだけではなく、文章などもしっかり書いてくれるのは便利ですね！

＠Symbols

@Symbolsの機能は、AIチャット（Ctrl + L）内で「＠」を入力すると、様々な方法で、効率的に AI に伝えることができるものです。
ファイルやコード指定、今までのチャット履歴や外部ファイルなどを指定して質疑応答ができるので細かい作業もできる機能です！

Auto-Debug

Auto-Debugは、PHPやJavaScriptなどの処理系コードでエラーが発生した際に、その原因を自動で検出してくれる機能です。
エラーの内容を詳しく教えてくれる上に、どのように修正すればいいかなどの解決策や提案も出してくれます！

実際にcodeを書いてデバックを実行すると、下記の様にターミナルにエラー文が表示されます。
そこにCursorを当てると右側に 「Debug with AI」というボタンが出ますのでそちらを押してください！

そちらのボタンを押すと…

右側にエラーの原因と修正案を出していただけます！
これをうまく活用できたら、大幅に修正時間なども短縮できます！！

引用：https://weel.co.jp/media/innovator/cursor/#index_id13

実際にCursorで1から制作してみた

今回は無料バージョンの「Hobby」で html , css , js を使ってコード生成をしてみます！
今回依頼する内容としては、

とお願いしようと思います！
「おしゃれに」と少し曖昧な指示ですがこれで Enter 押すと…

こんな感じで仕上げてくれました！！
実際に触ってみると機能もちゃんとしていて、見た目もおしゃれでほんとにびっくりですね（笑）
出来上がったものはこちらから！

codeも１から作ってくれたけど、codeもすごくわかりやすいように作ってくれてます！

こんなクオリティーの高いものを作ってくれるのは流石ですね！

まとめ

今回は、AIコードエディタ「Cursor」について書かせていただきました！
実際に使ってみて、コードを書く時間が大きく短縮され、毎日の業務でも欠かせない存在になっています。
操作性もVSCodeに近く、初めての方でもすぐに慣れることができるので、初心者の方にも安心しておすすめできます。
僕自身、こういったAIツールをもっと活用しながら、引き続きスキルアップにも取り組んでいきたいと考えています。
少しでも興味を持っていただけた方は、ぜひ一度試してみてください！