私が輝く、夏がはじまる。
私が輝く、夏がはじまる。
2020.05.03

キャッシュクリアでサイトの修正を反映させる方法(OS/ブラウザ別)

エリカ

こんにちは。ディレクターのエリカです。

サイトの動作確認中、修正がすぐに反映されないことってありませんか?

その原因は主にブラウザ(Internet Explorer, Safari, Google Chrome, Firefox, Opera など)のキャッシュのトラブルだったりします。

※ この記事は、2013年8月19日に公開された記事を再編集したものです。



キャッシュとは?

使用頻度の高いデータを一時的に保存しておくことで、二度目以降の表示を速くする仕組みです。

修正前の情報がキャッシュされていると、修正したはずなのに見た目が最新状態にならない……という現象が起こりえます。Web関係でよくあるのは、ブラウザのキャッシュと、システムのキャッシュです。

システムのキャッシュはエンジニア以外に触りようがないので、ここではブラウザのキャッシュをコントロールする方法をご説明します。

キャッシュをクリアして強制再読み込み(スーパーリロード)!

ブラウザが保存していたキャッシュを無視して、すべてのデータを再読み込みさせることで、最新状態を正確に確認することができます。

この命令のことを「強制再読み込み」「スーパーリロード」「フルリロード」「キャッシュクリア」等と呼びます。

Webに詳しい人でも、この呼び名は意外に知られていないと思います。よかったらこれを機に覚えてみてくださいね。

スーパーリロードの方法はブラウザによって異なるため、下記の一覧からご確認ください。

Windowsの場合

Internet Explorer

Ctrlを押しながら更新ボタンをクリック
Ctrlを押しながらF5 キー

Google Chrome

Ctrlを押しながら更新ボタンをクリック
Shiftを押しながら更新ボタンをクリック
Ctrlを押しながらF5 キー
Shiftを押しながらF5 キー

Firefox

Shiftを押しながら更新ボタンをクリック
Ctrlを押しながらF5 キー
CtrlShiftを押しながらR キー

Safari

Shiftを押しながら更新ボタンをクリック
CtrlShiftを押しながらR キー
Ctrlを押しながらR キー

Opera

Ctrlを押しながらF5 キー
Shiftを押しながらF5 キー

Macの場合

Safari

Shiftを押しながら更新ボタンをクリック
⌘ Commandを押しながらR キー

Google Chrome

⌘ Commandを押しながらR キー

Firefox

⌘ CommandShiftを押しながらR キー

Opera

⌘ Commandを押しながらR キー

技術的な解決方法

少人数での動作確認であれば、上記の方法を説明して解決できますが、もしこれが社内外に関係する大人数での動作確認であった場合どうでしょう?

数十人、数百人にスーパーリロードを説明するのはなかなか面倒ですよね。

そんなときは、システム側に「仕込み」を入れることで、ブラウザのキャッシュを無視させることも可能です。

開発規模によっては下記の方法も検討してみてください。

WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする

CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか




まとめ

とても簡単な機能ではありますが、キャッシュのトラブルが起こるたびに検索するのが面倒だったので、記事にまとめてみました。

同じように不便を感じていた皆さまの参考になれば幸いです!