キャッシュの影響を受けずファイルを読み込ませる簡単な方法

FRONTEND

2019.03.23

サイトやページの運営をしていると、画像の差し替え、修正を伴ったcssの差し替えがよくあると思います。
基本、修正したファイルをサーバーで上書きすれば良いのですが、キャッシュの影響で差し替えたファイルが反映されない場合があります。

キャッシュの影響を受ける理由として真っ先に考えられる理由は、既存ファイルと修正後のファイルを同じ名前で差し替えているからなのですが、かといって差し替える度にファイル名を変えて、html内のパスも変えて・・・となると面倒。修正前のファイルが他のページでもつかわれていたりすると、リンク切れを防ぐためにもそのページも直さないといけません。個人的にはリスクが高い方法だと思っています。

もちろん、CtrlキーとF5キー同時押しでキャッシュを切ったリロードが一番簡単ですが、サイトやページを閲覧しているユーザーにそれを求めるのも中々難しいです。.htaccessをつかった方法も正直そんなに好きじゃありません(いじるのが怖いので・・・)。
そんなときに手軽なのが今日紹介する方法です。小ネタです。

そもそもキャッシュとは

簡単に書くと、表示したサイトやページの内容をPCに保存する機能のことです。
サイトやページを閲覧する度に、一々ファイルをサーバーからダウンロードしなくてよくなるので、表示までの時間を短縮することができ、ユーザビリティは上がります。

キャッシュの影響を受けずに最新のファイルを読み込ませる方法

方法はいたって簡単です。

例えば、元のファイル名が「sample.jpg」だった場合、html内に記述するパスは「~/imaegs/sample.jpg」となると思います。
このパスの最後に「?”数字”」と追記するだけです。これでキャッシュの影響を受けずに最新のファイルを読み込ませることが出来ます。

画像の例

<img src="images/sample.jpg?19032301">

CSSの例

<link rel="stylesheet" href="css/sample.css?19032301">

?以降の数字の部分は何でも良いみたいなのですが、僕は管理しやすいように「日付と何回目の差し替えか」(2019年3月23日の1回目の差し替えであれば、「?19032301」)という風に書いています。

この方法のデメリット

先ほど「”何回目の差し替えか”という風に記述している」と書きましたが、ファイルを差し替える度に「?」以降の数字を変えてあげないといけません。この方法のデメリットと言えなくもないですが、それでもファイル名ごと変える煩雑さ、リンク切れのリスクを考えると、まだ楽な方法なのかなと思います。