1. 再現      → 問題を確実に再現する条件を特定
2. 切り分け  → 問題の発生箇所を絞り込む
3. 原因特定  → 根本原因を特定する
4. 修正      → 最小限の変更で修正する
5. 検証      → 修正の確認 + 回帰テスト作成

- 最小再現ケースを作る（関係ない要素を排除）
- 再現条件を明確化: ブラウザ、OS、データ、タイミング
- 再現率が低い場合: ログ追加 → 再発を待つ
- 「自分の環境では再現しない」→ 環境差異をリストアップ

ユーザーから見える問題
├→ 画面に表示されない / 表示がおかしい
│   └→ フロントエンド問題の可能性大
├→ データが保存されない / 取得できない
│   └→ バックエンド or DB 問題の可能性大
├→ 動作が遅い
│   └→ パフォーマンス問題 → 計測で特定
└→ 特定の条件でのみ発生
    └→ エッジケース → 条件の切り分け

フロントエンド → ネットワーク → バックエンド → DB

確認手順:
1. ブラウザの開発者ツールでネットワークを確認
   → リクエストは送信されているか？
   → レスポンスは正しいか？
2. 正しいリクエストが送信されている場合
   → バックエンドのログを確認
3. バックエンドのレスポンスが正しい場合
   → フロントエンドの描画/状態管理を確認

症状: 表示されない、レイアウト崩れ、更新されない

確認ポイント:
  - コンポーネントは描画されているか（DOM を確認）
  - CSS が意図通りか（計算済みスタイルを確認）
  - 条件付きレンダリングの条件は正しいか
  - キー属性は適切か（リスト描画時）

症状: データが反映されない、古い値が表示される

確認ポイント:
  - 状態の更新は行われているか
  - 不変性は保たれているか（ミュータブルな更新をしていないか）
  - 非同期更新のタイミングは正しいか
  - 状態のスコープは適切か（ローカル vs グローバル）

症状: クリックが反応しない、二重送信、意図しない動作

確認ポイント:
  - イベントハンドラは登録されているか
  - イベントの伝播（バブリング）が問題ではないか
  - デバウンス/スロットルは適切か
  - フォーム送信のデフォルト動作は制御されているか

症状: API からデータが取得できない、エラーレスポンス

確認ポイント:
  - リクエスト URL・メソッド・ヘッダーは正しいか
  - CORS エラーが出ていないか
  - 認証トークンは送信されているか
  - レスポンスのパース処理は正しいか
  - エラーハンドリングは適切か

手順:
1. エラーログからスタックトレースを確認
2. リクエスト ID でログを絞り込む
3. タイムスタンプで時系列を追う
4. エラー直前の正常ログを確認（何が変わったか）

注意:
  - ログレベルが適切か確認（DEBUG に切り替え）
  - 構造化ログを活用してフィルタリング
  - 大量のログは grep/検索で効率的に

確認ポイント:
  - リクエストは到達しているか（アクセスログ）
  - ミドルウェアの処理順序
  - 認証/認可チェックの結果
  - ルーティングは正しいか
  - レスポンスの構築過程

確認ポイント:
  - 入力データのバリデーション結果
  - データ変換（DTO → Entity）は正しいか
  - DB クエリは意図通りか（実行 SQL を確認）
  - 外部 API のレスポンスは期待通りか
  - トランザクション境界は適切か

確認ポイント:
  - 初期表示時間（FCP, LCP）
  - 不要な再レンダリング
  - バンドルサイズ（大きなライブラリの読み込み）
  - 画像の最適化（サイズ、フォーマット、遅延読み込み）
  - メモリリーク（長時間使用での劣化）

確認ポイント:
  - レスポンス時間の遅いエンドポイント特定
  - N+1 クエリ問題
  - インデックス未設定のクエリ
  - 不要なデータの取得（SELECT *）
  - 外部 API 呼び出しの遅延
  - コネクションプールの枯渇

1. 推測するな、計測せよ
2. ボトルネックを特定してから最適化
3. 最適化前後で必ず計測・比較
4. ユーザー体感に影響する箇所を優先

❌ 推測だけで修正する（計測・確認なし）
❌ 一度に多くの変更を加える（どの変更が効いたか不明）
❌ 本番環境で直接デバッグする
❌ ログを追加せずに再現を試みる
❌ 症状を修正して根本原因を放置する
❌ デバッグコードをコミットする