CSSやJavaScriptの修正が反映されない？ブラウザのキャッシュクリアを覚えよう
Webページを作っているとプログラムの変更がブラウザに反映されないことはないでしょうか。
「確かに直したはずなのに何も変わってないように見える」
「直し方が悪かったのかな」
なんて思っていると実は
「変更前のキャッシュを見にいってるせいだった。。」
「無駄に時間を使ってしまった。。」
なんてことは特に初心者の頃はありえることと思います。（初心者じゃなくても結構ありますが。。）
かつての自分がそうであったように、そんなしょうもないところでハマってしまう人を救うべく、ブラウザのキャッシュを削除する方法を紹介します。
キャッシュとは
キャッシュ(cache)の意味を調べてみると、「隠したもの」「隠し場所」「貯蔵所」「貯蔵物」「隠匿場所」なんかの意味があるようです。個人的には「貯蔵所」あたりが意味合い的に近い気がします。
くれぐれも現金(cash)の意味ではありません。
キャッシュとはデータへのアクセスを高速にするために一時的に溜め込んでおくことや、溜め込む場所のことを指します。
例えばサッカーボールを取りに行こうと思った時に、物置に取りにいくより玄関に取りにいったほうが早いですよね。
「しばらく使わないなら物置に置いておくけど、明日も使う予定であれば玄関に置いておこう。そのほうが早いしね。」
これがキャッシュの概念です。
ITの世界ではいろんなところにキャッシュがあります。
パソコンの中にはキャッシュメモリと呼ばれる装置があります。
これはコンピュータの頭脳であるCPUと主記憶装置と呼ばれるメモリの間に位置します。
CPUがメモリにアクセスするよりもキャッシュにアクセスしたほうが高速なのでメモリから取得したデータを一時的にキャッシュに溜めておき、次回以降はキャッシュから取りにいくことで処理の高速化を可能としています。
アプリ開発などでもログイン情報やマスタデータなどは通常データベースに保管されており、そこから取ってくることになります。しかしこれらのデータはアプリを使う上でよく登場するデータです。なので、ログイン時に別の場所に溜め込んでおいて、そこから取ることで処理を高速にするテクニックが使われたりします。いちいちデータベースから取るよりもそのほうが速いからです。
今回お題としているのはブラウザのキャッシュになりますが、考え方は同じです。
ブラウザは一度アクセスしたWebページの情報をどこかに溜めこんでいます。
そして次回そのページにアクセスする時には、キャッシュからデータを取りに行ってより素早く表示できるようにしています。
なんとなく初回に開いた時より2回目以降のほうが速く感じた方もいるのではないでしょうか。
また、キャッシュはメインとなるデータの保管場所よりも容量が小さいので古いほうから消えて行ったり、一定期間で消えてしまいます。あくまで一時的な保存領域ということになります。
キャッシュを自分で削除しよう
上記のようにキャッシュには処理を高速にするメリットがあるのですが、
Web開発においては思わぬ落とし穴になることがあります。
前置きでお話ししたとおり、プログラムを修正しても即座に反映されないことがあるからです。
ちょっとCSSやJavaScriptを手直ししてブラウザをリロード（再読み込み）してもブラウザは「ああ、このページの情報はキャッシュにあるからこれを表示すればいいのね」といって修正前の情報でWebページを表示してしまうのです。
これでは開発がはかどらないですよね。
お待たせしました。
それでは自分でキャッシュを削除して修正内容が反映されるようにしましょう。
ちなみにキャッシュを無視して再読み込みすることをスーパーリロードと呼びます。
Google Chrome
まずは開発者ツールを表示しましょう。
Windowsの場合はF12キー、Macの場合はcommand+option+iキーで表示できます。
ブラウザ上部にある再読み込みボタン(矢印が円を描いてるやつ)を右クリックします。
「キャッシュの消去とハード再読み込み」をクリックして再度表示することで修正後の情報でWebページを表示することができます。
Firefox
Windowsの場合はCtrl+Shift+R
Macの場合はcommand+shift+R
これでOKです。
Safari
shift+更新ボタン
まとめ
なんかキャッシュの説明がメインになってしまいましたが、このようにスーパーリロードを活用することでキャッシュに騙されることなくWeb開発ができます。
ぜひ覚えてください。
ちなみに、キャッシュされた古いページが表示されているかどうかはブラウザの開発者ツールで確認することができます。
開発者ツールでWebページのソースコードを確認できるので該当開所のソースを見て変更前の状態になってたらキャッシュが効いているということですね。
開発者ツールの使い方については「そのスタイルどうやって書いてるの？ブラウザの開発者ツールを使おう」「JavaScriptがうまく動かない？開発者ツールでデバッグしてみよう」あたりも参考に読んでみてください。
したっけ！
- Chromeは開発者ツールを開いて「キャッシュの消去とハードウェア再読み込み」
- FirefoxはCtrl(command)+Shift+R
- Safariはshift+更新ボタン
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy