Cursor × Claude Code 連携ガイド

最近の AI ネイティブな開発環境では、エディタと CLI ツールの両立が強力な効果を発揮します。Cursor エディタとClaude Code CLIはそれぞれ異なる強みを持つツールで、適切に組み合わせることで開発効率が飛躍的に向上します。このガイドでは、2つのツールの特性と連携方法を詳しく解説します。

Cursor とは何か

Cursor は VS Code をベースにした AI ネイティブなコードエディタです。単なる AI 補完ツールではなく、エディタの中核に AI 機能が統合されています。

主な特徴：

AI コード補完 — リアルタイムで次の行を予測
AI チャット — コード内の質問や説明をその場で実行
コマンド機能 — cmd+k で AI にコード変更の指示を出す
VS Code との互換性 — 拡張機能やキーバインディングがそのまま使える
Claude Sonnet 統合 — デフォルトで Claude Sonnet がパワーユーザーモデルとして搭載

Cursor の得意分野は、1つのファイル内、あるいは小〜中範囲の局所的な編集です。UI調整、バグ修正、細かいロジック調整など、フォーカスした作業に非常に向いています。

なぜ Claude Code と Cursor を組み合わせるのか

Cursor だけでも強力ですが、Claude Code CLI を組み合わせることでさらに大きなプロジェクト規模に対応できるようになります。

Claude Code の得意なこと：

プロジェクト全体のコンテキスト把握
複数ファイルにまたがる大規模な変更
テストの作成・実行・修正サイクル
Git操作や PR の作成
ファイルシステム全体の検索・分析

Cursor の得意なこと：

単一ファイルの局所編集
UI/CSS の微調整
リアルタイム補完による迅速な入力
インタラクティブなリファクタリング
短時間のペアプログラミング体験

ℹ️

両者を使い分けることで、大規模な構造変更から細かい調整まで、あらゆる開発タスクに最適なツールを選択できます。これが「実用的タッグ」の理由です。

Cursor の基本セットアップ

まず Cursor をインストールして基本設定を行いましょう。

インストール

Cursor は公式サイトからダウンロードできます：

# macOS（Homebrew の場合）
brew install cursor
 
# または公式サイトからダウンロード
# https://cursor.com

Claude モデルの設定

Cursor を初回起動すると、AI モデルの選択画面が表示されます。

Cursor の左下にある歯車アイコン（設定）をクリック
Features > Models を選択
Claude 3.5 Sonnet または Claude Opus を選択

💡

Claude Sonnet は「スピード重視」の場合に最適です。より複雑な分析が必要な場合は Opus を選択してください。

キーボードショートカットの設定

Cursor の主要なショートカット：

Cmd+K       — AI にコード変更を指示
Cmd+L       — AI チャット欄を開く
Cmd+A       — 全コード提案を表示
Cmd+Shift+E — エディタコマンドを実行

カスタマイズする場合は、設定ファイル（~/.cursor/settings.json）を編集します：

{
  "keybindings": [
    {
      "key": "cmd+k",
      "command": "inline.insertEdit"
    },
    {
      "key": "cmd+l",
      "command": "chat.openChatPanel"
    }
  ]
}

Claude Code をターミナルから使う

Cursor の統合ターミナルを活用して、Claude Code CLI をスムーズに実行します。

インストールと初期設定

Claude Code CLI をインストール：

npm install -g @anthropic-ai/claude-code
# または
brew install claude-code

認証設定：

claude-code auth
# API キーの入力プロンプトが表示されます
# Anthropic コンソール (console.anthropic.com) から取得したキーを入力

Cursor でターミナルを開く

Cursor で統合ターミナルを開く：

Ctrl+` （バッククォート）または View > Terminal

ターミナル内で Claude Code コマンドを実行：

# ファイルを作成・編集
claude-code edit src/components/Button.tsx
 
# テストを実行
claude-code run npm test
 
# ファイル構造を分析
claude-code analyze src/
 
# 複数ファイルを編集
claude-code edit src/api/users.ts src/api/auth.ts

💡

統合ターミナルをエディタの右側に配置することで、Cursor でコードを見ながら Claude Code で実行結果を確認できます。View > Appearance > Side Panel から設定できます。

実践的なワークフロー例

ワークフロー1: Cursor で局所編集 → Claude Code でテスト実行・修正

大規模なリファクタリング後、個別の関数をテストして修正するケース：

ステップ1: Claude Code で全体的なリファクタリング

claude-code edit src/utils/data-processing.ts \
  --prompt "Refactor all functions to use async/await instead of promises"

ステップ2: Cursor で個別関数を調整

Cursor のエディタでファイルを開き、Cmd+K で：

"Update the validateUser function to also check the email format"

ステップ3: Claude Code でテスト実行

ターミナルで：

claude-code run npm test -- src/utils/data-processing.test.ts
# テスト結果を確認

ステップ4: 失敗したテストを Claude Code で修正

claude-code edit src/utils/data-processing.ts \
  --prompt "Fix the validation logic to pass the email format test"

このサイクルを繰り返すことで、高品質なコードが完成します。

ワークフロー2: Claude Code で新機能スキャフォールド → Cursor で細調整

新しい機能を一から構築するケース：

ステップ1: Claude Code で基本構造を生成

claude-code create src/features/payment/PaymentProcessor.ts \
  --prompt "Create a TypeScript class for processing credit card payments with Stripe API integration. Include error handling and logging."

ステップ2: Cursor でエラーメッセージを整理

Cursor で生成されたファイルを開き、エラーメッセージの文言を調整：

// Cmd+K で：
"Make error messages more user-friendly and include error codes"

ステップ3: Cursor で型定義を精密化

// Cmd+K で：
"Add JSDoc comments to all public methods and ensure TypeScript types are precise"

ステップ4: Claude Code でテストファイルを生成

claude-code create src/features/payment/PaymentProcessor.test.ts \
  --prompt "Write comprehensive unit tests for PaymentProcessor covering success and error cases"

ワークフロー3: Claude Code でリファクタリング → Cursor でインライン確認

既存コードの大規模な改善：

ステップ1: Claude Code で分析

claude-code analyze src/components/ \
  --prompt "Identify opportunities to extract common patterns into shared hooks"

ステップ2: Claude Code でリファクタリング実行

claude-code edit src/components/ \
  --prompt "Extract repeated useEffect patterns into custom hooks and refactor all components to use them"

ステップ3: Cursor で各ファイルを確認

Cursor で各コンポーネントを開き、パフォーマンスと可読性を確認：

// Cmd+L で質問：
"Does this implementation correctly handle the cleanup phase?"

使い分けの基準

Cursor を選ぶべき場面

1ファイル内の編集 — ロジック調整、バグ修正
UI/CSS の微調整 — スタイルの細かい修正、レイアウト調整
リアルタイム補完が必要 — 開発スピード重視の局所編集
インタラクティブな編集 — チャットしながらコード内容を詰める

Claude Code を選ぶべき場面

複数ファイルの一括変更 — 大規模リファクタリング、アーキテクチャ変更
ファイル横断的な分析 — コードベース全体の理解、重複検出
テスト作成・実行 — テストの自動生成、テスト結果の分析
Git 操作・PR 作成 — コミット、ブランチ作成、PR の初期化
スキャフォールド生成 — 新機能の基本構造を素早く生成
複雑な検索と置換 — 正規表現を使った全体的な変更

判断フロー：

変更するファイル数は？
├─ 1ファイル → Cursor を選ぶ
├─ 2-3ファイル → 関連度による（関連度高 → Claude Code、低 → Cursor）
└─ 4ファイル以上 → Claude Code を選ぶ

MCP 連携の可能性

MCP（Model Context Protocol） は、AI モデルが外部ツールやデータソースにアクセスするための標準プロトコルです。Cursor は MCP をサポートしており、Claude Code と同じ MCP サーバーを共有できます。

MCP サーバーの設定

~/.cursor/mcp-config.json：

{
  "mcpServers": {
    "filesystem": {
      "command": "node",
      "args": ["~/.mcp/filesystem-server.js"],
      "env": {
        "ALLOWED_PATHS": "/Users/yourname/projects"
      }
    },
    "git": {
      "command": "python3",
      "args": ["~/.mcp/git-server.py"]
    },
    "database": {
      "command": "node",
      "args": ["~/.mcp/database-server.js"],
      "env": {
        "DB_URL": "postgresql://localhost/mydb"
      }
    }
  }
}

Claude Code の場合も同じ設定を使用：

# Claude Code は ~/.claude/mcp-config.json から設定を読み込みます
cp ~/.cursor/mcp-config.json ~/.claude/mcp-config.json

ℹ️

MCP により、Cursor と Claude Code の両方がデータベース、Git、ファイルシステムといった外部リソースに統一的にアクセスできます。これにより、ツール間での一貫性が保証されます。

Tips & ベストプラクティス

1. CLAUDE.md でプロジェクトコンテキストを共有

プロジェクトルートに CLAUDE.md を置き、Cursor と Claude Code が同じコンテキストを読み込めるようにします：

# Project Context for AI
 
## Overview
This is an e-commerce platform built with Next.js and PostgreSQL.
 
## Architecture
- Frontend: Next.js 14 with TypeScript
- Backend: API routes + PostgreSQL
- Testing: Vitest + React Testing Library
 
## Key Technologies
- Authentication: NextAuth.js
- Database ORM: Prisma
- Styling: Tailwind CSS
 
## Important Conventions
- Use camelCase for variables and functions
- Use PascalCase for React components
- All API endpoints return JSON with { data, error, status }
- Database transactions must use Prisma's $transaction
- Test files follow naming: *.test.ts or *.test.tsx
 
## Common Tasks
- Run tests: npm test
- Generate Prisma types: npm run prisma:generate
- Deploy: npm run deploy:prod

2. .cursorrules との使い分け

Cursor 専用の設定は .cursorrules に、汎用設定は CLAUDE.md に分ける：

.cursorrules：

# Cursor-specific rules

- Use inline completions aggressively
- Suggest refactoring opportunities during editing
- For React components, show prop variations
- When you see TODO comments, highlight them

CLAUDE.md：

# Both Cursor and Claude Code
 
- Always use TypeScript strict mode
- Write tests for new features
- Follow naming conventions

3. ターミナルレイアウトの最適な設定

Cursor では左右分割配置をお勧めします：

┌─────────────────┬─────────────────┐
│                 │                 │
│   Cursor        │    Terminal     │
│   Editor        │   (Claude Code) │
│   (コード編集)   │   (実行・確認)   │
│                 │                 │
└─────────────────┴─────────────────┘

設定方法：

Cursor でターミナルを開く（Ctrl+`）
ターミナル右上の分割ボタンをクリック
View > Appearance > Panel Size で幅を調整

他の AI エディタとの比較

Cursor vs. Windsurf

項目	Cursor	Windsurf
基盤	VS Code	VS Code
AI モデル	Claude, GPT-4	Claude, GPT-4, Grok
チャット機能	✓	✓
コード補完	◎	◎
ファイル横断編集	○	◎
学習曲線	低い	中程度

Cursor の優位性： VS Code ユーザーへの親和性、シンプルな UI

Cursor vs. GitHub Copilot

Cursor は「フルエディタ」、Copilot は「補完エクステンション」という根本的な違いがあります：

Copilot: VS Code の拡張機能 → 既存エディタの補強
Cursor:  新しいエディタ → AI が中核

Cursor の優位性： エディタ全体で AI と統合、チャット機能

Cursor vs. Cline（Claude Code のブラウザ版）

Cursor:     ネイティブエディタ（高速、機能豊富）
Claude Code: CLI ツール（柔軟、スクリプト化可能）

実は競合ではなく補完関係です。このガイドが説くのはまさにこの組み合わせです。

全体を振り返って

Cursor と Claude Code は、適切に組み合わせることで実用的の開発環境になります：

Cursor で局所的な調整と迅速な入力
Claude Code で大規模な分析と変更
MCP で両者のコンテキストを統一

このワークフローにより、単一ツールでは実現不可能な効率と品質を達成できます。

💡

まずは 1 つのプロジェクトで両ツールを試してみてください。数日使えば、それぞれの得意分野が自然と見えてきます。その時点で最適な使い分けが身についているでしょう。

Cursor × Claude Code 連携ガイド — AI エディタとCLIの実用的タッグ

Cursor × Claude Code 連携ガイド

Cursor とは何か

なぜ Claude Code と Cursor を組み合わせるのか

Cursor の基本セットアップ

インストール

Claude モデルの設定

キーボードショートカットの設定

Claude Code をターミナルから使う

インストールと初期設定

Cursor でターミナルを開く

実践的なワークフロー例

ワークフロー1: Cursor で局所編集 → Claude Code でテスト実行・修正

ワークフロー2: Claude Code で新機能スキャフォールド → Cursor で細調整

ワークフロー3: Claude Code でリファクタリング → Cursor でインライン確認

使い分けの基準

Cursor を選ぶべき場面

Claude Code を選ぶべき場面

MCP 連携の可能性

MCP サーバーの設定

Tips & ベストプラクティス

1. CLAUDE.md でプロジェクトコンテキストを共有

2. .cursorrules との使い分け

3. ターミナルレイアウトの最適な設定

他の AI エディタとの比較

Cursor vs. Windsurf

Cursor vs. GitHub Copilot

Cursor vs. Cline（Claude Code のブラウザ版）

全体を振り返って

お読みいただきありがとうございます

関連記事