キャッシュを上書きして強制再読み込み（スーパーリロード）する方法2021

今回は結論から！

Windows

Ctrl + F5

ブラウザによっていろんな組み合わせがありますが、Chrome、Firefox、Edge、Internet Explorerすべて共通で動作するのはこれです。

Mac

Shift + Cmd + R

ChromeとFirefoxはこの組み合わせでいけます。

Safariだけ特殊で、一発でスーパーリロードできるショートカットキーがありません。
Shift + ブラウザの更新ボタンでスーパーリロードになります。

スマートフォン

スマートフォンがちょっと面倒です。そのページだけスーパーリロードするという方法がありません。
設定からキャッシュを消してやる必要があります。

Safari(iOS)

設定 > Safari > 詳細（一番下の項目） > Webサイトデータ

ここにこれまでに表示したサイトのドメインが並んでいるので、消したいサイトを選んで削除する・・・んですが、タップしても何も起こりません。
左にスライドすると削除ボタンが出てくるので、それをタップして削除します。

※「設定 > Safari > 履歴とWebサイトデータを消去」でも消せますが、履歴やCookieも含めてすべてのサイトの情報が削除されてしまいます。

Chrome(iOS/Android)

ブラウザの「・・・」マーク > 履歴 > 閲覧履歴データを削除…

「キャッシュされた画像とファイル」にチェックを入れて、[データを削除]します。
Chromeの場合はサイト単位での削除ができません。すべてのサイトのキャッシュが消えてしまいます。

はい、お疲れさまです。真田＠バランスボーラーです。久しぶりに使うとやっぱりいいですね。1日中はキツいですけど。

よくサイトを修正して、クライアントに確認してもらおうとしたら『変わってない』『崩れてるよ〜』なんて言われるみたいなことがありますよね。そういうときにいちいちキャッシュ消してみてください〜という説明が大変なのでまとめてみました。
すぐに参照できるようにまとめを最初に書いておいたよ😇

キャッシュとは

キャッシュ（cache）というのは、一時保存ファイルのことです。
一度閲覧したウェブサイトのデータを端末内に保存しておき、次に表示するときにその内容に変化がなければ、保存したデータを使うことで表示を高速化したり通信帯域を節約する機能です。

キャッシュの機能がないと、みんながサイトにアクセスするたびにすべてのデータをダウンロードすることになって、インターネットが大変なことになってしまいます。
重要な機能なのですが、思ったように変わってくれなかったりパソコンの調子の悪さの原因になったりすることもあるので、たまに削除してあげるとよかったりします。

スーパーリロード（強制再読み込み）とは

通常、ページを再読み込みするには、ブラウザの更新ボタンやF5キー、Ctrl(Cmd)+Rを使いますが、それだけではキャッシュしたファイルまでは読み込まれずに完全に変わらない場合があります。

端末内のキャッシュを上書きして強制的にすべて再読み込みするには上記のような操作が必要です。このことをスーパーリロードとかハードリロードなどと言います。
キャッシュが原因であれば、大抵はこの操作で改善するはずです。

【開発者向け】そもそもキャッシュを使わせない方法

とはいえウェブサイトをリニューアルしたり細かく修正するたびにお客様に「スーパーリロードしてください」と伝えるのも不親切です。ましてやエンドユーザーは変わったことにも気づかずに古いキャッシュの情報を見続けるかもしれません。

ですので、変更があった場合は制作側で対応するのが良いでしょう。

キャッシュデータが使われるのは主にcssやjs、画像などの外部リンクファイルです。
このファイル名が同じだと、内容も同じだとブラウザに判断されてキャッシュされているデータが使われてしまいます。
なのでファイル名を変えてやればいいのですが、それは大変に面倒なのでファイル名の後ろにパラメータを付けてやります。
（文字列は何でもいいですが、慣例的に使われているのはファイルを更新した日時です）

<link href="style.css?abc">
<script src="script.js?20210311">

こうすることによってブラウザは今キャッシュに持っているファイルとは別ものだなと認識するので強制的に読み込ませる事が可能です。

そしてこれは自動化してしまうことができます。
たまにしか更新がないのであれば手動でもいいかもしれませんが、プログラム的に対応させてしまうのが楽です。
（頻繁に更新がある＆重要な更新ではない場合はサーバーの負荷が高くなってしまうのでしないほうがいいでしょう。状況によりけりです）

例えばPHPであれば、filemtime で該当ファイルの更新日時を取得できるので、それをファイル名の後ろにつけてやるといいでしょう。
（やり方はググれば出てきます…!）

ちょっとした手間でみんなハッピーになれるので、是非実装していくようにしましょう！