フレームデータJSONファイルを更新してデプロイしたところ、ページ上では古いデータのまま表示され続けるという問題が発生しました。
一方で、HTMLの変更（例えば日付の表示など）は正常に反映されていました。
データJSONが更新されない原因と解決方法（キャッシュ対策）
投稿日:
はじめに
KakuhanAppのフレーム検索機能では、JSONファイルから技のフレームデータを読み込んで表示しています。
ある日、JSONファイルを更新してデプロイしたにもかかわらず、ページに変更が反映されないという問題が発生しました。
HTMLの変更は反映されているのに、JSONだけが更新されないという状況です。
本記事では、この問題の原因となった「キャッシュ」と、その解決方法として実装した「バージョンクエリ」の仕組みについて解説します。
1. 発生した問題
2. 原因の特定（キャッシュの仕組み）
原因は「ブラウザキャッシュ」でした。
JavaScriptでは以下のようにJSONを読み込んでいました。
const res = await fetch(jsonPath);
この場合、ブラウザは次のように判断します。
-
同じURL → 同じファイル
-
すでに取得済み → キャッシュを使用
つまり、JSONを更新しても同じURLでアクセスしている限り、古いデータが使われ続けるのです。
3. 解決方法（バージョンクエリの導入）
この問題は「URLを変える」ことで解決できます。
そこで、以下のようにバージョンを付与しました。
const VERSION = "20260317-1";
const res = await fetch(`${jsonPath}?v=${VERSION}`);
これにより、ブラウザは以下のように認識します。
-
framedata.json?v=20260317-1 → 別ファイル
-
framedata.json?v=20260317-2 → さらに別ファイル
結果として、キャッシュを使わず必ず最新データを取得するようになります。
おわりに
今回の問題は、「キャッシュ」というブラウザの仕組みによるものでした。
特に静的ファイルを扱う場合は、更新しても反映されないことがあるため注意が必要です。
バージョンクエリを付与する方法は、CSSやJavaScriptなど他の静的ファイルにも応用できます。
記事一覧に戻る
