html・css PHP

スーパーリロードのお願いをなくす!キャッシュでCSSやjsが更新されない問題をなくすコード

先方さんに制作物を提出→確認→提出→確認…の流れを何度も繰り返していると、わたしの環境では修正が反映されているのに、先方さんの環境では確認できない…ということもしばしば。

その際、先方さんに「スーパーリロードでキャッシュ削除をお願いします!」と言っても伝わらない、あるあるですよね。

ならばキャッシュはこちらで削除をしてあげた方が親切でしょう!

キャッシュ削除の方法について、備忘録もかねてメモっておきます。

キャッシュを削除する方法

CSSや読み込みの記述にパラメータをつけるだけで解決します。

<link rel="stylesheet" href="css/style.css?ver=1.0.1"/>
<script src="./js/main.js?ver=1.0.1"></script>

?ver=1.0.1」の部分をクエリと言い、この部分を変更することでcssファイルを別物として読み込むことができるため、キャッシュの影響を受けなくなります。

ver=○○で管理することもありますが、更新が頻回に行われるファイルの場合、ver=20241012のように日付で管理する場合も多いです。

ファイルを自動で更新する方法(PHP)

PHPを使用すると自動でファイルを更新することができます。

<link rel="stylesheet" type="text/css" href="css/style.css?ver=<?php echo date('YmdHis'); ?>"/>
<script src="./js/main.js?ver=<?php echo date('YmdHis'); ?>"></script>

date('YmdHis')の部分が自動で日付を取得するPHPのコードです。

このPHPで「Y:年数」「m:月」「d:日」「H:時間」「i:分」「s:秒」を取得しています。

秒数まで入れると細かい…みたいな意見もありますが、私はあんまり気にしないのでこのまま使用してます。(秒数無くしたい場合はsを削除して使用してください。)

まとめ

先方さんにキャッシュ削除のお願いをするのではなく、こちらで削除してしまう方法を解説しました。

自分で開発するときも結構便利なコードなので、ぜひ活用してください!

記事にしてほしい・解説してほしい内容のリクエストもお待ちしています。

プログラミングに興味がある方へ

プログラミングに興味があるけど踏み出すのに勇気がいる…
始めてみたけど進め方がわからない、誰かに質問したい…
ネットの教材は高くて手が出ない…
案件を取ってみたけど納品までたどり着けない…

家庭教師の経験を活かし、そんな方のお手伝いをしたいと思っています。

30万もする悪質で高額なコンテンツマーケティングに騙される前に、相談してみませんか?
相談はもちろん無料です。

こちらから、ぜひお気軽にお問い合わせください。
お仕事のご相談や記事にしてほしい内容のリクエストもお待ちしています!

-html・css, PHP