ClaudeCodeLab
Advanced

How to Practice Performance Optimization with Claude Code

Learn how to practice performance optimization using Claude Code. Includes practical code examples and step-by-step guidance.

Performance-OptimierungをClaude Codeで実践する

Webアプリケーションのパフォーマンス問題は原因の特定が難しく、改善に専門知識が必要です。Claude Codeはコードの分析から具体的な改善提案・実装まで一貫して対応できます。

フロントエンドの最適化

バンドルサイズの分析と削減

> バンドルサイズを分析して、大きなパッケージを特定して。
> 不要なインポートのDeleteとtree-shakingの最適化を行って。
// Before fix：ライブラリ全体をインポート
import _ from "lodash";
const result = _.groupBy(data, "category");

// After fix：必要な関数のみインポート
import groupBy from "lodash/groupBy";
const result = groupBy(data, "category");

React再レンダリングの最適化

> このコンポーネントの不要な再レンダリングを特定して修正して。
// Before fix：毎回新しいオブジェクトが生成される
function Dashboard({ userId }: { userId: string }) {
  const filters = { userId, status: "active" };
  const data = useQuery(["dashboard", filters], () => fetchDashboard(filters));

  return <DashboardView data={data} />;
}

// After fix：useMemoで参照を安定化
function Dashboard({ userId }: { userId: string }) {
  const filters = useMemo(
    () => ({ userId, status: "active" as const }),
    [userId]
  );
  const data = useQuery(["dashboard", filters], () => fetchDashboard(filters));

  return <DashboardView data={data} />;
}

画像の最適化

> 画像の読み込みを最適化して。
> Next.jsのImageコンポーネント、lazy loading、
> 適切なサイズ指定を適用して。
import Image from "next/image";

// Before fix
<img src="/hero.png" />

// After fix
<Image
  src="/hero.png"
  alt="ヒーローイメージ"
  width={1200}
  height={600}
  priority  // ファーストビューの画像はpriority
  sizes="(max-width: 768px) 100vw, 1200px"
/>

バックエンドの最適化

N+1クエリの解消

> データベースクエリを分析して、N+1問題を修正して。
// Before fix：N+1クエリ
const posts = await prisma.post.findMany();
for (const post of posts) {
  post.author = await prisma.user.findUnique({
    where: { id: post.authorId },
  });
  post.comments = await prisma.comment.findMany({
    where: { postId: post.id },
  });
}

// After fix：eager loading
const posts = await prisma.post.findMany({
  include: {
    author: { select: { id: true, name: true, avatar: true } },
    comments: {
      take: 5,
      orderBy: { createdAt: "desc" },
    },
    _count: { select: { comments: true } },
  },
});

キャッシュ戦略の実装

> Redis を使ったキャッシュ層を追加して。
> 頻繁にアクセスされるエンドポイントに適用。
import Redis from "ioredis";

const redis = new Redis(process.env.REDIS_URL);

async function getCachedData<T>(
  key: string,
  fetcher: () => Promise<T>,
  ttlSeconds = 300
): Promise<T> {
  const cached = await redis.get(key);
  if (cached) {
    return JSON.parse(cached);
  }

  const data = await fetcher();
  await redis.set(key, JSON.stringify(data), "EX", ttlSeconds);
  return data;
}

// Usage example
app.get("/api/popular-posts", async (req, res) => {
  const posts = await getCachedData(
    "popular-posts",
    () => prisma.post.findMany({
      orderBy: { viewCount: "desc" },
      take: 20,
    }),
    600 // 10分キャッシュ
  );
  res.json({ data: posts });
});

アルゴリズムの改善

> この関数の計算量を分析して、改善して。
// Before fix：O(n^2)
function findCommonElements(arr1: number[], arr2: number[]): number[] {
  return arr1.filter(item => arr2.includes(item));
}

// After fix：O(n + m)
function findCommonElements(arr1: number[], arr2: number[]): number[] {
  const set2 = new Set(arr2);
  return arr1.filter(item => set2.has(item));
}

Core Web Vitalsの改善

> Core Web Vitals（LCP, FID, CLS）を改善するために
> 必要な修正を洗い出して実行して。

デバッグ的な分析手法はデバッグテクニック完全ガイドを、React固有の最適化はReact開発を爆速にする方法も参照してください。

CLAUDE.mdにパフォーマンスルールを設定

## パフォーマンスルール
- N+1クエリを書かない（includeを使う）
- lodash全体インポート禁止（個別インポートのみ）
- 画像はnext/imageを使用
- APIレスポンスにはキャッシュヘッダーを設定

生産性を上げる全般的なTipsは生産性を3倍にする10のTipsもあわせてご覧ください。

Zusammenfassung

Claude Codeはパフォーマンス問題の分析から具体的な改善実装まで対応できます。フロントエンドのバンドルサイズ削減、バックエンドのクエリ最適化、キャッシュ戦略の実装など、多角的なアプローチで高速化を実現しましょう。

パフォーマンス計測の詳細はweb.dev、Claude CodeについてはAnthropic公式ドキュメントを参照してください。

#Claude Code #performance #optimization #Core Web Vitals #高速化

Related Posts