CSS/JSファイルの常時キャッシュクリア方法｜HTML、PHP、ASP環境別ガイド

ウェブサイトを更新しても、ブラウザ側に古いCSSやJavaScriptファイルがキャッシュされてしまうと、最新の変更が反映されず、ユーザー体験やデバッグに影響を及ぼすことがあります。ここでは、常に最新のCSSやJSファイルを読み込ませるためのキャッシュクリア（キャッシュバスター）の手法を、HTMLファイル、PHPが使える場合、ASP管理画面の場合に分けて解説します。

HTMLファイルやASP管理画面の場合

PHPなどのサーバーサイド言語が使用できない環境では、JavaScriptを利用してCSSやJSファイルに動的なクエリパラメータを付与する方法が有効です。以下のコードは、JavaScriptのdocument.writeを使って、CSSファイルに現在のタイムスタンプをクエリパラメータとして追加し、キャッシュを毎回クリアする方法です。

<script type="text/JavaScript">
  document.write('<link rel="stylesheet" href="/asset2025/css/style.css?ver='+ new Date().getTime() +'">');
</script>

解説

• new Date().getTime()
  現在の時刻（ミリ秒単位のタイムスタンプ）を返すため、毎回異なる値がクエリパラメータとして追加されます。これにより、ブラウザは常に新しいファイルとして認識し、キャッシュを利用しません。

PHPが使える場合

PHPが使用できる環境では、サーバーサイドでファイルの更新日時を取得し、そのタイムスタンプをクエリパラメータとして付与する方法が一般的です。この方法は、ファイルが更新された場合のみキャッシュをクリアするため、不要な再読み込みを防ぎ、パフォーマンスにも優れています。

<?php echo '?v=' . filemtime($_SERVER['DOCUMENT_ROOT'].'/style.css'); ?>

使用例：

<link rel="stylesheet" href="/asset2025/css/style.css<?php echo '?v=' . filemtime($_SERVER['DOCUMENT_ROOT'].'/asset2025/css/style.css'); ?>">

解説

• filemtime()
  指定したファイルの最終更新時刻を取得します。この値はファイルが更新されるたびに変化するため、最新のファイルが読み込まれるようになります。
• $_SERVER['DOCUMENT_ROOT']
  サーバールートのパスを取得し、絶対パスでファイルの更新日時を調べます。
• クエリパラメータ ?v=
  取得した更新日時をクエリパラメータとして付与することで、ブラウザは新しいファイルとして認識します。

まとめ

JavaScriptとPHPの使い分け:

サーバーサイド言語が利用可能な場合は、PHPでファイルの更新日時を利用する方法が推奨されます。なぜなら、更新がない場合はキャッシュが有効になり、パフォーマンスが向上するためです。一方、PHPが利用できない環境では、JavaScriptで常に最新ファイルを読み込ませる方法を使用してください。

JSファイルにも同様の手法を適用可能:

CSSファイルだけでなく、JavaScriptファイルにも同じ方法でクエリパラメータを付与することができます。例えば：

<script src="/asset2025/js/script.js?ver=<?php echo filemtime($_SERVER['DOCUMENT_ROOT'].'/asset2025/js/script.js'); ?>"></script>

パフォーマンスとのバランス:

常にキャッシュをクリアする設定は、開発中や頻繁に更新するサイトには有効ですが、本番環境ではファイルが更新された場合のみキャッシュをクリアする方法（PHPのfilemtime()を使用）が望ましいです。

これらの手法を適切に使い分けることで、ユーザー体験とサイトのパフォーマンスの両立が可能になります。ぜひ、各環境に合わせたキャッシュ対策を実施してみてください。