リファクタリング

Claude Code を使って、既存のコードを安全に改善する方法を学びます。非推奨のパターンを検出し、モダンな書き方に変換できます。

リファクタリングとは

リファクタリングとは、動作を変えずにコードの品質を改善する ことです。

リファクタリングの目的:
  - コードを読みやすくする
  - メンテナンスしやすくする
  - パフォーマンスを改善する
  - 非推奨の書き方を最新の書き方に更新する

動作は変えない

リファクタリングでは、プログラムの動作（入力と出力の関係）は変えません。「コードの内部構造をきれいにする」作業です。

Claude Code でリファクタリングする流れ

Step 1: 非推奨パターンを見つける

まず、改善すべきコードを Claude に探してもらいましょう。

bash

# プロジェクト全体をスキャンして、改善点を見つけてもらう
> このプロジェクトで非推奨のパターンや改善すべき箇所を見つけてください

# 特定のファイルに絞る場合
> src/utils/helpers.ts のコードをレビューして、改善点を教えてください

Claude はプロジェクト全体を読み取り、以下のような問題を検出します。

検出できる問題	例
非推奨 API	`componentWillMount` → `useEffect`
古い構文	`var` → `const/let`
コードの重複	同じロジックが複数箇所に存在
複雑すぎる関数	1つの関数が長すぎる
型安全性の問題	`any` 型の多用

Step 2: モダンなアプローチを提案してもらう

bash

> このコードを最新の書き方にリファクタリングしてください:
  - ES2024 の機能を使う
  - TypeScript の型を厳密にする
  - エラーハンドリングを改善する

具体的に指示する

「きれいにして」より「ES2024 の構文を使って」のように、具体的に伝えるとより良い結果が得られます。

Step 3: 安全に適用する

Claude は変更前後のコードを表示してくれます。差分を確認してから適用しましょう。

bash

# リファクタリング後にテストを実行
> リファクタリングした箇所のテストを実行して、動作が変わっていないことを確認してください

実践例

例 1: コールバックから async/await への変換

bash

> src/api/ ディレクトリのコールバックベースのコードを
  async/await に変換してください

変換前:

javascript

function fetchUser(id, callback) {
  db.query('SELECT * FROM users WHERE id = ?', [id], (err, results) => {
    if (err) {
      callback(err, null);
      return;
    }
    callback(null, results[0]);
  });
}

変換後:

javascript

async function fetchUser(id: string): Promise<User> {
  const results = await db.query('SELECT * FROM users WHERE id = ?', [id]);
  return results[0];
}

例 2: コンポーネントのモダン化

bash

> クラスコンポーネントを関数コンポーネント + Hooks に変換してください

変換前:

jsx

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: null, loading: true };
  }
  componentDidMount() {
    fetchUser(this.props.id).then(user => {
      this.setState({ user, loading: false });
    });
  }
  render() {
    if (this.state.loading) return <Spinner />;
    return <div>{this.state.user.name}</div>;
  }
}

変換後:

jsx

function UserProfile({ id }: { id: string }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(id).then(user => {
      setUser(user);
      setLoading(false);
    });
  }, [id]);

  if (loading) return <Spinner />;
  return <div>{user?.name}</div>;
}

例 3: 重複コードの解消

bash

> このプロジェクトで重複しているコードを見つけて、
  共通関数に切り出してください

Claude が自動で行うこと

コードの重複を解消する際、Claude は以下を自動的に行います。

重複パターンの検出 - 類似したコードブロックを発見
共通インターフェースの設計 - 汎用的な関数やクラスを設計
リファクタリングの実行 - コードを共通化
呼び出し元の更新 - すべての利用箇所を新しいコードに更新

リファクタリングの安全なやり方

1. 小さく始める

bash

# プロジェクト全体を一度にリファクタリングするのではなく、
# ファイルやディレクトリ単位で進める
> src/utils/date.ts のリファクタリングをお願いします

大規模な変更は段階的に

一度に大量のファイルを変更すると、問題が起きたときに原因の特定が難しくなります。ファイル単位 や 機能単位 で段階的に進めましょう。

2. テストがあることを確認する

bash

# リファクタリング前にテストの状態を確認
> このファイルに関連するテストがあるか確認してください

# テストがない場合は先にテストを作成
> リファクタリング前に、現在の動作を保証するテストを作成してください

3. 差分を確認する

bash

# リファクタリング後に差分を確認
> git diff で変更内容を確認してください

よく使うリファクタリングの依頼パターン

依頼	効果
`この関数を小さく分割して`	可読性の向上
`マジックナンバーを定数に置き換えて`	メンテナンス性の向上
`エラーハンドリングを追加して`	堅牢性の向上
`TypeScript の any 型を具体的な型に変えて`	型安全性の向上
`ネストが深いコードをフラットにして`	可読性の向上
`テスタブルな構造にリファクタリングして`	テスト容易性の向上

まとめ

ステップ	やること	ポイント
1. 発見	改善すべき箇所を見つける	プロジェクト全体またはファイル単位でスキャン
2. 提案	モダンなアプローチを提案	具体的な基準（ES2024、型安全など）を指定
3. 適用	安全に変更を適用	小さく始めて、テストで動作を確認

次は、テストされていないコードにテストを追加する テスト作成 を学びましょう。

リファクタリング ​

リファクタリングとは ​

Claude Code でリファクタリングする流れ ​

Step 1: 非推奨パターンを見つける ​

Step 2: モダンなアプローチを提案してもらう ​

Step 3: 安全に適用する ​

実践例 ​

例 1: コールバックから async/await への変換 ​

例 2: コンポーネントのモダン化 ​

例 3: 重複コードの解消 ​

リファクタリングの安全なやり方 ​

1. 小さく始める ​

2. テストがあることを確認する ​

3. 差分を確認する ​

よく使うリファクタリングの依頼パターン ​

まとめ ​

リファクタリング

リファクタリングとは

Claude Code でリファクタリングする流れ

Step 1: 非推奨パターンを見つける

Step 2: モダンなアプローチを提案してもらう

Step 3: 安全に適用する

実践例

例 1: コールバックから async/await への変換

例 2: コンポーネントのモダン化

例 3: 重複コードの解消

リファクタリングの安全なやり方

1. 小さく始める

2. テストがあることを確認する

3. 差分を確認する

よく使うリファクタリングの依頼パターン

まとめ