一度投稿した記事内容は不定期に更新を行う予定です。

【図解】キャッシュ(Cache)とは?仕組みをざっくり解説!

ざっくり図解コラム

超訳(結論)

キャッシュ(Cache)

Webページのデータ(画像やデザインなど)を、スマホやパソコン(ブラウザ)の中に「一時的に保存」しておく機能。

2回目以降のアクセス時に、手元のデータを使うためサイトが爆速で表示される。

ざっくり理解

キャッシュ とは、ざっくり言うと「Webサイトからもらって、手元に残しておいたデータ」です。

初めてWebサイトにアクセスした時、私たちは文字だけでなく、看板の画像、背景の色、デザインなど「容量の多い重たいデータ」をたくさん受け取ります。

もし キャッシュ という仕組みがなかったら、次に同じページを開く時も、わざわざ遠くのサーバーまで「もう一度あの高画質の重たい画像をください…」と取りに行かなければなりません。

これでは時間がかかってしまいますし、通信量もかさみます。

そこで ブラウザ は、一度受け取った画像などのデータを「自分の手元(スマホやパソコンの中)」にこっそり一時保存( キャッシュ )しておきます。

次に同じページを開く時は、わざわざ遠くのサーバーまで取りに行かず、自分の手元からサッとデータを取り出して表示するため、一瞬でページが開く(爆速になる)のです。

ちょっと詳しく:それぞれの役割と特徴

1. キャッシュとして保存されるのはどんなデータ?

キャッシュ として保存されるのは、主に「頻繁には更新されない、重たいデータ」です。

例えば、サイトのロゴ画像、写真、文字の色や配置を決めるデザインデータ( CSS )などが当てはまります。

これらをユーザーの端末内に一時保存しておくことで、通信の無駄を極限まで省いています。

2. 「ブラウザ」と「サーバー」の2種類がある

ここまで説明したのは、ユーザーのスマホやPCに保存される「 ブラウザキャッシュ 」と呼ばれるものです。しかし実は、Webサイトを提供する側(サーバー側)にも キャッシュ が存在します。

これを「 サーバーキャッシュ 」と呼びます。

例えば、サーバーが「よく見られるページのデータは、毎回裏の倉庫(データベース)から探してくるのは大変だから、すぐ出せるように手元に置いておこう」とする仕組みです。

Webサイトの表示を高速化するためには、この両方の キャッシュ をうまく活用することが必須となっています。

2つの決定的な違い(キャッシュがある時・ない時)

もしこの世界に キャッシュ がなかったらどうなるか、違いを表にまとめました。

比較ポイントキャッシュがある時(現在)キャッシュがない時
表示スピード2回目以降は一瞬で
ページが開く(爆速)
毎回イチから読み込むので
表示が遅い
通信量(ギガ)自分の端末から読み込むので
節約できる
毎回重い画像を
ダウンロードするので
ギガが減る
サーバーの負担データを渡す回数が
減るので楽チン
世界中から何度も
画像を取りに来られて
パンクする
身近な例え手元のパンフレットを
サッと読む
毎回お店まで
パンフレットを取りに行く

実践編: キャッシュ を意識するのはどんな時?

普段インターネットを使う分には、キャッシュ のおかげで快適にWebサイトが見られているため、気にする必要はありません。しかし、次のような場面で「キャッシュ の罠」にハマることがあります。

例1:「サイトを更新したのに、画面が変わらない!」という時

ブログの記事を修正したり、非公開にしたりしたはずなのに、「あれ?スマホから見たらまだ古い状態のまま表示されている!」と焦ることがあります。

これは、ブラウザやサーバーが「わざわざ新しいデータを取りに行かなくても、手元にある古い キャッシュ を表示すればいいや」とサボっているのが原因です。

この場合、強制的に最新のデータを取りに行かせる「 スーパーリロード (Ctrlキー + F5キー など)」や、設定画面から「 キャッシュの消去 」を行うことで解決します。

Webサイト運営者あるあるのトラブルです。

例2:スマホの容量がいっぱいになった時

「写真も消したのに、スマホの容量が足りない…」という時、実は Safari や Chrome などのブラウザアプリが、過去に見たWebサイトの画像( キャッシュ )を大量に溜め込んでいることがあります。

設定画面から「 キャッシュを消去 」すると、数ギガバイトもの空き容量が復活することがよくあります。

まとめると

  • Webサイトの画像などをスマホやPCに一時保存する仕組みが キャッシュ
  • 2回目以降のアクセス時に、手元のデータを使うことでページを爆速で表示してくれる
  • サイト側(サーバー)にも キャッシュ があり、サーバーの負担を減らしている
  • サイトが更新されない時は、古い キャッシュ を読み込んでいる可能性を疑う

ほんやーく(語源)

  • Cache(キャッシュ): 隠し場所、貯蔵所、ひそかに蓄える

お金の「Cash(現金)」と同じ発音ですが、スペルも意味も全く違います。

元々はフランス語から来ており、「ユーザーからは見えない場所(カバンの中)に、ひっそりとデータを貯蔵しておく」というITの仕組みをそのまま表したネーミングです!

おつかれさまですにゃ~
読んでくれてありがとう~

タイトルとURLをコピーしました