最小再現は、問題が起きる最小限のコードです。アプリ全体を渡さずに原因を確認でき、関係する条件も見えます。
作る手順
- 現象を一文で固定する
- 新しい小さなファイルへ関係部分を移す
- 外部データを固定値へ変える
- CSSや画面部品を外す
- 一つ外すたびに問題が残るか確認する
例
API取得後だけ配列処理が失敗するなら、まずレスポンスを固定します。
const response = { items: null };
const names = response.items.map((item) => item.name);
これだけで同じTypeErrorが出るなら、通信や認証は今回の最小再現に不要です。
外しすぎに注意
問題が消えた直前に外した要素は、再現条件の一部です。元へ戻し、最小限どの条件が必要か確認します。
共有前の確認
- 秘密情報や個人情報がない
- 実行方法が書かれている
- 期待結果と実際の結果がある
- コピーして同じ現象を確認できる