はじめに: キャッシュはWebを速くするための再利用
Webページを表示するとき、ブラウザはHTMLだけを受け取っているわけではありません。CSS、JavaScript、画像、フォント、APIのJSONなど、さまざまなデータを読み込んで画面を作っています。
もし毎回すべてのデータをネットワークから取り直していたら、表示は遅くなり、サーバーや回線にも負荷がかかります。そこで使われるのがキャッシュです。
キャッシュは、一度取得したデータを保存しておき、次回以降に再利用する仕組みです。ブラウザが画像やCSSを再利用できれば、通信量を減らし、ページ表示を速くできます。
一方で、キャッシュは「古い内容が表示される」原因にもなります。CSSを修正したのに反映されない、画像を差し替えたのに前の画像が出る、といった経験はキャッシュと関係していることがあります。
キャッシュは、一度取得したデータを保存しておき、次回以降に再利用するための仕組みです。
キャッシュは「もう一度使えるなら使う」仕組み
キャッシュの基本は、同じデータを何度も取りに行かず、保存済みのものを使うことです。よく使うデータを近くに置いておけば、毎回遠くまで取りに行くより速くなります。
この考え方はWebだけのものではありません。CPUのキャッシュメモリ、DNSキャッシュ、CDNのキャッシュ、アプリケーション内の一時保存など、いろいろな場所に登場します。
この記事では、特にブラウザとHTTPのキャッシュを中心に見ていきます。ブラウザが一度取得したリソースを保存し、HTTPヘッダーの情報をもとに、再利用してよいかどうかを判断する流れです。
キャッシュを理解すると、Webページが速く表示される理由と、古い内容が表示される理由の両方を説明しやすくなります。
ブラウザキャッシュとHTTPキャッシュ
ブラウザキャッシュは、ブラウザが取得済みのリソースを保存しておく仕組みです。画像、CSS、JavaScriptなどは、同じページや別ページで何度も使われることがあります。
たとえば、サイト全体で同じCSSファイルを使っている場合、ページを移動するたびにCSSを毎回ダウンロードするのは効率的ではありません。キャッシュを使えば、以前取得したCSSを再利用できます。
ただし、ブラウザが勝手に何でも永久に保存するわけではありません。サーバーはHTTPレスポンスヘッダーを使って、キャッシュしてよいか、どれくらいの期間使ってよいかを伝えます。
ブラウザはその情報を見て、キャッシュにあるリソースをそのまま使うか、サーバーに「まだ同じ内容ですか」と確認するか、もう一度取り直すかを判断します。
ブラウザキャッシュは、HTTPレスポンスの情報をもとに、取得済みのリソースを再利用します。
HTTPヘッダーでキャッシュを制御する
HTTPキャッシュでは、レスポンスヘッダーが重要です。代表的なものに Cache-Control があります。
Cache-Control: max-age=3600これは、一定時間はキャッシュを使ってよい、という意味です。max-age=3600 なら、秒数で指定された期間、キャッシュが有効と判断されます。
一方で、毎回サーバーに確認してほしい場合は no-cache を使います。名前だけ見ると「保存しない」に見えますが、意味としては「使う前に再確認する」です。
Cache-Control: no-cache保存そのものを避けたい場合は no-store を使います。ログイン後の個人情報を含むページなど、保存されると困る内容で使われます。
Cache-Control: no-storeまた、サーバーに再確認した結果、内容が変わっていなければ 304 Not Modified が返ることがあります。この場合、ブラウザは保存済みの内容を再利用します。本文を再送しなくてよいため、通信量を減らせます。
HTTPキャッシュでは、レスポンスヘッダーによって、保存してよいか、いつまで使ってよいか、再確認が必要かを判断します。
PHPでCache-Controlを返してみる
PHPでは、header() を使ってHTTPレスポンスヘッダーを設定できます。
たとえば、短い時間だけキャッシュしてよいレスポンスなら、次のように書けます。
<?php
header('Content-Type: text/plain; charset=UTF-8');
header('Cache-Control: max-age=60');
echo 'このレスポンスは短時間キャッシュできます。';max-age=60 は、短い時間だけ再利用してよいという指定です。ニュース一覧や頻繁に変わるAPIでは、短めのキャッシュ時間を使うことがあります。
一方、個人情報を含むページでは、保存されないようにしたい場面があります。
<?php
header('Content-Type: text/plain; charset=UTF-8');
header('Cache-Control: no-store');
echo 'ログイン中のユーザー向け情報です。';no-store は、ブラウザや中間のキャッシュに保存してほしくない場合に使います。キャッシュは便利ですが、内容によっては保存しない判断も必要です。
PHPでは header() を使って、HTTPレスポンスにキャッシュ制御用のヘッダーを付けられます。
JavaScriptと開発者ツールで確認する
JavaScriptの fetch() には、キャッシュの扱いを指定する cache オプションがあります。
fetch("/api/articles", {
cache: "no-store",
})
.then((response) => response.json())
.then((data) => {
console.log(data);
});この例では、保存済みのキャッシュを使わずに取得したい意図を示しています。ただし、実際のキャッシュ挙動はHTTPヘッダーやブラウザの判断も関係します。
確認には、Chrome開発者ツールのNetworkタブが役立ちます。ページを再読み込みし、各リソースのStatus、Size、Response Headersを見ると、ネットワークから取得されたのか、キャッシュから再利用されたのかを調べられます。
開発者ツールにはDisable cacheという設定もあります。これは開発中にキャッシュの影響を避けたいときに便利ですが、通常のユーザー環境とは挙動が変わる点に注意が必要です。
開発者ツールを見ると、リソースがネットワークから取得されたのか、キャッシュから再利用されたのかを確認できます。
キャッシュで起きやすいトラブル
キャッシュは表示を速くしてくれますが、トラブルの原因にもなります。
よくあるのは、CSSやJavaScriptを更新したのに、ブラウザが古いファイルを使い続けるケースです。開発者は修正したつもりでも、ユーザーの画面では古い見た目や古い処理が残ることがあります。
この対策として、ファイル名やURLにバージョンを含めることがあります。たとえば、app.css?v=2 のようにURLを変えると、ブラウザは別のリソースとして扱いやすくなります。このような考え方をキャッシュバスティングと呼びます。
また、ログイン後のページや個人情報を含むレスポンスを不用意にキャッシュすると、意図しない情報表示につながる可能性があります。速くしたいリソースと、保存してはいけないリソースを分けて考えることが大切です。
キャッシュは便利ですが、更新内容や個人情報を扱うページでは、意図しない再利用に注意が必要です。
試験ではどう問われるか
基本情報技術者試験では、キャッシュは「よく使うデータを一時的に保存して高速化する仕組み」として出てきます。
コンピュータ基礎では、CPUと主記憶の間にあるキャッシュメモリの考え方が代表的です。よく使うデータを高速な場所に置くことで、処理を速くします。
Webでも考え方は同じです。ブラウザやプロキシ、CDNなどがデータを一時的に保存し、同じ内容を再利用することで通信量や待ち時間を減らします。
HTTPでは、Cache-Control や 304 Not Modified のような仕組みがキャッシュと関係します。用語を個別に覚えるより、「再利用してよいかを判断している」と考えると整理しやすくなります。
試験では、キャッシュを「よく使うデータを近くに保存して高速化する仕組み」として理解することが基本です。
実務ではどう使われるか
実務では、キャッシュは表示速度改善に大きく関係します。画像、CSS、JavaScriptなどの静的ファイルは、適切にキャッシュできるとページ表示が速くなります。
一方で、APIレスポンスやログイン後のページは、内容によってキャッシュしてよいか慎重に判断する必要があります。全員に同じ内容を返すレスポンスと、ユーザーごとに違うレスポンスでは扱いが変わります。
CDNを使う場合も、キャッシュの考え方が重要です。世界中のユーザーに近い場所から画像やファイルを配信できる一方、古い内容が残ることがあります。
トラブル調査では、まず「本当に新しいファイルを取得しているか」を確認します。Networkタブでステータスコード、レスポンスヘッダー、サイズ、読み込み元を見ると、キャッシュの影響を切り分けやすくなります。
実務では、キャッシュを効かせる場所と効かせてはいけない場所を分けて設計することが大切です。
まとめ: キャッシュを理解すると速さと更新の理由が見える
キャッシュは、一度取得したデータを保存しておき、次回以降に再利用する仕組みです。ブラウザやHTTPのキャッシュを使うと、通信量を減らし、Webページを速く表示できます。
HTTPでは、Cache-Control などのレスポンスヘッダーによって、保存してよいか、いつまで使ってよいか、再確認が必要かを伝えます。内容が変わっていない場合は、304 Not Modified によって保存済みのデータを再利用できます。
ただし、キャッシュは古い表示や情報管理の問題にもつながります。静的ファイル、API、ログイン後のページなど、何をキャッシュしてよいかを分けて考えることが大切です。
キャッシュを理解すると、Webページが速く表示される理由と、更新が反映されない原因を落ち着いて切り分けられます。
コメント