今回はブラウザの更新について書きます。
ホームページを作っていたら、変更したらそれを確認してという作業の繰り返し。
ブラウザの更新ボタンで変更箇所を確認して・・・、あれ！？変更したはずの箇所が変わってない！
そんなことを経験した人は多いですよね。
実はブラウザの更新には、以下の３つの方法があります。
これって経験が浅い人は結構知らないよね。

自分はChromeをメインで使っているので、ここではChromeのブラウザをメインとして話をします。

通常の再読み込み

一般的に使われる更新ボタンは、ブラウザのアドレスバーの左側にあるこれだと思います。

もしくは、ショートカットキーで[F5]ですね。
Chromeでは[Ctrl+R]でも更新されます。

ハード再読み込み

実は、通常の再読み込みでは変更箇所など反映されないことがあるんです。
ブラウザはホームページを早く表示するためにキャッシュというものを使っています。
キャッシュどういうものかというと、ホームページを表示するときに毎回すべてのデータをダウンロードしていると表示に時間がかかります。
なので、その一部をパソコン内に保持しておくことで、2回目以降の表示はその保持した情報をうまく使って１回目よりも早くページを表示しているんです。
このパソコン内に情報が保持される機能をキャッシュといってます。
このキャッシュはスピードは上げてくれますが、毎回サーバーからデータをダウンロードするわけではないので、
つまりキャッシュの部分については、過去にダウンロードした情報なので、必ずしも最新のデータとは限らないということなんです。
その影響で、ホームページの開発時に変更したはずの箇所が、再読み込みしても反映されないということがたまにあります。
ホームページ作っていると頻繁に遭遇するので、まあ知らない人は少ないとは思いますが、
開発の初心者とかはこのちょっとしたことで結構はまってしまう可能性もあります。
また、制作会社側ではなくて、お客さんがそれを知らずに変更してもらったはずの箇所が変更されていないということで連絡が来ることがありますよね。
経験上、CSSのbackgroundで指定した背景の画像なんかはキャッシュで再表示されているので、通常の再読み込みでは変更されないです。
こういった場合、キャッシュが邪魔ということになるのですが、ブラウザの履歴の削除などの機能を使っちゃうと、確かにキャッシュは消えるのですがそのほかの必要な情報も消えてしまったりする。
まあ、そもそも履歴消したりするのって面倒くさいです。

「ハード読み込み」ではキャッシュの部分も含めて、再度すべてサーバーからデータをダウンロードし直してくれます。
つまり、キャッシュを使わないということになり、ほぼすべての更新について反映されます。
なので、ホームページの開発時にはいつもこの「ハード読み込み」を使っています。

ハード読み込みは、
[Ctrl+F5]が一般的ですが、
Chromeについては[Ctrl+Shift+R]で行うことができます。
[Ctrl+Shift+R]の方が片手で扱えるので絶対おすすめ！

キャッシュの消去とハード再読み込み

「キャッシュの消去とハード再読み込み」という更新方法。
ここで、キャッシュという言葉が出てきてるので、上のキャッシュの話はここでするべきだったのかも。
なんかややこしくてすいませんね。

一番強力な更新がコレ！
たいていの変更はハード更新でいいんだけれど、
例えば　.htaccess の変更とかは「ハード再読み込み」では反映されなかったりする。
特に自分の場合は、リダイレクトがキャッシュに残ってかなり困りました。
こればっかりはキャッシュを全部削除しないといけないのか・・・と思ったのですが、
調べてみるとこれもしっかりブラウザの更新で対応できることがわかりました。

ショートカットキーは存在しないみたいなのでちょっと手間なのですが、

・F12を押して開発者ツールを出す
・更新ボタンを長押し
・「キャッシュの消去とハード再読み込み」

という手順で行います。

こんな感じで出ればいいんです。
単に更新ボタンの長押しでは出てこないのがやっかいで、F12で開発者ツールを出しているときだけらしい。
完全に開発者向けの更新モードですね。

ブラウザの更新って、ホームページの開発では頻繁に行うから、ぜひ知っておくといいです。
というか、せめて「ハード読み込み」までは制作者で知らない人はあかんですよ。
でも、[Ctrl+Shift+R]知らない人がいるみたい、さっきも書いたけれど片手でできるのでこれがおすすめ。

この3つを知っていればもうばっちりですね。