クライアントワークの制作案件では、進捗ごとにウェブサイトでの確認を行うこともあります。例えば「ここのテキストを削除して欲しい」「このイメージ画像を別のものに差し替えてください」「コンテンツのレイアウトと変更して欲しい」など、、   そのような場合にはHTMLやCSS、イメージ画像やスクリプトファイルを編集し更新していき、サイトに反映後にクライアントへのチェックを依頼するという流れになるのですが、ブラウザキャッシュの影響で、キャッシュデータが読み込まれ変更前のデータが反映するため、クライアントさんからは「変更されていないんですが、、」と言われた経験は無いでしょうか。。今回はそんな場合でも手軽に導入できるキャッシュ対策をまとめていきたいと思います。  

HTMLで読み込む外部ファイルにクエリパラメータ付与

このような場合に「スーパーリロードでキャッシュをクリアしていただいて、、」と都度説明するのも面倒です、、かといってファイル名を都度変えるものスマートでは無いですよね。そんな場合にはファイルに対してクエリパラメータ（クエリ文字列）を付与することでキャッシュ対策ができるのでオススメです。   一般的には下記のようにHTML上でリソースファイルを読み込む場合、そのままファイル名とパスを指定する形になるかと思います。

<link rel="stylesheet" href="./css/style.css">
<img src="./image/photo.jpg" alt="">
<script src="./script/main.js"></script>

  この場合、読込先のファイルが更新されていても、キャッシュデータとして同じ値のものが残るため、古いリソースファイルが読み込まれてしまうという状態になり、キャッシュデータが消えない限りは新しいデータに切り替わりません。   そこで、ファイル名はそのままで、拡張子の以降に「?」から始まるクエリパラメータを付与することで、ファイル名を変えずにキャッシュデータと異なる値にすることができます。 【クエリパラメータを追加後】

<link rel="stylesheet" href="./css/style.css?20201114">
<img src="./image/photo.jpg?20201114" alt="">
<script src="./script/main.js?20201114"></script>

  このクエリパラメータというのは、GETメソッドなどで取得した値を示すのに使われるもので、URLに含まれる情報となります。基本的には、バックエンドのシステム連携で見かけることが多いのですが、このように直接指定することも可能で、キャッシュ対策に使うこともできます。   クエリパラメータで示す値は、このようなケースであれば基本的にはなんでもOKですが、慣習的に使われるのは更新日を表す日時をそのまま入れることが多いようですね。そうすることで更新日を明示でき、バージョン管理の役割も含むことができます。今回は手動でHTMLに追記する形ですが、PHPなどを使うことでこのクエリパラメータを自動的に出力させることも可能です。更新頻度が高い場合にはこのような方法がオススメですね。  

---

  過去記事「PHPでウェブページのキャッシュを残さないようにする」でもキャッシュを強制的に残さないようにする方法もまとめていますが、更新頻度が多く無い場合にはそこまでする必要もなく、読み込み速度を考えるとやはりキャッシュの恩恵は大きいですし、プログラミングの知識も必要になってきます。今回の方法ですと、ある程度のHTMLの知識があるウェブディレクター職の方や、営業担当の方でも行うことができるので、より効率的なワークフローで対応できるのでは無いでしょうか。キャッシュクリアの件でクライアントさんと何度もやりとりをされていた経験がある方は是非試してみてはいかがでしょうか。