キャッシュバスティング(クエリ更新)とは
キャッシュバスティング（Cache Busting）とは、ブラウザに保存された古いキャッシュを強制的に無効化し、ユーザーに最新のファイルを読み込ませるための手法です。
Web開発において、CSSやJavaScriptなどを更新しても、ユーザーのブラウザに古いキャッシュが残っていると変更内容が反映されないことがあります。
これを解決するために、ファイル名やURLを意図的に変更して「新しいリソース」だと認識させます。
<!-- style.cssを修正しても古いキャッシュが反映される -->
<link rel="stylesheet" href="style.css" /><!-- style.css?2026-04-13_12-34-56のように変更すると反映される -->
<link rel="stylesheet" href="style.css?2026-04-13_12-34-56" />最近のViteなどのモダンなビルドツールであれば「style.a1b2c3.css」のようにファイル名にハッシュを含めるため、最近はあまり見なくなりましたが、古いWebサイトではいまだに現役です。
?以降のクエリパラメーターは何でも良いのですが、ver_123のようなバージョン指定よりも日時を入れたほうが重複が発生しにくく、いつ頃ファイルを更新したかがわかりやすくなるというメリットがあります。
Node.jsで一括でする方法
Viteなどのモダンなビルドツールを使用していない古いWebサイトなどではファイル全体を置換してキャッシュバスティング(クエリ更新)していることが多いです。
しかし、手動で日時を指定すると間違えて過去の日時を指定してしまう可能性があります。
ビルドツールなしの古い環境でキャッシュバスティング(クエリ更新)するときはNode.jsで一括変更するようにすれば「node updateQuery.js」を実行するだけで更新できるので便利です。
やり方は以下のファイルをプロジェクトフォルダのルートディレクトリに配置して、「node updateQuery.js」を実行するだけです。
const fs = require('fs')
const path = require('path')
const now = new Date()
const timestamp =
now.getFullYear() +
'-' +
String(now.getMonth() + 1).padStart(2, '0') +
'-' +
String(now.getDate()).padStart(2, '0') +
'_' +
String(now.getHours()).padStart(2, '0') +
'-' +
String(now.getMinutes()).padStart(2, '0') +
'-' +
String(now.getSeconds()).padStart(2, '0')
const targetDir = './'
function updateHtmlFiles(dir) {
const files = fs.readdirSync(dir, { withFileTypes: true })
files.forEach((file) => {
const fullPath = path.join(dir, file.name)
if (file.isDirectory()) {
updateHtmlFiles(fullPath)
} else if (path.extname(file.name) === '.html') {
let content = fs.readFileSync(fullPath, 'utf8')
const updatedContent = content.replace(
/(style\.css|index\.js)\??[\d_-]*/g,
`$1?${timestamp}`,
)
if (content !== updatedContent) {
fs.writeFileSync(fullPath, updatedContent, 'utf8')
console.log(`更新完了: ${fullPath} (${timestamp}) 🎉`)
}
}
})
}
updateHtmlFiles(targetDir)試しにHTMLファイル内に以下のコードがあるプロジェクトフォルダで実行すると、クエリパラメーターが追加されることが確認できます。
※ すでにパラメーターが付いている場合は新しい日時のパラメーターに更新される。
<link rel="stylesheet" href="/foo/bar/style.css" />
<script src="/src/index.js"></script>
↓
<link rel="stylesheet" href="/foo/bar/style.css?2026-04-13_12-34-56" />
<script src="/src/index.js?2026-04-13_12-34-56"></script>キャッシュバスティング(クエリ更新)のために手動でクエリパラメーターを変更すると、時間がかかってミスも発生しやすいため、前述のスクリプトをNode.jsで実行することで自動更新することを推奨します。
