【Cursor完全ガイド】AIエディタの使い方・設定・TypeScript活用・GitHub Copilotとの比較まで徹底解説

Cursorは、VS Codeをベースに開発されたAIネイティブなコードエディタです。VS Codeの拡張機能ではなく独立したIDEとして動作し、AIによるコード補完・複数ファイルの一括編集・コードベース全体への質問など、AIを前提に設計された機能が揃っています。Stripe・OpenAI・NVIDIAなど多くのテック企業の開発者が使い始めており、「Copilotの次のステップ」として注目されています。

この記事では、Cursorのインストールから実務レベルの活用までを一気通貫で解説します。VS Codeからの移行方法・各機能の使いどころ・TypeScript開発での実践テクニック・プロジェクト規約の自動反映・GitHub Copilotとどう使い分けるかまで網羅します。

CursorとはどんなAIエディタか

CursorはVS Codeのソースコードをフォーク（複製・改変）して作られています。そのためVS Codeとほぼ同じ操作感・拡張機能・テーマが使えますが、AIとの連携が拡張機能ではなくエディタ本体に深く組み込まれている点が異なります。

VS Codeとの互換性が高いため、使い慣れた操作感のままAIを強化できるのが強みです。既存のVS Code設定・拡張機能・キーバインドをほぼそのまま持ち込めます。

料金プランの選び方

インストールとVS Codeからの移行

インストール手順

1. cursor.com にアクセスし「Download」をクリック
2. Mac：ダウンロードした .dmg を開いてApplicationsフォルダにドラッグ
3. Windows：インストーラーを実行してセットアップウィザードを完了
4. 初回起動時にアカウント作成（GitHubアカウントでも登録可）

VS Codeの設定を1クリックで移行する

初回起動時に「VS Codeの設定をインポートしますか？」というダイアログが表示されます。「Import from VS Code」を選ぶと、拡張機能・キーバインド・テーマ・設定が自動で移行されます。後から移行する場合は以下の手順で行えます。

1. Ctrl + Shift + P（Mac: Cmd + Shift + P）でコマンドパレットを開く
2. 「Cursor Settings」または Ctrl + Shift + J で設定画面を開く
3. 「General」→「VS Code Import」から「Import」をクリック

推奨初期設定

インストール後、以下の設定を済ませておくとスムーズに使い始められます。Ctrl + Shift + J（Mac: Cmd + Shift + J）で Cursor Settings を開いてください。

Tab補完（Cursor Tab）の使い方

Cursor TabはCopilotの補完に近い機能ですが、直前の編集・カーソル位置・ファイル全体の構造を組み合わせて補完するため、文脈をより深く理解した提案が出やすいとされています。

Cmd+K（インライン編集）の使い方

Ctrl + K（Mac: Cmd + K）を押すと、その場にプロンプト入力欄が出現して、選択箇所の書き換えや新しいコードの生成ができる機能です。コードを選択してから押すと選択箇所を書き換え、何も選択せずに押すと新しいコードをカーソル位置に挿入します。チャットパネルを開かずにピンポイントで操作できます。

代表的な使い方

Cmd+K の操作フロー

1. 修正したいコードを選択
2. Ctrl + K（Mac: Cmd + K）を押す
3. プロンプト欄に指示を入力してEnter
4. 提案されたコードをdiff形式でプレビュー確認
5. Ctrl + Enter で受け入れ、Ctrl + Backspace で拒否

ターミナルで Ctrl + K を押すと、ターミナル内でコマンドをAIに生成させる機能も使えます。「現在のディレクトリのTypeScriptファイルをすべてコンパイルするコマンド」のように頼めます。

Composerで複数ファイルを一括編集する

Composerは複数ファイルにまたがる変更を自然言語で指示できる機能です。「新しいAPIエンドポイントを追加して、型定義・サービス・コントローラー・テストも一緒に作って」といった大きな変更を、ファイルをまたいで実行できます。

Composerの開き方とモード

Ctrl + I（Mac: Cmd + I）でComposerパネルが開きます。画面右側にチャット形式のパネルが出現し、プロジェクト内のファイルを参照しながら編集を進められます。

Composerの使い方手順

1. Ctrl + I（Mac: Cmd + I）でComposerを開く
2. 関係するファイルを @ファイル名 で参照に追加する（省略可）
3. 変更内容を具体的に指示する
4. AIが提案した変更をファイルごとにdiffで確認
5. 「Accept All」で全変更を適用、または個別に承認・拒否

精度が上がる指示の書き方

Composerに指示するときは、「何を・どのように・既存のどこと整合させて」を明示するほど精度が上がります。

Chat機能と@参照でコードベースに質問する

Chat（Ctrl + L / Mac: Cmd + L）はコードを変更せずに質問・相談・解説を受けられる機能です。Composerとの違いは「自動でコードを書き換えない」点で、設計の相談・エラーの原因調査・仕様の確認などに使います。

@記法でコンテキストを指定する

ChatやComposerで @ を入力すると参照メニューが表示されます。これによりAIが正確なコンテキストを持った状態で回答できます。

@Docs：公式ドキュメントをAIに読ませる

@Docs は特に便利な機能です。TypeScript・React・Next.jsなどの公式ドキュメントURLを登録しておくと、最新の公式情報に基づいた回答が得られます。ハルシネーション（誤情報）の頻度が下がり、「このAPIは最新バージョンで廃止されていませんか？」のような確認にも使えます。

1. Cursor Settingsを開く（Ctrl + Shift + J）
2. 「Features」→「Docs」タブを選択
3. 「+ Add new doc」をクリックしてURLを入力（例：typescriptlang.org/docs）
4. インデックスが作成されると @Docs で参照できるようになる

.cursor/rules でプロジェクト規約をAIに覚えさせる

Cursorにはプロジェクト固有のAIルールを定義できる仕組みがあります。チームの命名規則・禁止パターン・使用ライブラリなどを書いておくと、ComposerでもChatでもすべての回答・生成コードに自動で反映されます。

ファイルの配置方法

プロジェクトルートに .cursor/rules/ フォルダを作り、.mdc 拡張子のファイルを配置します。ファイルの先頭にfrontmatterを書くことで、適用するファイルパターン（glob）を指定できます。

---
description: TypeScript プロジェクト全体のコーディング規約
globs: **/*.ts, **/*.tsx
alwaysApply: true
---

# TypeScript コーディング規約

## 型定義
- `any` 型は絶対に使わない。代わりに `unknown` を使い、型ガードで絞り込む
- すべての関数に引数・戻り値の型注釈を必須とする
- `interface` より `type` を優先する（ただし拡張が必要な場合は `interface`）
- ジェネリクスの型変数名は意味のある名前にする（`T` 単体より `TItem`・`TResponse`）

## 命名規則
- 変数・関数：camelCase
- 型・インターフェース・クラス：PascalCase
- 定数：UPPER_SNAKE_CASE
- ファイル名：kebab-case

## エラーハンドリング
- `throw` は使わず Result 型パターンを使う
  ```ts
  type Result<T, E = Error> = { ok: true; value: T } | { ok: false; error: E };
  ```
- 外部APIのエラーは必ず catch して意味のあるメッセージに変換する

## 禁止事項
- `eval()` および `new Function()` の使用禁止
- `as any` キャストの禁止
- `console.log()` を本番コードに残さない（`console.error()` は許可）

---
description: Vitest テスト規約
globs: **/*.test.ts, **/*.spec.ts
alwaysApply: false
---

# テスト規約

## フレームワーク
- テストフレームワーク：Vitest
- アサーション：`expect` を使う（`assert` は使わない）

## 構造
- `describe` でテスト対象の関数・クラス名をグループ化
- `it` の説明は「〜すると〜になる」の形式で日本語で書く
- 正常系・異常系・境界値のすべてをカバーする

## モック
- `vi.mock()` でモジュールをモック
- 外部APIは必ずモックし、実際のネットワークアクセスをしないこと

## 禁止
- `it.only()` をコミットに含めない
- `it.skip()` は TODO コメントとセットで書く

TypeScript開発での実践活用テクニック

テクニック1：型定義とインターフェースから実装を生成させる

型定義を先に書いてからComposerに「この型を実装するクラスを作って」と指示すると、TypeScriptの型情報を最大限活用した実装が生成されます。型ファースト → 実装の順番がCursorとの相性がよいです。

// 1. まず型・インターフェースを書く
export interface CacheStore<T> {
  get(key: string): T | undefined;
  set(key: string, value: T, ttlSeconds?: number): void;
  delete(key: string): boolean;
  clear(): void;
  size(): number;
}

// 2. Composerに「CacheStoreを実装するMemoryCacheクラスを作って。
//    TTL（有効期限）を持ち、期限切れのキーは自動削除すること」と指示
// → 型に準拠した実装が自動生成される

テクニック2：エラーメッセージをそのままComposerに貼る

TypeScriptのコンパイルエラーやランタイムエラーのメッセージをそのままComposerのプロンプトに貼り付けるだけで、原因の説明と修正コードを一緒に提案してくれます。特に型エラーは長いメッセージでも正確に解釈してくれます。

// こんなエラーメッセージをComposerに貼る：
// Type '{ id: string; name: string; }' is not assignable to type 'User'.
//   Property 'email' is missing in type '{ id: string; name: string; }'
//   but required in type 'User'.  ts(2741)

// Composerの指示例：
// 「以下のエラーを修正して。@src/types/user.ts の型定義も参照して。
//  [エラーメッセージをペースト]」

テクニック3：既存コードのパターンを学習させてから生成

プロジェクト内の既存コードをComposerに参照させながら「同じパターンで作って」と指示すると、プロジェクトの一貫したスタイルを維持したコードが生成されます。特にリポジトリパターン・サービス層・エラーハンドリングなどで効果的です。

// Composerへの指示：
// 「@src/repositories/user.repository.ts と同じパターンで、
//  Productエンティティの CRUD リポジトリを作成して。
//  型定義は @src/types/product.ts を参照すること」

// Cursorが既存のUserRepositoryの構造を読んで、
// 同じパターン・エラーハンドリング・型定義スタイルでProductRepositoryを生成する

テクニック4：テスト駆動でAIに実装させる

テストを先に書いてからComposerに「このテストが通る実装を書いて」と指示するテスト駆動開発（TDD）との相性が非常によいです。テストがAIへの仕様書として機能するため、意図した動作の実装が得られやすくなります。

// 1. まずテストを書く（Composerの前に）
describe("formatJapaneseDate", () => {
  it("Dateオブジェクトを日本語の日付文字列に変換する", () => {
    const date = new Date("2026-03-23");
    expect(formatJapaneseDate(date)).toBe("2026年3月23日");
  });

  it("月・日が1桁の場合はゼロパディングしない", () => {
    const date = new Date("2026-01-05");
    expect(formatJapaneseDate(date)).toBe("2026年1月5日");
  });

  it("無効な日付はnullを返す", () => {
    expect(formatJapaneseDate(new Date("invalid"))).toBeNull();
  });
});

// 2. Composerに指示：
// 「@src/utils/date.test.ts のテストをすべて通す
//  formatJapaneseDate 関数を src/utils/date.ts に実装して」

GitHub CopilotとCursorの使い分け方

「CopilotかCursorか」という議論をよく見かけますが、どちらが優れているかではなく、何を重視するかで選ぶのが正解です。両者のそれぞれの強みを理解して使い分けましょう。

よくあるトラブルと対処法

.cursorignore で大きなファイルをAIの対象外にする

ビルド成果物・node_modules・大きなデータファイルがプロジェクトに含まれていると、インデックスが遅くなりComposerの品質も下がります。.cursorignore ファイルに除外対象を書いておきましょう。

# ビルド成果物
dist/
build/
.next/
out/

# 依存関係
node_modules/

# 大きなデータファイル
*.csv
*.parquet
*.sqlite

# 機密情報
.env
.env.local
secrets/

まとめ

Cursorは、VS Codeの操作感を保ちながらAIを開発フローの中心に据えたエディタです。Tab補完・インライン編集・Composer・Chatとそれぞれ使い分けることで、作業の性質に応じた最適なAI活用ができます。

AIエディタの活用と合わせて、APIからAIを直接呼び出す実装も学んでおくと応用が広がります。Claude APIをTypeScriptで使う方法やOpenAI APIをTypeScriptで使う方法も参考にしてください。

よくある質問