HTTPキャッシュとは何ですか？

ブラウザやプロキシがWebリソースのコピーを保存し、同じリソースへの再リクエストを省略する仕組み。Cache-ControlヘッダーやETagで制御する。

HTTPキャッシュのポイントは？

Cache-Controlヘッダーでキャッシュの有効期限や動作を指定する。強いキャッシュ（max-age）は期限内ならサーバーに問い合わせずにキャッシュを使う。条件付きリクエスト（ETag/Last-Modified）でキャッシュの鮮度を確認できる。適切なキャッシュ設定で表示速度向上・サーバー負荷軽減・通信量削減を実現する

【エイチティーティーピーキャッシュ】

HTTPキャッシュとは？

公開: 2026年3月29日

💡 一度取りに行ったデータを手元に保存——同じものを何度も取りに行かない賢い仕組み

📌 このページのポイント

Cache-Controlヘッダーでキャッシュの有効期限や動作を指定する
強いキャッシュ（max-age）は期限内ならサーバーに問い合わせずにキャッシュを使う
条件付きリクエスト（ETag/Last-Modified）でキャッシュの鮮度を確認できる
適切なキャッシュ設定で表示速度向上・サーバー負荷軽減・通信量削減を実現する

HTTPキャッシュの2つのパターン

ひよこ

ブラウザのキャッシュって何を保存してるの？

ペンギン先生

HTML、CSS、JavaScript、画像など、サーバーから取得したリソースのコピーを保存してるよ。次に同じページを開いたときサーバーに取りに行かなくて済むから、表示が速くなるんだ

ひよこ

キャッシュの期限ってどうやって決めてるの？

ペンギン先生

サーバーがCache-Controlヘッダーで指定するよ。例えば「max-age=3600」なら1時間キャッシュを使っていいよという意味。「no-cache」なら毎回サーバーに鮮度を確認してから使う。「no-store」ならキャッシュしないんだ

ひよこ

キャッシュが古くなったらどうなるの？

ペンギン先生

期限が切れたら条件付きリクエストを送るよ。「このETag値のリソース、まだ変わってない？」とサーバーに聞いて、変わってなければ304 Not Modifiedが返ってきてキャッシュを再利用する。変わってたら新しいデータが送られてくるんだ

ひよこ

キャッシュの設定を間違えるとどうなるの？

ペンギン先生

max-ageを長くしすぎると、サイトを更新しても古いCSSやJSが使われ続けちゃう。だからJS/CSSにはファイル名にハッシュをつけて（app.a1b2c3.js）immutableキャッシュにし、HTMLはno-cacheで毎回チェックするのが現代のベストプラクティスだよ

まとめ：ざっくりこれだけ覚えればOK！

「HTTP キャッシュ」って出てきたら「一度取得したデータをブラウザに保存して再利用する仕組み」と思えればだいたいOK！

📖 おまけ：英語の意味

「HTTP Cache」＝ HTTP通信のキャッシュ

💬 Cache（貯蔵庫）にHTTPレスポンスを保存しておく仕組みで、Web高速化の基本中の基本だよ

← 用語集にもどる

HTTPキャッシュ とは？

HTTPキャッシュとは？