ホームページやWebアプリケーションなどを作成している際に、CSSやJavaScriptに変更を加えたが反映されない。

ソースコードで何かミスをしているのかコンソールを確認したがエラーなども出ていない。

こういった状況に直面したことはありませんか？

それキャッシュのせいかもしれません。

そもそもキャッシュとは？

キャッシュ(cache)とは一度アクセスしたサイトのデータなどを、もう一度使用した際に高速でアクセスできるよう保存しておくことです。

例えば、Webブラウザは一度アクセスしたページやそのページの画像やCSSファイルなどのデータをキャッシュとしてハードディスクに保存をします。

そして再度アクセスした際にもう一度サーバーと通信を行ってデータを取得するのではなくハードディスクからキャッシュを読み込むことで高速な表示を可能としています。

ブラウザでキャッシュをクリアする方法

キャッシュについて解説しましたが、これでなぜ反映されないのかある程度理解できたのではないでしょうか？

要するにCSSやJavaScriptの変更した内容をサーバーにアップしたとしてもハードディスク内にキャッシュがある場合そちらを参照していることになります。

それでは反映されるはずがありませんよね。

では、そのキャッシュをクリアする方法を紹介します。

クリアする方法はこれです。

Macの場合

command + shift + R

Windowsの場合

ctrl + shift + R

これだけ覚えておけば問題ありません。

ブラウザによっては異なるショートカットキーになる場合がありますがほぼほぼこれだけで問題ないでしょう。

まとめ

いかがでしょうか？

キャッシュのクリアを行ってみて、変更は反映されましたか？

もしキャッシュのクリアを行って変更が適用されていないのであれば、コードで何かミスをしている可能性があります。

コンソールなどでメッセージが出ていないかなど確認し再度チェックしてみましょう。