URLパラメーター（クエリ文字列）でCSSのキャッシュを自動更新させる

よこのじ（@yokonoji_work）です。

今回は、ファイルバージョンをURLのクエリーで指定して、自動でキャッシュファイルを更新させる方法です。

cssファイルやjsファイルを修正したのに反映されていないときの原因は、ブラウザがキャッシュしている古いファイルでWebページを表示しているからですね。その古いファイルを最新版に更新する方法にスーパーリロードがあります。

Win,Macブラウザでスーパーリロードする方法

しかし、この方法は手動作業が必要ですので、古いファイルで表示させ続ける人もいるかも知れません。そのため、みんなが最新の状態でWebページを見ることができるように作る側が配慮する必要があります。

URLパラメーター（クエリ文字列）

URLパラメーター（クエリ文字列）とは、Webサーバーに情報を伝えるための記述です。URLの末尾にクエスチョンマーク（?）を付けて、その後ろにパラメーターを指定します。

クエリ文字列とは、WebブラウザなどがWebサーバに送信するデータをURLの末尾に特定の形式で表記したもの。

Webアプリケーションなどでクライアントからサーバにパラメータを渡すのに使われる表記法で、URLの末尾に「?」マークを付け、続けて「名前=値」の形式で記述する。値が複数あるときは「&」で区切り、http://example.com/foo/var.php?name1=value1&name2=value2 のように記述する。

クエリ文字列 【 query string 】 クエリストリング

例えば、Googleで「URL　クエリー」と検索すると、検索結果のURLに「https://www.google.co.jp/search?q=URL+クエリー～」と表示されます。これには、検索ワードや言語などの情報が含まれています。

なお、URLパラメーター（クエリ文字列）は、ページへのアクセスには影響を及ぼしません。例えば、次の2つのURLはどちらも同じページにアクセスします。今回はこの仕組を利用します。

• https://yokonoji.work/
• https://yokonoji.work/?url-query

CSSのキャッシュを自動更新させる

URLパラメーター（クエリ文字列）を付与しても、ページへのアクセスには影響しません。しかし、URL自体は異なります。これを利用すると、ブラウザに同じファイルを別のものと認識させることができます。

どういうことか、説明します。
次のコードはlinkタグでcssファイルを読み込む記述です。どちらもcontent.cssの読み込みですが、下側には「?20181124」を付与しています。

旧：<link rel="stylesheet" href="https://yokonoji.work/～～～/content.css">
新：<link rel="stylesheet" href="https://yokonoji.work/～～～/content.css?20181124">

これにより、ブラウザは「https://yokonoji.work/～～～/content.css」と「https://yokonoji.work/～～～/content.css?20181124」を別のファイルだと認識します。

つまり、旧のcssファイルを更新したときにクエリ文字列として「?20181124」を付与していれば、ブラウザはキャッシュしたことがないファイルと認識して、content.cssを再キャッシュします。こうすれば、スーパーリロードをしなくても、最新のファイルでWebページを表示させることができますね。自動で。

クエリ文字列は「?ver=1.00」のように自分で管理しやすい任意の表記で問題ありません。上記の例では変更したときの年月日を指定しています。更新するたびに異なるパラメーターであれば、良いということです。