ページが真っ白になるときの対処法

4日 ago

user

1 minute

Reactで白画面になる原因とチェックポイント

❓ よくある症状

画面が真っ白で何も表示されない
コンソールエラーは出ていない or 「Uncaught〜」系のJSエラー
ローカルでは動いていたのに、本番環境で落ちることもある

✅ チェックすべきポイント一覧

原因カテゴリ	よくある原因	対処方法
JavaScriptエラー	コンポーネント内で例外が発生	開発ツールの「Console」タブでエラー確認
ルーティングミス	`react-router` で未定義ルートにアクセス	`
`/`` の設定漏れを確認
無限ループ	`useEffect`や`setState`のループ	依存配列・setStateの場所を確認
DOMツリーが空	JSXのreturnが`null`や空タグになっている	コンポーネントのreturn値を明示的に確認
ビルド失敗	`npm run build` で警告や失敗	ビルド時ログを確認 / publicフォルダ確認
CSSで隠れている	`display: none`や`visibility: hidden` で非表示	開発者ツールでDOMが存在するか確認
API待ちで表示されない	データフェッチ前にnullを返してる	ローディングUIを返す or 条件レンダリング確認
コンポーネントのexport忘れ	`export default` または `import` のミス	コンポーネントの import/export を明示的に確認
HTMLテンプレートが壊れてる	`public/index.html` の構文エラー	root要素の有無、scriptタグが正しく記述されているか確認

🔧 よくある具体的なコードミスと対策

❌ return が `undefined` のケース

const App = () => {
  const result = someFunction()  // ← returnが抜けてる
}

✅ 修正：

const App = () => {
  return 
<div>Hello</div>
}

❌ `ReactDOM.createRoot(...).render(...)` を呼んでない

// index.tsx
const root = document.getElementById('root')
// renderが抜けている！

✅ 修正：

import { createRoot } from 'react-dom/client'
const root = createRoot(document.getElementById('root')!)
root.render(<App />)

🧪 デバッグの手順

ブラウザの開発者ツール（DevTools）を開く
Console タブ → エラーが出ていないか確認
Elements タブ → DOMツリーが空でないかチェック
Network タブ → リソース取得失敗（404/500）がないか
該当の App.tsx, index.tsx などから return null があるか探す

🧰 補助ツール

✅ ESLint + TypeScript：構文・import/exportの自動チェック
✅ React Developer Tools：state/props構造の可視化
✅ Error Boundary：レンダリングエラーを検知＆表示に使える

class ErrorBoundary extends React.Component {
  state = { hasError: false }

  static getDerivedStateFromError(error) {
    return { hasError: true }
  }

  render() {
    if (this.state.hasError) {
      return 
<p>何か問題が発生しました</p>
    }
    return this.props.children
  }
}

✅ まとめ

チェックポイント	備考
JSXがちゃんと `return` されているか？	`undefined` や `null`返してないか確認
`render()` が呼ばれているか？	`ReactDOM.createRoot().render()`の呼び忘れ
コンソールにJSエラーが出ていないか？	try/catch で囲ってデバッグしやすくする
CSSで `display: none` などしてないか？	DOMはあるが見えないだけのこともある
ルーティング設定やAPIフェッチが失敗してないか？	`404`や`500`レスポンスは画面白の原因に

🔗 関連リンク

❓ よくある症状

✅ チェックすべきポイント一覧

🔧 よくある具体的なコードミスと対策

❌ return が undefined のケース

❌ ReactDOM.createRoot(...).render(...) を呼んでない

🧪 デバッグの手順

🧰 補助ツール

✅ まとめ

❌ return が `undefined` のケース

❌ `ReactDOM.createRoot(...).render(...)` を呼んでない