memo
ブラウザキャッシュとスーパーリロード完全ガイド

ブラウザキャッシュとスーパーリロード完全ガイド

ウェブ制作を行なっていると、 「HTMLやCSSファイル更新したのに何故かブラウザで更新されない...どうして...」 みたいなことってたまにありますよね。
これって、使っているブラウザのキャッシュ（閲覧履歴）が原因として絡んでいることがよくあります。
ウェブ制作に関わっている人以外だと、日常生活ではまずキャッシュなんて気にしないだろうし、存在すら知らない人の方がきっと多いと思います。
受託の場合は特にですが、クライアントへの報告や修正の確認を依頼する際、 変化が確認できないと言われ、 『キャッシュを切ってみてください。（削除してみてください）』とご案内することが多々あります。
度々起きうることなので、備忘録として残しておきます。

そもそもキャッシュってなんだろう？

ここで指すのは『ブラウザキャッシュ』になりますが、ブラウザ上でページを表示した時に表示されている画像やHTMLファイルなどのデータを一時的にローカル環境に記憶(保存)しておく機能を指します。
次に同じページにアクセスした際にサーバーからデータを1からダウンロードして表示させるのではなく、一度保存しておいたデータを参照するため、前回よりも速く表示することができる機能ですね。

ブラウザがキャッシュを使うかどうかの判断基準

ブラウザは賢くて、「このファイルはキャッシュから使っていいのか？」を自動で判断しています。その判断材料となるのが、サーバーから送られてくるHTTPヘッダーです。
主なヘッダーには以下のようなものがあります：
Cache-Control キャッシュの有効期限や動作を制御する最も重要なヘッダーです。

Cache-Control: max-age=3600
→ 3600秒（1時間）キャッシュを保持

Cache-Control: no-cache
→ キャッシュは保存するが、使用前に毎回サーバーに新しいか確認

Cache-Control: no-store
→ キャッシュを一切保存しない

ETag（エンティティタグ） ファイルの「指紋」のようなもの。ファイルが更新されるとこの値も変わります。

ETag: "abc123def456"

ブラウザは次回アクセス時にこのETagをサーバーに送り、「まだabc123def456のままですか？」と確認します。変わっていなければ「304 Not Modified」というレスポンスが返ってきて、キャッシュを使います。
Last-Modified ファイルが最後に更新された日時。ETagと似た働きをします。

Last-Modified: Wed, 15 Oct 2025 12:00:00 GMT

これらのヘッダーを組み合わせて、ブラウザは「キャッシュを使うか、サーバーに問い合わせるか、完全に取得し直すか」を賢く判断しているんですね。

じゃあスーパーリロードは？

ブラウザのキャッシュ（閲覧履歴）は残したまま、強制的にwebサーバーから取得する方法を指します。 （ブラウザキャッシュを無視してのリロードというイメージです。）
通常の更新（リロード）で更新が確認できない場合は、こちらを使用して確認するとほぼ確実に正常に確認できます。
実は、リロードには3段階あって：

  1. 通常のリロード（F5 / ⌘R）：キャッシュを基本的に使用。HTMLのみサーバーに確認を取る
  2. ハードリロード（⌘Shift+R / Ctrl+Shift+R）：すべてのリソースを強制的に再取得
  3. キャッシュクリア＋ハードリロード：開発者ツールのリロードボタンを長押しで選択可能

制作時は2番目のハードリロード（スーパーリロード）で十分なことが多いです。

シークレットモード

モダンwebブラウザにはシークレットモード（プライベートモード）という機能が実装されています。 この機能はキャッシュが残らない仕様になっているため、常に最新のデータを取得してくれるので制作・開発に最適とも言えますが、通常のモードとは分離されるためウィンドウが増えたり、登録している拡張機能が使えなかったりするので、場合に応じて使い分けるのがいいと思います。

各ブラウザのショートカット一覧

Google Chrome

Mac: ⌘Command + Shift + R
Win: Ctrl + Shift + R / Ctrl + F5

Firefox

Mac: ⌘Command + Shift + R
Win: Ctrl + Shift + R / Ctrl + F5

Internet Explorer

Win: Ctrl + F5

※ Internet Explorerは2022年にサポート終了しています。

Microsoft Edge

Win: Ctrl + F5

Safari

Mac:
(先にキャッシュを空にします)
⌘Command + Option + E
↓
(そのあとリロード)
⌘Command + R

開発時にキャッシュで困らないための設定

制作・開発中は毎回スーパーリロードするのも面倒ですよね。そこで、開発時にキャッシュを無効化する方法をいくつか紹介します。

ブラウザの開発者ツールで無効化

Chrome / Edge / Firefox

  1. 開発者ツールを開く（F12 / ⌘Option+I）
  2. Networkタブを開く
  3. 「Disable cache」にチェックを入れる

これで開発者ツールを開いている間はキャッシュが無効化されます。開発中はツールを開きっぱなしにしておけば、常に最新のファイルが読み込まれます。

ファイルにバージョン番号をつける

本番環境では、ファイル名やクエリパラメータにバージョン番号をつけることで、更新時に確実に新しいファイルを読み込ませることができます。
クエリパラメータ方式

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

更新するたびにバージョン番号を変えれば、ブラウザは「新しいファイルだ」と認識します。
ハッシュ値方式（より確実）
ビルドツールを使っている場合は、ファイル内容からハッシュ値を生成して埋め込む方法が主流です。

<link rel="stylesheet" href="style.a3f2c1b.css">
<script src="main.9d8e7f6.js"></script>

webpack、Vite、Parcelなどのモダンなビルドツールはこの機能を標準で持っています。ファイルが変更された場合のみハッシュ値が変わるので、キャッシュ効率も良好です。

Service Workerに要注意

PWA（Progressive Web App）を作っている場合、Service Workerが独自のキャッシュ戦略を持っていることがあります。
Service Workerは通常のブラウザキャッシュとは別のキャッシュ領域を持っているため、スーパーリロードでも更新されないことがあります。
確認方法（Chrome）

  1. 開発者ツールを開く
  2. Applicationタブを開く
  3. Service Workersセクションで「Unregister」や「Update」を試す
  4. Cache Storageでキャッシュの中身を確認・削除できる

開発中は「Update on reload」にチェックを入れておくと、リロードのたびにService Workerが更新されて便利です。

サーバー側のキャッシュも理解しておこう

実は、キャッシュはブラウザだけでなく、サーバー側にも存在します。

サーバーキャッシュ

サーバー側でページの生成結果をキャッシュする仕組みです。特にWordPressなどのCMSでは、PHPの処理結果をキャッシュして高速化することが一般的です。
これがあるため、「ファイルを更新したしブラウザもリロードしたのに変わらない！」ということが起きます。

CDNキャッシュ

CloudflareやCloudFront、FastlyなどのCDN（Content Delivery Network）を使用している場合、CDN側でもファイルがキャッシュされています。
キャッシュの階層構造

ユーザー → ブラウザキャッシュ → CDNキャッシュ → サーバーキャッシュ → 実際のファイル

この多層構造を理解しておくと、「どこのキャッシュが原因か」を切り分けやすくなります。
更新が反映されない時は：

  1. まずブラウザキャッシュをクリア（スーパーリロード）
  2. それでもダメならCDNのキャッシュをパージ
  3. さらにダメならサーバーキャッシュをクリア

という順番で確認していくと効率的です。

Cache-Controlヘッダーの設定例

静的ファイルのキャッシュ設定は、サーバー側で適切に設定するのがベストプラクティスです。
Apache（.htaccess）の例

# 画像、CSS、JSは1年キャッシュ
<FilesMatch "\.(jpg|jpeg|png|gif|css|js)$">
  Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# HTMLは毎回検証
<FilesMatch "\.(html)$">
  Header set Cache-Control "no-cache, must-revalidate"
</FilesMatch>

Nginxの例

location ~* \.(jpg|jpeg|png|gif|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location ~* \.(html)$ {
    expires -1;
    add_header Cache-Control "no-cache";
}

こうすることで、変更頻度の低いファイルは長期キャッシュ、HTMLは常に最新版をチェックという運用ができます。

WordPressではこれを超えてくる場合も

ワードプレスを使用しているサイトでは、稀に前述のスーパーキャッシュが効かない時があります。 その際は、キャッシュ系のプラグインを使用していないかを確認してみましょう。
もし使用している場合は、一度プラグイン上でキャッシュクリアしてみることをお勧めします。 （僕はこれで解決した実績が2回ほどあります。）
主なキャッシュプラグイン：

  • WP Super Cache
  • W3 Total Cache
  • WP Rocket
  • LiteSpeed Cache

これらのプラグインは非常に強力なキャッシュ機構を持っているため、管理画面からキャッシュをクリアしないと更新が反映されないことがあります。開発中は一時的に無効化するのも一つの手です。

キャッシュと上手に付き合うために

キャッシュは高速化のための重要な仕組みですが、開発時には邪魔になることも多いですよね。
開発時のチェックリスト：

  • 開発者ツールの「Disable cache」を有効化
  • Service Workerを使っている場合は要確認
  • サーバーキャッシュやCDNキャッシュも存在を意識
  • 本番環境ではファイル名にバージョンやハッシュを含める

トラブル時の確認順序：

  1. スーパーリロード（Ctrl+Shift+R / ⌘Shift+R）
  2. キャッシュのクリア＋ハードリロード
  3. シークレットモードで確認
  4. 開発者ツールのNetworkタブで実際に読み込まれているファイルを確認
  5. Service Workerのキャッシュを確認
  6. サーバー側のキャッシュプラグインを確認
  7. CDNのキャッシュをパージ

この流れを覚えておけば、「更新されない！」というトラブルもスムーズに解決できるはずです。
ではまた。