Google Chrome（グーグルクローム）に保存されたキャッシュを完全に削除する方法をまとめました。また、CSSなどの外部ファイルキャッシュ、またキャッシュ削除に関連する種々の操作方法についても網羅しました。

閲覧中のページのキャッシュを削除する「スーパーリロード」

まず、Chromeで、通常リロードを行うには、リロードボタンを押すか、もしくは、以下のショートカットキーを実行します。

// キャッシュを破棄しない通常のリロード（Macの場合）
Command + R

// キャッシュを破棄しない通常のリロード（Windowsの場合）
F5

このリロードショートカットによって、Webページ自体は更新されるのですが、そのページ内で読み込まれているCSSや画像などの外部ファイルは、Chromeが保存したキャッシュを利用し続けてしまいます。この状態では、外部ファイルが、仮に配信サーバー側で更新されても、ブラウザ上の表示に反映されないという問題が生じます。この問題を回避するため、ブラウザに残ったキャッシュを明示的に削除してやる必要があります。

スーパーリロードのショートカット

スーパーリロードを使うと、「現在のページから参照されている外部ファイルに関しては、キャッシュを使わずにリロードする」ことができます。この操作で、そのページから参照されている外部ファイルに関しては、Chromeに残っている古いキャッシュを削除できます。

// スーパーリロード（Macの場合）
Command + Shift + R

// スーパーリロード（WIndowsの場合）
Shift + F5

古い CSSや画像のキャッシュのせいなどで、何らかの表示問題が発生して、そのページの最新の状態を確かめたい場合に、気軽に試せるショートカットコマンド、とも言えるでしょう。

日本語では、しばしば「スーパーリロード」呼ばれているのを見かけますが、英語では「Hard Reload」と記載されているようです。

スーパーリロードの課題

上記のスーパーリロードの振る舞いは、「そのページから直接参照される外部ファイルのキャッシュを破棄して更新する」でした。しかしながら「そのページから直接参照されてないが、間接的に読み込まれる外部ファイル」といったファイルキャッシュも存在します。

「間接的に読み込まれる外部ファイル」とは、例えば、ページ上で実行されるJavascriptから動的に読み込まれる外部ファイルなどです。これらのリソースは、どのページから参照されたかの記録がChrome内に残りませんので、「現在のページが参照している外部リソースの更新」の作用をもつスーパーリロードの範疇の外です。

少し専門的になってきますので、あまり深追いせずに簡単にまとめると「Cmd + Shift + Rでスーパーリロードしても、まだキャッシュを使っている可能性が残っている」ということです。

Chromeのキャッシュを「完全に」削除する方法

予期せずキャッシュが使われてしまう可能性をなくすために、Chromeには「ブラウザが保存したキャッシュを全て削除する」という操作も存在します。これが「本当のキャッシュクリア」と呼べるはずです。下記に３つの方法を紹介します。

方法１設定のキャッシュ削除機能を利用する

Chromeの設定に用意されているキャッシュを削除するための機能を利用します。

Chromeのキャッシュを完全に削除する手順

1. Chromeの設定 [ ︙ ] をクリック
2. [その他のツール] > [閲覧履歴の消去] を選択
3. 閲覧履歴の消去パネルが開くので、任意の [期間] を選択
4. [キャッシュされた画像とファイル] をチェック
5. [閲覧履歴データを消去する] ボタンをクリック

１）ウィンドウの右上の方にある、Chromeの設定アイコン[ ︙ ]をクリックします。

２）[その他のツール] ＞ [閲覧履歴を消去]と進みます。

３）閲覧履歴データの消去するメニューのパネルがポップアップします。任意の[期間]を選択します。

４）[キャッシュされた画像とファイル]をチェックして・・、

５）最後に[閲覧履歴データを消去する]ボタンを選択します。

「期間」のプルダウンに関しては、削除する時間範囲を任意に限定できます。完全に空っぽにするには、この期間で「最初から」を選ぶ必要があります。この操作により、動的にスクリプトから読み込まれたファイルも含めて、本当に完全にキャッシュをクリアして、空っぽにしてくれます。

ちなみにですが、この「閲覧履歴の消去画面」ポップアップを呼び出すのに、下記ショートカットも使えるようです。頻繁に使う人は覚えておくと便利だと思います。

// クロームのキャッシュを削除するパネルを開く　(Mac)
Shift + Cmd + delete

方法２Chrome開発モードの機能でキャッシュを削除する

キャッシュを完全にクリアするもう一つの手順です。

ウェブ開発者の人たちは御用達ですが、Chromeには「開発モード」と呼ばれる、ウェブ開発者向けに、より多くの機能が開放されたモードが存在します。

このモードを開始するには、右上の設定アイコンからメニューを開き「メニュー ＞ ツール ＞ 開発コンソール」と選択します。（Macのショートカットは「Command + option + I 」です。）

開発モードでは、このようなパネルが開きます。

このパネルは「開発コンソール (Dev Console)」と呼ばれており、開発のためのたくさんの機能が盛り込まれています。

さて、この状態で、クロームのいつものリロードボタンを「長押し」もしくは「２本指クリック（Mac）」「右クリック（Windows）」すると・・・、

このような選択肢が現れます。普段のChromeには存在しなかった機能ですね。

上記の「キャッシュの消去とハード再読み込み」 がそれにあたります。要は「キャッシュを完全にクリアして、すべてゼロから読み込みます」ということですね。これに対応するショートカットキーはどうやら無いようです。

方法３Chrome Extension を利用する

もしより頻繁なキャッシュのコントロールが必要であれば、Chrome Extensionの利用がおすすめです。

例えば、Chrome Extensionのひとつ「Clear Cache」を利用すれば、Chromeのツールバーにキャシュ削除ボタンが配置されますのでワンクリックで、お好みの設定・範囲でキャッシュクリアすることができます。

ボタンのクリック時の動作は、設定で自由に設定できます。

【補足】Google Chromeのキャッシュの制御に関して

キャッシュの制御について

キャッシュを常に無効にする設定

補足情報です。開発コンソールを開いている間は、常にキャッシュを無効にする機能がついています。CSSを頻繁に更新するウェブ開発者は御用達な方も多いと思います。

場所はこちらです：

「Disable Cache」をクリックするだけで、キャッシュの利用が常に無効になりますので、いちいちクリア操作して削除する必要がなくなります。筆者はこのチェックを常にオンにして作業しています。

保存されたキャッシュを一覧する

おまけです。chromeにキャッシュされたファイルを一覧する方法です。アドレスバーに下記を打ち込んで下さい。クロームのデバッガ機能が立ち上げあります。

chrome://view-http-cahce

アイテムをクリックしてもバイナリで表示されますので、そのまま閲覧はできませんが・・・、これは復元が可能です。必要な方は、別途グーグルで検索すると方法が出てくると思います。筆者は過去に、失われてしまったページをこちらから強引に復元したことがあります。

キャッシュされたファイルの保存場所？

Macのタイムマシンなどバックアップを作成する時に、キャッシュを含めたくない場合があるかもしれません。MacのChromeでは、アプリ補助フォルダーにすべてのキャッシュが保存されています。

場所は、

~/Library/Application Support/Google/Chrome/Default/Application Cache/

です。一次キャッシュは、

~/Library/Application Support/com.google.Chrome/

にあります。（Mac）

「シークレットモード」でキャッシュを迂回して閲覧する

キャッシュを無視してウェブページを閲覧するもう一つの方法です。Google Chromeには「シークレットモード」というウィンドウの種類があります。

シークレットモードのウィンドウは、メニュー[ ︙ ]から起動するか、ショートカット「Command + Shift + N」で起動できます。（英語では「incognito（匿名の） window」と呼ばれています）

起動すると、怪しげな覆面マークが表示されます。

この画面を読んでも分かる通り、このウィンドウを使うと、Chromeは下記のような動きをします。

• 過去に保存されたキャッシュを使わない。Windowを開いている限りはキャッシュを使いますが、一度プライベートウィンドウを閉じると、その時に保存されたキャッシュはすべて削除されます。
• 履歴、クッキー、フォーム履歴などのデータを残しません。
• Chromeに保存されたGoogle アカウントのログインを引き継ぎません

この状態での閲覧は「プライベートブラウジング」と呼ばれています。ヘルプにより詳しく記載されています：

• Google Chrome ヘルプ：プライベートブラウジングの仕組み

【補足】WEBブラウザのキャッシュについて

ここからは番外編です。キャッシュについて詳しく知らない方や、ウェブ開発入門者の方へ、補足情報です。

ブラウザのファイルキャッシュとは？

ファイルキャッシュとは、ページのローディングを高速化するなどの目的で、内部に保存した、外部ファイルの記録です。具体的には、そのロードしているWebページから間接的に読み込まれる画像、CSS（スタイルシート）や、Javascriptファイルなどをファイルキャッシュとして保存して利用しています。

Chromeをはじめとする、ほとんどのブラウザでは、ではそのような外部ファイルを自動的に内部保存し、また同じファイルがまた必要になったとき、通信による再取得を行わなくても良いように、キャッシュを利用して表示を高速化しています。

ページの表示の高速化の仕組み

ページをロード刷る時に、ファイルキャッシュはそのファイルのURL文字列で識別しているため、たとえば

<img src="/images/bird-01.jpg">

という画像タグであれば、「/image/bird-01.jpg」というURLと同じアドレスを２度以上移行に読み込む場合、必ずブラウザ側に保存されたキャッシュを利用し、再度の通信によるサーバーをからの読み込みを回避します。

このしくみは、普段は高速なページの表示を助けているのですが、例えば、ウェブページの管理者が、サーバー上で「bird-01.jpg」の中身を変更してしまったら、「同じURL文字列であれば、キャッシュを利用する」しくみがアダとなり「そのブラウザ上でだけ、新しい画像の表示が行われない」という問題を生じてしまいます。

これはこの記事の冒頭での説明の通りです：

上図は、画像ファイルの例ですが、CSSなどの画面のレイアウトを定義するファイルでも同様の問題が生じます。もしこのような問題が生じた場合、そのブラウザ側で保存された古いファイルの破棄、すなわち「キャッシュの明示的なクリア」の操作が必要になります。

Google Chromeのキャッシュの種類

Google Chromeの利用するキャッシュは、上記のようなファイルキャッシュ以外にも、多くの種類が存在します。すべては網羅できないですが、代表的なものを列挙すると下記のようなものです。

• Cookie
• 閲覧履歴
• DNSキャッシュ
• フォームの入力データ

それ以外では、「Cookie」はウェブページが利用できる一時的な情報の保存領域のことで、これは「クッキー」と読んでいます。Cookieに関しては、「ChromeのCookieを削除する方法」の記事をご覧ください。

「DNS」とは、ホスト名とIPアドレス紐付けるデータのことです。こちらも、本来毎回ネームサーバーに問い合わせる通信が発生しますが、これをキャッシュを使って高速化します。DNSにキャッシュについては「ChromeのDNSキャッシュを削除する方法」をご覧ください。

サーバー側の設定で、キャッシュ問題を回避する

もしあなたがウェブ開発者なら、今回の記事のようなキャッシュ削除操作を、閲覧しているユーザ側に行わせるような状態を作るのは好ましくありません。閲覧者はキャッシュなどを意識せず、いつでも最新の状態を閲覧できる必要があるはずです。

更新したファイル名を変更する

上述の通り「同じURL文字列であれば、キャシュを利用する」という振る舞いですのでURLを変えればキャッシュを利用しません。

// 更新前
<img src="/img/bird/bird-1.jpg">

// 更新後
<img src="/img/bird/bird-1.1.jpg">

但し、これを更新事に行うのは骨がおれます。

ファイル名の変更の自動化

通常は、PHPなどでこのように自動化します。

#PHPファイル
<img src="/img/bird/bird-1.jpg?v=<?php echo filemtime('img/bird/bird-1.jpg'); ?>">

#出力されるHTML
<img src="/img/bird/bird-1.jpg?v=1500568282">

ファイル名の直後に続く「?v=xxxx」は、クエリ文字列と呼ばれ、HTTP のリクエストにおいて、付加的な情報を与える記法です。多くのブラウザは、この文字列を含めてマッチを取りますので、この値が異なれば、別のURLとして判別してもらえます。その一方で、返されるファイルのファイル名はクエリ文字列にかかわらず同じです。

filemtime() 関数はファイルの最終更新日付を取得しますので、ファイル更新があれば、自動的に値が更新され、別のURLが生成される仕組みとなっています。

この様な工夫で、キャッシュの削除操作をユーザに行わせることなく、ファイルが更新されれた自動的に新しいファイルが読まれる、という仕組みです。

参考リンク

以下、Google Chromeとキャッシュの削除に関する、参考サイトです。

• Stackoverflow: “What’s the difference between-normal-reload-hard-reload and empty cache.”
• Chrome ヘルプ: Chomeのキーボードショートカット
• Wikipedia: HTTP Cookie

以上になります。