キャッシュとは、一度取得したデータを保存して、次回以降すばやく使うための仕組みです。
Webページの画像、CSS、JavaScriptなどを毎回サーバーから取り直すと時間がかかります。キャッシュを使うと、保存済みのコピーを再利用できるため、表示が速くなったり通信量を減らしたりできます。
キャッシュは「近くに置いたコピー」です。便利ですが、古いコピーが残ると変更が反映されないこともあります。
この記事では、キャッシュの意味、ブラウザで表示が速くなる流れ、Cookieや履歴との違い、古い表示が出るときの対処、Cache-Controlの基本を初心者向けに整理します。
まず結論：キャッシュは近くに置くコピー
キャッシュは、元データを毎回取りに行かなくて済むように、よく使うデータのコピーを手元や近い場所に保存する仕組みです。Webではブラウザ、CDN、サーバー、DNSなど、いろいろな場所でキャッシュが使われます。
MDNでは、HTTPキャッシュは以前のレスポンスを再利用して不要なネットワーク要求を減らす仕組みとして説明されています。まずは「同じものを何度も取り直さないための保存」と覚えると十分です。
次の図では、利用者、キャッシュ、元データの関係を見てください。キャッシュは元データそのものではなく、近くに置かれたコピーです。
キャッシュで表示が速くなる流れ
ブラウザでWebページを開くと、HTML、CSS、JavaScript、画像など複数のファイルを読み込みます。初回はサーバーから取得しますが、保存できるものはブラウザのキャッシュに残ります。
以下の図で、初回アクセスで取得して保存し、2回目以降にキャッシュを使って速く表示する流れを確認してください。毎回サーバーへ取りに行かないことがポイントです。
HTTPの基本はHTTPとは？HTTPSとは？、Webページを開く入口はブラウザとは？で確認できます。
キャッシュがある場所
キャッシュはブラウザだけにあるものではありません。ブラウザの中、CDNなどの中間地点、サーバー内部、DNSの名前解決など、目的に応じていろいろな場所にあります。
| 場所 | 保存するものの例 | 初心者向けの見方 |
|---|---|---|
| ブラウザキャッシュ | 画像、CSS、JavaScript | 自分の端末に残るコピー |
| CDNキャッシュ | 静的ファイル、画像 | 近い拠点から配るコピー |
| サーバーキャッシュ | 計算結果、DB取得結果 | サーバー側の再利用 |
| DNSキャッシュ | ドメイン名とIPアドレスの対応 | 名前解決を速くする保存 |
キャッシュとCookie、履歴、ブックマークの違い
キャッシュとCookieはどちらもブラウザに残ることがありますが、目的が違います。キャッシュは表示を速くするためのコピー、Cookieはサイトが状態を覚えるための小さな情報です。履歴やブックマークも、さらに役割が違います。
| 用語 | 主な目的 | 消すと起きること |
|---|---|---|
| キャッシュ | 表示を速くする | 画像やCSSを再取得することがある |
| Cookie | ログイン状態や設定を扱う | ログアウトや設定リセットが起きることがある |
| 履歴 | 見たページを記録する | 過去に見たページを探しにくくなる |
| ブックマーク | 自分でページを保存する | お気に入りの入口が消える |
Cookieの詳しい仕組みはCookieとは？で解説しています。キャッシュ削除とCookie削除は影響が違うため、トラブル対応では分けて考えましょう。
キャッシュが原因で起きること
キャッシュは便利ですが、古いコピーが残ると「画像を差し替えたのに前の画像が出る」「CSSを修正したのに画面が変わらない」「ログアウト後も古い画面が見える」のような混乱が起きることがあります。
利用者側では再読み込み、強制再読み込み、キャッシュ削除で改善することがあります。開発者側では、ファイル名にバージョンやハッシュを付ける、適切なCache-Controlを返す、といった設計が必要になります。
Cache-Controlの基本
Webのキャッシュは、HTTPヘッダーで制御できます。代表的なのがCache-Controlです。保存してよいか、どれくらい新鮮とみなすか、使う前にサーバーへ確認するかを指示します。
次の図では、Cache-Controlでよく見る言葉を確認してください。特にno-cacheは「保存しない」ではなく、「使う前にサーバーへ確認する」という意味である点に注意します。
| 指定 | 意味 | 初心者向けの注意 |
|---|---|---|
| max-age | 指定秒数の間は新鮮とみなす | 例：3600なら1時間 |
| no-cache | 再利用前にサーバーへ確認する | 保存禁止ではない |
| no-store | 保存しないように指示する | 個人情報ページなどで検討 |
| private | ブラウザなど個人用キャッシュに限る | ログイン後の個人向け応答で使うことがある |
| ETag | 内容が同じか確認するための印 | 304 Not Modifiedと関係する |
Cache-Control: max-age=3600
Cache-Control: no-cache
Cache-Control: no-store
ETag: "abc123"MDNのCache-Control解説でも、no-cacheは保存を禁止するものではなく、再利用前の検証を要求するものと説明されています。保存させたくない場合はno-storeを検討します。
利用者ができる対処
ページが古いまま見えるとき、利用者側で試せることがあります。まず通常の再読み込みを行い、それでも変わらない場合は強制再読み込みやキャッシュ削除を試します。
ただし、会社PCや業務システムでは、勝手にCookieやサイトデータまで削除すると再ログインや設定リセットが必要になる場合があります。キャッシュだけを削除するのか、Cookieも含めるのかを確認してから操作しましょう。
開発者が注意するポイント
開発者は、速く表示したいファイルと、古い内容を見せたくないファイルを分けて考える必要があります。画像、CSS、JavaScriptなどの静的ファイルは長くキャッシュしやすい一方、HTMLや個人情報を含む応答は慎重に扱います。
web.devでも、バージョン付きURLには長いmax-ageを使いやすく、バージョンなしURLでは再検証やno-storeなどを使い分ける考え方が紹介されています。
既存記事とあわせて読む順番
キャッシュは、ブラウザ、HTTP、Cookie、DNSと一緒に理解するとつながります。まずWebページが表示される流れを押さえ、そのうえで「保存して再利用する場所」を見ると理解しやすいです。
公式情報と関連リンク
HTTPキャッシュの基本はMDNのHTTP caching、Cache-Controlの詳しい意味はMDNのCache-Control、実務寄りの考え方はweb.devのHTTP Cache記事が参考になります。
- MDN: HTTP caching
- MDN: Cache-Control header
- web.dev: Prevent unnecessary network requests with the HTTP Cache
まとめ
キャッシュは、一度取得したデータを保存して、次回以降すばやく使うための仕組みです。
キャッシュを理解すると、Webページが速く表示される理由だけでなく、変更が反映されないときの切り分けもできるようになります。まずは「速くするためのコピー」として押さえ、Cookieや履歴とは分けて考えましょう。