CSSやJavascriptの変更が反映されないときに一発で解決する方法をご紹介

【一撃必殺】CSSやJavascriptの変更が反映されないときに一発で解決する方法

こんにちは。いなおです。

画面制作でプログラミングしているとき、なぜか CSS や Javascript の変更が反映されない？！って経験無いですか？

僕がまだ新人だったころ、頑張って Javascript を修正したのに、いくらページ更新しても全く反映されなくって、訳が分からず原因を探っていたら1日が終わってしまった、という苦い経験があります。

ブログ書いてる人も、もしかしたら経験したことあるかもしれませんね。

今回は、これを一発で解決する方法をご紹介いたします。

「Ctrl ＋ F5」これだけでOK

どうやら専門用語で「スーパーリロード」って言うらしいです。

通常のページ更新「F5」だとダメで、「Ctrl ＋ F5」です。たったこれだけです。これで、強制的に最新の CSS と Javascript を読み込んでくれます。

これはいざというときに役に立つ技なので覚えておきましょう！！

ブラウザのキャッシュが原因

そもそもの原因はブラウザのキャッシュ機能です。

これは、CSS や Javascript を含めたWebページ情報をブラウザが記憶する機能です。これにより、サーバーからページ情報を取得する手間を省くことで、サーバー負荷を減らすのと、クライアント側のパフォーマンス向上を実現しています。

簡単に言うと、ページの表示が早くなるってことですね。画像読み込みとか遅いときはめちゃくちゃ遅いですからね。

キャッシュ機能自体は素晴らしい機能なんですが、開発中に限っては邪悪な機能となります。きっと今日もどこかで Javascript が全然反映されね～（泣）と新人プログラマーが唸っていることでしょう・・・

先ほど紹介した「Ctrl ＋ F5」はキャッシュを無視して強制的にサーバーからWebページ情報を取得するコマンドなんです。