HOME ブログ Web制作 Web制作の基本 キャッシュとは?知らないと困るブラウザの仕組みと削除方法を解説!

キャッシュとは?知らないと困るブラウザの仕組みと削除方法を解説!

basic basic

インターネットを閲覧するには様々な仕組みがあります。特にキャッシュは身近なものであり、キャッシュの理解はWebブラウザの理解にも繋がります。

今回はそんな知らないと困るブラウザとキャッシュの仕組み、そして、キャッシュの削除方法について解説していきたいと思います。

キャッシュとは?

キャッシュとは、閲覧したWebページに使用されているファイルを、ブラウザが一時的に保存する仕組み、になります。

WebページにはCSSやJavaScript、画像ファイルなど、様々な形式のファイルが使用されています。これらをWebページ閲覧時に毎回読み込む必要を無くすためにキャッシュという仕組みがあります。

一度閲覧したWebページの情報を、一時的にブラウザに保存しておくことで、同じWebページを何度も閲覧する場合や、保存したデータが使われているWebページの閲覧時に、キャッシュした情報が使われるため、より高速なインターネットでのWebページ閲覧が可能となります。

キャッシュの仕組み

Webブラウザ以外もキャッシュの仕組みがある

キャッシュはWebブラウザに限った話しではなく、サーバーOSや、データベースなどにも同じ用なキャッシュという仕組みは存在します。

キャッシュの困るところ

キャッシュは高速なWeb閲覧のために便利な仕組みですが、キャッシュがあることで少し困ることもあります。

Webサイトのファイルの変更が反映されない

Web制作側の人であれば、サーバー上にある制作物をお客様に確認してもらう時に「キャッシュを消してください」と言うことはお決まりでもあります。

一度閲覧したWebページのデータは、キャッシュとしてお客様のブラウザに残ります。

その後、何かしら追加や変更・修正を行って再度サーバーにアップした後、お客様に確認してもらう時に、前のキャッシュが残っていると、新しく追加や変更・修正したものが反映されておらず確認できないといった事象が発生します。

そのためにも、閲覧者側でキャッシュを削除する必要があるのです。

キャッシュの削除方法

キャッシュの削除方法ですが、使用しているWebブラウザによってそれぞれやり方があります。ここではGoogleChromeを例に、キャッシュの削除方法について解説します。

Google Chromeのキャッシュ削除方法(PC)

ブラウザ右上にある縦の「…」をクリックします。

スクリーンショット

設定をクリックします。

下にある「詳細設定」をクリックし、「閲覧履歴・データの削除」をクリックします。

スクリーンショット

キャッシュされた画像とファイルにチェックし、「データを削除」をクリックします。

スクリーンショット

以上で完了です。ちなみにショートカットキーで素早く上記画面を表示させることができます。

Windowsの場合
Ctrl+Shift+Delete

Macの場合
Command + shift + delete

スーパーリロードを使う

ちなみにスーパーリロードを使うことで、キャッシュを消して再読込をすることができます。

Windowsの場合
Shift + F5

Macの場合
Command + Shift + R

ただし、スーパーリロードでは、外部のキャッシュなどを完全に削除することができない場合があります。

キャッシュされないブラウザを使おう

キャッシュを削除するのではなく、もとからキャッシュがたまらない状態のWebブラウザを使うことで、キャッシュのありなしにを気にする必要がなくなります。

シークレットモード、プレイベートモードを使う

シークレットモードや、プレイベートモードを使うことでブラウザにキャッシュされなくなります。

キャッシュを気にする作業を行う場合は、最初からシークレットモードや、プライベートブラウザを利用することで、毎回キャッシュを削除する手間がなくなります。

ただし、プライベートブラウザなどでも、一回閲覧するとキャッシュが貯まります。その場合、一度開いているものを閉じ、再度プライベートブラウザで開くことで再びキャッシュのない状態で閲覧することができます。

Web制作者側ならデベロッパーツールを使おう

Web制作者ならChromeのデベロッパーツールを使いましょう。

まずはChromeのデベロッパーツールを開きます。

Windowsの場合
F12もしくはCtrl + Shift + I

Macの場合
option + command + i

デベロッパーツールの右側にある縦の「…」をクリックし、settingsを開きます。設定画面にある「Disable cache」にチェックします。

Disable cache

これでデベロッパーツールを開いている間はキャッシュが無効になります。

よければご参考にしてみてください。

 

 

SHARE !

TAG