キャッシュとは？表示が速くなる仕組みと、古い情報が残る理由

キャッシュの仕組み｜手元の控えを再利用する

黒板に書かれた宿題をノートに写しておけば、何ページだったか忘れても、席で確かめられます。ただし、先生が黒板を書き直しても、ノートの内容までは変わりません。

この「写して使う便利さ」と「古い写しが残る理由」を、下のボタンで試してみましょう。

漫画でわかるキャッシュ｜便利な控えに古い情報が残る理由

宿題は12ページ？ ノートと黒板が違う！ 全4ページ

学校の宿題にたとえてみましょう。黒板に書かれた「計算ドリル12ページ」を、イトがノートに写します。ところが、あとから宿題が変更されて……。

先に本文の解説を読む ↓

画像を押すと拡大できます。＋／−で大きさを変え、拡大中はドラッグして読めます。

1 / 4宿題は何ページ？ 黒板へ見に戻るイト

学校で先生が伝えた宿題は、計算ドリル12ページ。イトは席へ戻ると、何ページだったか忘れてしまいました。

1ページ目のセリフ

• 教室。髪を低くまとめ、眼鏡とレンガ色のベストを着けた女性の先生が黒板を示す。黒板には「算数の宿題・計算ドリル・12ページ」。
• 先生「今日の宿題は、計算ドリル12ページです。」
• 席へ戻ったイト「あれ、何ページだっけ？」
• 黒板の近くまで戻ったイトの心の声「また見に来ちゃった。」
• ピコが机の紺色のノートを示す。「ノートに写しておこうよ。」

2 / 4ノートに写せば、図書室でも確かめられる

イトは黒板の宿題をノートに写し、計算ドリルと一緒に図書室へ持っていきます。

2ページ目のセリフ

• イトの肩越しに手元が見える。机に置いた紺色の綴じノートの右ページへ「計算ドリル・12ページ」と写す。
• イト「12ページ、と。」
• イトが紺色のノートと緑色の計算ドリルを閉じて持ち、図書室へ入る。
• 図書室の机で、ノートの12ページという控えを指して確かめる。イト「ここで確かめられる！」
• イトが計算ドリルに取りかかる。ピコ「黒板まで戻らなくていいね。」

3 / 4黒板は13ページ。でもノートは12ページのまま

イトが図書室にいる間に、先生が黒板の宿題を訂正しました。離れた場所のノートには、その変更が伝わりません。

3ページ目のセリフ

• 教室の黒板はまだ計算ドリル12ページ。同じ女性の先生が消しゴムを手に気づく。
• 先生「あ、宿題は13ページだった。」
• 先生が黒板を「計算ドリル・13ページ」へ書き直す。
• 図書室では、イトのノートは12ページのまま。ピコ「写したノートは、12ページのまま。」
• 教室へ戻ったイトが黒板の13ページを見つける。「あれ？ 黒板は13ページ？」

4 / 4元の情報を確かめ、変わった控えを直す

イトは先生に宿題を確認し、机のノートを12ページから13ページへ直します。

4ページ目のセリフ

• 黒板は計算ドリル13ページ。イトが女性の先生へ尋ねる。イト「宿題、変わりましたか？」
• 先生「ごめんね。13ページに訂正したの。」
• イトは机に置いたノートの12ページに一本線を引き、その下に13ページと書く。「ノートも直しておこう。」
• ピコ「変わっていなければ、そのまま使えるよ。」
• イトはノートを閉じ、緑色の計算ドリルに取りかかる。「便利な写しも、ときどき確認だね！」

黒板が「元の情報」、ノートが「保存した控え」にあたります。Webでは有効期間や保存のルールに応じて使い方が変わり、毎回変更を問い合わせるとは限りません。変更があれば新しいデータを受け取り、控えを更新します。

キャッシュの詳しい解説へ ↓

閉じる ×

← 前

−

100%

＋元の大きさ

次 →

拡大中はマウスや指でドラッグできます。100%では左右スワイプ・左右キーでページ送り。

漫画では、イトが宿題をノートに写すことで、黒板まで戻る手間を減らせました。Webでは、このノートにあたるのが、保存しておいた画像などのデータです。同じデータを再利用できれば、ダウンロードする量を減らせます。

Webのキャッシュは何を保存する？画像・CSSの再利用

たとえば、いつも見るサイトのロゴ画像です。ページを移動しても同じロゴを使うなら、一度受け取った画像を保存し、次の表示にも使える場合があります。

文字の色や配置を決めるCSS、ページ上の動きを作るJavaScriptなども、キャッシュに保存されるデータの例です。何を保存し、いつまで再利用できるかは、サイトやアプリのルールによって変わります。

ここではWebのキャッシュを中心に説明します。ブラウザ内の保存に絞って知りたい場合は、ブラウザキャッシュとはへ進めます。

キャッシュで表示が速くなる理由

初めてページを開くときは、画像などのデータをサーバーから受け取ります。次に開くとき、保存済みのデータを使えれば、その分のダウンロードを省けます。これが、表示が速くなる理由の一つです。

また、データを配る側でも、同じ結果を毎回作らず、保存した結果を返すことで処理を減らせます。「通信を減らす」「作り直す処理を減らす」という二つの効果があります。

イト

キャッシュがあれば、次はページが全部すぐに出るの？

ピコ

使い直せるデータは速く出せるよ。でも、新しく受け取る部分や、画面を作る処理は残るんだ

キャッシュだけでページ全体の速さが決まるわけではありません。通信の状態や、端末で動くプログラムの重さなども関係します。

補足：ラボの「近くの棚」の図で見る

ノートの写しと同じ再利用の考え方を、ラボでは「よく使う材料を近くの棚に置く」図でも表しています。本館まで取りに行く手間を減らす、という部分に注目してください。

このたとえを物語で読むなら、第47話のキャッシュ棚へ。

キャッシュはどこに保存される？

キャッシュは、自分のスマホやパソコンだけにあるとは限りません。データを届ける途中や、サイトを動かすサーバーにも置かれます。

CDNは、複数の配信拠点からデータを届ける仕組みです。詳しくはCDNとはで説明しています。ブラウザがデータを頼み、サーバーが返す関係は、クライアントとサーバーで確かめられます。

ユイ

自分のブラウザのキャッシュを消しても、サイト側の控えは残るんですね

マコト

そう。『消したのに変わらない』ときは、どこにある控えを消したかも確かめたいね

キャッシュに古い画像や画面が残るのはなぜ？

漫画では、黒板の宿題が13ページに変わっても、イトのノートは12ページのままでした。Webでも、元の画像などが更新されたあと、保存済みの控えを使い続けると、以前の表示が残ることがあります。

Webのキャッシュには、再利用できる期間や、変更を確かめるルールがあります。ブラウザやサーバーがそれに従って処理するため、利用者が毎回手作業で確認するわけではありません。

サイトを見る人は、まず別の環境と比べる

古い表示に気づいたら、次の順で確認します。

1. 同じURLのページを、別のブラウザや端末でも開く。
2. 自分の環境だけ古いのか、ほかでも同じなのかを比べる。
3. 自分の環境だけなら、使っているブラウザのキャッシュを確認する。ほかでも古ければ、サイトの更新状況を確認し、必要なら運営者へ伝える。

これは原因を絞る手がかりです。ログイン状態などによって表示が違う場合もあるので、比較だけでキャッシュが原因だとは断定できません。「ページが見つからない」と出る場合は、404エラーの意味が別の確認先です。

補足：元のデータと古い控えを図で比べる

キャッシュとCookieの違い

キャッシュとCookieは、どちらもブラウザに保存されることがありますが、目的が違います。

古い画像が残る問題と、ログイン状態が変わる問題は、同じ原因とは限りません。「キャッシュとCookieをまとめて削除する」設定もあるので、消す対象を確認してください。役割の詳しい説明はCookieとはへ進めます。

キャッシュを削除するとどうなる？

キャッシュを削除すると、保存していた控えがなくなります。次に必要になったときはデータを取り直すため、古い表示が直ることもあれば、最初の読み込みが一時的に遅くなることもあります。

削除は控えを捨てること、更新は新しい内容に入れ替えることです。漫画のノートを書き直す場面は更新にあたります。キャッシュは、消すほどいつでも速くなるものではありません。

ブラウザ、アプリ、配信拠点では、消える控えの範囲が違います。削除の影響を知りたいときは、キャッシュを消すとどうなる？で対象を確認できます。

キャッシュのよくある疑問

Q1. キャッシュは毎回、元の情報を確認しますか？

必ず毎回ではありません。Webでは、再利用できる期間や保存のルールに従い、確認せず使う場合と、変更を確かめてから使う場合があります。

Q2. キャッシュを削除したのに、古い表示が残るのはなぜ？

別の場所に古いキャッシュが残っている場合や、元のデータがまだ更新されていない場合などがあります。どこのキャッシュを削除したかと、ほかの環境でも同じ表示かを確認します。

Q3. キャッシュとCookieは同じものですか？

いいえ。キャッシュは再利用するデータの控え、Cookieはサイトがログイン状態や設定などを扱うための小さな記録です。

家族に説明するときは、「黒板の宿題をノートに写すと便利。でも、黒板が変わってもノートは前のまま」という場面を思い出すと伝えやすくなります。