TERM PRIMER
先に知っておく言葉
- ブラウザキャッシュ
- ブラウザが画像やCSSなどを一時保存し、同じページを速く表示するためのしくみです。
- キャッシュ
- 一度使ったデータを一時的に保存し、次に速く使えるようにするしくみです。
- Cookie
- Webサイトがブラウザに保存する小さな情報。ログイン状態などに使われます。
- CSS
- Webページの色、余白、文字サイズなど、見た目を整えるための言葉です。
- JavaScript
- Webページに動きや操作を加えるためによく使われるプログラミング言語です。
自分の言葉で説明してみよう
次の三つを、自分のブラウザで想像してみてください。
- 同じサイトで何度も表示されるロゴ画像を探す
- その画像が毎回サーバーから来ているのか、手元の保存棚から来ているのかを考える
- 画像を差し替えたのに古いままなら、自分だけか他の人も同じかを分ける
ブラウザキャッシュとは、画像やCSSなどを＿＿＿＿＿＿＿＿＿＿＿＿に残す仕組みです。
自分だけ古い表示なら、まず＿＿＿＿＿＿＿＿＿＿＿＿を疑います。
Cookieとの違いは、ブラウザキャッシュが主に＿＿＿＿＿＿＿＿＿＿＿＿を扱うことです。
答えの例は、「ブラウザ」「手元のブラウザキャッシュ」「表示材料」です。キャッシュ、Cookie、履歴を同じ言葉でまとめず、何を保存しているのかで分けると説明しやすくなります。
キャッシュ全体の中でも、ブラウザキャッシュは自分の端末とブラウザに近い場所の話です。実際の画面では、画像を差し替えたのに古い画像が出る、CSSを直したのに見た目が変わらない、自分の環境だけ表示が違う、といった場面で確認候補になります。
この先では、第48話「ブラウザキャッシュは何を覚えている？」の「手元の保存棚」をたとえにしながら、画面のむこう側でブラウザが何を覚えているのか、削除すると何が変わるのか、Cookieや履歴とは何が違うのかを順に見ていきます。
表示材料を手元の棚で再利用する
イト
ブラウザキャッシュは、さっきのキャッシュ棚の中でも手元に近い棚なの？
ピコ
そう。ブラウザが受け取った画像やCSSを、次に使いやすいように残しておく棚だよ
ユイ
自分だけ古い表示になるときに、まず見る場所になりそうですね
Webページを開くたびに、同じ画像やCSSを毎回サーバーへ取りに行くと時間がかかります。そこでブラウザは、再利用できる材料を手元に置き、次回の表示で使える場合はそこから取り出します。キャッシュ全体の考え方は、先に キャッシュとは を見ると位置づけが分かりやすくなります。
ピコルート・ラボのたとえでは、ブラウザキャッシュは机の横にある保存棚です。サーバー図書館の本館ではなく、自分のブラウザの近くにある棚から材料を取り出します。近いので速い一方、棚の中身が古いままだと、更新前の見た目が出ることがあります。
ブラウザキャッシュの役割と保存されるもの
ブラウザキャッシュに入りやすいものは、ページの表示で何度も使われる材料です。
| 保存されやすいもの | 例 |
|---|---|
| 画像 | ロゴ、アイコン、写真、バナー |
| CSS | 文字サイズ、余白、色、レイアウトの指定 |
| JavaScript | ボタンの動き、画面の切り替え、入力補助 |
| フォント | Webフォントのデータ |
| 一部のデータ | サービスや設定によって保存される応答 |
何が保存されるか、どれくらい残るかは、サイト側の設定やブラウザの環境によって変わります。ブラウザキャッシュは「何でも保存する箱」ではなく、再利用してよいと判断された材料を一定のルールで扱う仕組みです。
- ページを開く
- 画像やCSSなどを受け取る
- ブラウザが再利用できる材料を保存する
- 次回の表示で保存棚を確認する
- 使える場合は手元から読み込む
- 古い場合は取り直す
古い表示が残るとき
ブラウザキャッシュが原因で古い表示が残る場合があります。
たとえば、サイト運用者が画像を差し替えたのに自分の画面だけ古い画像が見える、CSSを更新したのに色や余白が変わらない、という場面です。ブラウザが手元の保存棚から古い材料を出していると、サーバー側では新しくなっていても、自分の画面では古く見えることがあります。
切り分けるときは、次の順番で考えます。
- 自分のブラウザだけ古いのか
- 別ブラウザやシークレットウィンドウでは新しいのか
- 別端末や別の人の環境でも古いのか
- ファイル名やURLが更新されているのか
- CDNやサーバー側のキャッシュも関係していないか
自分だけ古いなら、ブラウザキャッシュが有力な候補です。多くの人が同じ古い表示を見る場合は、CDNキャッシュやサーバー側キャッシュも見る必要があります。
マコト
自分だけ古いのか、みんな古いのかで見る棚が変わるんだね
ピコ
うん。ブラウザキャッシュは手元の棚だから、まず自分の環境を分けて確認するといいよ
キャッシュ削除で変わること
ブラウザキャッシュを削除すると、手元に残っていた画像やCSSなどを取り直します。
これで古い表示が直る場合があります。反対に、次回の表示では材料を取り直すため、一時的に読み込みが遅く感じることもあります。
削除で変わりやすいものは、次のような材料です。
- 画像を取り直す
- CSSを取り直す
- JavaScriptを取り直す
- フォントを取り直す
- キャッシュされた一部の応答を取り直す
ただし、ブラウザキャッシュ削除は、CDNやサーバー側に残った古いキャッシュまでは消しません。「自分のブラウザの保存棚を空にした」と考えると、操作の範囲を間違えにくくなります。
Cookieや履歴との違い
ブラウザキャッシュ、Cookie、閲覧履歴は、まとめて「ブラウザに残るもの」として扱われることがあります。けれど、役割は違います。
| 名前 | 主な役割 |
|---|---|
| ブラウザキャッシュ | 画像、CSS、JavaScriptなどの表示材料を再利用する |
| Cookie | ログイン状態、識別、サイト設定などに使われる小さな記録 |
| 閲覧履歴 | いつどのページを見たかの記録 |
古い画像や見た目のズレなら、ブラウザキャッシュを考えます。ログインが切れる、カートや設定がおかしい、といった場合はCookieやセッションも候補になります。見たページの一覧を消したいなら、閲覧履歴の話です。
同じ「削除」でも影響が違います。仕事や学習で確認するときは、「キャッシュを削除した」「Cookieを削除した」「履歴を削除した」のように、言葉を分けて残すと後から説明しやすくなります。
開発や運用で見るポイント
サイト制作や運用では、ブラウザキャッシュは便利さと確認しづらさの両方を持ちます。
CSSやJavaScriptを更新したのに反映されない場合は、ブラウザの保存棚を疑います。ファイル名やURLに版番号のような目印を付けると、新しい材料として取り直されやすくなる場合があります。
開発者ツールを使える場合は、Networkで画像やCSSの読み込みを見ます。キャッシュから使われたのか、サーバーへ取りに行ったのかを確認できることがあります。最初から細かいヘッダーを全部読む必要はありません。まずは、どこの棚から出てきた材料なのかを分けることが入口です。
ミニクイズ：保存するものを分けられる？
Q1. ブラウザキャッシュを一文でいうと？
ブラウザキャッシュは、一度受け取った画像やCSSなどをブラウザに一時保存し、次回の表示を速くする仕組みです。
Q2. 自分だけ古い表示なら、まず何を疑いますか？
手元のブラウザに残ったブラウザキャッシュを疑います。別ブラウザや別端末で比べると切り分けやすくなります。
Q3. ブラウザキャッシュとCookieは同じものですか？
いいえ。ブラウザキャッシュは表示材料の控え、Cookieはログイン状態や識別などに使われる記録です。
LAB WHITEBOARD
自分の言葉で説明してみよう
「ブラウザキャッシュが保存するもの、古い表示が残る理由、Cookieや履歴との違いを説明できるようになる。」を、いまの自分の言葉で一文にしてみてください。途中の説明でも大丈夫です。
