コード最適化

以下のコードをパフォーマンスと効率のために最適化してください。

最適化対象のコード

$ARGUMENTS

ソロ開発者向け最適化戦略

1. プロファイリングを最優先

• 実際のボトルネックを特定する
• 過度に早い最適化を避ける
• 最適化前後で測定する
• 高インパクト領域に注力する

2. パフォーマンス最適化の領域

React/Next.js

• メモ化(React.memo、useMemo、useCallback)
• コード分割と遅延ロード
• 画像最適化(next/image)
• フォント最適化(next/font)
• 不要な再レンダリングの削除
• 長いリストの仮想スクロール

データベースクエリ

• 頻繁にクエリされるフィールドにインデックスを追加
• クエリのバッチ処理(N+1問題の削減)
• selectを使用してフィールドを制限
• ページネーションの実装
• 頻繁なクエリのキャッシング
• 複雑なジョインにはデータベースビューを使用

API呼び出し

• キャッシング(SWR、React Query)の実装
• リクエストのデバウンス/スロットリング
• 可能な限り並列リクエスト
• リクエストの重複排除
• 楽観的更新

バンドルサイズ

• 未使用コードのツリーシェーキング
• 大型ライブラリの動的インポート
• 重い依存関係の置き換え
• ルート別のコード分割
• ビューポート外のコンテンツの遅延ロード

メモリ

• メモリリークの修正(useEffectのクリーンアップ)
• 不要なオブジェクト生成の回避
• 変更しない値にはconstを使用
• インターバル/タイムアウトのクリア
• イベントリスナーの削除

3. 最適化チェックリスト

JavaScript/TypeScript

• varの代わりにconst/letを使用
• 可能な限りネストされたループを避ける
• ルックアップにはMap/Setを使用
• DOM操作を最小化
• 負荷の高い操作をデバウンス/スロットリング

React

• 頻繁にレンダリングされるコンポーネントをメモ化
• 静的な値をコンポーネント外に移動
• リスト内のキーを正しく使用
• レンダリング内のインライン関数を避ける
• ルートとコンポーネントの遅延ロード

Next.js

• 可能な限りサーバーコンポーネントを使用
• 動的コンテンツ向けにISRを実装
• next/imageで画像を最適化
• 重要なルートのプリフェッチ
• ストリーミング用にSuspenseを使用

データベース

• 外部キーにインデックスを追加
• プリペアドステートメントを使用
• 挿入/更新のバッチ処理
• コネクションプーリングの実装
• コストの高いクエリをキャッシング

ネットワーク

• レスポンスを圧縮(gzip/brotli)
• 静的アセットにCDNを使用
• HTTP/2の実装
• 適切なキャッシュヘッダーを設定
• ペイロードサイズを最小化

4. 測定ツール

フロントエンド

• Chrome DevTools パフォーマンスタブ
• Lighthouse CI
• React DevTools Profiler
• Bundle Analyzer(next/bundle-analyzer)

バックエンド

• Node.js プロファイラー
• データベースクエリアナライザー
• APMツール(DataDog、New Relic)
• ロードテスト(k6、Artillery)

5. 一般的な最適化

非効率な配列メソッドの置き換え

// 最適化前: 複数回の反復
const result = arr
  .filter(x => x > 0)
  .map(x => x * 2)
  .reduce((sum, x) => sum + x, 0)

// 最適化後: 1回の反復
const result = arr.reduce((sum, x) => {
  return x > 0 ? sum + (x * 2) : sum
}, 0)

コストの高い計算をメモ化

const expensiveValue = useMemo(() => {
  return complexCalculation(props.data)
}, [props.data])

長いリストの仮想スクロール

import { useVirtual } from 'react-virtual'
// 表示可能なアイテムのみをレンダリング

出力フォーマット

1. 分析 - パフォーマンスボトルネックを特定
2. 最適化されたコード - 改善されたバージョン
3. 説明 - 変更内容と理由
4. ベンチマーク - 期待されるパフォーマンス向上
5. トレードオフ - 追加された複雑さ
6. 次のステップ - さらなる最適化の機会

実ユーザーに実質的な価値をもたらす実践的で測定可能な最適化に注力してください。マイクロ最適化のために可読性を犠牲にしないでください。