キャッシュとは?

はじめに

WEB開発を行い、テスト期間や運用期間に移行すると毎回「HPが更新されてなんだけど!?」といったお問い合わせが必ず発生します!

そのためにやるべきことは、決まっているので伝えることはできるのですが、そろそろここにまとめました!という記事が一つあると良いかなと思い、書いてみます

結論

表示する画像や、ログイン情報をブラウザに保存し、再利用するための仕組みです。
表示速度が速くなる、ログイン操作が省略可能になる、など便利なこともあります。

詳細

キャッシュとは、例えると「近くに置いてあるメモ」と言い換えることができるかもしれません。

小学校の頃を思い出してみてください。
宿題が出され、答えがわからない状態になってしまいました。

その場合、まず答えを探しに教科書を見にいきます。
教科書の100ページにその答えのヒントがあるとします。
回答を得るために、カバンから教科書を取り出し、100ページを開き、ヒントを確認しにいきます。
※初めから答えを見るのはやめましょう笑

では、重要といわれた箇所をノートにメモしてある場合はどうでしょう?
カバンからノートを出す手間はありますが、ノートを机に開いておけば重要な箇所をすぐ確認することができます。

100ページ目から探すより、ポイントを書き出したノートを見た方が早い気がしませんか?

また、ノートというのは新しいことを学ぶたびに更新するものです。
このノートの更新が、キャッシュの更新にあたると考えられます。

今回は宿題の例えでしたが、このようによく使う情報はブラウザに保存され、素早く保存した情報を取り出す仕組みがあります。
キャッシュという仕組みは、カバンから教科書を取り出すというという手間、つまりブラウザがWEBサーバー上の情報を取り出す手間が減るということに繋がります。
このことは、通信量を減らすことにつながります。

キャッシュの削除

リリース直後や開発中の方は、キャッシュが悪さをする場合があります。

悪さをするパターンを
宿題に例えると、「円周率は3として計算して良いよ!」といわれてきましたが、学年が上がり「円周率は3.14として計算とする」と学ぶ方もいらっしゃるかと思います。
学年が上がり下記のようなテストを行うと、3.14として計算しない弊害が生まれます。

半径30cm, 高さ20cmの円柱の体積を求めよ。
公式は、半径 * 半径 * 円周率 * 高さ ですから、
円周率3とした場合の解は、54000cm3 となり、
円周率3.14とした場合の解は、56500cm3となります。

円周率は3.14であるという情報に更新するか、どうかで正しい解が出るかどうかが決まりますね。

キャッシュの削除とはこの例でいう、「円周率は3」という常識を削除するということに当たります。

このように、キャッシュの影響で求めている結果と異なる結果が出てしまうことがあります。
その場合、何かしらのキャッシュが影響している可能性があるため、キャッシュを削除するとうまくいくことがあります。

キャッシュの削除方法

  1. Google Chromeの場合、下記URLを押下してください
    chrome://settings/privacy
  2. 「閲覧履歴データの削除」を押下
  3. 「キャッシュされた画像とファイル」を押下
  4. 「データを削除」を押下

まとめ

WEBアプリやHPがうまく表示されない、開発がうまくいかないという方は、まずはキャッシュの更新を試してみてください。

なお、開発者の方は「F12開発者ツールを開いている間はキャッシュを無効にする」という設定もあるのでお試しを♪