Cursorのマルチカーソル編集とAI補完を組み合わせた高速リファクタリング術

「リファクタリングに一日かけた」経験、ありませんか？

コードベースが大きくなるにつれて、リファクタリングにかかる時間も比例して増えていきます。関数名を一括変換したい、古いAPI呼び出しを新しい書き方に統一したい、コンポーネントの構造を整理したい……こういった作業は地味に時間がかかり、ミスも起きやすいですよね。

AIコーディングエディタ「Cursor」には、単なるAI補完機能だけでなく、VSCodeから引き継いだマルチカーソル編集機能があります。そしてこの2つを組み合わせると、リファクタリングの速度が劇的に変わります。

この記事では、Cursorのマルチカーソル編集とAI補完・インラインチャットを連携させた、実践的な高速リファクタリング術を具体的な手順と一緒に紹介します。普段Cursorを使っている方も「そんな使い方があったのか」と感じるテクニックが見つかるはずです。

---

マルチカーソル編集の基本を押さえる

まず、マルチカーソル編集の基本的な操作を整理しておきましょう。CursorはVSCodeをベースに構築されているため、VSCodeのマルチカーソルショートカットがそのまま使えます。

主要なショートカット一覧

操作	Mac	Windows / Linux
任意の場所にカーソルを追加	Option + クリック	Alt + クリック
選択中の単語と同じ単語を順番に選択	Cmd + D	Ctrl + D
ファイル内の同じ単語を全選択	Cmd + Shift + L	Ctrl + Shift + L
上下にカーソルを追加	Cmd + Option + ↑/↓	Ctrl + Alt + ↑/↓
選択範囲を矩形（ボックス）選択	Option + Shift + ドラッグ	Alt + Shift + ドラッグ
全カーソルを解除	Escape	Escape

これらのショートカットは、Cursorの設定画面（Cmd + ,）の「Keyboard Shortcuts」からカスタマイズすることもできます。

マルチカーソルが有効な場面

• 同じ変数名・関数名を複数箇所で同時に変更したい
• 複数行の先頭や末尾に同じ文字列を追加したい
• JSONやCSVなどの構造化データを一括で編集したい
• importパスをまとめて変更したい

単純な一括置換（Cmd + H）とは違い、文脈を見ながら選択範囲をコントロールできるのがマルチカーソル編集の強みです。

---

AI補完とマルチカーソルの連携テクニック

ここからが本題です。マルチカーソルとCursorのAI機能を組み合わせると、単なる一括編集を超えた高度なリファクタリングが可能になります。

テクニック①：同パターンの繰り返し処理をAIに展開させる

例えば、以下のような古い書き方のPromise処理が複数あるとします。

// リファクタリング前（古いコールバックスタイル）
getUser(userId, function(err, user) {
  if (err) {
    console.error('Error:', err);
    return;
  }
  processUser(user, function(err, result) {
    if (err) {
      console.error('Error:', err);
      return;
    }
    saveResult(result, function(err) {
      if (err) console.error('Error:', err);
    });
  });
});

このような構造が10箇所以上あるファイルで作業する場合、次の手順を使います。

手順：

1. まず1つの関数ブロックを選択して Cmd + K（インライン編集）を起動
2. 「このコールバックスタイルをasync/awaitに書き換えてください」と指示
3. Cursorが変換後のコードを提案したら確認して適用（Tab）
4. 変換後のパターンをコピーして、残りの箇所は Cmd + D で選択 → まとめてAI補完で変換

ポイントは「1箇所をAIで完璧に変換してから、パターンを他に展開する」という流れです。最初からすべてをAIに任せるより、人間がパターンを確認した上で展開するほうがミスが少なくなります。

テクニック②：矩形選択でプレフィックス・サフィックスを一括追加

TypeScriptプロジェクトで型定義を追加したいときに便利な技です。

// 変更前：型アノテーションがない関数リスト
const fetchUser = async (id) => { ... }
const fetchPost = async (id) => { ... }
const fetchComment = async (id) => { ... }
const fetchTag = async (id) => { ... }

各関数の (id) 部分を (id: string) に一括変換したい場合：

1. id の部分を矩形選択（Option + Shift + ドラッグ）で縦に選択
2. : string と入力すると全カーソル位置に一括入力
3. その後 Cmd + K でさらに細かい調整をAIに依頼

テクニック③：Cmd+Lチャットで選択範囲のコードを分析してから編集

Cursorの Cmd + L で開くサイドバーチャットは、選択したコードに対して質問・変換指示が出せます。

# リファクタリング前
result = []
for item in items:
    if item['status'] == 'active':
        if item['age'] > 18:
            result.append({
                'name': item['name'],
                'email': item['email']
            })

このコードを選択した状態で Cmd + L を起動し、「このfor文をリスト内包表記またはフィルター関数を使って書き直してください。Pythonらしい書き方にしてほしい」と指示すると：

# リファクタリング後（AIが提案）
result = [
    {'name': item['name'], 'email': item['email']}
    for item in items
    if item['status'] == 'active' and item['age'] > 18
]

チャット経由の変換はインライン編集（Cmd + K）と違い、提案内容をじっくり確認してから「Apply」ボタンで適用できるので、複雑なロジック変換に向いています。

---

実践：大規模ファイルのリファクタリング手順

実際の開発シナリオを想定して、より実践的な手順を見ていきましょう。ここでは「Reactコンポーネントのクラスコンポーネント→関数コンポーネント変換」を例に取り上げます。

シナリオ：500行のクラスコンポーネントを関数コンポーネントに変換する

ステップ1：全体像をAIに把握させる

まず、ファイル全体を開いた状態で Cmd + L を起動し、次のように質問します：

このファイルのクラスコンポーネントを関数コンポーネントに変換したいです。
変換に際して注意すべき点（ライフサイクルメソッド、状態管理、副作用など）を
箇条書きで整理してください。変換はまだしなくていいです。

AIがリスク箇所を一覧化してくれるので、これを元に変換計画を立てます。

ステップ2：ライフサイクルメソッドをHooksに変換

componentDidMount、componentDidUpdate、componentWillUnmount などを選択して Cmd + K で変換します。

// 変換前
componentDidMount() {
  this.fetchData();
  window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

// 変換後（AIが提案）
useEffect(() => {
  fetchData();
  window.addEventListener('resize', handleResize);
  
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

ステップ3：this.state の参照をマルチカーソルで一括変換

Cmd + Shift + L で this.state. をすべて選択し、対応するstate変数名に変換します。ただし全部が同じ変換ではないケースが多いので：

1. this.state. を Cmd + F で検索
2. 「すべて選択」で一覧表示させ、目視確認
3. グループ別に Cmd + D で選択して個別に変換

ステップ4：レンダー結果をAIで最終確認

変換完了後、ファイル全体を選択して Cmd + L で「変換後のコードに問題がないか確認してください。Hooksのルール違反、依存配列の漏れ、不要なre-renderを引き起こすコードなどをチェックしてほしい」と依頼します。

この最終レビューをAIに任せることで、見落としがちなHooksの依存配列問題なども事前に発見できます。

---

Cursorのタブ補完をリファクタリングに活かす

Cursorには「Tab補完」と呼ばれる、次に書くべきコードを予測して提案する機能があります（公式ドキュメント参照）。これをリファクタリング中に活用する方法も押さえておきましょう。

パターン学習によるTab補完の活用

変換パターンを1〜2箇所手動で行うと、Cursorは残りの箇所を予測して補完候補を出してきます。

例えば、以下のような古いスタイルのCSS-in-JSを新しいライブラリ記法に移行する場合：

// 変換前（古い記法）
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

// 変換後（新しい記法）
const Container = styled.View`
  flex: 1;
  background-color: #fff;
`;

const Title = styled.Text`
  font-size: 24px;
  font-weight: bold;
`;

最初の container → Container の変換を手動で行ったあと、次の title を入力し始めると、Cursorが同じパターンの変換を提案してきます。Tab を押すだけで次々と変換を進められます。

Cursorのルール設定でリファクタリング方針を共有する

チームでリファクタリングを進める場合、.cursor/rules/ ディレクトリにプロジェクトルールを記述することで、AI補完の挙動を統一できます。

# .cursor/rules/refactoring.mdc

## リファクタリング方針

- コールバックスタイルは必ずasync/awaitに変換する
- クラスコンポーネントは関数コンポーネントに書き換える
- any型の使用は禁止。適切な型を推論・定義する
- console.logはロギングライブラリ（winston等）に置き換える
- マジックナンバーは定数として定義する（例: const MAX_RETRY = 3）

## 命名規則
- コンポーネント: PascalCase
- 関数・変数: camelCase
- 定数: UPPER_SNAKE_CASE
- 型定義: PascalCase（プレフィックスTは不要）

このルールファイルを設定しておくと、Cmd + K や Cmd + L での指示がより一貫した方針に沿って実行されるようになります。

---

よくあるミスと対処法

ミス①：AI提案を確認せずに全適用してしまう

マルチカーソル編集とAI補完の組み合わせは強力ですが、提案内容を必ず確認してから適用するのが鉄則です。特に：

• 変数名が文脈と合っていない
• 型定義が誤っている
• import文が自動追加されていない

といったケースが起きることがあります。Cmd + K の場合は Diffビューで変更前後を確認してから Tab で適用、Cmd + L の場合は「Apply」前にコードを読む習慣をつけましょう。

ミス②：マルチカーソルで意図しない箇所まで選択してしまう

Cmd + Shift + L（全選択）は便利ですが、コメント内や文字列内の同名テキストまで選択してしまうことがあります。

対処法：

• Cmd + D で1つずつ追加して目視確認しながら選択する
• 選択したくない箇所は Cmd + K（選択解除）で除外する
• 正規表現検索（Cmd + F → 正規表現モード）でより精密に絞り込む

ミス③：大きなリファクタリングをGitなしで進める

AIによるリファクタリングは速い分、戻すのが難しい変更が一気に蓄積します。

# リファクタリング開始前に必ずブランチを切る
git checkout -b refactor/class-to-function-components

# こまめにコミットして安全網を作る
git add -p  # 変更を確認しながら部分的にステージング
git commit -m "refactor: UserCard を関数コンポーネントに変換"

機能単位・ファイル単位でこまめにコミットしながら進めることで、問題が起きたときに安全に戻れます。

---

効率化のまとめ：組み合わせフローチャート

以下に、状況別の使い分けをまとめます：

リファクタリングの内容	推奨する手法
同じ変数名を複数箇所で変更	Cmd + Shift + L → マルチカーソル編集
1つのコードブロックを書き直す	Cmd + K（インライン編集）
複雑なロジックの変換・確認	Cmd + L（サイドバーチャット）
複数行の先頭・末尾への追記	矩形選択 + 一括入力
繰り返しパターンの展開	1箇所手動変換 → Tab補完で展開
チーム全体の方針統一	.cursor/rules/ にルールを記述

---

まとめ：次のリファクタリングで試してほしいこと

Cursorのマルチカーソル編集とAI補完の組み合わせは、慣れると手放せないほど強力なリファクタリング手法です。

今日の記事でお伝えしたポイントを振り返ります：

1. マルチカーソルの基本ショートカットを覚える：Cmd + D、Cmd + Shift + L、矩形選択の3つだけでも大きく変わります
2. AIへの指示は「1箇所確認してからパターン展開」：いきなり全体を任せず、まず1箇所で結果を確認する
3. Cmd + K は小さな変換、Cmd + L は大きな判断に：インラインとサイドバーチャットを使い分ける
4. .cursor/rules/ でチームの方針を統一：AIへの指示を属人化させない
5. Gitブランチ＋こまめなコミットで安全網を張る：リファクタリングは必ず戻れる状態で進める

次のリファクタリング作業で、ぜひ一つひとつ試してみてください。最初は「マルチカーソルで5箇所一括変換してみる」だけでも、作業スピードの違いを実感できるはずです。

Cursorをさらに使いこなしたい方は、公式ドキュメントも併せてチェックしてみてください。新機能が定期的に追加されており、AIとエディタの連携がどんどん進化しています。

---

参考資料

• Cursor 公式ドキュメント - Cursorの全機能リファレンス。インライン編集・チャット・Tab補完の詳細な設定方法が記載されています。
• VSCode マルチカーソル操作ガイド（Microsoft公式） - CursorのベースとなるVSCodeのマルチカーソル操作について詳しく解説されています。
• Cursor Rules 公式ドキュメント - .cursor/rules/ ディレクトリを使ったプロジェクトルールの設定方法の公式ガイドです。
• Cursor 公式ブログ - 新機能のリリース情報や活用事例が定期的に公開されています。
• VSCode キーボードショートカット一覧（Mac） - CursorでもそのまE使えるVSCodeのショートカット一覧PDF（Microsoft公式）。