[JavaScript, CSS] キャッシュを用いるが、変更を確実に反映する方法

以下はJAVAとJSPを用いたwebプログラムを想定しています。


js(JavaScript)とかcssとかをチョロっと直して
動作確認すると
「あれ？？直したはずなのに反映されてない！？」
ってことよくありますよね？？

僕はめっちゃくちゃよくありました！！！


新人のころはマジでなぜなのかわからず、先輩に聞くと

先「あーキャッシュねはいはい。コントロールF5でなおるよ。」

僕「こんとろーるえふご…。」

え？同時押し？同時押しだよね？？

えいっ。

…ほんまや。

なんなんこれ…。

くっそ不便じゃん…。

とかなんとか思いながらもまぁそんなもんなんだろうなと。
みんなこのクソ仕様とうまく付き合って生きているんだなと思ってたわけです。

でもまぁ経験を積むと回避方法があることを知っていくわけですよね。


jsとかcssの引数（クエリ文字）が変更されると再読込されることを知ります。
以下の「?aaa=123」の部分です。
<script type="text/javascript" src="sample.js?aaa=123">



初めて対処をしていたプログラムでは
「ファイル毎に手書きで変えてね」って仕組みでした。
アホすぎだろ。

次に見たプログラムでは123の部分が定数化してあって
「定数を変えれば全部読み込み直すよ」って仕組みでした。
結構楽になったね。でも書き換え忘れるよね。

さらに他にあったのは
「ランダム値を付与するよ」って仕組みでした。
おお。これはナイス。とても楽。
でもキャッシュ全く機能しないんすけどこれで本当にいいの？？

まぁここまでくると
もっと適切な方法が絶対に存在すると気付くわけです。

「該当ファイルの更新日時を付与する」って方法が
最も良さげだなと思い、組み込むことにしました。


以下サンプルコードとなります。


Common.javaに以下を記述

public class Common {
    public static String getCacheBustingUrl(ServletContext application, String strUrl) {
        try{
            String strRealPath = application.getRealPath(strUrl);
            File file = new File(strRealPath);
            Date date = new Date(file.lastModified());
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
            return strUrl + "?cb_date=" + sdf.format(date);
        }catch(Exception e){
            return strUrl;
        }
    }
}


JSP側に以下を記述

<script type="text/javascript" src="<%=Common.getCacheBustingUrl(application, "test.js")%>"></script>



こんな感じです。

みんな大喜びでした。
めでたしめでたし。