Webサイトを制作していると、「変更したはずのデザインが反映されない」という経験をすることがあります。その原因の多くはブラウザのキャッシュです。
そのときによく使われるのが「キャッシュクリア」と「スーパーリロード」です。しかし、この2つは似ているようで役割が少し違います。ここではその違いを整理して解説します。
キャッシュとは何か
まず前提として、キャッシュとはブラウザが一度読み込んだデータを一時的に保存する仕組みです。
例えば次のようなファイルです。
・CSS
・JavaScript
・画像
・フォント
これらを保存しておくことで、次回同じページを開くときにサーバーから再取得せず高速表示できます。
ただし開発中は、この仕組みが逆に問題になることがあります。
CSSを変更したのに古いCSSが表示される
JSを修正したのに動作が変わらない
こういったときは、キャッシュを無視して読み込み直す必要があります。
スーパーリロードとは
スーパーリロードとは、ブラウザに保存されているキャッシュを無視してページを再読み込みする操作です。
通常のリロードでは、ブラウザはキャッシュを優先して読み込みます。
しかしスーパーリロードでは、サーバーから最新ファイルを取得して再描画します。
主なショートカットは次の通りです。
Mac
Command + Shift + R
Windows
Ctrl + F5
Ctrl + Shift + R
この操作はそのページだけを最新状態に更新するイメージです。
キャッシュクリアとは
キャッシュクリアは、ブラウザに保存されているキャッシュデータ自体を削除する操作です。
つまり、
保存されているCSS
保存されているJS
保存されている画像
などのデータをブラウザから完全に消します。
その後ページを開くと、すべてのファイルをサーバーから再取得します。
キャッシュクリアとスーパーリロードの違い
簡単に言うと次の違いがあります。
スーパーリロード
そのページだけキャッシュを無視して読み込む
キャッシュクリア
ブラウザに保存されているキャッシュ自体を削除する
つまり、
スーパーリロードは一時的な回避
キャッシュクリアは根本的な削除
というイメージです。
開発者が使い分ける場面
Web制作では次のように使い分けることが多いです。
CSSやJSを変更したとき
→ スーパーリロード
どうしても更新されないとき
→ キャッシュクリア
また、Chromeの検証ツールを開いた状態で
「Disable cache」
をONにすると、開発中は常にキャッシュを使わない状態にできます。
まとめ
キャッシュクリアとスーパーリロードは似ていますが、役割は違います。
スーパーリロードは
キャッシュを無視してページを再読み込みする
キャッシュクリアは
ブラウザに保存されたキャッシュを削除する
Web制作では「変更が反映されない問題」によく遭遇します。
そのときは、まずスーパーリロード → それでもダメならキャッシュクリアの順で確認すると効率的です。
