はじめに

こんにちは！STUDIO NNC の大土です。
今回はWEB制作に携わっている方なら知っておくべき「キャッシュ」についてのお話です。

例えばWEBサイトの制作段階において、制作側とクライアントとのやり取りでこんな経験はありませんか？

この原因には「キャッシュ」というものが深く関わっています。

この記事は基本的には制作側の方たちへ向けたお話になりますが、クライアントやWEBサイトを利用するユーザーにとっても知っておくと良い内容になっています。
ぜひクライアントへご説明される際にもご活用いただければ幸いです。

そもそもキャッシュとは何か？

英語では「cache」となり、日本語に訳すと「隠し場所」「貯蔵するところ」を意味します。
WEBの世界でいうと、一度アクセスしたデータをある場所に保存しておいて、後でまたそのデータにアクセスするときに、保存したデータを再表示させているイメージです。
またそのような状態を、「キャッシュが残っている状態」と表現します。

そうすることによって、2回目以降にアクセスしたときにデータの処理の速度をあげることができ、
その結果より早く情報を表示させることができるというメリットがあります。

キャッシュの種類

WEB制作に大きく関わってくるキャッシュの種類として、「ブラウザキャッシュ」と「サーバーキャッシュ」の2種類が挙げられます。それぞれの特徴や違いについて見ていきたいと思います。

ブラウザキャッシュ

WEBサイトにアクセスしたときに、そのデータをある一定の期間ブラウザに保存をしておくことです。
そのデータ、というのはWEBサイトを構成しているHTMLや画像データ、JavaScriptなどが該当します。

また、ブラウザキャッシュはユーザー1人ひとりのブラウザ環境の中でのみ有効になるため、他のユーザーには影響しません。

ブラウザキャッシュのメリットとして下記2点が挙げられます。
新たなデータを取得する必要がないため、これらのメリットがあります。

WEBサイトやページの表示速度が上がる

データの通信容量を削減することができる

一方ブラウザキャッシュにはメリットだけではなく、デメリットもあります。

キャッシュを大量に残したままにしてしまうと、ブラウザの動作自体が重くなる

こういった状態になってしまった場合は、ブラウザの「キャッシュクリア」を行うことで問題を解消することができます。
各ブラウザごとのキャッシュクリアの方法を解説してくれている記事はたくさんあるので、本記事では割愛させていただきます。

WEBサイトの内容を変更した場合、その変更内容がうまく表示されない場合がある

以前にアクセスしたときのデータを再表示させる仕組みのため、その間に内容の変更があった場合に変更内容がうまく反映されていないことがあります。
冒頭で紹介した制作側とクライアントの例はこれにあたります。

この場合、スーパーリロード（残っているキャッシュは利用せず、最新の状態を強制的に表示させること）
という作業を行うことでキャッシュが残っていない最新の内容を確認することができます。

スーパーリロードはショートカットを使うのが便利です。

Windows：「Ctrl + shift + R」もしくは「shift + 更新ボタン」

Mac：「command + shift + R」もしくは「shift + 更新ボタン」
※Safariの場合は「command + shift + R」だと違った動きになるため、「shift + 更新ボタン」を使用しましょう。

またブラウザキャッシュのポイントとして、下記のものはキャッシュが残りません。

• ・個人情報（ログイン情報など）
• ・閲覧したWEBサイト内で入力した内容（お問い合わせフォーム・ショッピングサイトなど）

これらの情報はCookieという仕組みによって保存されます。
Cookieはブラウザキャッシュとは異なり、個人情報や入力した内容を保存しておいてくれる仕組みになります。

Cookieの仕組みを利用することによって、

• ・一定の時間が経ってもショッピングサイトのカートに商品が残っている
• ・ログインしてから時間がたった後に再度そのページを開いてもログイン情報の入力がいらない

このような、WEBサイトを快適に利用することができるというメリットがあります。

サーバーキャッシュ

サーバーが、ブラウザからのリクエスト（このデータが欲しい）に対して返すレスポンス（適切なデータを返す）のデータを、
ある一定時間サーバー上に保存しておく仕組みのことをサーバーキャッシュと言います。

例えば、異なる2人のユーザーがそれぞれ「STUDIO NNC 合同会社」と検索をしたときに、サーバーはどちらのユーザーにも「https://nnc-studio.jp/」を返すことになるため、初めに返した情報を保存しておくイメージです。
そうすることで、2回目以降にリクエストがあった場合、より早くレスポンスをすることができます。

サーバキャッシュにもメリットだけではなく、デメリット・注意点があります。

サーバーキャッシュの特徴として、ブラウザキャッシュとは異なり、1人のユーザーにだけ影響するものではなく、複数のユーザーに対して同じキャッシュをレスポンスすることになり、その結果同じデータを返すことがあります。

そのため、例えば

• ・名前、メールアドレス、クレジットカード情報
• ・ログイン情報

こういった個人情報のように、その情報を入力したユーザーにしか見せたくない情報のキャッシュが残ってしまった場合、他のユーザーに情報漏洩してしまう危険性があります。

参考記事：
https://chiilabo.com/2021-01/privacy-leak-server-cache-setting-error/

一般的なレンタルサーバーの場合、デフォルトでサーバーキャッシュが残る設定になっていることが多いため、
個人情報を入力させるようなサイトを運用する場合は、そういったページのキャッシュを残さないような設定ができるかどうかを確認する、あるいはサーバーのキャッシュ自体をオフにしてしまうのが安全です。

以上を踏まえて、ブラウザキャッシュとサーバーキャッシュの違いを比較するとこうなります。

	ブラウザキャッシュ	サーバーキャッシュ
データ保存先	ブラウザ	サーバー
保存する内容	WEBサイトに 表示しているデータ	ブラウザに渡す （レスポンスする）データ
キャッシュを管理する人	ユーザー	制作者・管理者
複数のユーザーに影響するか	しない	する
キャッシュが残る期間	キャッシュの有効期限 もしくは キャッシュクリアをするまで	サーバーの設定 もしくは キャッシュクリアをするまで

まとめ

ユーザーが快適にWEBサイトを閲覧することができたり、表示速度を上げることでSEOの観点でも良い効果がもたらされるなど、いろいろな理由で不可欠となっているキャッシュですが、
そのメリットやデメリット、危険性もしっかり理解した上でWEBサイトの制作、運営、閲覧や利用をしていきたいものですね。

WEB制作でお困りのことや、制作のご依頼のご希望など、何かございましたらぜひSTUDIO NNC 合同会社へご相談ください。

お問い合わせフォームはこちら