CSSやJavaScriptで、変更したのに、変更がきかない！ あああああぁあ〜 なぜ〜〜〜〜〜えぇぇ〜 という思いをした方も多いのではないでしょうか。 エンジニアあるある。
そのたんびに、キャッシュを消して再読み込み！ とかするわけですけれど、エンジニアはそれができても、お客さんや他のメンバーも全員が全員「キャッシュを消して、ハードリロード」の技を知っているかというとそうでもありません。 Google chromeだと、開発者ツールを表示させていないと、それもできないですし。
それでお客さんが見られる環境に、修正アップして、「修正しました〜！！」と連絡したのに、数分後、「反映されてないんだけど〜〜」という連絡・・・・orz 「えーっと、キャッシュを消してから再読み込みかけてもらいたいんですけど・・・」 「え？ キャッシュって何？ どうすればいいの？？」
・・・ですよね・・・・orz
とならない為にも、そもそもファイルに変更があった場合に、キャッシュを読み込まずに、サーバから再読み込みしてくれるよう、ソースに書き込んでしまうようにしましょう！
実装方法
方法はとっても簡単で、HTML内でCSSやJSファイルを読み込む script タグのところで、後ろに、?$timestamp といった文言を入れてあげればいいのです。
私は、PHP Laravelを使っているので、 ?{{ time() }} といれればそれだけでOK!
素晴らしい。
<script src="/js/app.js?{{ time() }}"></script>
なぜそれでキャッシュが読み込まれないのか？
? はクエリを使う場合に使う記号ですよね。
例えば、URLの後ろに、 ?id=123 といれれば、IDが123番の人のマイページが表示される、みたいな感じです。
ただ、cssやjsを読み込むところでは、動的にURLが生成されないので、?以下に何か入れても、結局読み込まれるのは、?より前で指定したファイル名だけなのだそうです。
ただ、?以降が変化すると、キャッシュを読み込まず、サーバから直接読んでくれるのだとか！ ここがミソなのですね〜。
参考：
