こんにちは。ディレクターのエリカです。
サイトの動作確認中、修正がすぐに反映されないことってありませんか？
その原因は主にブラウザ（Internet Explorer, Safari, Google Chrome, Firefox, Opera など）のキャッシュのトラブルだったりします。
キャッシュとは？
使用頻度の高いデータを一時的に保存しておくことで、二度目以降の表示を速くする仕組みです。
修正前の情報がキャッシュされていると、修正したはずなのに見た目が最新状態にならない……という現象が起こりえます。Web関係でよくあるのは、ブラウザのキャッシュと、システムのキャッシュです。
システムのキャッシュはエンジニア以外に触りようがないので、ここではブラウザのキャッシュをコントロールする方法をご説明します。
キャッシュをクリアして強制再読み込み（スーパーリロード）！
ブラウザが保存していたキャッシュを無視して、すべてのデータを再読み込みさせることで、最新状態を正確に確認することができます。
この命令のことを「強制再読み込み」「スーパーリロード」「フルリロード」「キャッシュクリア」等と呼びます。
Webに詳しい人でも、この呼び名は意外に知られていないと思います。よかったらこれを機に覚えてみてくださいね。
スーパーリロードの方法はブラウザによって異なるため、下記の一覧からご確認ください。
Windowsの場合
Internet Explorer
Ctrlを押しながら更新ボタンをクリック
Ctrlを押しながらF5 キー
Google Chrome
Ctrlを押しながら更新ボタンをクリック
Shiftを押しながら更新ボタンをクリック
Ctrlを押しながらF5 キー
Shiftを押しながらF5 キー
Firefox
Shiftを押しながら更新ボタンをクリック
Ctrlを押しながらF5 キー
CtrlとShiftを押しながらR キー
Safari
Shiftを押しながら更新ボタンをクリック
CtrlとShiftを押しながらR キー
Ctrlを押しながらR キー
Opera
Ctrlを押しながらF5 キー
Shiftを押しながらF5 キー
Macの場合
Safari
Shiftを押しながら更新ボタンをクリック
⌘ Commandを押しながらR キー
Google Chrome
⌘ Commandを押しながらR キー
Firefox
⌘ CommandとShiftを押しながらR キー
Opera
⌘ Commandを押しながらR キー
技術的な解決方法
少人数での動作確認であれば、上記の方法を説明して解決できますが、もしこれが社内外に関係する大人数での動作確認であった場合どうでしょう？
数十人、数百人にスーパーリロードを説明するのはなかなか面倒ですよね。
そんなときは、システム側に「仕込み」を入れることで、ブラウザのキャッシュを無視させることも可能です。
開発規模によっては下記の方法も検討してみてください。
WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
まとめ
とても簡単な機能ではありますが、キャッシュのトラブルが起こるたびに検索するのが面倒だったので、記事にまとめてみました。
同じように不便を感じていた皆さまの参考になれば幸いです！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
