直したはずのコードが画面に出ない。自作アプリのキャッシュ地獄から抜ける方法
こんにちは、時短ギア管理人の清光です。
コードは書けない現役の営業ですが、AIと一緒に、現場が毎日使う業務システムを1年以上つくり続けてきました。
直したはずなのに、画面が古いまま。自作アプリをいじっていて、これほど心が折れる瞬間はありません。
私は一度これで「本番が壊れた」と誤報しました。壊れていませんでした。
この記事では、修正が画面に出ない原因と、確実に新しいコードを読ませる方法、そして「バグかキャッシュか」を1分で切り分ける手順を紹介します。
何が起きているのか
PWAのキャッシュが更新されない、という状態は、たいてい次の仕組みで起きています。
スマホのホーム画面に置けるタイプのWebアプリ（PWA）は、オフラインでも動くように部品を手元へ溜め込みます。
この溜め込みが、直したあとも古い部品を配り続けることがあります。
やっかいなのは、溜め込む場所が1か所ではないことです。私が実際にぶつかったのは次の3層でした。
| 層 | 症状 |
|---|---|
| アプリ側の保管庫 | 消してリロードしても直らないことがある |
| ブラウザの通常キャッシュ | 保管庫を空にしても、こちらから古い部品が出る |
| 読み込み済みの部品同士のつながり | 外側だけ新しく、中身が古いという食い違いが出る |
1層ずつ潰そうとすると、次の層が待っています。ここで半日が溶けます。
私が出した症状の実例
自分用に作った案件管理アプリをいじっていたときの話です。
部品の中にあるはずの機能が「そんなものは無い」というエラーで止まりました。
ファイルを開くと、その機能はちゃんと書いてあります。
つまりブラウザが、私が書き直す前の古いファイルを掴んだままだっただけです。
症状が派手（画面が真っ白＋エラー）なので、自分の書いたコードのバグと見分けがつきません。ここが一番の罠でした。
確実な回避策は「別の入口で開く」
結論から言うと、キャッシュを消すより、キャッシュが存在しない場所で開くほうが速いです。
手元で動かしているアプリなら、別のポート番号で立て直すだけで実現できます。
ポート番号が変われば、ブラウザにとっては別のサイトです。溜め込みも、読み込み済みのつながりも、まっさらな状態から始まります。
- いま動かしているポートとは違う番号で、もう一度アプリを配信する
- そのアドレスをブラウザで開く
- 直したところが出ているか確認する
- 次に何かを直したら、また別の番号に変える
私は実装が長引いた日に、番号を3回変えて逃げ続けました。泥臭いですが、これが一番速かったです。
注意点が1つあります。その番号も、一度アプリを開いた時点で溜め込みが始まります。
「毎回きれいにする」ではなく「毎回新しい入口を使う」と考えたほうが、結果的に手数が減ります。
「バグかキャッシュか」を1分で切り分ける
直す前に、まずこれをやってください。私はこれを飛ばして誤報しました。
同じファイルを、キャッシュを迂回する形でもう一度読み込ませます。
fetch('./app.js', {cache: 'no-store'})
.then(r => r.text())
.then(t => console.log(t.length))ここで新しい中身が返ってくるなら、サーバは正しく新しいコードを配っています。
つまり、画面が古いのはキャッシュのせいです。コードは無罪です。
逆にここでも古いなら、そもそも保存や配信が届いていません。探す場所が変わります。
ハマりどころ：アドレスの後ろに文字を足す技は、途中までしか効かない
キャッシュ避けとして、アドレスの後ろに時刻などを足す方法が知られています。
これは外側のページには効きます。ところがページの中で読み込まれる部品には効きません。
結果、「確かめると新しいのに、画面は古い」というねじれた状態が起きます。
私はこれで、直っているのに直っていないと判断しました。外側だけ新しくしても中身は古い、と覚えておくと迷いません。
先に答えておきます
Q. 毎回キャッシュを全部消すのではだめですか？
だめではありませんが、消し漏れが必ず出ます。
消す作業は「全部消えたことを確認できない」のが弱点です。新しい入口なら、確認する必要すらありません。
Q. 公開しているアプリを使う人にも同じことが起きますか？
起きえます。だから公開側は、部品のアドレスに版数を付けて更新を届ける作りにしておくのが安全です。
ただし手元で検証している間の話と、使う人に届ける話は別ものです。混ぜて考えると余計に迷います。
Q. AIに聞けば解決しませんか？
ここは苦手な領域でした。手元の環境で何が溜まっているかはAIから見えないので、症状だけ伝えるとコードを疑い始めます。
先に上の切り分けを済ませて「サーバは新しいものを返している」と伝えると、話が一気に早くなります。
まとめ
- 直したのに出ないときは、まずキャッシュを疑う。コードから見ない
- 切り分けは、キャッシュを迂回して同じファイルを読み直すだけ
- 確実なのは「消す」より「別のポート＝新しい入口で開く」
- アドレスの後ろに時刻を足す技は、中の部品には効かない
- 「本番が壊れた」と言う前に、必ず1回叩き直す
浮くのは、原因のない場所を探し続ける時間です。私の場合はそれが半日でした。
切り分けの1分を先に払うと、その半日を払わずに済みます。
今日はここまで。この記事が、あなたの時間を少しでも価値に変えるお手伝いになれば嬉しいです。
それでは、また次の時短ハックでお会いしましょう。
自作している業務システムのことや、お仕事のご依頼はお問い合わせからどうぞ。
