【キャッシュ対策】画像やCSS・JSファイルをキャッシュクリアする簡単な方法

コーディング・更新対応の際、間違いなく対応したのにサイトに反映されずクライアントと不要なやり取りをしたことはございませんか？

その犯人は、ブラウザに残っている「キャッシュ」。
クライアントにキャッシュクリアをお願いすることはよくあること。

さとみ

修正が完了しましたのでご確認をお願いいたします！
反映が確認できない場合はキャッシュの影響の可能性があるので、スーパーリロード（強制リロード）あるいはシークレットウィンドウをお試しくださいませ。

クライアント

めんどくせぇ。

たびたびこんなことを言わないといけないのは正直うんざり…。

本記事では、キャッシュの影響を受けないファイルの読み込み方を解説していきます！

実装方法（コピペOK）

ファイル名の後ろに「?」 + 「英数字」とクエリパラメータを付けます。

通常のクエリパラメータは「?」 + 「英数字（キー）」 + 「=」 + 「英数字（値）」という形式ですが、今回はキャッシュ回避が目的のため「英数字（キー）」 + 「=」の部分はなくてもOKです。
データを取得し管理するのが目的ならば、通常通りの形式で記述しましょう。

<!-- CSSファイルの場合 -->
<link rel="stylesheet" href="/css/style.css?1">

<!-- JSファイルの場合 -->
<script src="/js/scripts.js?1"></script>

<!-- 画像の場合 -->
<img src="/img/img_example.png?1">

<!-- 修正が発生するたびに英数字を変える -->
<link rel="stylesheet" href="css/style.css?2">

作業が発生するたびに、英数字の部分を書き換えます。
上記の例だと、初稿が「?1」、修正のたびに「?2」「?3」…と、数字が増えていくイメージです。

クエリパラメータを変えるまではキャッシュが維持され、ファイル更新後にクエリパラメータを変更するとブラウザが自動的にキャッシュを更新してくれます。

納品の際は、お渡しする前に消しましょう。

クエリパラメータでよく使われる文字列

上記のケースが多いですが、英数字ならば任意の文字列で構いません。
ドット「.」、アンダースコア「_」、ハイフン「-」などを使ってもOKです。

文字列として使用できない記号

下記の記号は、役割があるため文字列としては使えません。

クエリパラメータでキャッシュを削除するメリット

デベロッパーツールでキャッシュ削除する手間がなくなるので作業の効率化になる

デベロッパーツールの「キャッシュの消去とハード再読み込み」を活用しているコーダーさんは多いのではないでしょうか？

更新作業の度にキャッシュクリアするのはめんどくさいし、地味に工数がかかります。

この手間がなくなるだけで、制作者にとって貴重な一分一秒が確保され、作業の効率化につながります。

クライアントにキャッシュ削除をお願いするやりとりがなくなる

エンドのクライアントだと専門用語がわからず「キャッシュ？スーパーリロード？？シークレットウィンドウ？？？」となるでしょう。（通常のユーザーは使わないですからね…）

専門用語を使わず、わかりやすい言葉で一から説明するのは大変です。

そのやりとり自体なくなればお互いに困ることもございません。

クライアントとのトラブル回避になる

筆者の体験談ですが、同じ案件・同じ担当者様に「作業完了→キャッシュのことを伝える」を直近10回ほどやったのに、一回でも言わないと「反映が確認できません。」と返ってくるという出来事がありました。

別のエンド案件では、何度も説明しているのに解決されなかった原因が、担当者様が私の教えた方法をスルーしブラウザ再起動でキャッシュクリアを試みていたということもありました。

間違いなく更新できているのにキャッシュのせいで反映を確認してもらえないことは、制作者にとっては冤罪かつイメージダウンです。
下手したら公開後のトラブルにもなりかねません。

キャッシュ問題が解決すれば、相手にお時間を取らせることもなく「しつこい」「めんどくさい」と感じさせることもありません。

まとめ

コーダーにとってキャッシュは結構シビアな問題だと思います。

しかもスマホではスーパーリロードができないためシークレットウィンドウで確認してもらうしかありません。

今回のクエリパラメータを付けてキャッシュクリアする方法ならば、半強制的に新しいファイルを読み込みできるため、キャッシュに関するやりとりを無くすことができてとても楽になります！

日頃からキャッシュに困らされている方は、ぜひ本記事を参考にしていただければと思います＾＾