キャッシュクリアしてください。( •ω•́ )ｷﾘ✧
そう言われて。イライラしてませんか。
年々、キャッシュが強くなっている気がします。
ブラウザのキャッシュが読み込まれてしまい、更新したハズの画像や、CSS とか JSファイルが、更新後の新しい状態で確認できないということがあります。
ブラウザキャッシュとは
いったん見たホームページを、次回も素早く表示するために、わざと画像やCSS等をブラウザに保存しておく（まま再利用する）機能です。
モダンブラウザには標準で付いている機能で、その機能が最新の更新情報を素早く確認する妨げになっていると言ってもよいでしょう。
よくある声
ホームページを始めてから間もない方はもしかすると、更新しているのに古い状態が表示され続けてしまい、イライラ憤死することもあり得ます。
再読み込みボタンを押してるんですが、いくら押しても表示が変わらないです。どうしてですか？本当に変えましたか。
キャッシュクリアしてと言われてやっているのですが、毎回やらないといけないのでしょうか。こんな面倒なことするのは御社が初めてです。
確認も返答もとにかく遅いです。対策はないのでしょうか？
イライラしたら言葉にトゲが出てしまいます。
私も初心者でした。キャッシュクリアの方法を知っていれば、禿げなかったと思います。
キャッシュクリアしても変わってないですよ。
え？うそ！すみません。
ヒューマンエラーの可能性も十分あります。
chromeならアプリが楽ちんです！
chrome専用ですが、とにかく楽なのでオススメです。
新しい更新ボタンがプラウザに設置できて、ボタンをワンクリックで、キャッシュ削除＆ページ更新もしてくれます。
公式：Clear Cache
https://chromewebstore.google.com/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn
※このアプリはブラウザのキャッシュクリアを行うようです。
実行するとブラウザ全体（開いているタブの全てのページ）のキャッシュもクリアになりました。
chromeにはシークレットモードという機能がありますが、このアプリがあれば使う必要はないかもです。
え？得体の知れないアプリを入れたくない。
そうなれば、キャッシュクリアを行うには2つの分かれ道があります。
- 自分でクリアする
- 誰かにしてもらう
自分でクリアする
ポピュラーな方法はブラウザの右上の「︙」から「閲覧データの削除…」を使います。が、より簡単なショートカットでの「スーパーリロード」がお勧めです。
・スーパーリロード
沢山種類のあるブラウザですが、モダンブラウザの全てに共通しているスーパーリロードがありました。
それはShift キー を押しながら 更新ボタン をクリックです。
これ一択でいいんじゃないかと思います。
スーパーリロードのやり方は複数あるようです。
LCT.inc：参考
https://www.lct.jp/column/9354/
好きなスーパーリロードを使えばいいと思います。
※キャッシュクリアが面倒なもの2選。
●スマホの実機は、スーパーリロードというものがないです。
キャッシュが強いので普通のリロードは何回やっても無駄です。今は楽になってるかも？
●サーバーによるキャッシュは強情です。
スーパーリロードをしてもなかなか切り替わりが遅い、解決しないと感じたら、レンタルサーバーにログインして「ブラウザキャッシュ設定」を確認してみてください。
※ロリポップの場合は「ロリポップ！アクセラレータ」
https://lolipop.jp/media/website-good-use-of-cache/
【共有】誰かにしてもらうソースコード
誰かに頼んでやってもらうと費用が発生します。自分でやるのが吉です。
キャッシュコントロール方法はいろいろでした。
・METAタグ方法
このhttp-equivは、HTML5では非推奨になったそうで残念です。忘れましょう。
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Pragma" content="no-store">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="86400">・パラメータ付与方法
キャッシュされるようなファイルのお尻にパラメータを付与します。
パラメータ付与は多くの人がやる一般的な方法。
fileソースのお尻に手動で?●●●●と付け加えて、新しいファイル名を装う方法。
<link rel="stylesheet" href="./style.css?date202312" />
<script type="text/javascript" src="./common.js?date202312"></script>
<img src="./sample.jpg?date202312" alt="">PHPが使える環境ならfilemtimeでファイルの更新日を付与できる方法。
<!--PHP-->
<!--相対パス-->
<link rel="stylesheet" href="./style.css?<?php echo date('YmdHis', filemtime('./style.css')); ?>" />
<script type="text/javascript" src="./common.js?<?php echo date('YmdHis', filemtime('./common.js')); ?>"></script>
<!--絶対パス-->
<link rel="stylesheet" href="/style.css?<?php echo date('YmdHi', filemtime($_SERVER['DOCUMENT_ROOT'] . '/style.css')); ?>" />
<script type="text/javascript" src="/common.js?<?php echo date('YmdHi', filemtime($_SERVER['DOCUMENT_ROOT'] . '/common.js')); ?>"></script>
<!--WordPressの場合-->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/style.css?<?php echo date('YmdHi', filemtime(get_template_directory() . '/css/style.css')); ?>" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/common.js?<?php echo date('YmdHi', filemtime(get_template_directory() . '/js/common.js')); ?>"></script>スクリプトのnew Date()などを使い、今の日付を付与する方法。
<script>
var OriginalDate = new Date();
document.write('<link rel="stylesheet" type="text/css" href="css/index.css?'+OriginalDate.getTime()+'" media="all">');
</script>
<script defer>
document.write('<scr'+'ipt src="js/index.js?'+OriginalDate.getTime()+'" defer></scr'+'ipt>');
</script>new Date().getTime()を続けて使うと、以下のような数字が付きます。
<link rel="stylesheet" type="text/css" href="css/index.css?1727337761154" media="all">
画像に一気に付ける手法
$('.container img').each(function(index, element) {
const src = $(element).attr('src');
$(element).attr('src', src + '?' + new Date().getTime());
});パラメータ付与はCache Bustingと呼ばれるそうです。
パラメータつけてアップロードして、再読込みしたら再取得してくれます。
・PHP方法
PHPが使える環境の方限定です。
キャッシュさせたくない場合、no-cache。
させてもいいしタイマー入れたい場合、max-age=60のように。
<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");<?php
header('Cache-Control: public, max-age=60');index.phpとかヘッダー用ファイルなどの、ソースの一番上に追加したりします。
参考：【PHP】header関数によるHTTPヘッダの設定方法
https://webukatu.com/wordpress/blog/35590/
・htaccess追記方法
.htaccessファイルを編集する環境がある方限定です。
webpとか、AddTypeでMIMEタイプを追加も無ければ必要になるかもしれません。
AddType image/webp .webpキャッシュやめてほしい場合、no-cache。
タイマーでコントロールしたい場合、max-age=秒数。※1800は30分。
<IfModule mod_expires.c>
<filesMatch "\.(html|php|jpe?g|gif|png|pdf|css)$">
Header set Pragma no-cache
Header set Cache-Control no-cache
</filesMatch>
<filesMatch "\.(css|js|gif|jpe?g|png|webp|svg|ico)$">
Header set Cache-Control "public, max-age=1800"
</filesMatch>
</IfModule>Expiresで追加する場合。
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 30 days"
ExpiresByType text/javascript "access plus 30 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType audio/midi "access plus 30 days"
ExpiresByType audio/x-midi "access plus 30 days"
ExpiresByType audio/mpeg "access plus 30 days"
ExpiresByType font/woff A12960000
ExpiresByType font/vnd.ms-fontobject A12960000
</IfModule>A12960000の数字は秒数で、A=accessとM=modificationでそれぞれ、クライアントのアクセスを起点、ファイルのタイムスタンプを起点で期限を設定できる優れものです。
色々と勉強になります。
参考：PEAS CODE
https://peascode.com/web-development/prevent-css-js-cache-with-timestamp/
参考：tm23forest
https://tm23forest.com/contents/enable-browser-cache-by-htaccess
参考：Zenn JavaScriptでキャッシュを無視
https://zenn.dev/mindwood/articles/ba4594c53a93b0
構築環境や予算・運用の可否を確認して、好きなもの選びましょう。
そのくらい無料でやれや、一式見積りで入っとるで！
ふぇぇ、まじですか。。
スクリプトのnew Date()で、はじめから入れておくのも手です。
なんでキャッシュするの？どのくらい保存されているの？
「待ち時間が、3秒を過ぎると57％のWEBユーザーが去っていく。」という計測データがあるそうです。Webサイトの表示が遅いと、半分ちかくの人が逃げていってしまうという話です。
3秒も待てないとはせっかち過ぎませんか！
10秒がモチベーションの限界らしいです。確かに10秒も画面が真っ白状態で待たされたらイラッとするかもしれません。
なんとしても早くチョッパやで表示させたい。
同じならファイルはキャッシュして、また読み込ませるのはやめよう！
と、「表示スピード競争」に躍起になっているのが現在の状況でしょうか。
「スピードこそ正義」ということですね。
どのくらい保存されているの？
1日とか、そのくらいの期限があるだろうと思ってましたが、参考の内容を見る限りは、自分で期限を設定しないと、無期限で保存しているようです。
（参考がちょっと情報が古いかも。でも検索上位に出ます。）
キャッシュはどういう状況でどの程度保存されて、どんな状況になったら削除されるのか。各ブラウザの動きを解析するしかないようです。言いたくないのでしょう。。
企業秘密なんでしょうけども、書いといてほしいです。
煮え切らない気持ちです。
参考サイト置き場
参考にしました、ありがとうございます。
new Date()の使い方：cly7796.net
https://cly7796.net/blog/javascript/how-to-use-new-date/