メインコンテンツへスキップ
Code & Craft
AI活用 約9分で読めます

Cursor Agent モード完全活用法|AI エージェントで開発効率3倍【2026年版】

Cursor の Agent モード(Composer)の使い方を完全解説。ファイル横断編集、マルチステップタスク、プロジェクトコンテキスト活用など実務で効果を出す技法を紹介。

Cursor は AI ネイティブな VS Code ベースのエディタで、2026年現在では最も人気のある AI コーディングツールの一つです。特に Agent モード(旧称 Composer) は、複数ファイルを横断して編集できる強力な機能で、従来のエディタとは一線を画す開発体験を提供します。

Cursor Agent モードとは

Agent モードは、自然言語の指示から複数ファイルにまたがる変更を自動で実行するモードです。

主な特徴:

  • 複数ファイルを同時編集
  • 変更前のプレビュー
  • 差分表示と個別採用
  • プロジェクト全体を理解
  • コマンド実行も可能

通常モードとの違い

項目Chat モードInline EditAgent モード
範囲質問応答選択範囲のみ複数ファイル
対話会話中心単発編集連続タスク
自動実行なしなしあり(許可時)
用途相談・質問小さな修正大規模変更

起動方法

Mac: Cmd+I
Windows/Linux: Ctrl+I

または、右サイドバーの「Composer」アイコンをクリック。

基本的な使い方

パターン1: 新機能の追加

ユーザー管理画面を追加してください。
- /users ルートで表示
- ユーザー一覧テーブル
- 追加・編集・削除ボタン
- Prisma の User モデルを使う

Agent が自動で:

  1. pages/users.tsx を作成
  2. components/UserTable.tsx を作成
  3. api/users.ts を作成
  4. 必要なインポートを追加

パターン2: リファクタリング

src/utils/formatters.ts にあるユーティリティ関数を
TypeScript の関数型プログラミングスタイルに書き直してください。
各関数は純粋関数にし、JSDoc コメントを追加してください。

パターン3: バグ修正

ユーザーがログインボタンを押してもリダイレクトされない
バグを修正してください。関連ファイルを調査して、
根本原因を特定してください。

Agent が:

  1. pages/login.tsx を確認
  2. hooks/useAuth.ts を確認
  3. api/auth.ts を確認
  4. 原因を特定して修正

パターン4: テストの追加

src/components/Button.tsx に対する Vitest のテストを
追加してください。すべての props と state パターンを
カバーしてください。

Agent モードの強力な機能

1. @ メンションで特定ファイル参照

@src/components/Header.tsx のロゴ部分を
@src/assets/logo.svg に変更してください

ファイル名を直接参照することで、Agent がどのファイルを操作すべきか明確になります。

2. @ Codebase でプロジェクト全体を参照

@Codebase この認証ロジックを使っている箇所をすべて
リファクタリングしてください

プロジェクト全体から関連コードを検索します。

3. @ Web で Web 検索

@Web Next.js 15 の useActionState の正しい使い方を教えて

最新のドキュメントを参照しながら実装できます。

4. @ Docs でドキュメント参照

@Docs TanStack Router v1 の基本的な設定方法で
ルーティングを追加してください

公式ドキュメントを参照しながら正確な実装が可能です。

効果的なプロンプトの書き方

良い例

以下の要件で新しいコンポーネントを作成してください:

機能:
- ユーザーがアイコンを選択できる
- 検索機能付き
- カテゴリフィルタ

技術要件:
- TypeScript
- Tailwind CSS v4
- Radix UI の Popover を使用
- アイコンは lucide-react から

ファイル:
- src/components/IconPicker.tsx に配置
- 使用例を src/pages/demo.tsx に追加

スタイル:
- プロジェクトの他のコンポーネントと統一感のある見た目

悪い例

アイコンピッカー作って

プロジェクト設定(.cursorrules)

プロジェクトルートに .cursorrules を配置すると、プロジェクト固有のルールを AI に学習させられます。

# .cursorrules

このプロジェクトは Next.js 15 + TypeScript + Tailwind CSS を使用しています。

## コーディング規約

- ファイル名はケバブケース(user-profile.tsx)
- コンポーネント名はパスカルケース
- TypeScript の型は `type` ではなく `interface` を使用
- 関数は Arrow Function で定義
- インポート順: React → 外部 → 内部 → スタイル

## 技術スタック

- 状態管理: Zustand
- API: tRPC
- DB: Prisma + PostgreSQL
- フォーム: React Hook Form + Zod
- スタイル: Tailwind CSS + shadcn/ui

## 禁止事項

- any 型の使用禁止
- console.log はデバッグ後に削除
- inline スタイル禁止
- クラスコンポーネント禁止

## ファイル構造

src/
  components/  # 共通コンポーネント
  pages/       # ページ
  hooks/       # カスタムフック
  lib/         # ユーティリティ
  types/       # 型定義

コンテキストウィンドウの活用

Cursor は長いコンテキストを扱えるため、複数の関連ファイルを一度に参照させると効果的です。

@src/types/user.ts @src/api/users.ts @src/components/UserList.tsx

この3つのファイルを見て、ユーザーに「ラスト」ログイン時刻を
追加する変更をしてください。DB スキーマから UI まで一貫して。

Agent モードの制御

変更のプレビュー

Agent が提案した変更は、実行前にプレビューされます。

  • 緑: 追加される行
  • 赤: 削除される行
  • 黄: 変更される行

個別の採用/却下

各変更を個別に採用できます。気に入らない変更だけ却下することで、手動修正の手間を最小化できます。

連続実行

Agent モードでは、1つのタスクが終わったら続けて次の指示を出せます。

1. ログインフォームを追加して
2. [完了後] 登録フォームも追加して
3. [完了後] 両方のバリデーションを厳密にして

モデル選択

Cursor は複数のモデルを選べます(2026年4月時点):

  • Claude Sonnet 4: 高精度、推論力、コード生成力が最高
  • GPT-4o: バランス型、スピード重視
  • GPT-4.5: 最新の OpenAI モデル
  • Gemini 2.0 Pro: Google の最新モデル
  • o1: 複雑な推論タスク向け

実務でのおすすめ:

  • 通常タスク: Claude Sonnet 4
  • 素早い補完: GPT-4o
  • 複雑な設計: o1

実務での活用パターン

パターン1: 新規プロジェクト立ち上げ

Next.js 15 + TypeScript + Tailwind CSS v4 + shadcn/ui で
ブログサイトの初期セットアップをしてください。

ページ:
- ホーム(最新記事一覧)
- ブログ詳細(動的ルート)
- About

機能:
- ダークモード
- 検索
- RSS フィード

初期構成を一気に作成できます。

パターン2: 大規模リファクタリング

すべてのクラスコンポーネントを関数コンポーネントに変換してください。
各コンポーネントで使われている state は useState に、
ライフサイクルメソッドは useEffect に変換してください。

パターン3: テスト駆動開発

まず tests/user-service.test.ts にテストケースを書いてください。
機能:
- getUser(id): ユーザー取得
- createUser(data): ユーザー作成
- updateUser(id, data): ユーザー更新
- deleteUser(id): ユーザー削除

すべて失敗することを確認してから、
src/services/user-service.ts を実装してください。

パターン4: マイグレーション

Express + Pug で書かれたビューを Next.js 15 の App Router に
移行してください。

移行対象:
- views/home.pug → app/page.tsx
- views/about.pug → app/about/page.tsx
- views/layout.pug → app/layout.tsx

ショートカット一覧

操作MacWindows
Agent モードCmd+ICtrl+I
チャットCmd+LCtrl+L
Inline EditCmd+KCtrl+K
候補受諾TabTab
候補却下EscEsc
コードベース検索Cmd+Shift+LCtrl+Shift+L

Claude Code との使い分け

ツール強み使う場面
Cursorエディタ統合、補完リアルタイム編集
Claude Codeターミナル、ファイル操作CLI 作業、スクリプト実行

詳しくは Claude Code VS Code拡張機能で開発効率が変わる も参考にしてください。

よくある失敗

失敗1: 指示が曖昧すぎる

❌ 「いい感じのコンポーネントを作って」
✅ 「Button コンポーネントを作成してください。variant (primary/secondary/danger)、size (sm/md/lg)、loading 状態を受け取り、Tailwind CSS でスタイリングしてください」

失敗2: コンテキスト不足

❌ 「このバグを直して」
✅ 「@src/api/users.ts のこの関数で、ユーザーが見つからない時に null ではなく undefined を返すバグがあります」

失敗3: Agent を盲信する

AI の提案は常にレビューしてください。特に以下の点:

  • セキュリティに関わる実装
  • パフォーマンスクリティカルな処理
  • 型の整合性
  • テストカバレッジ

コスト管理

Cursor は月 $20(Pro プラン)で、主要モデルが使い放題です(フェアユース制限あり)。

コスト効果:

  • 月 $20 で開発効率 2-3倍
  • 時給 3000円の開発者が 4時間節約 → 月12000円の価値
  • ROI は圧倒的にプラス

まとめ

Cursor Agent モードは、以下のようなタスクで特に威力を発揮します。

  • 複数ファイルにまたがる変更
  • 新規プロジェクトの立ち上げ
  • リファクタリング・マイグレーション
  • テスト駆動開発
  • API 連携の実装

効果的に使うコツ:

  1. .cursorrules を設定: プロジェクトの文脈を共有
  2. 明確な指示: 曖昧さを避け、要件を細かく
  3. @mention を活用: 関連ファイルを明示
  4. 段階的に進める: 大きな変更は分割
  5. 必ずレビュー: AI の提案も鵜呑みにしない

まずは小さな機能追加から試してみて、徐々に大きなタスクに挑戦するのがおすすめです。使い込むほどに、従来のエディタには戻れなくなるはずです。

参考リンク

#Cursor #AI #生産性 #エディタ
シェア: