- 動画の再生速度を３倍４倍にするChromeの拡張機能をYouTubeに使ってみる
Topics
インフォコネクト最新情報
CSS・JSにクエリパラメータを追加して、更新した時だけキャッシュをクリアさせる方法
CSS・JSにクエリパラメータを追加して、更新した時だけキャッシュをクリアさせる方法
この記事は公開から1年以上経過しています。
こんにちは、チーフクリエイターのSHOJIです。
Web関連の開発業務に携わるエンジニアであれば、誰もが面倒に思う「キャッシュの存在」。
以前に『iPhone Safariでスーパーリロード（キャッシュクリア）が簡単にできるショートカットの実装方法』と題してお届けした記事も間もなく３年が経過しようとしていますが、現在でも多くのアクセスをいただいていることを考えると、みなさん苦労されてるんだなと感じます。
そこで今回も、この「キャッシュクリア」に関してお届けしたいと思います。題して『CSS・JSにクエリパラメータを追加して、更新した時だけキャッシュをクリアさせる方法』。
- \\ 目 次 //
- 実装方法
- キャッシュの維持・更新
- あとがき
実装方法
実装方法は至って簡単！
読み込むファイルの拡張子の後ろに「クエリパラメータ」を付与するだけです。
「クエリパラメータって何？」って思われる方も、一度は見たことがあるはず！
例えば、CSSファイルの読み込みをする際、
＜link rel="stylesheet" href="style.css"＞
このように記述していると思いますが、
＜link rel="stylesheet" href="style.css?ver=20230401"＞
上記のように、ファイルの拡張子の後ろに「?◯◯=△△」というような文字列が付与された部分を、クエリパラメータといいます。
つまり、ファイルの拡張子の後ろに「?20230401」や「?ver=1.0」などのようにクエリパラメータを記述すれば良いのです。基本的には、更新日や実際のバージョン数などを設定するケースが多いため、数字や「.」を使った任意の文字列で構いません。
キャッシュの維持・更新
このクエリパラメータが変わらないうちはキャッシュが維持されるのですが、ファイルを変更後にクエリパラメータを変更するとブラウザが自動的にキャッシュを更新してくれます。
例えば、
＜link rel="stylesheet" href="style.css?ver=20230401"＞から、
＜link rel="stylesheet" href="style.css?ver=20230402"＞のように、クエリパラメータを変更するだけでキャッシュクリアされるのです。
あとがき
開発中や公開後の修正時において、CSSやJSを変更した後にクライアントに確認してもらう際、「何も変わってないですよ？」と言われて、強制リロードの手順を教えるって経験ありませんか？
このような経験のある方は、自身もテスト環境においてFTPなどで修正ファイルをアップロード後に、デベロッパーツールで「キャッシュの消去とハード再読み込み」を行なって確認してることと思います。
これでは自信が面倒なだけでなく、クライアントやユーザーにもデザインの表示崩れやプログラムが動かないなどのトラブルが起こってしまい大きな問題です。そもそも、強制リロードを知ってる人が少ないですからね･･･。
ぜひ、今回の記事を参考にしていただき、作業の効率化だけでなく公開後のトラブル回避に繋げてもらえれば幸いです。
［Webの豆知識］関連記事
Service
Contact
インフォコネクトに相談してみませんか？
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。