はじめに
こんにちは、3年目のid:FM_Harmonyです。
今回は、Cache Bustingと呼ばれるブラウザのキャッシュを制御する方法について調べる機会があったので、ブログ記事にまとめてみました。
静的ファイルのURLに一見意味のないクエリパラメータがついていることがありますが、ちゃんと意味があったのだと分かったので、同じような疑問を抱いている方の助けになれば幸いです。
調べたきっかけ
とある商材のJavaScriptコードを改修したときのこと、知見の少ない商材だったので直近の改修をもとに必要な作業を整理していた時でした。
その商材ではHTMLでJavaScriptを読み込む際、以下のようにsrc要素に商材のバージョンと同じ文字列がクエリパラメータで指定されており、バージョンアップの度に文字列を更新していました。
// こんな感じ <script type="text/javascript" src="xxxxx.js?ver=1.2.0.0"></script>
しかし、スクリプト中では渡しているパラメータを利用していませんでした。 そこで、今回の改修でも必要な作業なのか、先輩に相談したところ...
私「JavaScriptのURLに商材のバージョンがついているのですが、今回の改修でURLについているバージョンを更新した方がいいでしょうか。」
先輩「キャッシュ対策であれば、更新したほうがよいでしょうね。」
私「キャッシュって、ブラウザのキャッシュですか？」
先輩「そうです。分からなければ、一度キャッシュについて勉強しなおしてみてください。」
ということで調べてみました。
静的ファイルのキャッシュ
前提として、JavaScript、CSSファイルなどの静的ファイルは、読み込んだ際にブラウザがキャッシュします。 そのため、ファイルを更新した後に変更箇所をブラウザ上で確認しても、ブラウザがサーバ側のファイルを読み込まずにキャッシュを読み込んでしまうことがあります。
ブラウザ側で強制リロードさせて更新が反映されるようにもできますが、そんなことをせずとも更新後の静的ファイルをブラウザに読み込ませる方法があります。
それが、Cache Bustingと呼ばれる方法です。
Cache Busting
静的ファイルのURLがキャッシュしているものと異なる場合、ブラウザはキャッシュを利用せずサーバからファイルを取得します。 そこで、ファイル更新に合わせてクエリパラメータを更新することで、ブラウザがキャッシュを読み込むことを防げます。
この方法をCache Bustingと呼びます。
さて、ここまで調べて再び先輩に相談したところ...
私「JavaScriptのURLについているクエリパラメータですが、ブラウザがキャッシュを読み込まないよう更新したほうが良いと思います。」
先輩「分かりました、今回は更新しましょう。」
ということで、無事方針も定まり改修作業を始めることができたのでした。
おわりに
他にもCache-Controlヘッダを利用してキャッシュの利用を制御できますが、Cache Bustingはクエリパラメータだけでキャッシュの利用が制御できるので、比較的手軽にできる方法だと思います。
キャッシュの制御を行われたい方は、一つの案として検討されてはいかがでしょうか。
参考
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.comラクスDevelopers登録フォーム
https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！
◆TECH PLAY
techplay.jp
◆connpass
rakus.connpass.com
