こんにちは。
川口でWordPressの講師をやっている清藤です。
WEB制作をしていると何度も同じページを更新して、最新の状態を確認する事がありますが、その際にブラウザキャッシュというブラウザに備わって機能を知っておかなければいけません。
今回は、このブラウザキャッシュをクリアするために使う拡張機能のCache Clearについてご紹介します。
ブラウザキャッシュとは？
WEBブラウザにはブラウザキャッシュという機能が備わっています。
WEBブラウザでURLにアクセスすると、ホームページが閲覧できるわけですが、これはもう少し正確に言うと、URLにアクセスするとホームページを表示するためのhtml/CSSファイルやJavaScriptファイル、画像ファイルをダウンロードして、WEBブラウザで表示するという流れになります。
もし、同じページにアクセスした場合再度全てのファイルをダウンロードするとなると、非常に効率が悪いため、キャッシュという仕組みを使ってダウンロードしたファイルを保存しておき、それを再利用するという仕組みになっています。これがブラウザキャッシュの機能です。
ブラウザキャッシュの削除が必要な理由
ブラウザキャッシュは一度見たことがあるサイトやページを早く効率良く表示する目的で使われることはお分かりいただけたと思いますが、開発する立場の場合状況が変わります。
htmlやCSSのコーディングをして、一部の変更を入れた場合もしキャッシュが機能してしまうと、キャッシュを読み込み、変更した部分が反映されないという事が起こります。
これは必ずキャッシュが読み込まれるかというとそうではなく、ページの読み込みサイズが大きい場合やインターネットのアクセス環境（速度）によってページの読み込みに負荷が掛かりやすい場合にキャッシュが優先的に読み込まれることが多いです。
いずれにしても、ページを更新してキャッシュの影響で更新されないのか、修正した部分やファイル自体が間違っているのかの判断がつかなくなってしまう場合があるので、キャッシュをいつでもすぐに削除できるようにしておくのが開発環境としては大切な事です。
拡張機能のClear Cacheのインストール
ブラウザの標準機能でキャッシュを削除する場合は、設定メニューから消しに行くのが一般的ですがそれでは非常に効率が悪いので、ワンクリックでキャッシュが削除できる拡張機能、Clear Cacheをインストールします。
Google Chromeを立ち上げて、検索窓で「clear cache」と検索します。
「Clear Cache – Chromeウェブストア」が表示されたら、リンクをクリックします。
右上の「Chromeに追加」をクリックします。
ダイアローグが表示されたら「拡張機能を追加」をクリックします。
インストールが完了するとこの画面になります。
右上の、「拡張機能機能マーク（パズルマーク）」をクリックし、Clear Cacheの行のピン止めをクリックします。
そうすると、拡張機能機能マークの左横に、Clear Cacheのアイコンが表示されましたので、これで無事インストールが完了です。
使い方は簡単で、ページを更新する前にClear Cacheアイコンをクリックすると、そのページのキャッシュを消してくれます。キャッシュを消した後にページリロードすることで、HTML/CSS、JavaScriptファイルなど一式1から読み込むことになります。
納品の際もキャッシュについて伝える事も必要
Clear Cacheについての説明は完了になりましたが、制作したホームページを確認して貰うときや納品する際にもこのキャッシュが災いを起こすことがあります。
冒頭でも言いましたが、特にページの容量が多い場合、更新前のCSSやHTMLの情報が残ってしまっているが故に、お客さんから「更新されていません」と連絡が来ることがあります。
なので、この場合は今回の拡張機能のCache Clearを入れて貰うのではなく、ブラウザを再度立ち上げ直してくださいと伝えるか、PCの再起動をお願いしますというのがよくやるやり方です。
まとめ
今回は、ブラウザキャッシュのことや削除方法についてお話ししました。開発を初めたてのかたはまだキャッシュで困るようなことはないかも知れませんが、凝ったページだったりCSSの容量が多い場合このキャッシュの問題が起こってきます。
そんなときに、キャッシュのせいだ！と感が働いてくるようになると、開発も一歩前進という感じではないでしょうか。
以上、「WEB開発をするときはClear Cacheをインストールしよう！」でした！