CSS・JavaScriptを修正した際に、更新したファイルを読み込ませる方法｜キャッシュを無視

Webサイトを運営していると、CSS・JavaScriptファイルなどの静的ファイルを修正し更新する場合があると思いますが、その更新したサイトに以前にアクセスしたことがあるデバイスには、更新前のファイルがキャッシュされている場合があります。

そうすると、そのデバイスで更新したサイトにアクセスしても、キャッシュを削除しないかぎり更新したファイルが適用されません。

今回は、そのような場合に、更新したCSS・JavaScriptファイルなどを、閲覧しているデバイスに対してすぐに適用させる方法となります。

CSS・JavaScriptを修正した際に、更新したファイルを読み込ませる方法

CSS・JavaScriptなどのファイルを修正した際に、更新したファイルをキャッシュされているデバイスに対して読み込ませるには、ファイルパスにURLパラメータを指定します。

それにより、デバイスに更新前のファイルがキャッシュされている場合でも、更新前のファイルとは異なるファイルとして読み込むことができます。

例えば、以下のようにstyle.cssファイルをlinkタグで読み込んでいるとします。

<link rel='stylesheet' href='https://example.com/style.css' type='text/css' />

その場合、style.cssファイルを修正して更新した際に、以下のようにlinkタグのstyle.cssファイルのパスにURLパラメータを指定し、ファイルパスを変更します。

以下の例ではURLパラメータを ?ver=1.0.1 としています。

<link rel='stylesheet' href='https://example.com/style.css?ver=1.0.1' type='text/css' />

そのことにより、更新前のファイルがキャッシュされているデバイスでも、更新後のファイルを異なるファイルとして読み込むことができます。

また、URLパラメータを指定することにより、style.cssファイルを修正して更新するごとに、以下のようにURLパラメータも更新することで、常に更新後のファイルを読み込ませることができます。

以下の例ではURLパラメータを ?ver=1.0.2としています。

<link rel='stylesheet' href='https://example.com/style.css?ver=1.0.2' type='text/css' />

以上が、更新したCSS・JavaScriptファイルなどを、閲覧しているデバイスに対してすぐに適用させる方法となります。