【キャッシュ更新を強制する】3つの手法（html）

皆さんはこういう経験はありませんか？

ニャンコ

サイトの修正が終わったので、確認お願いします！

了解です。どれどれ。。。
あれ？　直ってないですよ？

ワンコ

ニャンコ

ええええっ！　マジですか？

たとえば、サイトの修正を終わらせて上司や先方に報告をします。
ですが、「修正されていなかったですよー」などと言われたことってありませんか？

そのほとんどはブラウザに残っているキャッシュが原因です。

一度キャッシュを無効化し、新たに更新したファイルを読み込ませる方法を解説します。
これでもう二度手間になることはありません。

スクール不要！独学でWebエンジニアなれるWeb教材

Web制作学習に役立つサービスを見つけてしまいました。
このCode Lessonは、「未経験から独学でプロを目指す」というコンセプトのもと、実践的なコーディング学習ができるプログラミング学習サービスです。
全てブラウザ上で学習できるので、環境構築不要！登録後すぐにコードが書けます。

プロのエンジニアが設計した学習ロードマップで、アプリやWebサイトを最短開発を目指せる。
分かりやすいスキルスライドでと、コーディングチャレンジで知識を定着！
WebサイトやWebアプリなどの実装レッスンで実践的な学習が可能です。
3月25日まで1,000円割引の永年月1,980円で利用可能。

\ まずは無料で体験してみる /

Code Lesson

ブラウザのキャッシュをクリアする方法

まずは、各ブラウザのキャッシュをクリアする方法です。

ブラウザの設定から削除

各ブラウザごとにキャッシュをクリアする方法は違いますが、ほとんどは「設定」画面などから、閲覧履歴の削除といった項目がありますので、そちらから削除できます。

ただ、毎回そのような操作をするのはめんどくさいので、次のショートカットを使いましょう。

スーパーリロードでキャッシュをクリア

スーパーリロードとは通常の更新とは違い、キャッシュを削除して再読み込みする機能です。
こちらもショートカットキーはブラウザごとに異なります。

代表的なブラウザのショートカットを記載します。

Chromeのキャッシュをクリア

shift + F5キー

Firefoxのキャッシュをクリア

ctrl + F5キー

Safariのキャッシュをクリア

shift + F5キー

パラメータを追加してキャッシュ更新を強制する

ただ上記の方法だと、上司や取引先にわざわざ

「ブラウザのキャッシュ消してから見てください！」

と言わなければなりません。

PCに詳しくない方だと「なんですか？キャッシュって」ともなりかねませんし、そもそもサイトを見に来る一般のお客さまはいちいちブラウザのキャッシュ消してからサイトを見ないですよね

なのでこちらで強制的に再読み込みさせましょう

CSSやimgにパラメータを追加する

キャッシュを無視して再読み込みさせる方法が、CSSや画像にパラメータを追加する方法です。
パラメータとは簡単に言うと、アマゾンなどのサイトURLを見てると、「?123」のように？に続いて英数字が並んでたりします。
あれは、サーバーに情報を送っているのですが簡単にいうとあれと同じです。
CSSやimgにも同じようにパラメータ渡せます。
渡すものはなんでもいいんですが、分かりやすく更新日の日付が良いでしょう。

/* cssの後ろに日付パラメータ追加 */
<link rel='stylesheet'  href='style.css?20221222' />

/* 画像も同じように */
<img src="logo.jpg?20221222">

パラメータを渡すことによって、新しいファイルと認識するため、キャッシュが残っていても再読み込みしてくれます。
もしまた別の日に修正などが入ったら日付を書き直せばまた読み直してくれます。

これで自動で再読み込みしてくれるので、「直ってないよ！」といわれることもないでしょう。

PHPを使用してキャッシュ更新を強制する

PHPを使用してキャッシュを無効化する方法です。
「PHPよく分からないよ！」という方も簡単だし、覚えると便利なので是非ご参考下さい。

phpの「date」関数でキャッシュを無効化する

パラメータを渡す方法は便利ですが、毎度パラメータを記載するのがめんどくさい！
というときは、PHPでパラメータを自動化しましょう。

phpのdate関数で現在時刻を出力させます。
これなら毎回手動で変えなくても、毎度自動で読み込んでくれますね。

date関数

指定した日付を、引数で指定したフォーマットの日付文字列として返します。
日付けが指定されていない場合、現在の時刻が使われます。

<!-- data関数に与えている（'YmdH'）は年月日時になるようフォーマットを指定しています。 -->
<link rel="stylesheet" href="style.css?<?php echo date('YmdH'); ?>" type="text/css">

これを実際にサーバーで実行すると、👇のように現在日付のパラメータが設定されます。

<link rel="stylesheet" href="style.css?2024012013" type="text/css">

phpの「filemtime」関数でキャッシュを無効化する

dateでパラメータ出力する方法だと、常にキャッシュを無効化するので、キャッシュの機能自体が全く無意味なものになります。

そこで、「filemtime」を使用します。
filemtime()関数はファイルの更新日時を取得する関数です。
ファイル更新日時をファイル名の後ろに出力することで、ファイル更新時のみキャッシュを無効化することが可能です。

filemtime(ファイルへのパス)

用方法としては、ファイル名の後ろに出力します。
注意点としては絶対パスは使用できないので相対パスで指定しましょう。

<link href="../css/style.css?<?php echo filemtime('../css/style.css');?>" rel="stylesheet">

これを実行すると、下記のようにファイルの更新日付けがパラメータとして渡されます。

<link href="../css/style.css?1705759220" rel="stylesheet">

これで、ｃｓｓファイル更新時のみキャッシュを自動で読み直すので、今後いちいちキャッシュを更新する必要がなくなります。

以上　ブラウザのキャッシュをクリアする方法でした。
直ってないよ！って言われたときは、キャッシュくらい消して見ろ！！　とも思いますが、こちらの不備ですのでしっかり対応しましょう！