12. 表示トラブルの切り分け

この章では、Webサイトの表示トラブルを切り分ける方法を学びます。

制作中や公開後には、「表示されない」「反映されない」「スマホだけ崩れる」「クライアントだけ古い表示になる」といったことが起きます。

大切なのは、慌てずに原因を分けて確認することです。

まず状況を整理する

トラブルが起きたら、いきなりコードを直す前に状況を整理します。

確認したいのは、次のような情報です。

  • どのURLで起きているか
  • いつから起きているか
  • どの端末やブラウザで起きているか
  • 自分の環境でも再現するか
  • 全ページで起きているか、一部ページだけか
  • 直前に何を変更したか
  • エラーメッセージやスクリーンショットがあるか

状況があいまいなまま作業すると、原因と関係ない場所を触ってしまうことがあります。

自分の環境だけか確認する

まず、自分の環境だけで起きているのか、他の人の環境でも起きているのかを確認します。

たとえば、次のように切り分けます。

  • 別ブラウザで見る
  • シークレットウィンドウで見る
  • スマホで見る
  • Wi-Fiとモバイル回線を変えて見る
  • 他の人にも同じURLを見てもらう

自分だけ古い表示なら、ブラウザキャッシュの可能性があります。

全員が見えないなら、サーバー、DNS、ファイル配置、コードの問題を疑います。

URLが正しいか確認する

表示されない時は、まずURLが正しいか確認します。

よくあるミスは次の通りです。

  • スペルが違う
  • 余計な文字が入っている
  • www ありなしが違う
  • http と https が違う
  • 下層ページのパスが違う
  • URL末尾の / の扱いが違う

特にクライアントから共有されたURLは、コピー時に余計な文字が入っていることがあります。

まず正しいURLでアクセスしているかを確認します。

DNSが反映されているか疑う

ドメイン設定を変更した直後は、DNS反映に時間がかかることがあります。

次のような場合はDNSを疑います。

  • サーバー移転直後
  • ドメインの向き先を変えた直後
  • 人によって見えるサイトが違う
  • www ありだけ見えない
  • 独自ドメインだけ見えないが、仮URLでは見える

DNSはすぐに全員へ反映されるとは限りません。

設定直後は、時間を置いて確認する必要があります。

サーバーにファイルがあるか確認する

静的サイトの場合、公開先に必要なファイルがあるか確認します。

よくある原因は次の通りです。

  • HTMLファイルをアップロードしていない
  • CSSやJavaScriptをアップロードしていない
  • 画像ファイルが不足している
  • ビルド前のファイルをアップロードしている
  • 公開ディレクトリを間違えている

Astroのような静的サイトでは、開発中の src ではなく、ビルド後の dist などが公開対象になることがあります。

パス指定を確認する

一部の画像だけ出ない、CSSだけ効かない、下層ページだけ壊れる場合は、パス指定を確認します。

確認するポイントは次の通りです。

  • src や href のパスが正しいか
  • ../ の数が正しいか
  • CSS内の url() の基準がCSSファイルになっているか
  • ファイル名の大文字小文字が一致しているか
  • ブラウザが実際に探しているURLはどこか

Networkタブで404になっているファイルを見れば、ブラウザがどこを探しているか確認できます。

404か500かを見る

ステータスコードを見ると、原因の方向性がわかります。

コード疑うこと
404URL、パス、ファイル配置、アップロード漏れ
403権限、サーバー設定、アクセス制限
500サーバー側の処理や設定
301 / 302リダイレクト設定

404なら、まずファイルやURLを確認します。

500なら、HTMLやCSSだけではなく、サーバー側の問題も疑います。

キャッシュを疑う

修正したのに反映されない場合は、キャッシュを疑います。

確認する順番は次の通りです。

  1. ハードリロードする
  2. シークレットウィンドウで確認する
  3. 別ブラウザで確認する
  4. CMSやサーバーのキャッシュを削除する
  5. CDNキャッシュを削除する
  6. ファイル名が変わっているか確認する

ただし、キャッシュと決めつける前に、編集したファイルが本当に公開されているか確認します。

Consoleエラーを見る

JavaScriptが動かない時は、Consoleタブを見ます。

エラーが出ている場合、処理が途中で止まっている可能性があります。

よくある確認ポイントは次の通りです。

  • 対象要素が取得できているか
  • JavaScriptファイルが読み込まれているか
  • ライブラリが先に読み込まれているか
  • 記法ミスがないか
  • スマホ幅だけ別の処理になっていないか

Consoleエラーは、エラー文、ファイル名、行番号をセットで見ます。

Networkタブを見る

Networkタブでは、読み込み失敗や通信の状態を確認できます。

次のような時に役立ちます。

  • CSSが読み込まれているか確認する
  • JavaScriptが読み込まれているか確認する
  • 画像が404になっていないか確認する
  • フォーム送信が成功しているか確認する
  • リダイレクトが起きているか確認する
  • キャッシュから読まれているか確認する

見た目だけで原因がわからない時は、Networkタブを見る習慣を付けます。

誰に何を伝えて相談するか

自分だけで解決できない場合は、状況を整理して相談します。

相談時には、次の情報を伝えると相手が確認しやすくなります。

  • 問題が起きているURL
  • 起きている現象
  • 再現する端末とブラウザ
  • いつから起きているか
  • 直前に変更した内容
  • スクリーンショット
  • Consoleエラー
  • Networkタブのステータスコード
  • 自分で試した確認内容

「表示されません」だけだと、相手は原因を探しにくいです。

情報を整理して伝えることで、解決までの時間を短くできます。

切り分けの基本手順

表示トラブルの切り分けは、次の順番で考えると整理しやすいです。

  1. 現象を整理する
  2. URLが正しいか確認する
  3. 自分だけの問題か確認する
  4. DevToolsでConsoleとNetworkを見る
  5. ステータスコードを確認する
  6. パスやファイル配置を確認する
  7. キャッシュを疑う
  8. DNSやサーバー設定を疑う
  9. 必要な情報を整理して相談する

最初からすべてを疑うのではなく、確認しやすいところから順番に見ます。

この章のまとめ

  • 表示トラブルでは、まず状況を整理する
  • URL、端末、ブラウザ、発生タイミング、直前の変更を確認する
  • 404ならURLやファイル、500ならサーバー側を疑う
  • CSSや画像が出ない時はNetworkタブで読み込み状況を見る
  • JavaScriptが動かない時はConsoleタブを見る
  • キャッシュ、DNS、サーバー設定は、変更直後や人によって見え方が違う時に疑う
  • 相談時は、URL、エラー、ステータスコード、試したことを整理して伝える