Claude Codeで既存サイトを改善する実践例

ケース概要

「2 年前に作ったサイトが遅い。コードも複雑。改善したいが時間がない」という状況で、Claude Code を活用してリファクタリングした事例です。

プロジェクト情報

対象：既存サイト（React で開発）
問題：ページロード時間が 4 秒以上
目標：2 秒以下に改善
期間：3 営業日

改善内容

改善 1：不必要な re-render を削除

問題：

❌ 非効率なコード：
const [count, setCount] = useState(0);

// 毎回、すべてのコンポーネントが re-render
export function App() {
  return (
    <div>
      <Parent count={count} />
      <Sibling />
    </div>
  );
}

Claude Code への指示：

「React コンポーネントを最適化。
React.memo を使用して
不必要な re-render を削除。
パフォーマンスを改善」

改善後：

✅ 効率的なコード：
const Sibling = React.memo(() => <div>...</div>);

効果：

改善前：4.2 秒
改善後：3.1 秒
削減：約 26%

改善 2：画像最適化

問題：

高解像度画像を直接表示
→ ファイルサイズが大きい
→ ロード時間が長い

Claude Code への指示：

「Next.js Image コンポーネントを使用。
画像を自動的に最適化」

効果：

改善前：2 MB
改善後：0.3 MB
削減：85%

改善 3：バンドルサイズ削減

問題：

不要なライブラリが含まれている
JavaScript バンドルが大きい

Claude Code への指示：

「bundle-analyzer を使用。
不要なライブラリを特定し削除」

効果：

改善前：450 KB
改善後：180 KB
削減：60%

実行プロセス

Step 1：計測（Day 1 午前）

□ ページロード時間を測定
□ lighthouse でスコア取得
□ Chrome DevTools で分析

結果：
Performance: 42 点

Step 2：改善計画（Day 1 午後）

改善項目を優先度順に列挙：
1. re-render 削減（期待: -20%）
2. 画像最適化（期待: -40%）
3. バンドル削減（期待: -15%）
4. キャッシュ設定（期待: -10%）

Step 3：実装（Day 2-3）

各改善を Claude Code で実装
  ↓
git diff で確認
  ↓
テスト実行
  ↓
パフォーマンス計測

Step 4：検証

改善前：4.2 秒 / Lighthouse: 42
改善後：1.8 秒 / Lighthouse: 87

実装のコツ

コツ 1：計測してから改善

❌ 避ける：
「このコードは遅いはず」と推測
  ↓
改善しても効果がわからない

✅ 推奨：
「ここが遅い」と計測で特定
  ↓
効果が明確

コツ 2：小さく段階的に改善

「全部一度に改善」
  ↓
複雑で検証が難しい

「1 つ改善 → テスト → 次」
  ↓
効果が明確
  ↓
問題があったら戻せる

コツ 3：改善前後で比較

改善前のコードを別ブランチに保存
  ↓
改善後のコードと比較
  ↓
効果を数値で示す

よくある失敗

❌ 失敗1：計測なしで改善

「このコード遅いに違いない」
  ↓
改善
  ↓
でも体感で速くなったかわからない

✅ 改善：常に計測

Before: 4.2 秒
After: 1.8 秒
改善: 57% 削減
→ 明確な効果

❌ 失敗2：リグレッション

「パフォーマンス改善」
  ↓
機能が壊れた
  ↓
ロールバック必要

✅ 改善：テストを実行

「改善 → テスト → OK → commit」

まとめ

Claude Code を活用した既存サイト改善：

プロセス：

1. 計測（問題を数値化）
2. 分析（原因を特定）
3. 改善計画（優先度順）
4. 実装（Claude Code）
5. 検証（テストと計測）

効果：

• ページロード時間：57% 削減
• Lighthouse スコア：42 → 87
• ユーザー体験大幅改善

Claude Codeで既存コードを壊さないための確認手順と合わせることで、安全で効果的な改善が実現します。