ブラウザキャッシュの仕組みを徹底解説｜更新されない・古い表示になる原因とは？

最終更新：2026/02/02

Webサイトを更新したのに「古いまま表示される」「反映されない」という相談は非常に多くあります。
その原因のほとんどが ブラウザキャッシュ の仕組みによるものです。

この記事では、強キャッシュ・弱キャッシュ・ETag・Last-Modified といった
キャッシュの基本から、更新が反映されないときの原因、正しい対策までを中級者向けにやさしく解説します。

ブラウザキャッシュとは？

ブラウザキャッシュとは、Webページのデータ（HTML・CSS・JS・画像など）を
一時的に端末へ保存し、次回の読み込みを高速化する仕組みです。

キャッシュは主に以下のメリットを提供します：

• ページ表示が速くなる
• 画像・スクリプトの再ダウンロードを避け省データ化
• サーバー負荷の軽減

しかしこの仕組みが裏目に出ると、
サイトを更新しても古いデータが残り続ける
という現象が起こります。

キャッシュには「強キャッシュ」と「弱キャッシュ」がある

ブラウザキャッシュには、実はレベルが2種類あります。

① 強キャッシュ（期限が切れるまでサーバーに問い合わせない）

ブラウザが サーバーへアクセスすらしない キャッシュ方式。
「完全にキャッシュだけで表示」されるため、更新しても反映されないトラブルの主犯です。

強キャッシュが発動する条件：

• Cache-Control: max-age=◯◯
• Expires: ◯◯

たとえば max-age=31536000（1年）などを設定していると、
CSS や JS が1年間更新されない状態になります。

② 弱キャッシュ（サーバーに確認してから使う）

弱キャッシュは、保存されたキャッシュを使ってよいかどうかを
サーバーに確認する方式です。

主に以下のヘッダーが使われます：

• ETag
• If-None-Match
• Last-Modified
• If-Modified-Since

サーバーが「変更なし」と判断すると 304 Not Modified が返り、
キャッシュがそのまま使われます。

なぜ「更新しても反映されない」問題が起こるのか？

Web制作者がもっとも悩まされるのは次の現象です：

CSS や JS を更新しても、ブラウザが古いファイルを使い続ける。

原因① 強キャッシュが長く設定されている

特に静的ホスティング（CDN）では強キャッシュが長期間設定されることがあります。

原因② ファイル名が変わっていない

ブラウザは 「同じURLなら同じファイル」 と判断します。
同じ style.css を読み続けるのはこのためです。

原因③ バージョン付けがされていない

style.css?v=1.2 のようなバージョン管理がないと、キャッシュ破棄ができません。

キャッシュ更新を確実に反映させる方法

① ファイル名にバージョンを付ける（王道）

style.css?v=20260202

Chrome も Safari も URLが異なれば必ず新ファイルを取りに行くため、
もっとも確実で安全。

② ファイル自体の名前を変える

style.abc123.css

ビルドツール（Vite, Webpack）が行うハッシュ付けもこの方式。

③ Cache-Control を短くする

更新頻度が高いファイル（HTML・JSONなど）は：

Cache-Control: no-cache

にするとサーバー確認が必ず行われます。

ブラウザごとのキャッシュ挙動の違い

Safari（iPhone）

• 強キャッシュが効きやすい
• Back/Forward Cache（BFCache）が強い
• 更新されない問題が起こりやすい

Chrome（Android/PC）

• ETag の判定が安定
• キャッシュ挙動が比較的素直

Firefox

• ETag が強めに働く
• 開発中はキャッシュ無効が重要

キャッシュ問題を避けるためのベストプラクティス

• CSS/JSには必ずバージョンを付ける
• 更新頻度に応じて Cache-Control を調整
• PWA は Service Worker と併用する場合は特に注意
• CDN のキャッシュポリシーを把握する
• 更新時は Hard Reload を案内する

まとめ

• ブラウザキャッシュは高速化のために作られている
• 強キャッシュと弱キャッシュがあり、更新反映に影響する
• 更新されない問題の原因は「URLが同じだから」
• バージョン付けが最も確実なキャッシュ更新方法

キャッシュは便利ですが、仕組みを理解していないと
「変更が反映されない」という強烈な落とし穴になります。
この記事で基本を押さえて、キャッシュに悩まされない開発を目指しましょう。