Topics インフォコネクト最新情報

CSS・JSにクエリパラメータを追加して、更新した時だけキャッシュをクリアさせる方法

2023.04.12

Webの豆知識

インフォコネクトWebの豆知識

この記事は公開から1年以上経過しています。

こんにちは、チーフクリエイターのSHOJIです。
Web関連の開発業務に携わるエンジニアであれば、誰もが面倒に思う「キャッシュの存在」。

以前に『iPhone Safariでスーパーリロード（キャッシュクリア）が簡単にできるショートカットの実装方法』と題してお届けした記事も間もなく３年が経過しようとしていますが、現在でも多くのアクセスをいただいていることを考えると、みなさん苦労されてるんだなと感じます。

iPhone Safariでスーパーリロード（キャッシュクリア）が簡単にできるショートカットの実装方法 | インフォコネクト株式会社

URLhttps://info-con.co.jp/tips/iphone-01-superreload/

そこで今回も、この「キャッシュクリア」に関してお届けしたいと思います。題して『CSS・JSにクエリパラメータを追加して、更新した時だけキャッシュをクリアさせる方法』。

\\　目次　//
実装方法
キャッシュの維持・更新
あとがき

実装方法

実装方法は至って簡単！
読み込むファイルの拡張子の後ろに「クエリパラメータ」を付与するだけです。

「クエリパラメータって何？」って思われる方も、一度は見たことがあるはず！
例えば、CSSファイルの読み込みをする際、

＜link rel="stylesheet" href="style.css"＞

このように記述していると思いますが、

＜link rel="stylesheet" href="style.css?ver=20230401"＞

上記のように、ファイルの拡張子の後ろに「?◯◯=△△」というような文字列が付与された部分を、クエリパラメータといいます。

つまり、ファイルの拡張子の後ろに「?20230401」や「?ver=1.0」などのようにクエリパラメータを記述すれば良いのです。基本的には、更新日や実際のバージョン数などを設定するケースが多いため、数字や「.」を使った任意の文字列で構いません。

キャッシュの維持・更新

このクエリパラメータが変わらないうちはキャッシュが維持されるのですが、ファイルを変更後にクエリパラメータを変更するとブラウザが自動的にキャッシュを更新してくれます。

例えば、
＜link rel="stylesheet" href="style.css?ver=20230401"＞から、
＜link rel="stylesheet" href="style.css?ver=20230402"＞のように、クエリパラメータを変更するだけでキャッシュクリアされるのです。