AIによるコーディング支援をしてくれるエディターの紹介
すごい勢いで、AIが世の中に普及しています。
知識量はすでに大部分の人に勝るでしょうから、最近はなんでもAIにやってもらう時代です。
私もコーディングについて教えてもらうことがあります。AI先生、さまさまです。
さて。世間では、コーディング支援をしてくれるAIコードエディターが流行っているそうで、「ChatGPT」に尋ねると、いくつか候補を教えてくれました。
（エディター選びの条件は、人それぞれだと思いますが）
今回は、カラーミーショップ
を独力で修正・改善しているような方に向いていそうな、AIコードエディター「Cursor」を紹介します。
AIは何をしてくれるのか
まず最初に、AIが具体的に何をしてくれるのか、という点についてです。
AIで最初に頭に浮かぶのは、ユーザーとAIが対話するチャット機能ではないでしょうか。
それ以外にも、AIが自動的に提案・処理するエージェント機能が考えられます。
コーディング支援の関連でいうと、一般的に以下のようなことを行ってくれます。
- コード補完…コーディング中にリアルタイムでコードを補完します。入力の手間が減ります。
- エラー検出と修正…コードの中のエラーや潜在的なバグを検出し、修正方法を提案することができます。
- 自動コード生成…指定したタスクに基づいて、コードの一部を自動で生成する機能。定型的なコードを書く手間を減らします。結構難しい長いコードも書いてくれます。
- コードレビュー支援…コードを検証し、品質を改善するためのフィードバックを提供します。SEO的なコーディング、速度改善、可読性アップなど、いろいろな種類の改善に対応してくれます。
- インタラクティブな学習支援…質問したら教えてくれます。なかなか勉強になりますよ。
導入が一番かんたん、Cursor
Cursorは、Visual Studio Code（VSCode）のクローン（複製）に、AIを統合したエディターです。
操作感やショートカットはVSCodeとだいたい同じです。便利なショートカットはAIに聞くといいです！
手っ取り早く試したい場合は、Cursorが一番導入しやすいです。
公式）Cursor - The AI Code Editor
公式サイトからダウンロードして、かんたんな登録や設定だけで、インストールするとすぐに使えます。
無料版でも、ちょっとした制限のもとでつかえます。
AIらしいChat機能
Cursorの機能をざっくり理解するには、公式サイトのFeatureを参照しましょう。
とはいえ、試しに使ってみるだけなので、あまり知らなくても問題ありません。
おいおい読むことにしましょう。
参考）Features | Cursor - The AI Code Editor
Cursorでよくつかうショートカットは、Edit（Ctrl+K）、Chat（Ctrl+Shift+L）。
この２つの使い方を押さえておけば、ほぼ完璧です。
Editは、AIに指示して、コード内のインラインで作業します（Chatのごく簡易なタイプ）。
Cursorのエディター上でコードを開いて、対象箇所を範囲選択してから、Edit（Ctrl+K）でチャットウィンドウが表示されます。
「不具合さがして」と入力してSubmit Edit（Enter）すると、対象箇所を調査して、不具合箇所を赤に、修正案を緑で提示してくれます（対象の行で、AcceptかRejectの選択ができます）。
下図では、うっかりミスをしているのを見つけてくれました。コードの文脈を理解して、間違いを指摘しています。
Edit（Ctrl+K）で、quick question（赤枠）を選択すると、質問に対してかんたんな回答をしてくれます。
範囲選択して、quick questionで質問すると構文解説をしてくれます。
もっと知りたい場合は、より具体的な質問をあらためて行います。
範囲選択せずにEdit（Ctrl+K）して、ヘッダーメニューらへんで「YouTubeアイコンを追加したい」とお願いすると、新しいコード（緑）を生成してくれました。
既存コードの文脈を読んだうえで、Smartyのコードも生成してくれています。
Chatは、右横にチャットウィンドウを開いて、AIと対話しながらコード生成・修正を行います。
コーディング知識などの質問で、詳しく知りたい場合はChatを使います。
もっと複雑なこともやってくれます
Chatを使って要望すると、かなり複雑で長いコードも生成してくれます。賢いので、びっくりします。
とはいえ、AIの提案どおりでは動作しない場合もあって、生成コードがどこまで信頼できるのか判断に困ることもあります。
AIに複雑なことを実行させるにしても、人間側もある程度の知識が必要になってきます。
今後の機械学習でAIの精度もあがるのでしょう、たぶん。
Privacy mode
プライバシーを気にする場合は、設定に変更箇所があります。
メニューバーの左側に設定アイコン（歯車）があります。
コードの情報をAI学習のために利用されたくない場合は、Privacy modeを「enabled」にします。
詳細は公式サイトのPrivacy Policyをご一読ください。
無料版でもそこそこ利用できます
入力欄左下のプルダウンでAIが切り替えられます。
無料で使えるAIは「cursor-small」です（そのほかは上限50回）。
Cursor公式ページにある料金プランによると、Hobbyプラン（無料）は、月間2000回の応答まで利用できます。
仕事でばりばりつかう人でなければ、無料で十分試せることでしょう。導入しやすいですね。
この制限はときどき変更が入るので、最新情報は公式にてご確認ください。
参考）Pricing | Cursor - The AI Code Editor
カラーミーショップ・ユーザー的には
カラーミーショップは、通常「デザイン編集」でコーディングする場合が多いのではないでしょうか。
Cursorの機能を使いたい場合は、いったんCursorのエディターにコピペしてから、いろいろと試します。
コードを全選択（Ctrl+A）するか、チャットウィンドウの左上隅にある「+Add context」でファイル名を選択してから、AIに質問を投げると、指定されたコードの文脈を読んで回答してくれます。
Cursorは便利な拡張機能がいろいろとありますので、おいおい開発環境を整えるとよいでしょう。
おわりに
Cursorの使い方は、EditとChatがわかれば、だいたいOKかなと思います。
細かい機能は、AIに質問すると整理して教えてくれます。
私はふだん、コードの整形やコードの最適化、エラーチェックなどに使います。
その他、勉強するという面でも有効で、コードの自動生成とコード解説なども、なかなか便利です。
ひと昔前の適当な回答に比べると、実用レベルになってきた気がします。
それでも、仕事の一部をAIにまかせる場合には、正誤を見分けるスキルが一定程度必要なようです。
執筆者
えいじ@naeco.jp この記事を書いた人
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。
ご相談・お問い合わせはこちら