Cursor AIチャットでコードを対話しながら設計・改善する方法
CursorのAIチャット機能を活用し、コード設計・デバッグ・リファクタリングを対話形式で進める具体的な手順と活用パターンを解説します。
Cursor AIチャットでコードを対話しながら設計・改善する方法
コードを書いていると、「この設計で本当に良いのか？」「このエラーの原因がどうしても特定できない」「もっとスッキリしたコードに直したいけど、何から手をつければいいかわからない」という壁に頻繁にぶつかります。
Google検索でドキュメントを調べ、Stack Overflowの回答を読み、ChatGPTに貼り付けてコンテキストを説明して……この繰り返しに、地味に大量の時間を費やしていませんか？
Cursorに搭載されたAIチャット機能は、まさにこの問題を解決するために設計されています。エディタを離れることなく、今まさに書いているコードをAIに見せながら、対話形式で設計の議論・デバッグ・リファクタリングを進められます。
この記事では、CursorのAIチャット機能の基本から、実務で使える具体的な活用パターンまで、順を追って丁寧に解説します。Cursorをインストール済みだけどチャット機能をあまり使いこなせていない方にも、初めてCursorを触る方にも役立つ内容にしています。
CursorのAIチャット機能とは
Cursorは、VS Codeをベースに構築されたAIファーストなコードエディタです。Cursor公式サイトから無料プランでも利用を開始でき、AI補完やインラインエディット、そして本記事で扱うAIチャット機能が利用できます。
CursorのAIチャットには、大きく分けて以下の2つのモードがあります。
- Chatパネル（
Ctrl+L/Cmd+L）: サイドパネルに表示されるチャット欄。ファイルやコードを参照しながら継続的な会話ができます。 - Composer（
Ctrl+I/Cmd+I）: より高度な「エージェント的」なモード。複数ファイルにまたがる変更指示や、ファイルの新規作成を含む大きなタスクをこなせます。
本記事では主にChatパネルにフォーカスし、コードを見せながら対話的に設計・デバッグ・リファクタリングを行う方法を解説します。Composerについては後半でも触れます。
なぜ「チャット」が強力なのか
一般的なAIサービス（ChatGPTなど）との最大の違いは、エディタで開いているファイルやプロジェクト全体のコンテキストをAIに直接渡せる点です。
@ファイル名でファイルを参照させる@コードベースでプロジェクト全体をインデックスして検索させる- 選択したコードをそのままチャットに送れる
- エラーメッセージをターミナルからワンクリックで送れる
これらの機能により、毎回「こういうコードがあって〜」と背景説明をする手間が省け、本質的な質問・議論に集中できます。
基本操作：チャットを開いて最初の質問をする
まずは基本操作を確認しましょう。
チャットパネルを開く
Cursorを開き、Ctrl+L（MacはCmd+L）を押すと、右側にチャットパネルが表示されます。または、サイドバーのチャットアイコンをクリックしても開けます。
コードを選択して質問する
最も基本的な使い方は、コードを選択してからチャットを開く方法です。
- 質問したいコードをエディタで選択する
Ctrl+L（Cmd+L）を押す- 選択したコードがチャットに引用された状態で入力欄が開く
- 質問を入力してEnterを押す
例えば、以下のようなTypeScriptコードを選択して「この関数の処理を説明してください」と入力するだけで、その関数の動作をわかりやすく解説してくれます。
// 選択するコードの例
async function fetchUserWithPosts(userId: string) {
const user = await db.user.findUnique({
where: { id: userId },
include: {
posts: {
where: { published: true },
orderBy: { createdAt: 'desc' },
take: 10,
},
},
});
if (!user) throw new Error(`User not found: ${userId}`);
return user;
}
@記法でコンテキストを追加する
チャット欄で@を入力すると、参照できるコンテキストの一覧が表示されます。
@ファイル名: 特定のファイルをチャットに添付します。「@types/user.ts の型定義に合わせてこのコードを修正して」といった使い方ができます。@フォルダ名: フォルダ全体を参照させます。@コードベース（@Codebase）: プロジェクト全体をセマンティック検索して関連箇所を見つけてくれます。「@Codebase このプロジェクトで認証処理はどこに実装されていますか？」という質問が可能になります。@Web: ウェブ検索を行い、最新情報を取得した上で回答してくれます。@Docs: 特定のドキュメント（事前にインデックス登録したもの）を参照します。
活用パターン1：設計の壁打ち相手として使う
コードを書く前の「設計フェーズ」こそ、AIチャットが最も価値を発揮する場面の一つです。
実装方針を決める前に相談する
例えば、Next.jsアプリで「ユーザーの認証状態をグローバルに管理したい」という要件があるとします。 Redux、Zustand、React Context、Jotai……選択肢は様々あり、どれが適切かは要件次第です。
こういったときに、チャットに現状のプロジェクト構成を@で添付しながら聞くのが効果的です。
@package.json @app/layout.tsx
このNext.js 14のプロジェクトでユーザーの認証状態をグローバル管理したいです。
現在の構成を見た上で、以下の観点でどのアプローチが最適か教えてください：
- バンドルサイズへの影響
- Server Componentsとの相性
- 将来的な拡張のしやすさ
Cursorはpackage.jsonからプロジェクトの依存関係を確認し、layout.tsxの構成を把握した上で、あなたのプロジェクトの文脈に合った具体的な提案をしてくれます。
設計の懸念点を深掘りする
AIの提案に対して、そのまま受け入れず「この方針のデメリットは？」「〇〇な場合にどう対処する？」と続けて問い返すことで、設計の落とし穴を事前に洗い出せます。
チャットは会話の文脈を保持するので、前の発言を踏まえた回答が得られます。設計議論をドキュメントに書き起こす前に、AIを相手にラフなブレインストーミングを行うイメージで使うと効果的です。
活用パターン2：デバッグを爆速化する
デバッグは、AIチャットとの相性が抜群に良いタスクです。エラーメッセージと関連コードという「情報の揃い具合」がAIへの質問に最適だからです。
ターミナルのエラーをそのまま送る
Cursorのターミナルでエラーが発生した場合、エラーメッセージをコピーしてCtrl+Lでチャットに貼り付けるだけで質問できます。
さらに、エラーが発生しているファイルを開いた状態で、以下のように問い合わせます。
@src/lib/auth.ts
以下のエラーが発生しています。原因と修正方法を教えてください：
TypeError: Cannot read properties of undefined (reading 'id')
at getSession (src/lib/auth.ts:42:28)
at async GET (src/app/api/user/route.ts:8:20)
Cursorはauth.tsの42行目付近を重点的に確認し、なぜundefinedになりうるのかを分析して修正案を提示してくれます。
「修正してAIに適用してもらう」ワンクリック操作
AIチャットの回答でコード修正例が提示されると、コードブロックの右上に「Apply」ボタンが表示されます。このボタンを押すと、差分が自動的にエディタに適用されます。
適用後、Ctrl+Z（Cmd+Z）で取り消すこともできるので、気軽に試して確認する運用が可能です。
「なぜこのエラーが起きるのか」を深く理解する
デバッグのゴールは「エラーを消すこと」だけでなく、「なぜそのエラーが起きたかを理解すること」でもあります。
修正案をもらった後に「この修正でなぜエラーが解消されるのかを初心者にもわかるように説明してください」と続けて聞くことで、同じミスを繰り返さない知識が身につきます。これはドキュメントを読むよりも、自分のコードをベースにした説明で理解が深まりやすい点が大きなメリットです。
活用パターン3：リファクタリングを対話形式で進める
リファクタリングは「どこを、どのレベルまで変えるか」の判断が難しいタスクです。AIチャットを使えば、段階的に方針を決めながら安全に進められます。
まず「改善点を洗い出す」だけ頼む
いきなり「リファクタリングして」と頼むのではなく、まず課題を整理する会話から始めましょう。
@src/components/UserDashboard.tsx
このコンポーネントについて、以下の観点でコードレビューをしてください。
改善が必要な箇所を優先度高・中・低に分けてリストアップしてください（この時点では修正は不要です）：
- 可読性
- パフォーマンス（不要な再レンダリングなど）
- 型安全性
- テスタビリティ
修正指示を出す前に「何が問題か」を先にリストアップさせることで、優先順位をつけて計画的にリファクタリングを進められます。
優先度の高い箇所から順番に修正する
課題リストを受け取ったら、優先度の高い項目から1つずつ対処していきます。
先ほどの改善リストの中で「優先度高」に挙げていた
「useEffectの依存配列の問題」について修正してください。
修正後のコードと、なぜその修正が必要かの説明も一緒にお願いします。
一度に全部修正してもらうと差分が大きすぎてレビューが困難になります。1ステップずつ修正→確認→次へ、という流れで進めると、各変更の意図を理解しながら安全にリファクタリングできます。
ビフォー・アフターで比較する
大きめのリファクタリングを行った後は、以下のように質問して変更の意味を整理するのも有効です。
先ほどのリファクタリングで変わった点を、
変更前と変更後を対比しながら箇条書きで説明してください。
チームへの説明資料に使いたいため、わかりやすい言葉でお願いします。
この説明をそのままPRの説明文やコミットメッセージに流用することもできます。
活用パターン4：ドキュメント・テストコードを自動生成する
コードを書くことに比べて後回しにされがちなのが、コメント・JSDoc・テストコードの整備です。AIチャットはこうした「書くのが面倒だけど重要なもの」を生成するのも得意です。
JSDocコメントを自動生成する
関数を選択して、以下のように頼むだけです。
選択した関数にJSDocコメントを追加してください。
- @param と @returns の説明を日本語で書いてください
- 例外が発生するケースがあれば @throws も追加してください
- @example も1つ加えてください
生成された例：
/**
* 指定されたユーザーIDに紐づくユーザー情報と最新10件の公開済み投稿を取得します。
*
* @param userId - 取得対象のユーザーの一意なID
* @returns ユーザー情報と関連する公開済み投稿の配列を含むオブジェクト
* @throws {Error} 指定されたIDのユーザーが存在しない場合
*
* @example
* const userWithPosts = await fetchUserWithPosts('clx123abc');
* console.log(userWithPosts.posts.length); // 最大10
*/
async function fetchUserWithPosts(userId: string) {
// ...
}
Vitestのテストコードを生成する
@src/lib/auth.ts
このファイルの `validatePassword` 関数に対するVitest用のユニットテストを生成してください。
以下のケースを網羅してください：
- 正常系（有効なパスワード）
- 文字数不足
- 大文字なし
- 数字なし
- 特殊文字なし
生成されたテストのたたき台をそのまま使える場合も多く、修正が必要な場合でも「このテストケースを追加して」「このモックの書き方を変えて」と会話で調整できます。
Composerモードで複数ファイルをまとめて変更する
Ctrl+I（Cmd+I）で開くComposerは、Chatパネルより高度なエージェントモードです。複数ファイルにまたがる変更や、新規ファイルの作成を含むタスクに向いています。
具体的な使用例
以下のような指示がComposerに向いています：
以下の機能を実装してください：
1. src/types/notification.ts に Notification 型を新規作成する
2. src/lib/notification.ts に通知送信ロジックを実装する
3. src/app/api/notify/route.ts に通知送信用のAPIルートを新規作成する
4. 既存の src/lib/user.ts から新しい通知関数を呼び出す処理を追加する
通知は現在のプロジェクトの@src/lib/mailer.ts のメール送信関数を使ってください。
Composerはこの指示を受けて、複数のファイルを横断した変更計画を立て、1ファイルずつ確認しながら実装を進めます。各ファイルへの変更は個別に「Accept（承認）」「Reject（却下）」できるため、安心して使えます。
ChatとComposerの使い分け
- Chat: 質問・相談・特定コードのデバッグ・単一箇所のリファクタリングなど、対話を重視する場面
- Composer: 新機能の実装・複数ファイルにまたがるリファクタリング・ファイルの新規作成を伴う作業など、大きなタスクの実行
AIチャットをより効果的に使うためのコツ
コンテキストは絞って渡す
「プロジェクト全体を見て」と丸投げするより、関連するファイル2〜3個を@ファイル名で指定した方が、精度の高い回答が返ってきます。AIが処理できるコンテキスト量には上限があり、情報が多すぎると重要な部分が薄まります。
「何を知りたいか」を明確にする
曖昧な質問より、具体的な質問の方が有益な回答が得られます。
- ❌ 「このコードを改善して」
- ✅ 「このコードのパフォーマンスを改善したい。特にAPIコールの回数を減らす方法を教えて」
一度の質問で詰め込みすぎない
複数の問題を一度に質問すると、どれも中途半端な回答になりがちです。「まずAについて解決→次にBについて質問」のように、1ターンで1つの問題にフォーカスする方が効率的です。
AIの回答を盲信しない
CursorのAI（Claude 3.5 SonnetやGPT-4oなどのモデルを使用）は非常に高性能ですが、コードを生成・修正する際は必ずレビューしてください。特に、外部APIの呼び出し方・認証ロジック・セキュリティに関わるコードは、公式ドキュメントと照らし合わせる習慣をつけましょう。
Cursorが使用しているAIモデルの設定は、Cursor設定ページのModel Settingsから確認・変更できます。
まとめ：まず「質問する習慣」を作ることから
CursorのAIチャット機能を最大限に活かすには、「困ったらまずAIに聞いてみる」というワークフローの習慣化が最初の一歩です。
この記事で紹介した活用パターンをおさらいします：
- 設計フェーズ:
@ファイルでコンテキストを渡しながら、アーキテクチャの選択肢を壁打ち - デバッグ: エラーメッセージ＋関連ファイルをチャットに渡してApplyで即修正
- リファクタリング: 「改善点のリストアップ」→「優先度の高い箇所から順番に修正」の2ステップ
- ドキュメント・テスト: 選択コード＋指示でJSDoc・テストコードを自動生成
- 複数ファイル変更: Composerモードでまとめて実装
最初は「コード説明して」「このエラーどういう意味？」という簡単な質問から始めてみてください。使い続けるうちに、どんな質問をすれば良い回答が返ってくるか、感覚がつかめてきます。
Cursorをまだインストールしていない方は、Cursor公式サイトから無料プランで試せます。既存のVS Code設定（拡張機能・キーバインドなど）をそのままインポートできるので、乗り換えのハードルも低くなっています。
ぜひ今日から、エディタ上でAIとの対話を始めてみてください。コーディングの体験が大きく変わるはずです。
参考資料
- Cursor 公式ドキュメント - チャット・Composerを含む全機能の公式リファレンス
- Cursor 公式サイト - ダウンロード・プラン・モデル設定
- Cursor Changelog（公式リリースノート） - 最新機能のアップデート情報
- Anthropic Claude モデルドキュメント - Cursorで利用可能なClaudeモデルの詳細
- Vitest 公式ドキュメント - テストコード生成時の参考に