ブラウザゲームが真っ白になる：原因トップ5と確認順

まず開発者ツールを開く

原因を探す前に、ブラウザの開発者ツールを必ず開いてください。Windows・Linuxなら F12、macOSなら Command + Option + I で開きます。「Console」タブと「Network」タブを主に使います。

開発者ツールを開いた状態でページをリロードすると、エラーが赤字でConsoleに表示されます。ここに何か出ているだけで、原因の絞り込みが一気に進みます。何も表示されていない場合は、エラーが起きる前に処理が止まっている（HTMLやCSSの段階で詰まっている）か、エラーが黙って握り潰されている可能性を疑います。以降の5項目は、Consoleの状態と合わせて確認してください。

原因1：JavaScriptの実行エラー

白画面の原因としてもっとも多いのは、JavaScriptが途中でクラッシュしているケースです。スクリプトが止まると、それ以降の描画処理がすべて実行されず、画面には何も表示されません。

Consoleタブに赤いエラーが出ていれば、そのメッセージを読むのが最初の手がかりです。よく見るエラーを以下に整理します。

• Uncaught ReferenceError: ○○ is not defined：変数や関数の名前が間違っているか、スコープ外から参照しています。スペルミスと宣言の場所を確認してください。
• Uncaught TypeError: Cannot read properties of null：document.getElementById などでHTML要素を取得しようとしたとき、要素がまだ存在していない状態で実行されています。スクリプトの実行タイミングを DOMContentLoaded イベント内に移すか、<script> タグを </body> の直前に置くと解決することが多いです。
• Uncaught SyntaxError：JavaScriptの文法が壊れています。エラー行番号を頼りに、括弧や引用符の対応を確認してください。

エラーメッセージの右端にはファイル名と行番号が表示されます。クリックすると「Sources」タブでその行に飛べるので、コードを直接確認できます。

原因2：CSSによる非表示・サイズゼロ

JavaScriptにエラーがないのに白い場合、CSSが原因で要素が見えなくなっていることがあります。Consoleがきれいなのに画面に何も出ないときはここを疑ってください。

開発者ツールの「Elements」タブでHTMLの構造を確認します。<canvas> タグや <div id="game"> といったゲームの描画先要素を選択し、右側の「Computed」（計算済みスタイル）で width・height・display・visibility・opacity の値を見ます。

陥りやすいパターンは次のとおりです。

• width: 0 または height: 0：canvas要素をCSSだけでサイズ指定している場合に起きます。canvasは width と height 属性をHTMLに直接書くか、JavaScriptで canvas.width = 800 のように設定します。CSSの width: 800px はあくまで表示上の拡縮であり、描画バッファのサイズではありません。
• display: none または visibility: hidden：ゲーム開始前に非表示にする処理が、表示に戻す処理と対応していないことがあります。
• background-color: white と color: white が重なっている：テキストや図形が白背景に白色で描かれています。背景色か描画色を変えて確認します。

原因3：ファイルの読み込み失敗（404エラー）

外部のJavaScriptファイル、画像、音声、JSONファイルなどを読み込んでいる場合、それらが見つからないと処理が止まったり、必要なデータが空のまま描画が走って白画面になったりします。

「Network」タブをリロード後に開き、ステータスが 404（見つからない）や Failed になっているリソースがないか確認します。404が出ていれば、ファイルパスの間違いが原因です。

パスのミスで多いのは次のパターンです。

• 大文字・小文字の不一致（image.PNG と書いたが実ファイルは image.png）
• ../ や / の使い方が環境によって変わる：ローカルで file:// 直接開きと、サーバー経由でのアクセスではパスの解決方法が異なります。ローカルで動いていたのにアップロード後に壊れる場合は、絶対パスと相対パスの混在を整理してください。
• ZIPで配布・アップロードしたときのフォルダ構造がずれている：圧縮前にフォルダをダブルネストしてしまい、HTMLから見たパスが変わるケースがあります。ZIPを展開して構造を目視確認する習慣をつけると防げます。

原因4：HTMLの構造エラー

HTMLが壊れていても、ブラウザは「できるだけ表示しよう」と補完するので、エラーとして報告されないことがあります。それでもゲームのロジックが依存している要素が消えたり順序が変わったりして、白画面になる場合があります。

「Elements」タブでHTML構造を確認したとき、<canvas> や <div> が想定外の場所に入れ子になっていたり、閉じタグが欠けていたりすればこれが原因です。また、<script> タグを <head> 内に置いたまま defer や async を付けていない場合、DOMが構築される前にスクリプトが走って要素が見つからずクラッシュすることがあります。

HTMLバリデーターを使うと構造エラーを機械的に洗い出せます。W3Cが提供している「Markup Validation Service」にHTMLを貼り付けると、タグの対応やネストのミスをリストアップしてくれます。

原因5：セキュリティ制限（CORS・混在コンテンツ）

fetch や XMLHttpRequest で外部のAPIやファイルを読み込む処理があるとき、CORSエラー（Cross-Origin Resource Sharing）によってリクエストがブロックされ、データが取得できずに画面が止まることがあります。

Consoleに Access to fetch at '...' from origin '...' has been blocked by CORS policy と出ていればこれです。自分でサーバーを立てている場合はレスポンスヘッダーに Access-Control-Allow-Origin を設定する必要があります。外部サービスのAPIを使う場合は、そのサービスがCORSを許可しているかを公式ドキュメントで確認します。

https:// のページから http:// のリソースを読み込もうとする「混在コンテンツ（Mixed Content）」もブロックされます。この場合、読み込み先のURLが https:// になっているか確認してください。

ローカルで file:// プロトコルから開く場合は、CORS以外にも file:// 固有の制限が多数あります。外部ファイルの読み込みを試みている場合は、ローカルサーバー（VS CodeのLive Server拡張など）を経由して http://localhost で開くと、多くの制限を回避できます。

確認の順番まとめ

白画面に遭遇したとき、次の順番で確認すると最短で原因に辿り着けます。

1. 開発者ツールを開き、Consoleに赤いエラーがないかを見る。あればエラーメッセージと行番号を手がかりに原因1を対処する。
2. Consoleがきれいなら、Networkタブで404やFailedがないかを確認する（原因3）。
3. ファイルもそろっているなら、Elementsタブで要素のサイズと表示プロパティを見る（原因2）。
4. HTMLの構造がおかしそうならバリデーターで検証する（原因4）。
5. fetchや外部APIを使っているならCORSエラーのメッセージを探す（原因5）。

一度に複数の原因が重なっていることもあります。一つ修正したらリロードしてConsoleを見直す、を繰り返すと混乱しにくくなります。

次の行動

開発者ツールのConsoleとNetworkタブを開いた状態でページをリロードし、赤いメッセージや404が出ていないかを確認するところから始めてください。エラーメッセージが出ていれば、その文面で検索すると多くの場合は解決策が見つかります。作ったゲームが動くようになったら、アソバースにHTMLファイルまたはZIPファイルとして投稿して公開できます。