kajimaru note

CookieとCacheの話。

ブラウザに情報を覚えさせておくCookieCache。慣れないうちは混同しがちですが、それぞれ役割もできることも違います。

それぞれの違いを覚えておけば、今後Web制作をおこなっていく上でヒントになることがあるかも。今回は、そんなCookieとCacheについて、簡単に解説しようと思います。

Cookieとは

Cookie(クッキー)は、Webサイトがユーザーのブラウザに保存しておけるデータで、Webサイトとブラウザの間で「このブラウザはこういう状態ですよ」と伝えるためのメモのようなものです。

例えば、

  • ログイン状態
  • ユーザーの設定
  • 「初回訪問済み」といった情報
  • カートに入れた商品の情報

など、ユーザーやブラウザの状態を維持するために使われます。

Webサイトにアクセスした際にCookieが保存されていると、次回以降のアクセスでもブラウザからCookieが送信されるため、Webサイト側で「このブラウザは以前アクセスしたことがある」といった情報を判断することができます。

Cookieには訪問しているWebサイト(ドメイン)が発行するファーストパーティCookieと、訪問しているWebサイト以外から発行されるサードパーティCookieがあります。(詳細は後述。

Cacheとは

一方、Cache(キャッシュ)は、一度取得・生成したデータを一時的に保存して、次回以降の処理を省略するための仕組みです。

例えばWebサイトで画像を表示するとき、毎回サーバーから画像を取得していると、そのたびに通信が発生します。

そこで、一度取得した画像をブラウザにキャッシュしておけば、次回アクセス時には保存された画像を利用できるため、通信量や読み込み時間を減らすことができます。

また、Cacheはブラウザだけでなく、サーバー側でも利用できます。

CookieとCacheの考え方

目的は違いますが、CookieとCacheは、どちらも「一度保存したものをあとから再利用する」という点では似ています。

ざっくり分けると、

  • Cookieは「ユーザーのことを覚えておく」ためのもの
  • Cacheは「一度取得したものを取っておく」ためのもの

と考えると分かりやすいです。

具体的な実用例

実際にWebサイトでCookieやCacheを利用する具体的な場面で言うと、

  • スプラッシュアニメーションの表示制御

    Webサイトの世界観を訴求するのに効果的なスプラッシュアニメーション。下層ページからTOPに戻ってきたときや、アクセスするたびに毎回表示されるとちょっと鬱陶しく感じますが、Cookieを利用すれば初回訪問時だけ表示して、2回目以降は省略するといった制御ができます。

  • ダークモード・表示設定の保持

    ダークモードを採用しているWebサイトの場合、ユーザーが選択したダークモードや文字サイズなどの表示設定をCookieに保存しておくことで、ページを移動したり、再度アクセスしたときにも同じ設定を適用することができます。

  • ポップアップ・モーダルの表示制御

    お知らせを閉じたかどうかといった情報をCookieに保存しておくことで、一度閉じたポップアップやモーダルを次回以降は表示しないといった制御ができます。

  • APIのリクエスト回数の節約

    Instagram APIなど、Webサイトと外部サービスを連携できる便利なAPIですが、多くのAPIにはレート制限が設けられています。アクセスされるたびにAPIを叩いていると、短時間で上限に達してしまう可能性があるため、サーバー側のCacheを利用してAPIへのリクエスト回数を減らすことができます。

  • 画像・動画などの読み込み負荷軽減

    一度読み込んだ画像や動画などがブラウザにキャッシュされていれば、次回アクセス時に保存されたデータを利用できるため、サーバーへの通信を減らし、ページの読み込みを速くすることができます。

サードパーティCookie

Cookieは、ファーストパーティCookieサードパーティCookieに分けて考えることができます。

ざっくり言うと、違いは「今見ているWebサイトと同じサイトのCookieか、それ以外のサイトのCookieか」です。

ファーストパーティCookieは、今見ているWebサイト自身が発行するCookieで、前項までに記載したような、ログイン状態の保持や、ユーザーが選択した表示設定の保存など、そのWebサイトを利用するために必要な情報を保存する目的で使われます。

それに対して、サードパーティCookieは、今見ているWebサイトとは別のWebサイトやサービスが発行するCookieです。

例えば、Webサイトに広告やアクセス解析などの外部サービスが組み込まれている場合、そのサービスがCookieを利用することがあります。

複数のWebサイトをまたいでユーザーの行動を把握する用途などに利用されてきましたが、このサードパーティCookieはプライバシー上の問題から、ブラウザや法律の両面で規制する動きが進んでます。

サードパーティCookieの問題点

サードパーティCookieが問題視されるようになった大きな理由は、ユーザーが複数のWebサイトを訪れたときの行動を、サイトをまたいで追跡できてしまうことです。

さらに、同じ第三者サービスが複数のWebサイトに組み込まれている場合、それぞれのサイトで取得した情報を組み合わせることで、ユーザーごとの興味・関心や閲覧行動のプロファイルを作ることも可能になります。こうした仕組みが、いわゆる「Web上でのトラッキング」です。

もちろん、サードパーティCookie自体が悪いわけではありません。広告の配信や効果測定、アクセス解析など、正当な用途もあります。

ただ、ユーザー視点に立って見ると、「さっき別のサイトで見ていた商品が、別のサイトでもずっと広告に出てくる……」という状態になるため、プライバシーの観点から問題視されるようになりました。

そのため、SafariやFirefoxなどではサードパーティCookieへの制限が強化され、現在ではブラウザ各社がサードパーティCookieへの依存を減らす方向に進んでいます。
※Google Chromeは当初サードパーティCookieの完全廃止(廃絶)を目指して開発が進められていましたが、2024年に「廃止撤回(ユーザーの選択制にする方針変更)」を発表しました。

注:この記事は2026年に作成したものです。各社ブラウザの仕様変更により規制状況が変わる可能性があります。

まとめ

CookieとCacheは、どちらも一度保存した情報をあとから利用する仕組みですが、目的は異なります。

Cookieは「ユーザーやブラウザの状態を覚えておく」ためのもの。
Cacheは「一度取得・生成したものを再利用する」ためのもの。

Web制作をしていると、意外と身近なところで使われているので、それぞれの役割を覚えておくと実装の引き出しが増えるかもしれません。