ユーザーのブラウザで最新のCSS/JavaScriptを反映させる方法

2021年12月10日Web開発javascript,css,html

何度更新ボタン押してもCSSが反映されない！

HTML/CSSでサイト画面を作っているとよく遭遇する現象ですね。
CSSやJavaScriptなどの静的ファイルに発生する現象です。

今回は、自分も含めたユーザーがサイトにアクセスした際に、常に最新のCSS/JavaScriptが反映される方法について解説します！

こんな人におすすめ

何度更新ボタン押しても最新のCSS/JavaScriptが反映されない

1. 最新のCSSなどが画面に反映されない原因
2. ブラウザキャッシュの制御
3. キャッシュバスティング（Cache Busting）
4. JavaScriptを使ってクエリ文字列を自動的に付与する
- 4.1. CSSファイルに付与する
- 4.2. JavaScriptファイルに付与する
5. 注意点

ブラウザキャッシュの制御

ブラウザキャッシュの制御については、一般的にHTTPヘッダー内に含まれる情報（Cache-Control / Expires / Last-Modified / ETag）を用いて、キャッシュの利用や破棄のタイミングを適切に制御します。

今回ご紹介するのは上記とは異なる方法になります。
さっと実行することが可能である反面、保存されているキャッシュを強制的に破棄する方法となるため、余計なリクエスト送信が増える方法になります。

ユーザーが少ない小規模サイトだったり、一時的な利用にとどめ、HTTPヘッダーで適切に制御するようにしましょう。

キャッシュバスティング（Cache Busting）

キャッシュバスティング（Cache Busting）とは、その名の通りキャッシュを破壊するという手法です。
ブラウザキャッシュにおけるバスティングは、一般的には参照するリソース（今回の場合はCSS/JavaScriptなどの静的ファイル）のURLにキャッシュバスターと呼ばれるパラメータを付与する、という方法になります。

具体的な方法は、主に以下の3点です。

ブラウザキャッシュのキャッシュバスティング – style.cssの場合

ファイル名に付与する　　　　　　　　https://sample.com/style.v2.css

ファイルのディレクトリ名に付与する　https://sample.com/v2/style.css

クエリ文字列に付与する　　　　　　　https://sample.com/style.css?ver=2

ファイル名やディレクトリ名の変更は、更新するたび手動で変更をする必要があるため、今回はJavaScriptを使って自動でクエリ文字列を付与する方法をご紹介します。

JavaScriptを使ってクエリ文字列を自動的に付与する

CSSファイルに付与する

<script>
    var element = document.createElement('link')
    element.setAttribute('rel', 'stylesheet')
    element.setAttribute('href', 'css/style.css?ver=' + new Date().getTime())
    document.getElementsByTagName("head")[0].appendChild(element)
</script>

まず、<link> 要素を element 変数に格納します。

document.createElement('link')

続いて、その element（<link>要素）の rel 属性に 'stylesheet' という文字列の値を設定します。

element.setAttribute('rel', 'stylesheet')

次に、同じく element（<link>要素）の href 属性にキャッシュバスターのクエリ文字列を付与したCSSファイルのパスを設定します。

element.setAttribute('href', 'css/style.css?ver=' + new Date().getTime())

クエリ文字列は、URLやパスの最後に ?キー=値 という形で付与することができます。
今回は ver（versionの略）というキーに対して、new Date().getTime() を使ってUNIXタイムスタンプを値として設定しています。

こうすることで、クエリ文字列が1秒毎に変化するため、実質、常に最新のキャッシュバスターが自動で付与される形になります。

ここまでで element 変数に格納されている <link> 要素は以下のようになっています。

<link rel="stylesheet" href="css/style.css?ver=1639118828461">

最後に<head> タグの子要素として element（<link>要素）を追加して完了です。

document.getElementsByTagName("head")[0].appendChild(element)

JavaScriptファイルに付与する

<script>
    var element = document.createElement('script')
    element.setAttribute('src', 'js/script.js?ver=' + new Date().getTime())
    document.getElementsByTagName("body")[0].appendChild(element)
</script>

やっていることはCSSファイルとほとんど同じです。

CSSファイルでは<link>要素でしたが、JavaScriptの場合は <script> 要素を使いますので、それを格納した element 変数を作ります。

さらにCSSファイルではパスの設定は href 属性でしたが、JavaScriptファイルでは src 属性にキャッシュバスターを付与したJavaScriptファイルのパスを設定します。

最後にCSSファイルでは <head> 要素でしたが、JavaScriptファイルでは <body> 要素の子要素に element（<script> 要素）を追加する、という流れです。