HTMLのブラウザキャッシュを無効化する方法まとめ

Posted at 2026-08-28

HTMLのブラウザキャッシュ無効化手法まとめ

Webシステムを開発していると、

修正したのに古い画面が表示される

という現象に遭遇することがあります。

本記事では、ブラウザキャッシュを制御する代表的な手法について、

設定箇所
利用例
メリット
デメリット

を整理します。

方法1. HTMLのmetaタグで制御する

サーバ設定を変更できない場合に利用される方法です。

設定箇所

HTMLファイル

例:

index.html
login.html
menu.html

設定例

<head>
    <meta http-equiv="Cache-Control"
          content="no-cache, no-store, must-revalidate">

    <meta http-equiv="Pragma"
          content="no-cache">

    <meta http-equiv="Expires"
          content="0">
</head>

または最低限であれば、

<meta http-equiv="Cache-Control" content="no-cache">

のみでも利用されます。

各設定の意味

Cache-Control

<meta http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate">

設定	意味
no-cache	利用前にサーバへ再確認
no-store	キャッシュ保存禁止
must-revalidate	期限切れキャッシュ利用禁止

Pragma

<meta http-equiv="Pragma" content="no-cache">

古い環境との互換性向上のために併用されることがあります。

Expires

<meta http-equiv="Expires" content="0">

コンテンツを期限切れ扱いにします。

利用例

サーバ設定を変更できない場合

顧客環境の静的HTML

障害調査時

修正版HTMLの反映確認

開発環境

毎回最新画面を確認したい

メリット

HTMLのみ修正すればよい
サーバ設定不要
導入が簡単

デメリット

CDNやプロキシには効果が限定的
ブラウザ依存の挙動がある
現在の主流ではない

方法2. HTTPレスポンスヘッダで制御する（推奨）

現在の主流です。

設定箇所

Apache

/etc/httpd/conf.d/cache-control.conf

Nginx

/etc/nginx/nginx.conf
/etc/nginx/conf.d/*.conf

IIS

web.config

Tomcat

web.xml
Filter
Servlet

Spring Boot

Filter
Controller
WebMvcConfigurer

PHP

PHPソース

Apache設定例（RHEL / CentOS / AlmaLinux系）

設定ファイル

/etc/httpd/conf.d/cache-control.conf

mod_headersの確認

設定前に mod_headers が有効であることを確認します。

httpd -M | grep headers

出力例

headers_module (shared)

ロード設定例

LoadModule headers_module modules/mod_headers.so

※ 多くの環境では既に有効化されています。

設定例

<IfModule mod_headers.c>

    <FilesMatch "\.(html|htm)$">
        Header always set Cache-Control "no-store, no-cache, must-revalidate"
        Header always set Pragma "no-cache"
        Header always set Expires "0"
    </FilesMatch>

</IfModule>

利用例

以下のHTMLを常に最新表示したい場合

/var/www/html/index.html
/var/www/html/login.html
/var/www/html/menu.html

例えば、

利用者から
「修正したはずなのに古い画面が表示される」
という問い合わせが発生する

ようなケースに適しています。

設定反映

構文確認

httpd -t

設定反映

systemctl reload httpd

または

systemctl restart httpd

Java Servlet設定例

response.setHeader(
    "Cache-Control",
    "no-store, no-cache, must-revalidate");

response.setHeader(
    "Pragma",
    "no-cache");

response.setDateHeader(
    "Expires",
    0);

PHP設定例

<?php

header("Cache-Control: no-store, no-cache, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");

利用例

ログイン後画面

マイページ
顧客情報画面

金融系システム

残高照会
入出金明細

ワークフローシステム

申請状況
承認状況

メリット

標準的な方法
ブラウザ以外も制御可能
CDNやプロキシも制御可能
最も確実

デメリット

サーバ設定変更が必要
通信量が増える

方法3. キャッシュバスターを利用する

静的リソース向けです。

設定箇所

HTMLテンプレート

例:

index.html
layout.html
header.html

JSPの場合

header.jsp
layout.jsp

Thymeleafの場合

layout.html
base.html

設定例

JavaScript

<script src="/js/app.js?v=1.0.5"></script>

CSS

/css/style.css?v=1.0.5

画像

/img/logo.png?v=1.0.5

利用例

JavaScript改修時

app.js
common.js

CSS改修時

style.css
theme.css

SPA

React
Vue
Angular

CDN利用

静的配信サイト

メリット

本番運用で最も一般的
パフォーマンスが良い
CDNと相性が良い
必要なファイルだけ再取得できる

デメリット

バージョン管理が必要
更新忘れのリスクがある
HTML自体は制御できない

Chromeでの確認方法

設定が反映されているかは、Chrome DevToolsで確認できます。

F12を押す
Networkタブを開く
対象ページを再読み込みする
対象リクエストを選択する
Response Headersを確認する

期待値:

Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Expires: 0

業務システムでよく見る構成

Apache + Java(Tomcat)

Apache(conf.d)
  ↓
Cache-Controlヘッダ

Tomcat
  ↓
JSP

JavaScript
  ↓
?v=20260828

Spring Boot

Filter
  ↓
Cache-Control設定

Thymeleaf
  ↓
?v=build番号

React / Vue

index.html
  ↓
HTTPヘッダで制御

app.[hash].js
  ↓
ファイル名ハッシュ

どれを選ぶべきか

対象	おすすめ
HTML画面	HTTPヘッダ
ログイン後画面	HTTPヘッダ
JavaScript	キャッシュバスター
CSS	キャッシュバスター
画像	キャッシュバスター
一時調査	metaタグ

実務では、

HTML
  → HTTPヘッダ

CSS
  → キャッシュバスター

JavaScript
  → キャッシュバスター

画像
  → キャッシュバスター

という構成が最も多く採用されています。

参考記事

まとめ

新規システムや保守案件でブラウザキャッシュ対策を行う場合は、

HTMLはHTTPレスポンスヘッダで制御する
JavaScript、CSS、画像はキャッシュバスターで管理する
metaタグはサーバ設定を変更できない場合の補助手段として利用する

という考え方で設計すると、運用トラブルを最小化しながらパフォーマンスも維持できます。

一般的には

HTTPヘッダ + キャッシュバスター

の組み合わせが最もトラブルが少なく、運用しやすい構成です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up