Chromeのスーパーリロードとは
みなさんはChromeのスーパーリロードをご存知でしょうか？
はじめて聞く方もいるかと思いますので、まずスーパーリロードとは何かについて説明します。通常ChromeでWEBサイトにアクセスすると、HTML/CSS/JavaScript/画像ファイルなどのWEBページを構成するファイルが読み込まれます。
実は２回目にアクセスする際やリフレッシュ時にはChrome側でCSS/JavaScriptなどのファイルをキャッシュする事をしています。
どのくらいの期間キャッシュするかはサイト側の設定によりますが、ネットワークやサーバー側の負荷を少なくするためにChromeではキャッシュすることを行います。
キャッシュ自体は悪いものではないのですが、もしも開発者がCSSやJavaScriptを更新していた場合にはいくらリロードしても効かないという事態になります。
その時にChromeのスーパーリロードという方法を使うことで、キャッシュファイルを使わずに逐一サーバー側にHTML/CSS/JavaScript/画像などを取りに行くという事をします。
つまりスーパーリロードはキャッシュに依存しないリロード方法と言えます。
今回はChromeでスーパーリロードを行う方法と、サイト更新をしている方向けにスーパーリロードをしても効かない場合に見るべきポイントをご紹介していきます。
Chromeでスーパーリロードする方法
Chromeでスーパーリロードする方法ですが、ショートカットで行えます。
[Windows]
Shift + F5
[Mac]
Command + Shift + R
上記のショートカットでスーパーリロードを実行することができます。
またスーパーリロード以外でサイトごとや全体でキャッシュを削除（クリア）する方法もあります。スーパーリロードはキーの入力ミスなどで、失敗する可能性も0ではありませんが、キャッシュクリアではより確実にキャッシュがない状態でのリロードと言えるかと思います。
キャッシュクリアをする方法は下記の記事にまとめていますので、参考にしてみて下さい。
更にChromeでcookieを編集したり確認、削除なども行うことができます。cookieの操作が必要となる方は下記の記事も参考にしてみるといいかと思います。
常にスーパーリロード状態にできる？
Chromeのデベロッパーツールを使うことで毎回スーパーリロードの状態（つまり、キャッシュを利用しない）に近い事はできます。
設定するにはまずデベロッパーツールを開きましょう。下記のショートカットで開きます。
[Windows]
Ctrl + Shift + I
[Mac]
Command + Option + I
こうすることで、デベロッパーツールを開いているときだけ、キャッシュに依存しなくなります。
毎回デベロッパーツールを開くという制約はありますが、この方法でキャッシュを無効にすることができます。
Chromeでスーパーリロードが効かない場合
サイト開発者の方でスーパーリロードしてもファイルが更新されない、効かないという経験があるかと思います。その場合は下記ポイントを確認してみましょう。
ファイルが更新されていない
サーバーにデプロイしたファイルが更新されていないというケースはよくあります。
再度本当にファイルを更新したのか、またはサーバー上にデプロイされているのか確認をしましょう。
サーバー・CDNなどのキャッシュが効いている
WEBサーバー側のキャッシュや、CDNなどを利用している場合はCDNでキャッシュを保持していて、そのキャッシュを返している場合があります。
サーバー側のキャッシュ、CDN側のキャッシュをクリアして再度確認してみましょう。
まとめ
いかがでしたでしょうか。Chromeのスーパーリロードについて方法や、ファイル更新されない場合にチェックすべきポイントなどをまとめました。
ブラウザをただたんにサイト閲覧のために利用しているユーザーの方はスーパーリロードを必要とする機会はあまりないかもしれませんが、WEBサイト開発者の方はよく利用することになるかと思います。
毎回調べなくてもいいように、今回したスーパーリロードのショートカットだけ覚えておきましょう。