鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

毎回キャッシュを読み込まずにページをロードするようにしたい

CSSJavaScriptで、変更したのに、変更がきかない! あああああぁあ〜 なぜ〜〜〜〜〜えぇぇ〜 という思いをした方も多いのではないでしょうか。 エンジニアあるある。

そのたんびに、キャッシュを消して再読み込み! とかするわけですけれど、エンジニアはそれができても、お客さんや他のメンバーも全員が全員「キャッシュを消して、ハードリロード」の技を知っているかというとそうでもありません。 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が生成されないので、?以下に何か入れても、結局読み込まれるのは、?より前で指定したファイル名だけなのだそうです。 ただ、?以降が変化すると、キャッシュを読み込まず、サーバから直接読んでくれるのだとか! ここがミソなのですね〜。

参考:

「キャッシュのせいだから再読込して」と毎回言わなくて済むようにする記述方法 - Sakura scope