関連記事
ステータスコードとは？
2021.05.16
2022.06.11
キャッシュとは？
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
キャッシュとは？
結論から先に言うと、
キャッシュというのは、一度見たWebページのデータをブラウザに保存しておく仕組みです。
ブラウザに保存しておくことで、2回目以降のアクセス時はページを素早く表示することができるというメリットがあります。
キャッシュの目的
僕たちが普段ブラウザで見ている、インターネット上のWebページは「サーバー」というコンピューターの中に設置されています。
ブラウザからWebページにアクセスすると、サーバーがそのページのデータを送信してくれます。
Webページと言うのは、1枚のページの中にいくつもの「画像」が設置されていたり、デザインのための「CSSファイル」や「フォントファイル」そして「JavaScriptファイル」など、多くのファイル群で構成されています。
例えば、Yahoo!のTOPページにアクセスしてみると、こんな感じで非常に多くのファイルがダウンロードされているのが分かります。
たった1ページのWebページを見るためにも、その裏側では「HTMLファイル」「画像ファイル」「CSSファイル」「JavaScriptファイル」「フォントファイル」など、様々なデータがダウンロードされている訳ですね。
これらのデータの中には、例えばロゴ画像などのように、このページだけでなく他のページでも共有して使っているようなデータも多くありますが
こういったデータを、ページを表示する度に毎回全てダウンロードしていては、通信量が多くなってしまい、ページの表示にも時間がかかりますし、サーバーの負荷も高くなってしまいます。
そこで、一度読み込んだデータは一定期間ブラウザ内に保存しておき、次にそのデータが必要になった時は、サーバーからデータをダウンロードせずに、保存しておいたデータを使う、というのが「キャッシュ」という仕組みです。
キャッシュがあることで、少ない通信量で、ページをスピーディに表示できているという訳ですね。
ちなみに、キャッシュ（cache）とは、英語で「隠し場所」とか「貯蔵庫」といった意味になります。
実際に見てみよう
実際にどんな感じでデータがキャッシュされているのかを見てみましょう。
Chromeのデベロッパーツールを起動して、「Network」タブを表示します。
この状態で、Webページにアクセスすると、こんな感じで様々なデータがダウンロードされます。
Nameという欄には、各ファイルの名前が書いてあり、Statusという欄には、ファイルのダウンロードが成功したのか／失敗したのかを表す「ステータスコード」が記載されています。
ステータスコードについては、こちらの動画で説明しているので併せて学習してみてください。
そして、Sizeという欄に、各ファイルのデータサイズが書かれています。
これが、実際にダウンロードしたファイルのサイズという訳ですね。
では、この状態でブラウザの再読み込みボタンをクリックして、もう一度このページにアクセスしてみます。
すると、今度はいくつかのファイルのSize欄に「memory cache」や「disk cache」と書かれているものがあります。
このように書かれているファイルは、ブラウザ（Chrome）がメモリやディスク上に保存したキャッシュから読み込まれたファイルです。
かなりの量がキャッシュから読み込まれていることが分かりますね。
これらは、サーバー側で「この種のファイルはキャッシュしてね」とか「このサイトはキャッシュしないでね」とか「キャッシュの有効期間はこのくらいにしてね」という指定がされており、ブラウザは、その設定に従ってキャッシュするかどうかを判断しています。
各ファイルをクリックすると「Response Headers」という中に「cache-control」という欄があり
ここにキャッシュの可否や有効期限などが指定されています。
ちなみに、ここにある「Disable cache」にチェックを付けると、キャッシュを無効化した状態でアクセスすることもできます。
開発時には便利なこともあるので、覚えておきましょう。
キャッシュの注意点
このように、キャッシュはとても便利な仕組みなのですが、逆に不便な点もあります。
それは、ブラウザ内にキャッシュが残ってしまうことにより、Webページを新しく更新した際に、内容がすぐに反映されないことがあるということです。
サーバー側でHTMLやCSSを更新したのに、ブラウザで見るとなぜか反映されていない！
このような場合は、ブラウザに古いキャッシュが残ってしまっている可能性があります。
自分で確認する分には、先ほど紹介したデベロッパーツールでキャッシュを無効化する方法や、ブラウザのスーパーリロードを行ったり、ブラウザのキャッシュを削除すればOKです。
ちなみに、スーパーリロードとは、Chromeの場合は「Shift」を押しながらブラウザの更新ボタンをクリックすることで、キャッシュを参照せずに、強制的にページを再読み込みする方法です。
ただ、自分が制作者側の場合は、Webページを見ている世界中のユーザーにこういった作業をお願いする訳にもいかないので、確実に更新されるように工夫する必要があります。
例えば、画像やCSSなどを更新した場合は、それらのファイル名を変更して新しいファイルとして認識させたり、参照する際のURLの末尾にタイムスタンプを付けることで別ファイルとして認識させるといった方法があります。
こういったテクニックも覚えておきましょう！
まとめ
・キャッシュとは、一度見たWebページのデータをブラウザに保存しておくことで、
2回目以降はページを素早く表示できる仕組み
・注意点：キャッシュが残ることにより、最新情報がすぐに反映されないこともある
・回避策：スーパーリロード／キャッシュの削除を行う
・確実に反映させたい場合は、ファイル名の変更やタイムスタンプの付与を行う
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
