もうキャッシュの削除をお願いしたくない！CSS・JS・画像のブラウザキャッシュさせない方法

よくあるやりとり

webサイトのデザイン修正が完了したのでご確認下さい

あの…何も変わっていないんですが…

キャッシュが残っているようですので、キャッシュを削除してご覧頂けますでしょうか？

キャッシュってなんですか？

(ブラウザや端末のキャッシュについて１から説明…)

webサイトのデザイン修正などを行なっていると、度々あるやりとりかと思います。

お客様の目的は、修正した結果を見たいだけなのに「キャッシュとはなにか？」「なぜ必要なのか？」「今、どういう現象が起こっているのか？」という説明を受けるのは、端的だとしても中々に苦痛かと思います。

お客様も技術的に明るい方ばかりでは無いので「やったことの無い操作をするのは怖い」「私が勝手にPCをいじるのは嫌なので他の人に操作してほしい」「このPCが壊れてしまったのではないか？」という、そもそも生まれなくても良かった不安まで与えてしまいます。

また、説明を省くと、それはそれで問題です。
何故こんな事が起こっているのか、余計不安になることもあるでしょう。

それならば、こんなやりとりが必要なくなるよう、こちらでしっかり準備しておきたいですよね。

今回は、ブラウザキャッシュをさせずに確実に更新させる方法をご紹介します。

Cache Busting でキャッシュを使用させなくする

方法としては、更新したCSS・JS・画像のパスに、GETパラメータ(別名:クエリ文字列)を付与してあげます。これを「Cache Busting(キャッシュバスティング・キャッシュバスター)」と呼びます。

具体例として、以下のようなパスがあるとします。

<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg" alt="Sample">

これに「?ver=1.0.1」という、GETパラメータを付与してみます。

<!-- CSS -->
<link href="style.css?ver=1.0.1" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js?ver=1.0.1" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg?ver=1.0.1" alt="Sample">

「?」の後に任意の文字列を付与すると、ブラウザは先ほどとは異なるURLだと認識します。
そのため、ブラウザはキャッシュを読まずに、更新されたファイルを新たに読みに行きます。

GETパラメータの書き方には以下のような方法もあります。

基本的には、更新日時を使用するのがベターかと思います。

また「date=」というパラメーターの部分を省き更新日時のみ、ということも可能です。
(例：src=”style.css?201901301000″)

以上が基本形となります。今回は手入力でGETパラメータを付与しましたが、動的に追加するなどすると、もっと便利に使えます。

具体例

こちらの記事で具体的な例を幾つか作ってみました。参考にどうぞ。

補足説明.1

URLの末尾に「?」を使って付与する文字列のことを「クエリ・クエリ文字列・クエリストリング」または「GETパラメーター(もしくは単にパラメーター)」などと呼びます。

https://example.com/?id=hoge&name=foo というURLがあった時、
クエリは id=hoge&name=foo 全体を、パラメーターは id と name を指します。
この場合「パラメーター id の値は hoge です」というように呼びます。

補足説明.2

Cache Busting には、方法が３つあります。