「再現性がない」CSSバグの本当の原因と特定方法｜現場で使える実践テクニック

こんにちは！

今日は「再現性がないCSSバグ」についての話をしたいと思います。
これ、ほんま現場でめっちゃ多いんですよ。

「なぜか時々崩れる」の正体

僕も新人の頃は、クライアントから「あ、今見たら直ってた」とか「さっきは崩れてたんですけど」みたいな報告をもらって、めっちゃ困惑していました。
「え、僕のコード変わってないのに？」って感じで。

実は、再現性がないバグって、コード自体が悪いわけじゃなく、環境や状態に依存しているケースがほとんどなんです。
単純なCSSの書き間違いなら毎回崩れるはずですが、「時々崩れる」ってことは、何か外部要因が関係してるんですよ。

よくあるパターンとしては、以下みたいなものが挙げられます。

• ブラウザのキャッシュが古い状態で表示されている
• CDNのキャッシュが更新されていない
• JavaScriptが非同期で読み込まれて、タイミングがズレている
• MediaQueryの判定がデバイスの向きやウィンドウサイズで変わる
• 別のスタイルシートや外部ライブラリが干渉している

キャッシュが最大の犯人である理由

「再現性がない」って言われたら、まずキャッシュを疑うべきです。
これほんま大事。

特に多いのが、開発環境では見えないけど、本番環境で起きるってパターンなんですよ。
なぜかというと、クライアントのPCやスマホには古いCSSファイルがキャッシュされてるからです。

デベロッパーツールでNetworkタブを開くと、各ファイルのキャッシュ状況が見えるんですが、状態コードが304 Not Modifiedと表示されていたら、それはブラウザのキャッシュを使ってるってことなんです。
この状態だと、ファイルの内容が古いままになっちゃいます。

対策としては、以下が効果的です。

• Ctrl+Shift+Delete（Windowsの場合）で強制的にキャッシュをクリアする
• DevToolsを開いた状態で、リロードボタンを長押しして「キャッシュを無視して強制的に再読み込み」を選択
• 本番環境ではstyle.css?v=1.0.2みたいなバージョン番号をつけておく

バージョン番号をつけるやり方は、めっちゃおすすめですよ。
これで強制的に新しいファイルを読み込ませることができます。

外部要因による不具合の切り分け方法

キャッシュじゃなくて、本当にコードに問題があるのかもしれない…そう思ったら、切り分けが必要です。

デベロッパーツールのElements（またはInspector）タブで、問題が起きてる要素を右クリックして「検証」を選ぶと、そこに当たってるスタイルが全部見えます。
ここで重要なのは、どのファイルのどの行のスタイルが効いてるかを確認することです。

例えば、<div class="container">に対して、複数のmarginが設定されてるかもしれません。
その場合、z-indexや!importantの関係で、意図しないスタイルが優先されちゃってるってことがあります。

僕がよくやるのは、疑わしいスタイルをチェックボックスで一つずつON/OFFにして、どれが原因かを特定することです。
DevToolsのスタイルパネルで、スタイル名の左側にチェックボックスがあるんですよ。
ここでON/OFFを切り替えながら、「このスタイルをOFFにしたら直った」ってやつを探すんです。

僕が現場で実践している3つの確認ステップ

経験を積む中で、僕が確立した「再現性バグ」への対処フローをシェアします。

ステップ1：まずはキャッシュをリセット

「なぜか崩れてる」って報告をもらったら、最初はこれを疑うべきです。
クライアントに連絡する前に、自分の環境を完全にリセットしてみるんですよ。

Ctrl+Shift+Deleteで全キャッシュを削除してから、ページを開き直す。
これで8割くらい解決します。

ステップ2：他のブラウザで試す

同じブラウザで再現しなくても、別のブラウザ（ChromeとFirefoxとか）では再現することがあります。
特にCSS特有の機能（gridとかbackdrop-filterとか）は、ブラウザによってサポート状況が違うんですよ。

caniuse.comで対応状況を確認するのも大事です。

ステップ3：Network&メディアクエリを確認

DevToolsのNetworkタブで、CSSファイルの読み込み順序とサイズを確認します。
もしstyle.cssよりも後に別のスタイルシートが読み込まれてたら、後のやつが上書きしちゃってるかもしれません。

また、レスポンシブ対応のサイトなら、メディアクエリが正しく機能してるかも確認が必要です。
DevToolsで「デバイスを含むメディアクエリ」を実際に試してみるといいですよ。

まとめ

「再現性がないバグ」は、実は再現性がないんじゃなくて、その条件を知らないだけってことが多いんです。
キャッシュ、ブラウザの違い、ファイルの読み込み順序、メディアクエリ…こういった外部要因を一つずつ潰していくことが大切です。

最初は戸惑うかもしれませんが、何度か経験するうちに、「あ、これはキャッシュだな」みたいに察知できるようになりますよ。
そうなったら、デバッグの時間がめっちゃ短縮されます。

困ったときはデベロッパーツールを味方につけて、冷静に切り分けていくことをおすすめします。