Google Chromeでかんたんに『キャッシュを削除する』方法
こんにちは、okutani(@okutani_t)です。かんたんなTipsですが、「Chromeのキャッシュをかんたんに削除する」方法を紹介します。
僕はフリーでWebエンジニアをしているのですが、先方から「CSSが反映されない」といった内容のメールがちょくちょく届きます。
そのとき「キャッシュを削除してください」と伝えるのですが、その手順をなるべく簡潔に伝えられたら良いですよね。
また、先方に伝える場合は「キャッシュ削除のプラグインを入れてください」なんてことは言えないので、一番お手軽な方法で伝えられるとGoodです。
Chromeには「スーパーリロード」なるものが存在するので、その利用方法について解説していきます。
最初に「キャッシュの削除について」と、キャッシュを気にせずページを更新できる「スーパーリロード」について説明していきます。
スポンサーリンク
もくじ
キャッシュの削除って？
そもそも「キャッシュ」ってなに？という方がいらっしゃるかと思うので、かんたんに解説します。
通常、サイトを閲覧する場合、サーバーにサイトのデータ（HTMLやCSSなど）を取得するようにブラウザが要求します。
このとき、あまり変化のないファイル（特に問題になるのがCSS）を「サイトを開こうとしているPCに保存」することを「キャッシュする」などと言います。
こうすることで、次回同じサイトにアクセスしたときに、キャッシュしたデータを利用することで高速にサイトを表示できるようになる、というわけです。
ただし、CSSやJavaScript、画像ファイルをサイト運営者が変更した場合（かつ名前が変わっていない場合）、キャッシュが残っていると以前のデータのまま表示されることになります。
このとき、「キャッシュの削除」をおこなえば、変更されたデータが適切に読み込まれます。
この問題をかんたんに解決するには、Chromeで「スーパーリロード」なるものを使えば一発です！
スーパーリロード（ハード再読み込み）を使ってみる
スーパーリロード（ハード再読み込み）の使い方について解説します。
このスーパーリロードを使うと、超かんたんな手順で、CSSや画像が再読み込みできなくなったサイトを強制的に更新することができます。
（実際にはキャッシュの削除というより、「強制的にページを更新している」と言った方が正しいかもしれません）
では、WindowsとMacの場合で、それぞれ使い方を見てみましょう。
Windows
Windowsの場合は、更新したい画面を開いて以下のキーを押してください。
「Shift + F5」
これで、通常のリロードではなく、スーパーリロードでサイトを読み込むことができます。かんたんですね。
Mac
Macの場合は、更新したい画面を開いて以下のキーを入力。
「Shift + command + R」
これでスーパーリロードができます。めっちゃかんたんです。
確実なキャッシュ削除とスーパーリロード
ちなみに、以下の方法をおこなうと、確実にキャッシュを削除し、同時にスーパーリロードもおこなってくれます。
方法はこれまたかんたんで、「デベロッパーツールの起動」→「リロードボタン長押しor右クリック」でできます。
WindowsとMacの場合でそれぞれ見てみましょう。
Windows
ではデベロッパーツールの起動からおこないましょう。デベロッパーツールはF12キーを押せば立ち上がります（もしくはCtrl + Shift + J）。
この状態で、リロードボタンを長押し（もしくは右クリック）してみましょう。
「キャッシュの消去とハード再読み込み」をクリックすればOKです。
これで確実にキャッシュを削除し、スーパーリロードをおこなうことができます。
Mac
Macでデベロッパーツールを立ち上げます。command + option + Iを同時押しします。
Windowsのときと同じく、リロードボタンを長押し（もしくは右クリック）。
「キャッシュの消去とハード再読み込み」をクリック。かんたんですね。
キャッシュの消去とハード再読み込みはショートカットキーが用意されてないようなので、上記の手順で実行してみてください。
おまけ: シークレットモードを使う方法
Chromeには「シークレットモード」という機能があります。
このシークレットモードを使うと、そもそもCSSや画像をキャッシュしないで利用できるので、開発時に重宝するかと思います。
Windows
Windowsでシークレットモードにするには、以下のキーを入力します。
Ctrl + Shift + N
このようにシークレットモードを別窓で開くことができます。
あとはキャッシュが更新できないページをここから開けばOKですね。
Mac
Macの場合は以下のキーを入力。
command + Shift + N
これでキャッシュに悩まされずにWeb開発を進めることができますね。
まとめ
本記事では、かんたんにページを強制リロードしてくれる「スーパーリロード」、シークレットモードについて解説しました。
あんまりキャッシュについて意識せず作業していると、意外とハマってしまうのでこういう知識があると慌てず対応できるかと思います。
また、先方に伝えるときは、Windowsなら「Shift + F5」、Macなら「Shift + command + R」を教えるだけでお手軽です。
また、開発者の方はCSSの読み込み場所を「style.css?v=1.0」と末尾にクエリをつけて対応することもできます。もし時間があれば別途記事にしようと思います。
ぜひ日々のWeb開発に役立ててみてください。参考になれば幸いです。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
