【入門編】Cursorで学ぶリファクタリング術：レガシーコードをモダンに書き換えるAI活用法 – 軽量・高機能テキストエディタ生産性向上バイブル

こんにちは！日々、複雑なコードや終わりのないバグ修正と格闘していませんか？

新しいプロジェクトならまだしも、前任者が残した「何をしているのかよくわからない古いコード（レガシーコード）」を直すのって、本当に気が重くなりますよね。「ここを書き換えたいけれど、動かなくなったらどうしよう……」と不安になりながら、恐る恐る手を加えている方も多いはずです。

もし、「この古いコードを、最新の書き方に綺麗に書き換えて、おまけにテストコードまで作ってよ」と一言お願いするだけで、数秒で完璧なコードを提示してくれる相棒がいたら、あなたの毎日のコーディングはどう変わるでしょうか？

今回は、いま世界中の開発者が夢中になっているAI特化型エディタ「Cursor（カーソル）」を使って、レガシーコードをモダンに生まれ変わらせるリファクタリング術を、優しく丁寧に紐解いていきます。

これをマスターすれば、毎日のコーディングが劇的に楽になりますよ。さあ、一緒に新しい開発体験の扉を開けましょう！

—

1. Cursorとは何か？なぜ今、レガシーコード改修の最強兵器なのか

私たちが普段使っているVS Code（Visual Studio Code）。その使い慣れた操作感や拡張機能をそのまま引き継ぎつつ、「最初からAIが脳みそとして深く組み込まれている」のがCursorです。

従来のGitHub Copilotなどが「コードの続きを予測して補完する」のが得意だったのに対し、Cursorはエディタ自体がプロジェクト全体のファイル構造やコードの意味を完全に理解しています。

そのため、レガシーコードの改修において以下のような圧倒的なアドバンテージを発揮します。

文脈の理解力: 「この関数だけでなく、関連する他のファイルも含めてどう動いているか」を理解した上でリファクタリングを提案してくれる。
一括自動書き換え（Composer機能）: 複数のファイルにまたがる修正も、AIが指示通りに一気に書き換えてくれる。
安全性の確保: リファクタリングと同時に「テストコード」を自動生成させ、動作の担保を瞬時に行える。

単なる「文字入力アシスタント」ではなく、「優秀なペアプログラマーが隣に座ってくれている」、それがCursorの正体です。

—

2. 導入と基礎セットアップ：最短でAIを動かす準備

それでは、実際にCursorをあなたの開発環境に迎え入れましょう。インストールから、AIを最大限に活かすための基本設定まで一緒に進めていきます。

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

公式サイト（[cursor.com](https://www.cursor.com/)）から、お使いのOS（Mac / Windows / Linux）に合わせたインストーラーをダウンロードし、インストールします。

起動すると、最初に行うべきなのが「VS Codeからの環境引き継ぎ」です。
画面の指示に従うか、初回起動時のポップアップで「Import extensions and settings（拡張機能と設定をインポート）」を選択してください。これだけで、今まで使っていたテーマやショートカット、拡張機能がそのままCursorに引き継がれます。まさに「今日からすぐ使える」状態です。

Step 2: AIの頭脳を設定する（モデル選択の基本）

Cursorの右上の歯車アイコン（Settings）から `Cursor Settings` を開き、AIの設定を確認しましょう。

Cursorでは、裏側で動かすAIモデル（Claude 3.5 SonnetやGPT-4oなど）を選択できます。
レガシーコードの解析や、複雑なロジックのモダン化においては、現時点で圧倒的なコード理解力を誇る `Claude 3.5 Sonnet` を選択しておくことを強くおすすめします。

—

3. 実践！レガシーコードをモダンに書き換える手順

ここからが本番です。架空の「古く、読みにくいJavaScript（ES5スタイル）のコード」を題材に、Cursorを使って最新のモダンな書き方（ES6+）へ生まれ変わらせてみましょう。

対象となるレガシーコード (`legacy_user.js`)

以下のコードは、数年前によく見られた、コールバック地獄や古い構文（`var`や古い関数定義）が混ざったレガシーなコードです。

// legacy_user.js
// ユーザー情報を古いスタイルで取得して処理する関数
function fetchUserData(userId, callback) {
var http = new XMLHttpRequest();
http.open(“GET”, “https://api.example.com/users/” + userId, true);
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
var data = JSON.parse(http.responseText);
// 年齢が20歳以上かチェックして結果を返す
var isAdult = false;
if (data.age >= 20) {
isAdult = true;
}
callback(null, {
name: data.first_Name + ” ” + data.last_Name,
adult: isAdult
});
} else if (http.readyState == 4) {
callback(“Error fetching data”, null);
}
};
http.send();
}

このコード、読みにくい上に非同期処理がコールバックになっていて、今のモダンな開発環境では少し扱いにくいですよね。これをCursorの強力な機能「Composer（Ctrl+I または Cmd+I）」を使って書き換えます。

Step 3: CursorのComposer機能で一発リファクタリング

1. エディタ上で `Ctrl + I` （Macの場合は `Cmd + I`）を押すと、画面上部にAIへの指示を入力するチャットボックス（Composer）が現れます。
2. 以下のように、AIに対して明確にお願い（プロンプト）を入力します。

> プロンプトの例:
> `legacy_user.js` を読み込んで、以下の要件でモダンにリファクタリングしてください。
> 1. `XMLHttpRequest` を使った古い実装を、最新の `fetch` API と `async/await` を使った書き方に変更する。
> 2. 変数宣言は `var` を廃止し、`const` や `let` を適切に使用する。
> 3. コールバック地獄を解消し、Promiseベースのクリーンな非同期関数にする。
> 4. プロパティ名（snake_case）をキャメルケース（camelCase）に統一する。

指示を入力してEnterを押すと、Cursorがファイルのコードを解析し、リアルタイムで目の前でコードを書き換えていきます。

リファクタリングされたモダンなコード (`modern_user.js`)

AIが生成してくれた結果がこちらです。

// modern_user.js
/

指定されたユーザーIDの情報を取得し、モダンな形式で返却する
@param {string} userId – ユーザーID
@returns {Promise<{name: string, isAdult: boolean}>} ユーザー情報

/
export async function fetchUserData(userId) {
try {
// fetch API と async/await を使用して直感的な非同期処理に書き換え
const response = await fetch(`https://api.example.com/users/${userId}`);

if (!response.ok) {
throw new Error(`Error fetching data: ${response.statusText}`);
}

const data = await response.json();

// 三項演算子やテンプレートリテラルを用いて簡潔に記述
return {
name: `${data.first_name} ${data.last_name}`,
isAdult: data.age >= 20
};
} catch (error) {
// エラーハンドリングを明確に分離
console.error(“Failed to fetch user data:”, error);
throw error;
}
}

見違えるほど美しく、読みやすくなりましたね！ `var` は消え、`async/await` によるモダンな非同期処理になり、JSDoc（型のドキュメント）まで自動で付与されています。

—

4. 品質を担保する：テストコードの生成とAIによるコードレビュー

「きれいに書き換わったのは分かったけれど、本当に正しく動くの？」という不安がエンジニアの常です。ここでもCursorの力を借りて、一瞬でテストコードを生成し、品質を担保しましょう。

Step 4: テストコードの自動生成

先ほど書き換えた `modern_user.js` をエディタで開いた状態で、再度チャット（`Ctrl+L` または `Cmd+L`）を開き、以下のように話しかけます。

> プロンプトの例:
> この `modern_user.js` に対するJestを使った単体テストコードを書いてください。正常系（20歳以上の場合）と、APIエラー時の異常系のテストケースを含めてください。

すると、AIがテストフレームワーク（Jest）に合わせたテストコードを即座に生成してくれます。

// modern_user.test.js
import { fetchUserData } from ‘./modern_user.js’;

// グローバルな fetch をモック化
global.fetch = jest.fn();

describe(‘fetchUserData’, () => {
beforeEach(() => {
jest.clearAllMocks();
});

test(‘正常系: 20歳以上のユーザー情報を正しく取得できること’, async () => {
// モックのレスポンスを設定
const mockData = {
first_name: ‘Taro’,
last_name: ‘Yamada’,
age: 25
};

fetch.mockResolvedValueOnce({
ok: true,
json: async () => mockData,
});

const result = await fetchUserData(‘123’);

expect(result).toEqual({
name: ‘Taro Yamada’,
isAdult: true
});
});

test(‘異常系: APIリクエストが失敗した際にエラーがスローされること’, async () => {
fetch.mockResolvedValueOnce({
ok: false,
statusText: ‘Not Found’
});

await expect(fetchUserData(‘999’)).rejects.toThrow(‘Error fetching data: Not Found’);
});
});

このように、リファクタリングとセットでテストコードまで数秒で手に入るため、レガシーコード改修につきものの「動かなくなる恐怖」から完全に解放されます。

—

5. おわりに：AI時代のエディタで、開発の主導権を取り戻す

今回は、Cursorを使ったレガシーコードのリファクタリング術について、具体的な手順とともに解説しました。

古いコードを読み解き、手作業で慎重に書き換え、テストを書き……とやっていたら数時間、あるいは数日かかる作業が、Cursorを相棒にすることで文字通り「数分」で完了してしまいます。

大切なのは、「AIに丸投げして終わり」にするのではなく、AIが生成したコードの意味を私たちがしっかりと理解し、コードの品質の舵取り（アーキテクチャの判断）を私たちが握る事です。

Cursorを使いこなせば、毎日の面倒なコーディングやレガシー対応が驚くほど楽しく、劇的に楽になりますよ。ぜひ今日の業務から、あなたのプロジェクトに導入してみてください。あなたの開発ライフがよりクリエイティブなものになることを、心から応援しています！

1. Cursorとは何か？ なぜ今、レガシーコード改修の最強兵器なのか

2. 導入と基礎セットアップ：最短でAIを動かす準備

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

Step 2: AIの頭脳を設定する（モデル選択の基本）

3. 実践！レガシーコードをモダンに書き換える手順

対象となるレガシーコード (`legacy_user.js`)

Step 3: CursorのComposer機能で一発リファクタリング

リファクタリングされたモダンなコード (`modern_user.js`)

4. 品質を担保する：テストコードの生成とAIによるコードレビュー

Step 4: テストコードの自動生成

5. おわりに：AI時代のエディタで、開発の主導権を取り戻す

1. Cursorとは何か？なぜ今、レガシーコード改修の最強兵器なのか