フロントエンドエラー

ブラウザコンソールエラー、Reactエラー、白い画面の見つけ方と修正方法。

フロントエンドエラーとは？

フロントエンドエラーはブラウザで発生します。以下のような症状が見られます：

• 完全に白い/空白のページ
• Reactエラーバウンダリメッセージ（「Something went wrong」）
• サイレントな不具合（ボタンが動かない、フォームが送信されない）

フロントエンドエラーを見つけるための主要ツールはブラウザの開発者コンソールです。

ブラウザコンソールの開き方

Chrome / Edge:
  Windows: F12 または Ctrl + Shift + J
  Mac: Cmd + Option + J

Safari:
  1. Safari > 設定 > 詳細 > 「開発メニューを表示」にチェック
  2. Cmd + Option + C

コンソールを開いたら、赤いテキストを探してください — これがエラーです。

コンソールエラーの読み方

コンソールエラーには3つの重要な情報があります：

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at DashboardPage (app/dashboard/page.tsx:24:18)
    ^^^^^^^^^^^^^^   ^^^^^^^^^^^^^^^^^^^^^^^^  ^^^^^
    エラーの種類       ファイルの場所              行番号

エラーの意味を理解する必要はありません。赤いテキスト全体をコピーしてClaudeに渡すだけです。

よくあるフロントエンドエラーの種類

白い画面

アプリが完全に空白の白いページを表示する場合：

1. ブラウザコンソールを開く（上記のショートカット参照）
2. 赤いエラーメッセージを探す
3. エラーテキスト全体をコピー
4. Claudeに渡す

Reactハイドレーションエラー

ハイドレーションエラーは、サーバーでレンダリングされたHTMLがブラウザでReactが期待するものと一致しない場合に発生します。ページがちらついたり、コンソールに警告が表示されたりします。

エラーをClaudeに渡す

フロントエンドエラーを報告する際は、常に以下を含めてください：

1. 完全なエラーメッセージ — コンソールの赤いテキストをすべてコピー
2. 何をしていたか — どのページで、どのアクションがトリガーしたか
3. 何を期待していたか — 代わりに何が起こるべきだったか

クイズ