本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

困りごとナビ

一つ直したら別のページが壊れた

直前の差分と再現手順から、影響が広がった変更を小さく切り分けます。

危険度: 注意して進める変更

今すぐ使う

まず、状況をそろえる

自分の状況と近いかを確かめ、最初の確認をしてからAIへ頼みます。

AIへの依頼文

別のページが壊れたときの切り分け依頼

危険度:要確認

変更する範囲と、元へ戻す方法を先に確認しておくと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

空欄のままでもコピーできます。秘密情報は書かずにお試しください。

コピーされる依頼文を確認
目的:
一つの修正後に別の機能が壊れた原因を、変更を増やさず安全に特定する。

現在の状態:
【ここに、何をしたらどうなったかを書く】

今回依頼すること:
新しい変更はまだ加えず、壊れた画面の再現手順、最後に正常だった状態、直前の差分を確認してください。影響する可能性がある変更を小さな単位に分け、どの確認で原因を特定できるか順番に示してください。

変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】

変更しない範囲:
履歴の書き換え、変更の一括取り消し、ファイル削除、複数候補の同時修正は行わない。

完了条件:
- 壊れた状態を再現できる
- 原因候補が直前の差分と対応している
- 元の修正と壊れた画面の両方を確認する手順がある

実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する

実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点

使う前に確認
使った後に確認

この困りごとですか?

目的の場所は直ったのに、別の画面や機能が動かなくなりましたか?

  • 直前まで正常だった別ページが開かない
  • 共通のボタンやカードだけ見た目が変わった
  • 一つの修正後に複数のが失敗した

最初に確認すること

  1. 壊れた状態を短い手順で再現する
  2. 最後に正常だった状態と直前のを確認する
  3. 両方の画面が使う共通部品や設定を探す

確かめる

変更の前後を確認する

実行前と実行後を比べます。分からないまま危険な変更を進めないでください。

始める前

  • 残したい直前の修正を明記する
  • 差分をまだ一括で取り消さない

試したあと

  • 元の修正が引き続き動く
  • 壊れていた画面と主要な関連画面を再確認する

ここで止まる

  • どの変更を残すべきか判断できない
  • 履歴の削除や強制的な巻き戻しを求められた
  • 本番データや利用者の情報へ影響する可能性がある

理解する

なぜ起きるのかを知る

原因の候補を知ると、同じ問題が起きたときに自分で切り分けやすくなります。

考えられる原因

  • 共通部品や共通スタイルの変更が別ページにも影響した
  • 名前やデータ形式を変えたが、利用箇所が残っている
  • 元の目的だけを確認し、関連画面の再確認が不足した

覚えておくこと

別の場所が壊れる現象は回帰不具合(regression)と呼ばれます。まず直前の差分を小さく分け、最後に正常だった状態との間で原因を絞ると、必要な修正まで消す危険を減らせます。