WEBページを作成中にCSSやJavaScriptを更新しサーバーに置いたにもかかわらず、サイトに反映されない！？どうすればいいんだ・・・となったときの対処法です。
ずばり原因は、キャッシュにあります。過去にアクセスしたときの古いCSSやJavaScriptファイルがキャッシュとしてブラウザに保存されており、そっちを読み込んでいるのが原因です。
キャッシュをクリアしてブラウザを更新
今すぐCSSやJavaScriptを更新した結果を確認したい場合は、
“Ctrl + Shift + R” の同時押しで一発更新してくれます。
これでキャッシュをクリアしサーバーに置かれた最新のファイルを読み込んでくれるので、CSSやJavaScriptを更新した後の挙動を即座に確認できます。
ただ、CSSやJavaScriptの更新がある度にクライアントやユーザーに対して「キャッシュをクリアしてください」というのもなんだかなって感じがしますよね。
そこで、CSSやJavaScriptの更新をすぐサイトに反映させる方法が必要です。
キャッシュが原因なので、キャッシュに保存された古いファイルを読み込まないようにします。
具体的な方法は下記のとおり。
HTMLの記述
<script>タグのsrcに細工をします。
読み込むファイル名の後に?と任意の文字列を追加します。
たとえば、index.jsというJavaScriptファイルを読み込む場合。
<script src="index.js?date=202207301510"></script>
ここではわかりやすく更新時の日付を入れています。date=はあってもなくてもかまいません。
この細工をすることにより、ブラウザは「キャッシュに保存されたものとは別のファイルだ」と理解し、更新後のファイルを読み込んでくれます。
なお、実際のJavaScriptのファイル名はindex.jsのままでOKです。あくまでHTML内でsrc属性に細工をするだけです。
サーバーの設定
それでも古いキャッシュを読み込んでしまう場合、レンタルサーバーの設定を確認しましょう。
そこを変更しないと、HTMLの記述を変えてもキャッシュを読み込んでしまう場合があります。
エックスサーバーを例に説明します。やることは2つ。
サーバーパネル > 高速化 > サーバーキャッシュ設定 OFFにします。
サーバーパネル > 高速化 > ブラウザキャッシュ設定 OFF または ON[CSS/JavaScript以外]にします。
※ブラウザキャッシュ設定をOFFにすると、画像ファイルや音声ファイルなども毎回サーバーに読みに行って応答が遅くなるリスクがあるので、お好みで。
↓サーバーパネル
↓サーバーキャッシュ設定
↓ブラウザキャッシュ設定
これらの設定を変えることで、サーバー上のファイルを更新後、通常は即時、遅くても数分待てば更新後のCSS/JavaScriptファイルを読み込んでくれるようになります。
そうすれば、ブラウザキャッシュのクリアをしなくても、ページを普通に更新するだけで最新のサイトを見ることができます。
なお、注意点として、HTMLの記述を毎回手で更新しなければならないという点があります。
もし毎回手で更新するのが面倒だという方は、コーディングすることで自動的に毎回ファイル名を変えることもできますが、今回の記事では触れません。
ニーズがあれば、Twitterまでご連絡ください。