こんにちは。いなおです。
画面制作でプログラミングしているとき、なぜか CSS や Javascript の変更が反映されない?!って経験無いですか?
僕がまだ新人だったころ、頑張って Javascript を修正したのに、いくらページ更新しても全く反映されなくって、訳が分からず原因を探っていたら1日が終わってしまった、という苦い経験があります。
ブログ書いてる人も、もしかしたら経験したことあるかもしれませんね。
今回は、これを一発で解決する方法をご紹介いたします。
「Ctrl + F5」これだけでOK
どうやら専門用語で「スーパーリロード」って言うらしいです。
通常のページ更新「F5」だとダメで、「Ctrl + F5」です。たったこれだけです。これで、強制的に最新の CSS と Javascript を読み込んでくれます。
これはいざというときに役に立つ技なので覚えておきましょう!!
ブラウザのキャッシュが原因
そもそもの原因はブラウザのキャッシュ機能です。
これは、CSS や Javascript を含めたWebページ情報をブラウザが記憶する機能です。これにより、サーバーからページ情報を取得する手間を省くことで、サーバー負荷を減らすのと、クライアント側のパフォーマンス向上を実現しています。
簡単に言うと、ページの表示が早くなるってことですね。画像読み込みとか遅いときはめちゃくちゃ遅いですからね。
キャッシュ機能自体は素晴らしい機能なんですが、開発中に限っては邪悪な機能となります。きっと今日もどこかで Javascript が全然反映されね~(泣)と新人プログラマーが唸っていることでしょう・・・
先ほど紹介した「Ctrl + F5」はキャッシュを無視して強制的にサーバーからWebページ情報を取得するコマンドなんです。
まとめ
CSS や Javascript が反映されないときは、「Ctrl + F5」で強制的にサーバーからWebページを取得しましょう。
- 「F5」 ⇒ リロード(キャッシュがあればキャッシュ優先)
- 「Ctrl + F5」 ⇒ スーパーリロード(キャッシュを無視して強制的にサーバーからWebページ情報を取得する)
これで悩めるプログラマーやブロガーが1人でも救われることを祈っています。
ほめて遣わす
コメントしていただき、ありがとうございます。
これからも役立つ記事を全力で書いていきますので、ぜひ参考にしてください。