こんにちは、阿久梨絵です。
Web制作をしていると「キャッシュが残ってて反映されない…」という場面に必ず出会います。
でも、そもそも ブラウザ のキャッシュって何をしているの？
どんな情報を保持して、どんなタイミングで消えるの？
という部分は意外と知られていません。
この記事では、専門用語をできるだけ避けながら、
ブラウザキャッシュの仕組みをやさしく紹介します。
キャッシュとは？
キャッシュとは、
「よく使うデータをブラウザの中に一時保存しておく仕組み」
のことです。
目的はただひとつ。
ページを速く表示するため。
ブラウザがキャッシュとして保持しているもの
キャッシュは“環境”というより、Webページを構成するファイルのコピーです。
具体的には…
HTML
・ページの骨組み。
CSS
・デザインやレイアウト。
JavaScript
・動きをつけるスクリプト。
画像（PNG / JPG / WebP / AVIF など）
・特に画像は重いのでキャッシュの恩恵が大きい。
フォント
・Webフォントもキャッシュされる。
APIレスポンス（場合によって）
PWAやService Workerを使うと、データそのものをキャッシュすることも。
つまり、
「次に同じページを開いたとき、サーバーに取りに行かず、手元のコピーを使う」
というのがキャッシュの役割です。
キャッシュがあると何が嬉しいの？
メリットはとてもシンプル。
・ページ表示が速くなる
・通信量が減る
・サーバーの負荷が減る
特にスマホでは、
画像やCSSを毎回ダウンロードしないだけで体感速度が大きく変わります。
どんなタイミングでキャッシュは消えるの？
キャッシュは永遠に残るわけではありません。
いくつかのタイミングで自動的に消えたり、更新されたりします。
① 有効期限が切れたとき（Cache-Control / Expires）
サーバー側が
「このファイルは◯日間キャッシュしてOK」
と指定できます。
期限が切れると、ブラウザは新しいファイルを取りに行きます。
② ファイルが更新されたとき（ETag / Last-Modified）
サーバー側が
「このファイルは更新されたよ」
と返すと、ブラウザはキャッシュを捨てて新しいものを保存します。
③ ブラウザの容量がいっぱいになったとき
キャッシュには保存容量の上限があります。
いっぱいになると、古いものから自動で削除されます。
④ シークレットモードを閉じたとき
シークレットモードではキャッシュが残りません。
ウィンドウを閉じた瞬間に消えます。
⑤ ユーザーが手動で削除したとき
設定 → 履歴 → キャッシュ削除
で強制的に消せます。
⑥ ブラウザのアップデート時にクリアされることがある
大きなアップデートの際、キャッシュがリセットされる場合があります。
キャッシュが“残りすぎて困る”のはなぜ？
Web制作でよくあるのが…
・CSSを更新したのに反映されない
・画像を差し替えたのに古いまま
・JavaScriptが古いバージョンのまま動く
これは、
ブラウザが「まだキャッシュ使えるよね？」と判断している
ためです。
対策としては、
・ファイル名にバージョンをつける（style.css → style.v2.css）
・Cache-Control を短めに設定する
・開発中はキャッシュ無効化モードを使う
などがあります。
まとめ
ブラウザ のキャッシュは、
・HTML / CSS / JS
・画像
・フォント
・一部のデータ
などを保存し、
ページを速く表示するための仕組み です。
そしてキャッシュは、
・有効期限
・更新通知
・容量オーバー
・シークレットモード終了
・手動削除
などのタイミングで消えます。
キャッシュは便利ですが、
Web制作では“残りすぎて困る”こともあるため、
仕組みを理解しておくとトラブルが減ります。
阿久梨絵でした。
