更新が反映されない？キャッシュ対策にJavascriptで最新ファイルを読み込む

WEB制作、マーケティングに関する情報をお届けします。

更新が反映されない？キャッシュ対策にJavascriptで最新ファイルを読み込む

2025.05.26

カテゴリ：WEB制作

タグ：

JavaScript

ホームページの修正のやり取りをしていると画像が更新されなかったり、デザイン崩れ、動きが変になっていることがよくあります。
原因の多くはキャッシュです。
キャッシュとはユーザーがアクセスした際に、次のアクセスの際に同じファイルを再度読み込む必要をなくすためにブラウザ内に情報を保存する機能です。
ファイル名が同一であればデータが更新されていても、読み込みを行わずにブラウザ内の情報を使用するため最新の情報が更新されません。
修正が頻繁に発生する場合はこのキャッシュが問題になって修正のやり取りに時間や手間がかかります。
今回はそれを解決するために、Javascriptで読み込みを行うファイルにパラメーターを付与して強制的に最新のデータを表示する方法を紹介します。

デモを見る

コードを紹介

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" media="all" href="param_cache.css" rel="stylesheet" />

</head>
<body>
    <img src="img/01.jpg">
    <video src="mp4/01.mp4" controls></video>
</body>

<script>
  const now = new Date();
  const param = `?${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 tags = [
    { tag: 'link', attr: 'href' },
    { tag: 'script', attr: 'src' },
    { tag: 'img', attr: 'src' },
    { tag: 'video', attr: 'src' }
  ];

  tags.forEach(({ tag, attr }) => {
    document.querySelectorAll(tag).forEach(el => {
      const original = el.getAttribute(attr);
      if (original && !original.startsWith('http') && !original.includes('?')) {
        el.setAttribute(attr, `${original}${param}`);
      }
    });
  });
</script>
</html>

コードを解説

HTMLの解説は割愛します。

Javascript

まずは付与するパラメーター作成していきます。
現在の日時を取得します。
『new Date()』で現在の時刻を取得し、『now.○○○○』で年/月/日/分/秒を取得、padstartで表示する文字列の長さを2桁区切りにします。

const now = new Date();
  const param = `?${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')}`;

次に対象となるタグを取得していきます。
よく使うものとしてcss、javascript、画像、動画を想定して以下のように配列で入れていきます。

最後にループで全ての要素にパラメーターを付与していきます。

tags.forEach(({ tag, attr }) => {
  document.querySelectorAll(tag).forEach(el => {
    const original = el.getAttribute(attr);
    if (original && !original.startsWith('http') && !original.includes('?')) {
      el.setAttribute(attr, `${original}${param}`);
    }
  });
});

以上で完成です。

まとめ

以上、『更新が反映されない？キャッシュ対策にJavascriptで最新ファイルを読み込む』でした。
このキャッシュの問題はキャッシュのクリアやシークレットモードなどで解決しますが、パソコンの操作に慣れていない人と校正のやり取りをする場合はかなり手間になりますので、お困りの場合はぜひ、ご参考ください。