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

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

困りごとナビ

変更したら画面が真っ白になった

白い画面だけを直そうとせず、最初のエラーと直前の変更から原因を絞ります。

危険度: 通常表示

今すぐ使う

まず、状況をそろえる

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

AIへの依頼文

画面が真っ白になったときの確認依頼

危険度:通常

内容と対象をひと目確認してから使うと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

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

コピーされる依頼文を確認
目的:
白い画面の原因を再現し、最初に発生したエラーへ絞って最小の修正案を得る。

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

今回依頼すること:
対象URLを開いて症状を再現し、ブラウザのコンソールと開発サーバーの出力を確認してください。最初に発生したエラー、直前の関連変更、表示が止まった箇所を整理し、必要な最小変更だけを提案してください。

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

変更しない範囲:
エラーを隠すだけの処理、ページ全体の作り直し、関連しない依存関係の更新、複数箇所の同時修正は行わない。

完了条件:
- 白い画面を再現する手順が分かる
- 最初のエラーと原因候補が対応している
- 修正後に同じURLと手順で表示を確認できる

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

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

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

この困りごとですか?

変更した直後から、ページに何も表示されなくなりましたか?

  • 背景だけ、または完全に白い画面になる
  • 読み込み表示のまま進まない
  • 一部のページだけ開けない

最初に確認すること

  1. 同じURLを再読み込みして症状を再現する
  2. ブラウザのコンソールで最初の赤いエラーを確認する
  3. 開発サーバー側にもエラーが出ていないか確認する

確かめる

変更の前後を確認する

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

始める前

  • 直前に変更した内容を一文で整理する
  • エラー全文から秘密情報を除く

試したあと

  • 同じURLを再読み込みして表示を確認する
  • トップページと関連する別ページも一つ確認する

ここで止まる

  • エラーに秘密情報や個人情報が含まれている
  • 白い画面が本番公開中のサイト全体で発生している
  • 原因候補が複数あり、同時に大きな変更が必要と言われた

理解する

なぜ起きるのかを知る

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

考えられる原因

  • の構文または実行時エラーで表示処理が止まった
  • 必要なデータがない状態を画面が扱えていない
  • 直前の変更で読み込むファイルや名前がずれた

覚えておくこと

白い画面は結果であり、原因そのものではありません。ブラウザまたは開発サーバーに出た最初のエラーから読むと、後から連続して出たエラーに惑わされにくくなります。