Webサイトを更新したのに「古いまま表示される」「反映されない」という相談は非常に多くあります。 その原因のほとんどが ブラウザキャッシュ の仕組みによるものです。
この記事では、強キャッシュ・弱キャッシュ・ETag・Last-Modified といった キャッシュの基本から、更新が反映されないときの原因、正しい対策までを中級者向けにやさしく解説します。
ブラウザキャッシュとは？
ブラウザキャッシュとは、Webページのデータ（HTML・CSS・JS・画像など）を 一時的に端末へ保存し、次回の読み込みを高速化する仕組みです。
キャッシュは主に以下のメリットを提供します：
- ページ表示が速くなる
- 画像・スクリプトの再ダウンロードを避け省データ化
- サーバー負荷の軽減
しかしこの仕組みが裏目に出ると、 サイトを更新しても古いデータが残り続ける という現象が起こります。
キャッシュには「強キャッシュ」と「弱キャッシュ」がある
ブラウザキャッシュには、実はレベルが2種類あります。
① 強キャッシュ（期限が切れるまでサーバーに問い合わせない）
ブラウザが サーバーへアクセスすらしない キャッシュ方式。 「完全にキャッシュだけで表示」されるため、更新しても反映されないトラブルの主犯です。
強キャッシュが発動する条件：
Cache-Control: max-age=◯◯Expires: ◯◯
たとえば max-age=31536000（1年）などを設定していると、
CSS や JS が1年間更新されない状態になります。
② 弱キャッシュ（サーバーに確認してから使う）
弱キャッシュは、保存されたキャッシュを使ってよいかどうかを サーバーに確認する方式です。
主に以下のヘッダーが使われます：
ETagIf-None-MatchLast-ModifiedIf-Modified-Since
サーバーが「変更なし」と判断すると 304 Not Modified が返り、 キャッシュがそのまま使われます。
なぜ「更新しても反映されない」問題が起こるのか？
Web制作者がもっとも悩まされるのは次の現象です：
CSS や JS を更新しても、ブラウザが古いファイルを使い続ける。
原因① 強キャッシュが長く設定されている
特に静的ホスティング（CDN）では強キャッシュが長期間設定されることがあります。
原因② ファイル名が変わっていない
ブラウザは 「同じURLなら同じファイル」 と判断します。
同じ style.css を読み続けるのはこのためです。
原因③ バージョン付けがされていない
style.css?v=1.2 のようなバージョン管理がないと、キャッシュ破棄ができません。
キャッシュ更新を確実に反映させる方法
① ファイル名にバージョンを付ける（王道）
style.css?v=20260202Chrome も 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が同じだから」
- バージョン付けが最も確実なキャッシュ更新方法
キャッシュは便利ですが、仕組みを理解していないと 「変更が反映されない」という強烈な落とし穴になります。 この記事で基本を押さえて、キャッシュに悩まされない開発を目指しましょう。
