AIにコードを書かせる開発環境のはじめ方【AI×コーディング】

こんにちは！コーダーのゆうしです。

「AIがコードを書いてくれるエディタがあるって聞いたけど、どれを使えばいいの？」という方に向けて、今回はCursor（カーソル）というエディタを紹介します。

CursorはAIが最初から組み込まれた開発環境で、コードを書きながらその場でAIに相談・補完・生成をお願いできます。VSCodeに慣れている方なら操作感もほぼ同じなので、乗り換えのハードルはかなり低いです。

Cursorとは？VSCodeとの違いをざっくり説明
Cursorのインストール方法
基本的な使い方3つ
コーダーが特に使えると感じた場面
躓きやすいポイント
まとめ

Cursorとは？VSCodeとの違いをざっくり説明

CursorはVSCode（Visual Studio Code）をベースに作られたエディタで、AIアシスト機能が標準で組み込まれています。
普通のエディタとの一番の違いは、コードを書きながらリアルタイムにAIと会話できるという点です。「このコードを直して」「ここに〇〇を追加して」とチャットで指示するだけで、AIがファイルを直接編集してくれます。

💡 VSCodeの拡張機能「GitHub Copilot」に近いですが、CursorはAIとの会話・編集機能がより深く統合されているイメージです。

コーディングの補助はもちろんのこと、自分では作れない動きや機能などを実装してもらい、こちら側で修正・調整を行う、みたいな進め方もできます。

コーディングのスピードアップ、対応できる範囲を広げる、この2点は簡単にかなえられると思います。

Cursorのインストール方法

① 公式サイトからダウンロード

まずは公式サイト（cursor.com）にアクセスして、「Download」ボタンをクリックします。

Mac・Windows・Linux に対応しています。お使いのOSに合わせて選んでください。

② インストールして起動

ダウンロードしたファイルを開いてインストールします。起動すると、最初にVSCodeの設定・拡張機能をそのまま引き継ぐか聞かれます。

VSCodeを使っていた方は「Import from VS Code」を選ぶと、テーマや拡張機能がそのまま移行されます。

③ アカウント登録（無料でOK）

Cursorはアカウント登録が必要です。GoogleアカウントかGitHubアカウントでサインアップできます。
無料プランでも月200回までAIを使えるので、まずは無料で試してみるのがおすすめです。

基本的な使い方3つ

① Tab補完：次のコードを自動で提案してくれる

コードを書いていると、次に書くべき内容をグレーのテキストで自動提案してくれます。Tabキーを押すだけで確定できます。

HTMLのクラス名を書きかけたとき・CSSのプロパティを入力中のとき、文脈を読んでかなり的確に補完してくれます。

② Cmd+K（Win: Ctrl+K）：その場でコード生成・編集

コードを選択してCmd+Kを押すと、選択範囲に対してAIに指示を出せます。

たとえば既存のCSSを選んで「このスタイルをSCSSに書き直して」と入力すると、その場で書き換えてくれます。

③ Cmd+L（Win: Ctrl+L）：チャットで相談する

画面右にチャット欄が開き、プロジェクトのファイルを参照しながらAIと会話できます。

「このfunctions.phpに書かれている処理を日本語で説明して」「このエラーの原因はどこ？」といった使い方ができます。

コーダーが特に使えると感じた場面

クラスを先回りで追加してくれる

他のコードも読み込んでクラスを提案してくれるので、tabを押すだけでスムーズにコーディングを進められるのはかなり便利だと思いました。

バグ修正

「スマホでレイアウトが崩れる」という状況で、CSSファイルをまるごと読み込ませて「原因を特定して」と聞くと、怪しい箇所を指摘してくれます。Google検索より早く解決できることが多いです。
JSのバグの場合はエラーコードをチャット欄に貼り付けて、どこどこを直してほしいと送ればだいたい対応してくれます

うろ覚えのコード、よく覚えていないコードを補完してくれる

こういう動き、こういう配置にしたいんだけど～という指示でCursor側に作業してもらい
実際に作ってもらったものを見て、こちらで手直しするか、再度Cursor側にやってもらうか、みたいな進め方が可能です。
自分が実装できない動きに関しても、クライアントの要望を伝える→作ってもらったものを見ながらこちら側で修正して表示を整えていく、みたいな使い方もできてかなり便利です。