Cursor完全実践ガイド2026〜Composer・Tab補完・AI Rules・Agent Mode徹底〜

Cursorは、VSCodeをフォークして開発されたAIネイティブなコードエディタです。Tab補完、Composer、Agent Mode、.cursorrules、@-mentions など、AIと共に書くための機能が標準装備されています。本記事では、インストールから日常運用のテクニックまで、コピペで動くコードと実プロンプト例を中心に、Cursorを使い倒すための実践ノウハウをまとめます。

本記事はAIコーディングツールシリーズの第3弾です。AIコーディングツール比較で全体像を把握した上で、本記事のCursor特化テクニックに進むと理解が深まります。

Cursorとは何か:VSCodeフォークの最前線

CursorはAnysphere社が開発するエディタで、内部的にはVSCodeをフォークしているため、既存の拡張機能・設定・キーバインドがほぼそのまま動きます。違いはAI機能がエディタ深部に統合されている点で、Tab補完(Cursor Tab)はLLMによる複数行予測まで踏み込みます。

VSCodeとの本質的な違い

従来のVSCode + Copilotは「拡張機能としてAIを呼ぶ」構造ですが、Cursorは「AIが第一引数」のUXです。たとえばCmd+Kは「インライン編集」、Cmd+Lは「サイドチャット」、Cmd+I(または⌘+⇧+I)は「Composer / Agent」と、AIへの呼び出し動線がエディタ全体に張り巡らされています。

本記事で扱う範囲

料金プラン、インストール、Tab補完、Cmd+K、Cmd+L、Composer、Agent Mode、Bug Finder、.cursorrules、@-mentions、Privacy Mode、Notepads、Codebase Chat、Git統合、Linter自動修正、実プロンプト例15種、リファクタリング・テスト生成・デバッグ・ドキュメント生成・マイグレーション・パフォーマンスチューニングなど、実践的なテーマを網羅します。

インストールと初期セットアップ

macOSへのインストール

公式サイトからdmgをダウンロードする方法と、Homebrewを使う方法があります。Homebrewが入っているならコマンド一発です。

# Homebrew Caskでインストール
brew install --cask cursor

# バージョン確認
cursor --version

# パスを通す(VSCode同様 'cursor .' でフォルダを開けるように)
cat << 'EOF' >> ~/.zshrc
export PATH="/Applications/Cursor.app/Contents/Resources/app/bin:$PATH"
EOF
source ~/.zshrc

Windowsへのインストール

公式の.exeインストーラを実行するか、wingetでインストールします。社内端末でMSI配布する場合はSCCM経由でも対応可能です。

# winget でインストール
winget install Anysphere.Cursor

# CLIから開く(PowerShell)
cursor .

# 既定エディタとして .py を関連付け(任意)
ftype CursorEditor="C:Users%USERNAME%AppDataLocalProgramscursorCursor.exe" "%1"
assoc .py=CursorEditor

Linuxへのインストール

AppImage形式が公式で配布されています。ダウンロード後に実行権限を付けて起動すればOKです。

# AppImageダウンロード(URLは公式リリースを確認)
curl -L -o ~/Downloads/Cursor.AppImage 
  https://download.cursor.sh/linux/appImage/x64

# 実行権限を付与
chmod +x ~/Downloads/Cursor.AppImage

# 起動
~/Downloads/Cursor.AppImage

# デスクトップエントリ作成
cat << 'EOF' > ~/.local/share/applications/cursor.desktop
[Desktop Entry]
Name=Cursor
Exec=/home/$USER/Downloads/Cursor.AppImage %U
Icon=cursor
Type=Application
Categories=Development;
EOF

VSCodeから設定を移行する

初回起動時に「Import from VS Code」のダイアログが出ますが、後から手動で取り込むことも可能です。settings.json、keybindings.json、拡張機能リストの3点セットを移行します。

# VSCodeの設定ディレクトリ(macOS例)
VSCODE_DIR="$HOME/Library/Application Support/Code/User"
CURSOR_DIR="$HOME/Library/Application Support/Cursor/User"

# settings.json と keybindings.json をコピー
cp "$VSCODE_DIR/settings.json"     "$CURSOR_DIR/settings.json"
cp "$VSCODE_DIR/keybindings.json"  "$CURSOR_DIR/keybindings.json"

# インストール済み拡張機能の一覧を書き出し
code --list-extensions > ~/vscode-extensions.txt

# Cursor側にまとめてインストール
cat ~/vscode-extensions.txt | xargs -L1 cursor --install-extension

初期 settings.json の推奨

AI関連の設定はCursor側のUIで行いますが、エディタ挙動はsettings.jsonで揃えておくと快適です。

{
  "editor.fontFamily": "JetBrains Mono, Menlo, monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.7,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "editor.inlineSuggest.enabled": true,
  "cursor.cpp.enablePartialAccepts": true,
  "cursor.chat.alwaysSearchWeb": false,
  "cursor.general.enableShadowWorkspace": true,
  "files.autoSave": "onFocusChange"
}

料金プランと選び方

Hobby / Pro / Business の違い

Cursorには無料のHobby、月額のPro、組織向けのBusinessがあります。実務で使うならPro一択です。Tab補完の上限・Slow Premium・Fast Premiumの扱いが鍵です。

# 料金プラン早見表(本記事執筆時点)
plans:
  Hobby:
    price: $0/month
    completions: 2000/month
    slow_premium: 50/month
    fast_premium: 0
    privacy_mode: false
  Pro:
    price: $20/month
    completions: unlimited
    slow_premium: unlimited
    fast_premium: 500/month
    privacy_mode: true
  Business:
    price: $40/user/month
    completions: unlimited
    slow_premium: unlimited
    fast_premium: 500/user/month
    privacy_mode: enforced
    sso: true
    admin_dashboard: true

無料枠で試す手順

HobbyでもTab補完が2000回/月使えるので、まずは無料で1週間試してから判断するのが現実的です。

# 月間使用量の確認(GUI: Settings → Usage)
# CLI からはAPIエンドポイントを叩く
curl -H "Authorization: Bearer $CURSOR_API_KEY" 
     https://api.cursor.com/v1/usage | jq '.completions'

Cursor Tab(ネイティブTab補完)

Tab補完の特徴

Cursor TabはGitHub Copilotとは別物で、Cursor独自モデルが動いています。複数行の予測、隣接ファイルからの文脈読み取り、リネーム伝播などが特徴です。

// 例: 関数名を変えると、呼び出し側もTabキーで連鎖修正提案
function calculateTax(price: number): number {
  return price * 0.1;
}

// ↑をrenameすると、↓で「次の変更箇所にジャンプ」がTabに割り当たる
const total = calculateTax(1000);

言語別の補完精度を高めるコツ

TypeScriptで補完精度を上げたいなら、型定義をしっかり書くのが最短です。anyを使わない、関数の戻り型を明示する、JSDocコメントを書く、の3点で体感が変わります。

/**
 * 商品リストから合計金額を計算する
 * @param items 商品配列
 * @param taxRate 消費税率(0.1 = 10%)
 * @returns 税込み合計
 */
export function calcTotalPrice(
  items: { price: number; qty: number }[],
  taxRate: number,
): number {
  // ここでTabを押すと、reduce + tax計算まで一気に提案される
  return items.reduce((sum, i) => sum + i.price * i.qty, 0) * (1 + taxRate);
}

Tab補完のショートカット

Tab補完は採用・部分採用・棄却が分かれています。Cmd+→で1語ずつ採用できるのが地味に便利です。

Tab          : 提案をまるごと採用
Cmd + →      : 1単語ずつ採用(部分採用)
Esc          : 提案を棄却
Cmd + ↓      : 別の提案候補に切り替え
Option + ]   : Cursor Tabの一時無効化トグル

Cmd+K インライン編集

Cmd+Kの基本

選択範囲に対して自然言語で指示を出し、その場で書き換えるモードです。リファクタリング・コメント追加・JSDoc生成などに最強です。

// 1) 選択 → Cmd+K → "Promise.allSettledで並列化して" と入力
async function fetchAll() {
  const a = await fetchUser();
  const b = await fetchPosts();
  const c = await fetchComments();
  return { a, b, c };
}

// ↓ こう書き換わる
async function fetchAll() {
  const [a, b, c] = await Promise.allSettled([
    fetchUser(),
    fetchPosts(),
    fetchComments(),
  ]);
  return { a, b, c };
}

Cmd+Kでテストを生成する

関数を選択して「この関数のVitestを書いて、edge caseも含めて」と入れると、テストファイルの雛形が生成されます。

// 対象関数
export function chunk<T>(arr: T[], size: number): T[][] {
  if (size <= 0) throw new Error("size must be positive");
  const out: T[][] = [];
  for (let i = 0; i < arr.length; i += size) {
    out.push(arr.slice(i, i + size));
  }
  return out;
}

// Cmd+K プロンプト: "Vitestでテスト。空配列・size<=0・余りあり・余りなし・型保持を網羅"
import { describe, it, expect } from "vitest";
import { chunk } from "./chunk";

describe("chunk", () => {
  it("空配列は空配列を返す", () => {
    expect(chunk([], 2)).toEqual([]);
  });
  it("size<=0はThrow", () => {
    expect(() => chunk([1, 2], 0)).toThrow();
  });
  it("余りなし", () => {
    expect(chunk([1, 2, 3, 4], 2)).toEqual([[1, 2], [3, 4]]);
  });
  it("余りあり", () => {
    expect(chunk([1, 2, 3], 2)).toEqual([[1, 2], [3]]);
  });
});

Cmd+Kでバグ修正

エラーメッセージを直接Cmd+Kに貼ると、文脈から修正案が出ます。

// バグありコード(選択 → Cmd+K → エラーログを貼り付け)
function average(nums: number[]): number {
  // TypeError: Reduce of empty array with no initial value
  return nums.reduce((a, b) => a + b) / nums.length;
}

// 修正後
function average(nums: number[]): number {
  if (nums.length === 0) return 0;
  return nums.reduce((a, b) => a + b, 0) / nums.length;
}

Cmd+L チャット(Sidebar Chat)

サイドバーチャットの位置づけ

Cmd+Lは「コードを書き換えずに質問・相談」する場所です。アーキテクチャ議論、ライブラリ選定、ログの解読に向きます。

プロンプト例:
"このリポジトリの認証フローを @auth/ ディレクトリ全体を見て、
3行で要約してください。さらに、JWTのリフレッシュ戦略の
弱点があれば指摘してください。"

選択範囲を含めて質問する

コードを選択した状態でCmd+Lを押すと、選択範囲が引用された状態でチャットが開きます。

// 選択 → Cmd+L → "この実装でN+1問題が起きる箇所を指摘して"
async function getOrders(userIds: number[]) {
  const orders = [];
  for (const id of userIds) {
    const u = await db.user.findUnique({ where: { id } });
    const o = await db.order.findMany({ where: { userId: u.id } });
    orders.push({ user: u, orders: o });
  }
  return orders;
}

Codebase Chat(@Codebase)

チャット内で@Codebaseを指定すると、リポジトリ全体をインデックスしたベクトル検索が走ります。「○○の処理はどこ?」系の質問に強いです。

@Codebase "ユーザー削除時に走る後処理を全部列挙してください。
ファイルパスと関数名のリストで返答してください。"

Composer:複数ファイル横断編集

Composerとは

Composer(⌘+I)はCursorの目玉機能で、複数ファイルにまたがる編集を一気に行えます。「新しいAPIエンドポイントを足して、フロントの呼び出しコードもZodスキーマも更新」みたいな作業が1プロンプトで終わります。

Composerプロンプト例:
"/api/products というGET/POSTのREST APIを追加してください。
- Next.js App RouterのRoute Handlerで実装
- Zodで入力バリデーション(name: string, price: number)
- Prismaで永続化
- フロント側に productsApi.ts のクライアントを追加
- src/hooks/useProducts.ts でReact Queryのhookも生成"

Composerの実行結果イメージ

Composerは「変更計画」と「ファイル単位の差分」を提示し、ユーザがファイルごとにAccept/Rejectできます。

// app/api/products/route.ts (自動生成)
import { NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";

const ProductSchema = z.object({
  name: z.string().min(1),
  price: z.number().nonnegative(),
});

export async function GET() {
  const products = await prisma.product.findMany();
  return NextResponse.json(products);
}

export async function POST(req: Request) {
  const body = await req.json();
  const parsed = ProductSchema.safeParse(body);
  if (!parsed.success) {
    return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
  }
  const created = await prisma.product.create({ data: parsed.data });
  return NextResponse.json(created, { status: 201 });
}

// src/lib/productsApi.ts (自動生成)
export async function listProducts() {
  const r = await fetch("/api/products");
  if (!r.ok) throw new Error("failed to fetch products");
  return r.json();
}

export async function createProduct(input: { name: string; price: number }) {
  const r = await fetch("/api/products", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(input),
  });
  if (!r.ok) throw new Error(await r.text());
  return r.json();
}

// src/hooks/useProducts.ts (自動生成)
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { listProducts, createProduct } from "@/lib/productsApi";

export function useProducts() {
  return useQuery({ queryKey: ["products"], queryFn: listProducts });
}

export function useCreateProduct() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: createProduct,
    onSuccess: () => qc.invalidateQueries({ queryKey: ["products"] }),
  });
}

Agent Mode:自律実行モード

Agent Modeの何が違うか

Composerが「計画→差分提示→人が承認」なのに対し、Agent Modeは「ターミナルでコマンドを実行」「ファイルを作成」「テストを走らせて結果を読む」まで自律で進めます。長めのリファクタや「Tailwind v3→v4移行」みたいな多段作業向きです。

Agent Modeプロンプト例:
"このプロジェクトをTailwind v3からv4に移行してください。
1) package.jsonのバージョン更新と pnpm install 実行
2) postcss.config.js を v4仕様に書き換え
3) tailwind.config.js を @theme ベースのCSS変数に移行
4) globals.css を更新
5) pnpm build を走らせて、エラーがあれば修正
最後に変更点をmarkdownで要約してください。"

Agent Modeのターミナル実行例

Agentは内部的にシェルを実行します。確認ステップが入るので、安全側に倒したい場合は事前に「破壊的コマンドは確認する」とルール付けします。

# Agent Modeが内部で叩く例
pnpm add -E tailwindcss@latest
pnpm remove autoprefixer
pnpm run build 2>&1 | tee build.log
grep -E "error|Error" build.log

.cursorrules と .cursor/rules

.cursorrules ファイルの基本

プロジェクト直下に.cursorrulesを置くと、そのリポジトリでのAI挙動を上書きできます。コーディング規約、使用ライブラリ、禁止事項などを書きます。

# .cursorrules
このプロジェクトはNext.js 15 (App Router) + TypeScript + Tailwind v4 + Prisma で構成されています。

# 規約
- "use client" は必要最小限のリーフコンポーネントにだけ付ける
- データ取得はServer ComponentsでPrismaを直接呼ぶ
- ClientコンポーネントはuseStateを必要とする部分のみ
- スタイルはTailwindのみ。styled-componentsは使わない
- import順は: react / next → 外部ライブラリ → "@/lib" → "@/components" → 相対

# 禁止
- any 型の使用禁止(unknownを使う)
- console.log のコミット禁止
- npm-run-allやnpxの新規依存追加禁止(pnpmスクリプトで完結させる)

# テスト
- ユニットテストはVitest、E2EはPlaywright
- テストファイルは *.test.ts と *.e2e.ts で分離

.cursor/rules ディレクトリ(新形式)

新しいCursorではディレクトリベースのrulesがサポートされ、glob指定でファイル別に異なるルールを当てられます。

# .cursor/rules/typescript.mdc
---
description: TypeScript全般のルール
globs:
  - "**/*.ts"
  - "**/*.tsx"
alwaysApply: true
---

# TypeScriptルール
- 型は明示的に書く(戻り値型を省略しない)
- 配列は T[] ではなく Array<T> をジェネリクスの中だけで使う
- enum ではなく as const オブジェクトを使う
- Date型の代わりにdate-fnsのDateを使う

# .cursor/rules/react.mdc
---
description: React/Next.js特化ルール
globs:
  - "**/*.tsx"
  - "src/app/**/*"
alwaysApply: false
---

# Reactルール
- Server Componentsを優先
- Client Componentは "use client" を1行目に書く
- useEffect を新規追加するときは理由をコメントに書く
- Suspenseを意識した設計にする

# .cursor/rules/test.mdc
---
description: テストファイル専用ルール
globs:
  - "**/*.test.ts"
  - "**/*.test.tsx"
  - "**/*.e2e.ts"
alwaysApply: false
---

# テストルール
- describe / it / expect を使う(Jestスタイル禁止)
- beforeEachでDBクリーンアップ
- E2EはPage Object Modelで書く
- スナップショットテストは原則禁止(差分が読みづらいため)

@-mentions:コンテキスト指定の全パターン

@file・@folder・@code

チャットやComposerで@を入力するとコンテキスト候補が出ます。これを使ってAIに「どこを見ろ」を明示するのが、Cursorで品質を上げる最重要テクニックです。

プロンプト例(@で参照):

@file:src/auth/login.ts のバリデーションロジックを
@file:src/auth/register.ts と同じスタイルに揃えてください。

@folder:src/components/ui/ 配下のButtonバリエーションを
listにして、TableコンポーネントのactionColumnで使い回せる
ようにrefactorしてください。

@code:UserSchema を参照しつつ、Profile型を派生で作って
書き出してください。

@docs:ライブラリ公式ドキュメントを参照

@docsを使うとライブラリ公式ドキュメントをコンテキストに入れられます。事前にSettings → Features → Docsで追加が必要です。

プロンプト例:
@docs:Next.js "App Routerで dynamic = 'force-dynamic' と
revalidate = 0 の違いを実コード例つきで説明してください"

@docs:Prisma "$transactionの interactive transaction の
APIを使って、注文作成と在庫減算を原子的に実行する例を書いて"

@web:Web検索を絡める

@webはチャット中にリアルタイムでWeb検索を行います。最新ライブラリやエラー文の調査に有効です。

@web "Next.js 15 でSegment ConfigのdynamicParams = falseと
generateStaticParamsの組み合わせで404になる既知バグの最新情報"

@git:履歴を参照

@gitでコミット履歴やdiffを参照できます。PRレビューの下書きやリリースノート生成に使えます。

@git:main..feature/payment "このブランチの変更点を
1) ユーザ向け 2) 開発者向け の2軸でリリースノートにまとめて"

AIモデル切替:Claude / GPT / Gemini / o1

モデル選択の使い分け

Cursorは複数のフロンティアモデルを切り替えられます。Pro/Businessなら主要モデル全部使えます。タスクごとの相性は次の通りです。

model_use_cases:
  claude-3.5-sonnet:
    strength: コード品質・指示追従・長文context
    use_for: [composer, agent_mode, リファクタ, レビュー]
  gpt-4o:
    strength: 汎用・速度・関数呼び出し
    use_for: [chat, インライン補完, 軽量タスク]
  gemini-pro:
    strength: 巨大context、画像入力
    use_for: [大規模リポジトリ調査, スクショ解析]
  o1-preview:
    strength: 多段推論、アルゴリズム
    use_for: [競プロ系, 設計議論, 数値計算]

モデル切替のUI

チャットボックス下部のモデル名をクリックすると切替メニューが開きます。Composerは別途モデル指定可能です。

ショートカット:
Cmd + /        : 現在のチャット/Composerのモデル切替
Cmd + .        : Auto Apply ON/OFF
Cmd + Shift + L : 新しいチャットを開く

Auto Apply とインデックス管理

Auto Applyの挙動

Auto Applyを有効にすると、生成されたコードがそのままバッファに適用されます。差分プレビュー後に承認するスタイルとは別物です。Agent Modeでは事実上必須です。

Settings → Features → Composer → Auto Apply: ON

注意:
- 破壊的な変更まで自動適用される
- Gitで管理されていないファイルの上書きにも注意
- 心配なら "Show Diff" モードで運用する

インデックスの仕組み

Cursorはリポジトリ全体をベクトル化してローカルに保持し、@Codebaseでセマンティック検索します。大きなリポジトリでは初回インデックスに時間がかかります。

Settings → Features → Codebase Indexing
- "Sync Index" でインデックスを最新化
- "Reset Index" で破棄して作り直し

無視ファイル(.cursorignore)
.next/
node_modules/
dist/
build/
*.log
*.lock
public/uploads/
__generated__/

Privacy Mode とプライバシー設定

Privacy Modeの効果

Privacy ModeをONにすると、コード・プロンプトがLLMプロバイダ側で学習に使われないモードになります。業務利用ではほぼ必須です。

Settings → General → Privacy Mode: Enabled

挙動:
- LLM側でzero data retentionが有効化
- Cursorサーバへの送信はAPIプロキシのみ
- ローカルに永続保存されるのはインデックスのみ
- 監査ログはBusinessプランの管理ダッシュボードで確認可

機密ファイルを除外する

.cursorignoreでファイル単位の除外、.cursor/rulesで内容ごとの制約を組み合わせます。.envや鍵ファイルは必ず除外しましょう。

# .cursorignore
.env
.env.*
*.pem
*.key
secrets/
db-dumps/
**/credentials.json

Bug Finder と Linter Errors 自動修正

Bug Finderの動作

Bug Finderはブランチ間diff(例:feature/xxx vs main)をAIに読ませ、潜在バグを列挙する機能です。レビュー前の自己診断に使えます。

Settings → Features → Bug Finder
1) ターゲットブランチを選択
2) Scan を実行
3) ファイル別に重要度(critical/major/minor)とコメント付きで報告

出力例:
[critical] src/payment.ts: tax計算で整数オーバーフローの可能性
[major]    src/api/order.ts: NullPointer (line 42, item未チェック)
[minor]    src/utils/date.ts: タイムゾーン未指定でテスト不安定

Linterエラーの自動修正

Cursorは保存時に走るeslint/tscのエラーを検知して、AIで自動修正提案を出します。誤検知を防ぐためにルールを明示すると精度が上がります。

// 例: TypeScriptエラーをAIが直す
// error TS2322: Type 'string | undefined' is not assignable to type 'string'.
function greet(name?: string) {
  return `Hello, ${name}`;
}

// Cursorのクイックフィックス → "Fix with AI"
function greet(name?: string): string {
  return `Hello, ${name ?? "guest"}`;
}

Notepads:再利用可能なプロンプトテンプレ

Notepadsとは

NotepadsはCursor内で「使い回すコンテキスト/プロンプト」をmdファイルとして保存できる機能です。よく使う指示や設計メモを部品化して、Composerから@で呼び出します。

# notepads/api-route.md
新しいAPI Routeを追加するときの定石:

1. app/api/[name]/route.ts を作る
2. GET / POST のハンドラ実装
3. Zodで入出力バリデーション
4. Prismaで永続化
5. src/lib/[name]Api.ts にクライアント追加
6. src/hooks/use[Name].ts にReact Queryフック追加
7. *.test.ts に Vitest テストを追加

注意:
- Server Componentから呼ぶ場合はfetchではなくPrisma直呼びで良い
- 認証必須エンドポイントには middleware.ts のチェックを追加

Notepadsを呼び出す

Composer:
"@notepad:api-route の手順に従って /api/comments を作って。
Commentモデルは prisma/schema.prisma を参照。"

Git 統合と PR レビュー支援

コミットメッセージのAI生成

Source Controlビューの “Generate Commit Message” でステージ済み差分を要約したコミットメッセージが生成されます。Conventional Commitsに揃えるのも可能です。

# 例: 生成されたコミットメッセージ
feat(api): add /api/products with Zod validation and Prisma persistence

- POST validates input with ProductSchema
- GET returns all products ordered by createdAt desc
- Adds productsApi client and useProducts React Query hook
- Includes Vitest coverage for happy path and validation errors

PRレビュー用プロンプト

@git で対象diffを指定し、レビュー観点を明示すると安定した品質のレビューが返ります。

プロンプト:
"@git:main..HEAD のdiff全体を以下4観点でレビューしてください。
1) セキュリティ(認可・SQLインジェクション・XSS)
2) パフォーマンス(N+1, 不要な再レンダリング)
3) 型安全(anyの混入、null安全性)
4) テストカバレッジ
重要度はcritical/major/minor/nitsで分類。"

Multi-Cursor AI 編集

マルチカーソルとAIの組み合わせ

VSCode同様のCmd+Dマルチカーソルが使えますが、Cursorではマルチカーソル位置に対してAI補完を一斉適用できます。

// 例: 5つの似たような関数を一気にrefactor
function add(a: number, b: number) { return a + b; }
function sub(a: number, b: number) { return a - b; }
function mul(a: number, b: number) { return a * b; }
function div(a: number, b: number) { return a / b; }
function mod(a: number, b: number) { return a % b; }

// すべての行頭で Cmd+D → Cmd+K → "JSDoc を付けて引数を validate"
/**
 * 加算
 * @param a 左辺
 * @param b 右辺
 */
function add(a: number, b: number): number {
  if (!Number.isFinite(a) || !Number.isFinite(b)) throw new Error("invalid");
  return a + b;
}
// (以下同様にsub/mul/div/modにJSDocとガードが付く)

実プロンプト例 15選

1) リファクタリング(可読性向上)

Cmd+K プロンプト:
"このネストしたif文を early return + ガード句スタイルに
書き換えてください。型は変えず、コメントで意図を残して。"

2) パフォーマンスチューニング

Composer:
"@file:src/list.tsx の再レンダリングが多い問題を
React Profilerの観点で分析し、useMemo/useCallback/memoを
適切に入れて修正してください。before/afterのコメント付き。"

3) ユニットテスト一括生成

Composer:
"@folder:src/utils 配下のすべての関数に対して
Vitestのテストファイルを生成してください。
edge case(空, null, undefined, 0, 負数)を網羅。"

4) E2Eテスト雛形

Composer:
"PlaywrightのPage Object Modelで、
ログイン→ダッシュボード→商品作成→ログアウト
の正常系E2Eを書いてください。"

5) バグ調査

Chat:
"@Codebase このスタックトレースから原因箇所を特定し、
修正案をdiffで示してください。
[スタックトレース貼り付け]"

6) JSDoc/TSDoc 一括追加

Cmd+K(ファイル全選択):
"このファイル内のすべての export 関数にJSDocを付けて。
日本語で、@param と @returns と簡単な@example も入れて。"

7) i18n対応

Composer:
"@file:src/pages/login.tsx 内のハードコードされた
日本語文字列をすべて t('login.xxx') に置換し、
locales/ja.json と locales/en.json を生成してください。"

8) APIマイグレーション(Pages → App Router)

Agent Mode:
"@folder:pages/api 配下を Next.js App Routerの
app/api/.../route.ts 形式に移行してください。
NextApiRequest/Response は Request/Response に置換。
動作確認のためにビルドも通してください。"

9) ライブラリ移行(axios → fetch)

Composer:
"@Codebase axiosの呼び出しをすべて fetch + 自作 apiClient
ラッパに置き換えてください。タイムアウト・リトライ・
エラーハンドリングは共通化。"

10) SQLクエリ最適化

Chat:
"このPostgreSQLのEXPLAIN ANALYZE結果を読み、
インデックス追加・JOIN順変更・サブクエリ展開などの
最適化提案を5つ挙げてください。
[EXPLAIN結果貼り付け]"

11) Docker化

Composer:
"このNode.js + pnpmプロジェクトをマルチステージビルドの
Dockerfileに化してください。本番ステージはalpine。
docker-compose.yml にはPostgresとRedisも追加。"

12) CI/CD パイプライン

Composer:
".github/workflows/ci.yml を作って、
1) Lint 2) Type Check 3) Unit Test 4) Build 5) E2E
を pnpm で実行。Node 20でmatrix。"

13) Storybookセットアップ

Agent Mode:
"このNext.js + Tailwindプロジェクトに Storybook 8を
セットアップしてください。
- pnpm dlx storybook@latest init
- vite builder を使う
- src/components/ui の Button/Input/Card の .stories.tsx も生成
- pnpm storybook が起動することを確認"

14) アクセシビリティ改善

Cmd+K:
"このフォームをWCAG 2.1 AA準拠に修正してください。
- 適切なlabel関連付け
- aria-* 属性
- フォーカスリング
- キーボード操作
- エラーメッセージはaria-live"

15) ドキュメント生成

Composer:
"@folder:src/hooks の全カスタムフックをREADME.md に
ドキュメント化してください。
- 概要 / 引数 / 戻り値 / 使用例 を表で
- 使用例はsyntax highlight付き ts コードブロック"

リファクタリング実例:神クラス分割

Before:1ファイルに詰め込んだUserService

// src/services/UserService.ts (BEFORE: 400行クラス想定の縮約版)
export class UserService {
  async getUser(id: number) { /* ... */ }
  async createUser(input: any) { /* バリデーション+永続化+メール送信+ログ */ }
  async sendWelcomeEmail(user: any) { /* SMTP直呼び */ }
  async hashPassword(plain: string) { /* bcrypt直呼び */ }
  async logAudit(event: any) { /* 監査ログDB書き込み */ }
  async exportCsv() { /* CSVを生成して返す */ }
}

Cursorへの指示

Composer:
"@file:src/services/UserService.ts を以下に分解してください:
- repositories/UserRepository.ts (永続化のみ)
- services/AuthService.ts (パスワード処理)
- services/MailService.ts (メール送信)
- services/AuditLogService.ts (監査ログ)
- services/UserExporter.ts (CSV出力)
依存性逆転で、UserServiceはこれらをコンストラクタDI。
既存の呼び出し元の互換性は維持してください。"

After:責務分離されたファイル群

// src/repositories/UserRepository.ts
import { prisma } from "@/lib/prisma";

export class UserRepository {
  findById(id: number) {
    return prisma.user.findUnique({ where: { id } });
  }
  create(data: { email: string; passwordHash: string }) {
    return prisma.user.create({ data });
  }
}

// src/services/AuthService.ts
import bcrypt from "bcrypt";

export class AuthService {
  hash(plain: string): Promise<string> {
    return bcrypt.hash(plain, 12);
  }
  verify(plain: string, hashed: string): Promise<boolean> {
    return bcrypt.compare(plain, hashed);
  }
}

// src/services/UserService.ts (AFTER)
export class UserService {
  constructor(
    private readonly users: UserRepository,
    private readonly auth: AuthService,
    private readonly mail: MailService,
    private readonly audit: AuditLogService,
  ) {}

  async create(input: { email: string; password: string }) {
    const passwordHash = await this.auth.hash(input.password);
    const user = await this.users.create({ email: input.email, passwordHash });
    await this.mail.sendWelcome(user);
    await this.audit.log({ type: "user.created", userId: user.id });
    return user;
  }
}

テスト生成・デバッグ・ドキュメント生成

テスト生成のコツ

「edge caseを必ず網羅して」「実行可能なTSコードで」「外部依存はviでmock」の3点をプロンプトに明記すると安定します。

// Composerプロンプト:
// "src/services/PriceCalculator.ts に対する完全テストを
//  生成して。割引・税率・端数処理・通貨切替を網羅"

import { describe, it, expect, vi, beforeEach } from "vitest";
import { PriceCalculator } from "./PriceCalculator";

describe("PriceCalculator", () => {
  let calc: PriceCalculator;
  beforeEach(() => { calc = new PriceCalculator(); });

  it.each([
    [1000, 0.1, 1100],
    [999, 0.1, 1099],
    [0, 0.1, 0],
  ])("税率10%: %i → %i", (price, rate, expected) => {
    expect(calc.applyTax(price, rate)).toBe(expected);
  });

  it("負の価格はthrow", () => {
    expect(() => calc.applyTax(-1, 0.1)).toThrow("invalid price");
  });

  it("通貨切替はAPI呼び出しをmock", async () => {
    const spy = vi.spyOn(global, "fetch").mockResolvedValue(
      new Response(JSON.stringify({ JPY: 150 })),
    );
    const usd = await calc.toUsd(15000);
    expect(usd).toBe(100);
    expect(spy).toHaveBeenCalled();
  });
});

デバッグ支援:エラー再現

「再現する最小コードを書いて」「ログを仕込んで」「Node.jsのinspectで止める手順」をAgent Modeに任せられます。

// Agent Modeに依頼: "このエラーを再現する最小コードを作って、
// Node.js --inspect-brk で止めて手順を教えて"
// 自動生成例:
import { brokenFunction } from "./broken";

(async () => {
  console.log("start");
  try {
    const r = await brokenFunction({ count: -1 });
    console.log("result", r);
  } catch (e) {
    console.error("caught", e);
  }
})();

// 起動: node --inspect-brk -r ts-node/register repro.ts
// VSCode/Cursor の Run and Debug → Attach to Node Process

ドキュメント生成:READMEの自動更新

Composer:
"@file:package.json と @folder:src/ から、
このリポジトリの README.md を再生成してください。
セクションは以下:
- 概要 / 主要技術 / 開発環境立ち上げ手順
- ディレクトリ構成(treeコマンド出力風)
- 主要スクリプト一覧(package.jsonのscripts全部)
- 環境変数(.env.exampleから抽出)
- テスト実行方法 / デプロイ手順"

マイグレーション実例:Vue 2 → Vue 3

Agent Modeでの一括移行

Agent Mode:
"このVue 2 + Options API のプロジェクトを
Vue 3 + Composition API + <script setup> に移行。
- vue / vue-router / vuex を最新に
- vuex は pinia に置き換え
- pnpm build と pnpm test が通るまで自動修正
- 移行後、変更点を CHANGELOG.md に追記"

<!-- BEFORE: Options API -->
<template>
  <div>{{ doubleCount }}</div>
</template>

<script>
export default {
  data() { return { count: 0 } },
  computed: { doubleCount() { return this.count * 2 } },
  mounted() { this.count = 10 },
}
</script>

<!-- AFTER: <script setup> -->
<template>
  <div>{{ doubleCount }}</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";

const count = ref(0);
const doubleCount = computed(() => count.value * 2);
onMounted(() => { count.value = 10; });
</script>

パフォーマンスチューニング実例

Reactの再レンダリング削減

// 元コード(再レンダリング多発)
function ProductList({ products }: { products: Product[] }) {
  const [keyword, setKeyword] = useState("");
  const filtered = products.filter(p => p.name.includes(keyword)); // 毎回再計算
  const sorted = filtered.sort((a, b) => a.price - b.price);       // 副作用あり!
  return (
    <ul>
      {sorted.map(p => (
        <ProductRow key={p.id} product={p} onSelect={(id) => console.log(id)} />
      ))}
    </ul>
  );
}

// Cmd+K: "再レンダリング削減 + 純粋関数化 + memo化"
const ProductRow = memo(function ProductRow({ product, onSelect }: Props) {
  return <li onClick={() => onSelect(product.id)}>{product.name}</li>;
});

function ProductList({ products }: { products: Product[] }) {
  const [keyword, setKeyword] = useState("");
  const sorted = useMemo(() => {
    return [...products]
      .filter(p => p.name.includes(keyword))
      .sort((a, b) => a.price - b.price);
  }, [products, keyword]);

  const handleSelect = useCallback((id: number) => console.log(id), []);

  return (
    <ul>{sorted.map(p => (
      <ProductRow key={p.id} product={p} onSelect={handleSelect} />
    ))}</ul>
  );
}

バンドルサイズ削減プロンプト

Composer:
"@file:next.config.js と @file:package.json を読み、
バンドルサイズを削減する提案を出してください。
- dynamic importできる重量ライブラリ
- tree shakable な代替パッケージ
- 不要なpolyfillの除去
具体的なdiffも含めて。"

他ツールとの比較

GitHub Copilot との違い

Copilotは「補完特化」、Cursorは「補完+リファクタ+Agent」までカバーします。詳細はAIコーディングツール比較で取り上げていますが、主観的には次のような棲み分けが現実解です。

copilot:
  best_for: [VSCodeを変えたくない人, 軽量補完だけ欲しい人]
  weak: [複数ファイル横断, Agent的自律実行]
cursor:
  best_for: [大規模リファクタ, AI主導の開発, Agent運用]
  weak: [JetBrains派にとってのエディタ移行コスト]

Claude Code との違い

Claude CodeはCLI/ターミナル主体、CursorはGUIエディタ主体です。設計議論はClaude Code、編集の手数はCursor、と並走させているチームもあります。

学習曲線の比較

VSCode経験者:
- Day 1: Tab補完だけで生産性+30%
- Week 1: Cmd+K, Cmd+L, @file をマスター
- Month 1: .cursorrules + Composer + Agent Modeを使い分け
- Month 3: チーム共通の.cursor/rules整備、Notepad運用

完全初心者:
- VSCode基礎 → Cursor固有機能、の順がおすすめ
- スクールで体系学習しながら触ると吸収が早い

学習リソースと次のステップ

習熟ロードマップ

Cursorは触らないと身につきません。週1で1テクニックを試す、を3か月続けるだけで世界が変わります。並行して、AI時代のエンジニアリング全般を体系学習したい人はオンラインスクールも選択肢です。

• プログラミングスクール完全比較2026 ── 体系学習と独学の組み合わせ
• プログラミング独学の限界と打開策2026 ── スクール活用判断
• AIコーディングツール完全比較2026 ── Cursor以外も俯瞰したい人へ

推奨スクール

• テックアカデミー: AI実務コースが充実。Cursorを使った開発を前提にしたカリキュラム化が進む
• 侍エンジニア: マンツーマンで現役エンジニアからCursor運用のレビューを受けられる
• DMM WEBCAMP: 転職保証付きで未経験からのキャリアチェンジ向け
• レバテックカレッジ: 大学生向け、学割で安価

明日からの3アクション

1. 今夜: Cursorをインストール+VSCode設定を移行
2. 今週: .cursorrules を書いて、ComposerでAPI Routeを1本追加
3. 今月: Agent Modeでマイグレーション1件、Bug Finderで自己レビュー

まとめ

Cursorは「補完だけのAI」ではなく、Tab・Cmd+K・Cmd+L・Composer・Agent・.cursorrules・@-mentionsという「呼び出し動線の階層」を理解した瞬間に生産性が跳ね上がります。本記事のコード例とプロンプトをそのまま貼れば、今日から実戦投入できます。

関連記事のAIコーディングツール完全比較と合わせて、自分の開発スタイルに最適な構成を組み立ててください。