Cursorインライン編集入門 - Ctrl+Kでその場で編集

はじめに

Cursorのインライン編集は、コードの特定箇所をその場で素早く編集できるAI駆動開発の強力な機能です。Ctrl+K（macOSではCmd+K）を押すだけで、選択したコードや現在のカーソル位置に対して自然言語で編集指示を出せます。

本記事では、インライン編集の基本操作から実践的な活用方法までを解説します。この記事を読むことで、以下のことができるようになります。

• インライン編集の基本操作とショートカットを習得できる
• 選択範囲に対して自然言語で編集指示を出せる
• 差分プレビューを確認し、適切に適用・却下できる
• 複数の編集候補から最適なものを選択できる
• インライン編集とTab補完を連携させた効率的なコーディングができる

実行環境と前提条件

実行環境

前提条件

• Cursorがインストールされ、アカウントでログイン済みであること
• 基本的なプログラミング知識があること
• プロジェクトフォルダを開いた状態であること

期待される結果

本記事の手順を完了すると、以下の状態になります。

• インライン編集を使ってコードをその場で素早く修正できる
• 差分プレビューを見て編集結果を判断し、適用・却下できる
• Tab補完と組み合わせた効率的な編集ワークフローが実践できる

インライン編集とは何か

インライン編集は、エディタ内で直接AIに編集を依頼できる機能です。Agentパネルを開く必要がなく、コーディングの流れを中断せずにAIの支援を受けられます。

インライン編集の特徴

インライン編集には以下の特徴があります。

• その場で編集: コードを選択し、自然言語で指示するだけで編集が完了する
• 差分プレビュー: 変更前後の差分を視覚的に確認できる
• 高速なフィードバック: Agentほど多機能ではないが、単一の編集タスクに特化して高速
• Tab補完との連携: インライン編集後にTab補完が追加の編集を提案

Agentとの使い分け

インライン編集とAgentは、それぞれ異なる用途に適しています。

単一のコードブロックを修正したい場合はインライン編集、プロジェクト全体に関わる変更や複雑な実装はAgentを使うのが効率的です。

インライン編集の基本操作

インライン編集を使った基本的なワークフローを解説します。

インライン編集の起動

インライン編集は以下のショートカットで起動します。

ショートカットを押すと、カーソル位置または選択範囲の近くにインライン入力欄が表示されます。この入力欄に自然言語で編集指示を入力します。

選択なしでの使用（コード生成）

コードを選択せずにCtrl+Kを押すと、その位置に新しいコードを生成できます。

1
2

入力例：
ユーザー情報を取得するfetchUser関数を作成して

この指示を入力してEnterを押すと、AIが適切な関数を生成します。

1
2
3
4
5
6
7
8

// 生成されるコードの例
async function fetchUser(userId: string): Promise<User> {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.statusText}`);
  }
  return response.json();
}

選択範囲への編集指示

コードを選択してからCtrl+Kを押すと、選択範囲に対して編集指示を出せます。

1
2
3
4

// 元のコード
function add(a, b) {
  return a + b;
}

上記の関数を選択し、以下の指示を入力します。

1
2

入力例：
TypeScriptに変換して、数値以外の引数にはエラーをスローして

AIが以下のようなコードを生成します。

1
2
3
4
5
6
7

// 編集後のコード
function add(a: number, b: number): number {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new TypeError('Arguments must be numbers');
  }
  return a + b;
}

差分プレビューの確認と適用

インライン編集の重要な機能が、変更前後の差分プレビューです。

差分表示の読み方

編集指示を送信すると、AIが生成した変更が差分形式で表示されます。

• 赤い背景: 削除される行
• 緑の背景: 追加される行
• 変更なし: 背景色なしの行

差分を確認することで、AIが意図通りの編集を行ったかを判断できます。

編集の適用と却下

差分プレビューを確認後、以下の操作で編集を確定または取り消します。

Tabキーで適用できるのは、Tab補完との一貫性を保つための設計です。

部分的な適用

Cursor 2.3以降では、生成された変更の一部のみを適用することも可能です。差分プレビュー内で特定の行を選択し、その行だけを適用できます。これは大きな変更の中から必要な部分だけを取り込みたい場合に便利です。

複数候補からの選択

インライン編集は、場合によって複数の編集候補を提案します。

候補の切り替え

複数の候補がある場合、以下のキーで切り替えられます。

各候補は異なるアプローチで同じ問題を解決している場合があります。すべての候補を確認し、最も適切なものを選択してください。

候補の比較

例えば、「この関数をリファクタリングして」という指示に対して、AIは以下のような異なる候補を提案することがあります。

1
2
3

候補1: 変数名を改善したバージョン
候補2: 処理を小さな関数に分割したバージョン
候補3: 最新のES6+構文に書き換えたバージョン

各候補の差分を確認し、プロジェクトの方針に最も合うものを選択します。

インライン編集の実践例

実際の開発シーンでのインライン編集の活用例を紹介します。

例1: エラーハンドリングの追加

1
2
3
4
5

// 元のコード
async function getData() {
  const response = await fetch('/api/data');
  return response.json();
}

選択して以下の指示を入力します。

1

エラーハンドリングを追加して、失敗時は空配列を返して

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 編集後のコード
async function getData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      console.error(`HTTP error: ${response.status}`);
      return [];
    }
    return response.json();
  } catch (error) {
    console.error('Failed to fetch data:', error);
    return [];
  }
}

例2: コードの最適化

1
2
3
4
5

# 元のコード
result = []
for item in items:
    if item.active:
        result.append(item.name)

選択して以下の指示を入力します。

1

リスト内包表記に変換して

1
2

# 編集後のコード
result = [item.name for item in items if item.active]

例3: テストコードの生成

テスト対象の関数を選択し、以下の指示を入力します。

1

この関数のJestテストを生成して、正常系と異常系をカバーして

関数のシグネチャと処理内容を分析し、適切なテストケースが生成されます。

例4: ドキュメンテーションの追加

1
2
3
4

// 元のコード
function calculateTax(price: number, rate: number): number {
  return price * (1 + rate);
}

選択して以下の指示を入力します。

1

JSDocコメントを追加して

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 編集後のコード
/**
 * 税込み価格を計算します。
 * @param price - 税抜き価格
 * @param rate - 税率（例: 0.1 = 10%）
 * @returns 税込み価格
 */
function calculateTax(price: number, rate: number): number {
  return price * (1 + rate);
}

インライン編集とTab補完の連携

インライン編集とTab補完を組み合わせることで、さらに効率的な編集が可能になります。

連鎖的な編集フロー

インライン編集を適用した後、Tab補完が追加の編集を提案することがあります。

1. インライン編集で関数のシグネチャを変更
2. Tab補完が関数の呼び出し箇所の修正を提案
3. Tabを押して連鎖的に修正を適用

この連携により、一箇所の変更に伴う関連箇所の修正を効率的に行えます。

編集後のTab補完の活用

インライン編集で構造を変更した後、Tab補完が以下のような追加提案を行います。

• 新しく追加したパラメータのデフォルト値
• 変更した型に合わせた変数宣言の修正
• インポート文の追加

flowchart LR
    A[コードを選択] --> B[Ctrl+Kで指示]
    B --> C[差分プレビュー確認]
    C --> D{適用?}
    D -->|Yes| E[Tabで適用]
    D -->|No| F[Escで却下]
    E --> G[Tab補完が追加提案]
    G --> H[連鎖的に修正]

インライン編集のベストプラクティス

インライン編集を効果的に活用するためのベストプラクティスを紹介します。

具体的な指示を出す

曖昧な指示よりも具体的な指示の方が、意図通りの結果が得られます。

1
2
3
4
5

悪い例：
このコードを直して

良い例：
このforループをArray.mapに変換して、結果をconst宣言の変数に代入して

選択範囲を適切に設定する

編集したい範囲を正確に選択することで、関係ない部分への影響を防げます。

• 関数全体を編集したい場合は関数全体を選択
• 特定の行だけ変更したい場合はその行のみを選択
• 複数の関連する要素を編集したい場合はすべてを選択

差分を必ず確認する

AIは常に完璧ではありません。適用前に必ず差分を確認し、以下の点をチェックしてください。

• 意図しない変更が含まれていないか
• 既存のロジックが破壊されていないか
• コーディング規約に沿っているか

トラブルシューティング

インライン編集で発生しがちな問題と解決策を紹介します。

インライン編集が起動しない

• ファイルが読み取り専用になっていないか確認する
• Cursorの設定でインライン編集が有効になっているか確認する
• ネットワーク接続を確認する

期待と異なる結果が生成される

• 指示をより具体的にする
• 選択範囲を調整する
• 別のAIモデルを試す（設定から変更可能）

差分プレビューが表示されない

• ファイルを一度保存してから再試行する
• Cursorを再起動する
• 拡張機能の競合がないか確認する

まとめ

Cursorのインライン編集は、AI駆動開発において素早いコード修正を実現する重要な機能です。本記事で解説した内容をまとめます。

• Ctrl+Kでインライン編集を起動し、自然言語で編集指示を出せる
• 選択範囲に対して編集を適用し、差分プレビューで確認できる
• TabまたはCtrl+Enterで適用、Escで却下する
• 複数候補がある場合は**Alt+]/[**で切り替えて最適なものを選択
• Tab補完と連携することで、連鎖的な編集が効率的に行える

インライン編集をマスターすることで、日常的なコーディング作業のスピードが大幅に向上します。まずは簡単な編集から試し、徐々に複雑なタスクに挑戦してください。

参考リンク

• Cursor公式ドキュメント
• Cursor Features
• Cursor変更履歴
• Cursorフォーラム