ここではキャッシュクリアについて説明させていただきます。
キャッシュクリアについて
キャッシュって何？
【キャッシュ】とはウェブページを表示した時に、ページで使われている 画像やHTMLファイルなどのデータをローカル（使用しているパソコン）へ一時的に保存する仕組み です。
それによって、再度同じページへアクセスする際、サーバーから再度データをダウンロードするのではなく、一時保存しておいたデータを使って表示することで、初回時よりも速く表示することができるメリットがあります。
イメージとしては以下の通りです。
初回アクセス時
まず、初回ウェブページを表示する際は、必要なファイルデータを全てダウンロードしながら、ぺージを表示します。
その際にダウンロードしたデータはキャッシュとしてブラウザ内に一時保存されます。
２回目以降アクセス時
そして、2回目以降、同じページを表示する際は、既にキャッシュが存在している場合、パソコン内に保存されているデータ（画像、HTMLファイルなど）を優先的に使用されるので、 ダウンロードすべきデータが初回アクセス時よりも減少し、表示スピードが速くなるのです 。
キャッシュの注意点
便利なキャッシュ機能ですが、保存されているキャッシュが 常時最新であるとは限らないので注意が必要です 。
キャッシュの影響で古いデータが表示されてしまう例
図例のように、白猫の紹介を黒猫の紹介に差し替える場合、写真画像のファイル名はcat.pngのまま変えずに白猫の写真に差し替えてサーバー更新すると、紹介文のテキストは変更が反映されてるのに写真は白猫のまま・・、という問題が発生するケースがあります。これは、紹介文の書かれているHTMLファイルのみ再取得されたが、写真画像は新しいファイルとして判断されず、古いキャッシュの画像（白猫）のまま表示されていたという状況です。
ウェブ担当者も、サイトに新しいコンテンツを追加、ブラウザ確認してみたが、新コンテンツがどこにも見られなかった。CSSを追記・更新したのに、表示が崩れていた。JavaScriptで新しい効果や、制御を加えたのに、機能しなかった。このような経験、何度かあるかと思います。特に、 CSSやJavaScriptの更新時はキャッシュが強く影響する可能性 がありますので注意が必要です。
キャッシュの対策
・まずはブラウザリロード
キャッシュが残ってしまっており、変更したはずの画像やCSSが更新されていなかった場合、まず行うのは、リロードです。
ブラウザの左上にある、円形の矢印ボタンをクリックするだけです。
これだけで正しく更新されることも少なくありません。
（上の画像はGoogle Chrome）
・リロードでだめならスーパーリロード
また、一部ブラウザではショートカットでのやり方以外にもスーパーリロードができる方法が存在します。
Google Chromeでは、まずキャッシュクリアしたいページを開いた状態でキーボードの「F12」ボタンを押します。
するとなにやらごちゃごちゃと表示されますが、リロードをする際の回転ボタンを右クリックします。
出てくるメニューの一番下に「キャッシュの消去とハードの再読み込み」とあるのでこちらをクリックすることでスーパーリロードを行うことができます。
キャッシュクリアの仕方（Windows編）
ここからは各OS、各ブラウザごとにキャッシュクリアの正しいやり方を解説していきます。
WindowsでのGoogleChromeの場合
1：ウィンドウ右上の3つの点をクリック
2：様々なタブが表示されるので「履歴」をクリック
3：さらに表示されたタブの「履歴」をクリック
4：ウィンドウ左上の「閲覧履歴データの削除」をクリック
5：閲覧履歴データの削除ウィンドウが表示れるので
「詳細設定」をクリック
6：期間を「全期間」に変更
7：「キャッシュされた画像とファイル」にチェックを入れます。
※その他の項目は必要に応じてチェックを入れてください
8：「データを削除」ボタンをクリックします。
9：キャッシュクリア完了です。
WindowsでのMicrosoftEdgeの場合
1：ウィンドウ右上の3つの点をクリック
2：様々なタブが表示されるので「履歴」をクリック
3：さらに表示されたタブの「履歴の管理」をクリック
4：ウィンドウ右上の「閲覧データをクリア」をクリック
5：新たに設定ウィンドウが開き「閲覧データをクリア」ウィンドウが表示されます。
6：時間の範囲を「すべての期間」に変更します。
7：「 キャッシュされた画像とファイル」をクリックしてチェックをつけます。
※その他の項目は必要に応じてチェックを入れてください
8：「今すぐクリア」ボタンをクリックすればキャッシュクリア完了です。
WindowsでのFireFoxの場合
1：ウィンドウ右上の3本の線をクリック。
2：様々なタブが表示されるので「オプション」をクリック。
3：オプションウィンドウ左にある「プライバシーとセキュリティ」をクリック。
4：Cookieとサイトデータという見出しがある所の「データを消去」をクリック。
5：データを消去ウィンドウが開くので「ウェブコンテンツのキャッシュ」にチェックを入れます。
※その他の項目は必要に応じてチェックを入れてください
6：「消去」ボタンをクリックすればキャッシュクリア完了です。
キャッシュクリアの仕方（Mac編）
MacでのSafariの場合
1：MacでSafariを起動します。
メニューバーから「Safari」をクリックします。
2：メニューバーの「Safari」から環境設定をクリックします。
3：環境設定画面から「詳細」のタブをクリックすると
一番下の「メニューバーに”開発”メニューを表 示」の項目にチェックを入れてください。
4：メニューバーに追加された「開発」をクリックします。
5：開発をクリックすると「キャッシュを空にする」
という項目をクリックすればキャッシュクリア完了です。
MacでのGoogleChromeの場合
1：MacでGoogle Chromeを起動します。
Google chromeの右上の3つの点をクリック
※chromeキャッシュを削除するパネルを開くショートカット【Shift + Cmd + delete】
2：「その他のツール」から「閲覧履歴の消去」をクリックします。
3：閲覧履歴データの消去するメニューのパネルがポップアップします。
4：「キャッシュされた画像とファイル」にチェックをつけます。
5：最後に「閲覧履歴データ消去する」のボタンをクリックすればキャッシュクリア完了です。
キャッシュクリアの仕方（iOS編 ※iPhone）
iOSでのSafariの場合
1：iPhoneの設定から「Safari」を選択します。
2：「Safari」のメニューから「履歴とウェブサイトデータの消去」を選択します。
3：「履歴とウェブサイトデータの消去」を選択後キャッシュクリア完了です。
※上記の方法でキャッシュクリアされますが、同時にCookie、閲覧履歴、タブも削除されてしまいます。
キャッシュを持たないウィンドウを表示する
1：iPhoneで「Safari」を開きます。
画面右下の□をタップしてください。
2：画面左下の「プライべート」をタップします。
3：「プライベートブラウズモード」で見るサイトはキャッシュなどが残りませんのでキャッシュクリアされたサイトが見ることができます。
※プライベートブラウザモードとは、これまでにアクセスしたサイト、検索履歴、クッキー、自動入力の情報が毎回削除され、一切safariに残らないブラウザモードです。
iOSでのGoogle Chromeの場合
1：iPhoneで「Google chrome」を開きます。
chromeの画面右下の3つの点をタップします。
2：メニューの中の「履歴」をタップします。
3：履歴のメニューの左下の「閲覧履歴を消去」をタップしてください。
4：「閲覧履歴を消去」のメニューから消去したい項目にチェックを入れて「閲覧履歴の消去」をタップすれば、キャッシュクリア完了です。
※項目は必要に応じてチェックを入れてください
キャッシュクリアの仕方（Android編）
AndroidでのGoogle Chromeの場合
1：Androidで「Google chrome」を開きます。
chromeの画面右上の3つの点をタップします。
2：メニューの中の「履歴」をタップします。
3：「閲覧データを削除…」をタップしてください。
タップ後、詳細画面に移ります。
4：詳細画面では期間、削除したい項目が出ますので
期間とデータ削除の項目にチェックを付けたら、下にある「データを消去」をタップしてキャッシュクリア完了です。
まとめ
もし、ウェブ制作をしているときに画像が変わらない、新しいCSSが適用されてないなどの現象が起こりましたら、キャッシュが残ってしまっている可能性が高いです。
そうなってしまった場合の一つの手段としてキャッシュクリアの仕方をご説明させていただきました。
クライアントにテストページを随時確認していただく際にもキャッシュは厄介な存在ですので削除の仕方をお伝えされるとスムーズに確認ができるかと思います。
