JavaScriptテックラボ

JSファイルがキャッシュされないようにする

手動でキャッシュを回避

JavaScriptファイルを外部ファイルとして読み込む際、ブラウザによってキャッシュされてしまい、ファイルを更新しても変更が反映されないことがあります。

この対策として、キャッシュされないように、読み込むURLを変更する方法があります。そのうちの一つとしては、URLパラメータを変更する方法です。

<script src="file.js?v=1"></script>

クエスチョン以降はクエリパラメータで、v=1を設定しています。この値には意味がないので、好きな文字に変更しても問題ありません。大事なのは、クエリパラメータを変更することで、ブラウザは異なるファイルと認識し、キャッシュを無視して再読み込みします。

クエスチョンマーク( ? )以降はクエリパラメータと呼ばれ、上記の例では v=1 を設定しています。この v=1 という値自体に特別な意味はなく、v=abc や version=2 など、任意の文字列に変更しても問題ありません。

重要なのは、クエリパラメータの値を変更することで、ブラウザが別のファイルと認識し、キャッシュを使わずに再読み込みされるという点です。

上記の方法の問題としては、外部ファイルのコードを変更するたびに読み込み元のパラメータも変更する必要があります。

メリット

  • 更新したときだけキャッシュをクリアできる

デメリット

  • バージョン番号を毎回手動で変更する手間がある

自動でキャッシュを回避

パラメータを固定しつつ、キャッシュされないようにするには下記の方法があります。

<script src="file.js?p=(new Date()).getTime()"></script>

この方法では、読み込みごとに現在の日時(ミリ秒)がクエリとして付与されるため、クエリパラメータを変更しなくても、キャッシュが使われることはありません。

この方法の問題点としては、変更があってもなくても、キャッシュされないということです。キャッシュをコントロールしたい場合は、手書きのv=1方式が良いでしょう。

メリット

  • 常に最新ファイルが読み込まれる

デメリット

  • 常にキャッシュが無効

\ 30日間のお試し期間あり/

無料でKindle Unlimitedを試してみる

※Amazonアカウントですぐに登録可能。いつでも解約できます

関連記事