WEBコーディング中はcssファイルの読み込みにタイムスタンプ識別子を付けるとキャッシュ問題が楽

2018年07月17日 13:30

WEBコーディング中に頻繁にCSSやJSファイルを書き換える場合、ブラウザキャッシュをクリアするのが面倒でバージョン識別子を付けますよね。
それを手動で書くのが大変な場合、HTMLファイルの方でCSSの読み込みにタイムスタンプを識別子に付与するようにしておけば楽ですよ、という話。

<head>〜</head>内でCSSを読み込んでいる部分をJSで書いておけばOK。

<script>

var d = new Date();

var year  = d.getFullYear();

var month   = ((d.getMonth()+1)  < 10 ) ? '0' + (d.getMonth()+1) : (d.getMonth()+1);

var day   = ( d.getDate()   < 10 ) ? '0' + d.getDate()   : d.getDate();

var hour  = ( d.getHours()   < 10 ) ? '0' + d.getHours()   : d.getHours();

var min   = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes();

var sec   = ( d.getSeconds() < 10 ) ? '0' + d.getSeconds() : d.getSeconds();

document.write(

'<link rel="stylesheet" href="hogehoge.css?var=' + year + month + day + hour + min + sec +'" />'

);

</script>

head要素内でもJSが実行されて、タイムスタンプ識別子付きでCSSが読み込まれます。
これで秒単位でCSSを書き換えてもキャッシュ問題に悩まされる事無く反映されます。

※このまま公開するとサイトを見ている人のブラウザキャッシュが大変な事になるので、公開する際は元に戻しておくのを忘れずに・・・。