エンタメ特化型、心を動かすWeb制作。
まずは無料で相談いたします！
Webサイトの更新が反映されない...。
そんなキャッシュ地獄に苦しんだ経験、ありませんか？
今回は、Web制作や開発現場でよくある 「キャッシュが邪魔して変更が見えない」という問題に対して、 ユーザー視点と開発者視点の両面から、効果的なキャッシュ対策を一挙紹介します！
フルスタックサイト構築
Windows：Ctrl + F5
macOS：Cmd + Shift + R
ブラウザのキャッシュを無視して、サーバーからファイルを再取得します。開発中の表示確認にも最適。
ブラウザの「設定」→「履歴」→「閲覧データの削除」から、キャッシュを選択して削除。
キャッシュを無効にした状態でアクセス可能。ログイン状態は維持されない点に注意。
<link rel="stylesheet" href="style.css?v=<?php echo time(); ?>">
<script src="main.js?v=<?php echo time(); ?>"></script>
time() により常に異なるURLとなり、ブラウザは毎回最新ファイルを取得します。
本番運用では毎回更新されるとパフォーマンスに影響があるため、filemtime() を使ってファイル更新時のみ変更するのが理想：
<link rel="stylesheet" href="style.css?v=<?= filemtime('style.css'); ?>">
.htaccess の場合：
<FilesMatch "\.(html|css|js)$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</FilesMatch>
PHPで動的に出力する場合：
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 1 Jan 2000 00:00:00 GMT");
デプロイ時にファイル名を変更することで確実にキャッシュから除外。
<link rel="stylesheet" href="style.20240430.css">
PWAなどを利用している場合、Service Workerで明示的にキャッシュ制御が可能。
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/index.html?v=1.0.0',
'/style.css?v=1.0.0'
]);
})
);
});
キャッシュ系プラグインで「キャッシュ削除」を明示的に行う
テーマ内のリンクタグに ?v=<?php echo time(); ?> を挿入してキャッシュバスティング
キャッシュはWebの高速表示に欠かせない存在ですが、更新時には大きな障壁になります。
適切な対策を知り、状況に応じて使い分けることで、ユーザー体験と開発効率の両立が可能です。
「更新したのに変わらない！」そんな悩みとはもうおさらばしましょう。
キャッシュを制する者は、フロントエンド開発を制す！