エラー対応とデバッグ

最終更新：2025年11月29日｜エラー丸投げの危険性、効果的なデバッグ協調を反映

概要

エラーが発生したとき、AIを活用することで効率的に解決できます。ただし、エラーメッセージをAIに丸投げするのは危険なアプローチです。原因を理解しながらAIと協調してデバッグする技法を解説します。

避けるべきアプローチ

❌ エラー丸投げ（アンチパターン）

エラーが出ました。直してください。 TypeError: Cannot read property 'map' of undefined

問題点：

  • 原因を理解しないまま「修正」されるため、同じ問題が再発する
  • AIの修正が別の問題を引き起こす可能性がある
  • 学習機会を逃す
  • 根本原因ではなく表面的な対処になりがち

ステップ1: 自分でエラーを分析する

AIに依頼する前に、まず自分でエラーを分析します。

  • エラーメッセージを読む（何が起きているか）
  • スタックトレースを確認（どこで起きているか）
  • 関連するコードを確認
  • 仮説を立てる（なぜ起きているか）

ステップ2: 具体的な質問をAIにする

丸投げではなく、具体的な質問をします。

✓ 良い質問の例

以下のエラーについて質問です。 【エラー】 TypeError: Cannot read property 'map' of undefined at UserList (UserList.jsx:15) 【関連コード】 function UserList({ users }) { return users.map(user =>
{user.name}
); } 【私の分析】 - usersがundefinedの状態でmapが呼ばれている - 親コンポーネントからの props 渡しに問題がある可能性 【質問】 1. この分析は正しいですか？ 2. デフォルト値を設定する方法と、 条件付きレンダリングの方法、 どちらが適切ですか？

ステップ3: 原因を理解してから修正する

AIの説明を理解した上で、修正を適用します。

  • なぜそのエラーが起きたか理解する
  • 修正の内容を理解する
  • 同様の問題を今後防ぐ方法を学ぶ

効果的なエラー報告テンプレート

【エラーメッセージ】 [完全なエラーメッセージを貼り付け] 【発生箇所】 [ファイル名、行番号、関数名] 【関連コード】 ``` [問題が発生しているコード] ``` 【再現手順】 1. [手順1] 2. [手順2] 3. エラー発生 【環境】 - 言語/ランタイム: [バージョン] - フレームワーク: [バージョン] - OS: [OS名] 【私の分析・仮説】 [自分なりの原因の予想] 【試したこと】 - [試したこと1] - [試したこと2] 【質問】 [具体的に知りたいこと]

よくあるエラーと対応パターン

Null/Undefined エラー

典型例： Cannot read property 'x' of undefined

確認ポイント：

  • 変数が初期化されているか
  • 非同期処理の完了前にアクセスしていないか
  • オプショナルチェーン（?.）を使うべきか

型エラー

典型例： TypeError: x is not a function

確認ポイント：

  • importが正しいか
  • 変数の型が期待通りか
  • オブジェクトとモジュールの混同がないか

非同期関連エラー

典型例： Unhandled Promise rejection

確認ポイント：

  • await/asyncが正しく使われているか
  • try-catchでエラーハンドリングしているか
  • Promiseチェーンが正しいか

デバッグの際の注意点

参考文献

次へ

→ 検証と責任

→ 効果的なプロンプト設計

← 目次へ戻る