今日は、理解の甘かった「キャッシュとCookie」についてまとめます！
ブラウザにキャッシュさせないためのmetaタグもご紹介します。
こんにちは。駆け出しコーダーのharuです。
2歳0歳の育児をしながら、22時〜2時に独学しています！
学習していてわかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！
キャッシュって何？cookieと何が違うの？
今日は、キャッシュについてです。
先日から、#IE沼 と呼ばれる沼にハマっておりました…(勝手に命名w)
じぶんのIE11(Windows実機)では動いているjQueryが、ほかのIE11だと動かないこともあるのですか…？(；ω；) #IE沼
— はる🌸ARUTEGA (@fuwafuwahappy) August 27, 2020
ツイートにあるように、いくつかの実機でjQueryが動いていることが確認できているのに、クライアントさんの実機では動かないという謎にぶつかっていました。
やさしいみなさんが答えてくださり「キャッシュ」という一因を知りました。
おそらくキャッシュが原因だったと思われるので、理解の甘かったキャッシュをちゃんと勉強しました。
よく聞くcookieとの違いもはっきりさせとこう…(´･ω･`)
キャッシュとは？
キャッシュとは、「読みこんだサイトの情報」を残しておく仕組みのこと。読みこんだ情報のことを指すこともあります。
たとえば、訪れたページの画像やテキストの情報がPCやスマホに履歴として残るわけです。（一時的）
キャッシュされることにより、次に訪問したときのすばやく表示されるというメリットがあります。
わかりやすい画像があったのでお借りしてきました（敬礼）
（画像引用：初心者でもわかる『キャッシュ』講座 Cookie（クッキー）との違いや削除方法など解説）
こうやってよく訪れるサイトは、表示速度が上がるようになっていたのですね。知らなかった、便利。
Cookie(クッキー)とは？
キャッシュと似ているCookieについても触れます。
Cookieもキャッシュと同様に、「読みこんだサイトの情報」を残しておく仕組み、またはその情報のことです。
キャッシュと何が違うのかというと、Cookie情報＝ユーザー情報 という点です。
・ショッピングカートの中身が保存されている
・その人にあった広告が表示される＝過去にみた商品を出す
などに使われています。なるほど。
先ほどのわかりやすい画像を、こちらもお借りしてきました（深く敬礼）
（画像引用：初心者でもわかる『キャッシュ』講座 Cookie（クッキー）との違いや削除方法など解説）
キャッシュもCookieも、サイトの利便性を上げるためのものなのですね！
キャッシュのデメリットとは？
そんな便利なキャッシュですが、使われようによってはちょっと厄介です。
デメリットを挙げてみます。
２.キャッシュが増えるとデータが重くなり、動作不良やフリーズが起こる
勉強してみると、冒頭でご紹介した沼は①が原因そうです。
じぶんのIE11(Windows実機)では動いているjQueryが、ほかのIE11だと動かないこともあるのですか…？(；ω；) #IE沼
— はる🌸ARUTEGA (@fuwafuwahappy) August 27, 2020
＝”クライアントさんに送付した最初のデータがキャッシュされてしまい、修正が更新されなかった”（まだ返事来てないので違ったらめっちゃ詳しく追記します;(´◦ω◦｀):w）
キャッシュの削除
上記のキャッシュのデメリットを回避するためには、定期的なキャッシュの削除（＝キャッシュクリア）が有効です。
PCの場合はスーパーリロードと呼ばれる方法が使えます。
Mac：Command＋R
スーパーリロードをおこなうと、キャッシュを使わずに新規にサイトを読み込んで表示することができます。これで、最新情報が取得できます。
スマホの場合は、スーパーリロードは使えないのでキャッシュの削除をする必要があります。
削除方法はこちら。キャッシュとCookieがわかりやすく解説されています！
ブラウザにCSSやJavaScriptの情報をキャッシュさせない方法
最後に、問題が起きる前にあらかじめキャッシュを避けるための対策を２つご紹介します。
<meta>タグを使う
<head>間に1行のコードを追加するだけで、キャッシュの読み込みを禁止することができます。
<meta http-equiv="Pragma" content="no-cache"> または、 <meta http-equiv="Cache-Control" content="no-cache">
どちらも同じ意味なので、どちらかだけでOKです。
すでにキャッシュされてしまっている場合に、このコードを追記してもキャッシュは削除されないので注意です。そのような場合は、手動でキャッシュを削除する必要があります。
こちらを参考にしました。
GETパラメーターを付与
GETパラメータをファイルに付与することで、CSSやJavaScriptのファイルを新しくブラウザが読み込んでくれます。
GETパラメーターとは、ファイルの末尾につけるバージョンのようなものです。
GETパラメーター付き：Style.css?ver=1.0.1
このように、ファイル名の末尾に?ver=をつけます。
修正や納品のたびにverの数字を更新することで、その都度あたらしい情報を読み込んでもらうことができます。
こちらを参考にしました。
１つ目に紹介した<meta>はキャッシュの読み込みを禁止するものですが、Firefoxではキャッシュが残るなどの情報もweb上にありました。必ずしもという訳ではなさそうです。
確実なのは後者ですね。（数字の更新を忘れなければw）
