「JavaScriptの修正が反映されない」時の対処法
「JavaScriptの修正が反映されない」はよくあるトラブル
本番環境にJavaScriptの修正プログラムをリリースしたのに、修正が反映されてない。
これは、よく聞く話ではないでしょうか。
本記事では、JavaScriptの修正が反映されない時に確認することと、その原因と対応策を紹介します。
JavaScriptの修正が反映されない時に確認すること
最もよくある原因の一つは、ブラウザキャッシュから修正前のソースを読み込んでいることです。
ブラウザの機能により、開発者が意図しなくても、JavaScriptファイルは自動でキャッシュされています。
これにより画面を再描画する際、同じURLのファイルはキャッシュから読み込むことで画面描画の速度を上げています。
しかし、これを見落としてしまい、修正したJavaScriptファイルをリリースした後もキャッシュされた修正前のファイルを読み込むため、反映されていないように見える現象が発生します。
JavaScriptファイルがキャッシュから取得されていることは、開発者ツールで確認できます。
ZennのWebページを例に見てみましょう。
ZennのWebページで開発者ツール>ネットワークタブでJavaScriptファイルのStatus Codeを確認する
黄色枠で示したStatus Codeにfrom disk cacheと表示されています。
これは、ブラウザは対象ファイルを、サーバにはアクセスせずディスクキャッシュ（補助記憶装置に保存されたキャッシュファイル）から読み込んだことを示しています。
ブラウザキャッシュを無効にする方法
ブラウザは自動でキャッシュを保存しますが、ユーザーが意図的にキャッシュを利用しないようにする、またはキャッシュをクリアすることもできます。
ユーザーが意図的にキャッシュを利用しないようにする方法
- Disable cache（開発者ツール）
- 開発者ツールのNetWorkタブを開き、Disable cacheにチェックを入れる事で、ブラウザキャッシュを一時的に無効にし、開発者ツールを開いている間だけ、サーバからファイルを読み込ませることができます。
- スーパーリロード（Ctrl + F5 / Cmd + Shift + R）
- スーパーリロードは、ブラウザのキャッシュを無視してサーバから最新のデータを取得する操作です。
- 上級エンジニアから「F5を押してみて」と言われた際は、キャッシュを無効にしてみてと言われたと思いましょう。
開発者ツール>ネットワークタブでDisable cacheにチェックを入れ、キャッシュを無効にする
ブラウザキャッシュをクリアする方法
- ブラウザの設定
- Chromeの場合は、「プライバシーとセキュリティ」 → 「閲覧履歴データの削除」→「キャッシュされた画像とファイル」にチェックを入れる→「データを削除」ボタンをクリックでブラウザキャッシュをクリアできます。
- これで、ディスク上のキャッシュファイル自体が削除されます。
JavaScriptの修正を確実に反映させる方法
上に示した方法は、キャッシュを無視して最新のJavaScriptファイルを読み込めますが、ユーザの操作が必要です。
JavaScriptの修正を確実に反映させる方法に、JavaScriptファイルにキャッシュシリアルを付与する方法があります。
<script src="/js/test.js"></script>
ブラウザは、同じURLのリソースをキャッシュします。
上記のようにHTMLテンプレート上でJavaScriptの読み込み処理を記述すると、対象のJavascrptファイルを変更しても、ブラウザは「前と同じURLだから同じ内容だろう」と判断してキャッシュを利用します。
<script src="/js/test.js?20251107"></script>
このように、末尾にクエリ文字列（例：日付やビルド番号）を付けると、ブラウザは「別URL」と認識してキャッシュを無視し、新しく取得します。
この仕組みを キャッシュバスティング（cache busting） と言います。
キャッシュバスティングの具体的な実装方法については、様々な方法がありますが、ここでは環境変数にシリアル番号を設定し、リリースごとに値を変える方法を紹介します。
CACHE_SERIAL=20251107
<script src="/js/test.js?{{ env('CACHE_SERIAL') }}"></script>
上記のように、JavaScriptファイルのクエリ文字列に環境変数CACHE_SERIALの値を付与します。
※上記はLaravelフレームワーク環境での記述法です。
リリース毎ににその値を変えることで、別URLのファイルとしてブラウザに読み込ませ、キャッシュを無効化することができます。
まとめ
ブラウザ上でJavaScriptファイルの取得元を確認する方法、キャッシュ無効化する方法を紹介しました。
修正が反映されない際のトラブルシューティングに活用して頂ければ幸いです。
Discussion