Cookie(クッキー)とは?仕組みから設定方法・活用例まで図解でわかりやすく解説

Web通信(http/https通信)

1_Cookie(クッキー)の概要

 Cookieは、Webサイトがユーザーのブラウザに保存させる小さなデータで、次回以降のアクセス時にそのサイトへ自動的に送信されます。

バグ太郎
バグ太郎

そもそもなんですけど、なぜCookieが必要なんですか?

C-3PU
C-3PU

もともとステートレス(状態を持たない)なWeb通信「状態」を持たせる役割を果たします。

バグ太郎
バグ太郎

Web通信のステートレスな状態」とやらがよく分かりません・・・

C-3PU
C-3PU

Web通信は「1回リクエスト→1回レスポンス」で完結し、サーバー側に前後のやり取りを覚えておく仕組みを持っていません
Cookieを使うと、ブラウザに小さなデータ(例:セッションIDや設定値)を保存し、次のリクエストで毎回自動的に送信することで「状態」を追跡できます。まあ、中々イメージがつかないと思いますので、以下にCookieがない場合とある場合の通販サイトの挙動で解説したいと思います。

1-1_Cookieがない場合(例:通販サイト)

❶ビールの商品ページをリクエスト(利用者)
❷商品ページを返却(Webサイト)
❸商品をカートに追加(利用者)
❹カート内容の一覧ページをリクエスト(利用者)
❺一覧ページを返却(Webサイト)
一覧ページに追加したはずの商品がない(利用者)

Cookieが保存されていない状態で通販サイトを利用したときのフロー図。ユーザーがトップページを開き、商品をカートに追加しても、カート一覧画面に追加分が表示されない一連のやり取りを示す

❶❷❸と❹❺❻の流れについては、通信のまとまりとしては別であり、紐づける情報がないため、追加した商品がカート内容一覧ページに反映されない。

1-2_Cookieがある場合(例:通販サイト)

❶ビールの商品ページをリクエスト(利用者)
❷商品ページを返却(Webサイト)
❸商品をカートに追加(利用者)
❹カート内容の一覧ページをリクエスト(利用者)
Cookie情報を元に対象者を識別し、❹までの通信内容を踏まえたページを用意する(Webサイト)
❻一覧ページを返却(Webサイト)
❼追加した商品がカートに表示されている(利用者)

クッキーが保存された状態で通販サイトを利用したときのフロー図。ユーザーが商品をカートに追加すると、保存されたCookieをもとにサーバーがカート情報を更新し、一覧画面に追加済み商品が正しく表示される一連の処理を示す

2_Cookieの役割

Cookie(クッキー)には、様々な情報を記入することが出来るので、その役割は様々です。以下に使用される役割の例を示します。

  • 例1
    セッション管理 

    目的 : ログイン状態をページ移動しても維持する

    具体例
    ●利用者がネットショップにログインして買い物かごを開き、別の商品ページへ移動してもログアウトされない 。
    ●ログイン後に表示される「こんにちは、○○さん!」の表示が、ページを切り替えても消えない

  • 例2
    ユーザー設定の保持

    目的 : 言語選択や見た目テーマなど、自分好みの表示を覚えておく

    具体例
    ●ニュースサイトで「English」を選択したら、次回アクセス時も最初から英語版が表示される。
    ●ブログで「ダークモード」をONにしたら、翌日もサイトが黒背景で表示される

  • 例3
    トラッキング・分析 

    目的: ページの閲覧数や行動パターンを集計し、サービス改善や広告に活用する

    具体例
    ●訪問した記事タイトルの一覧をCookieで追い、気になるジャンルの記事を「あなたにおすすめ」として表示
    ●ショッピングサイトで「この商品を見た人はこんな商品もチェック」とリコメンドする

3_Cookieが利用されるまでの流れ

3-1_利用者のアクセス ~ WebサイトがCookie情報をページと共に返却

❶通販サイトのトップページをリクエスト(利用者)
❷sessionIDを発行(Webサイト)
❸通信のSet-CookieフィールドにsessionIDを含めて、トップページを返信する

ユーザーが通販サイトのトップページにアクセスし、サーバーがレスポンスのSet-CookieヘッダーでセッションIDを発行してページを返却する流れをステップごとに示した図
3-2 Cookie情報の保存 ~  毎回の通信で利用

❹Webサイトから変身されたCookie情報を、PCに保存(利用者)
❺別のページのリクエストの際に、cookie情報を通信に含めて送信(利用者)
❻sessionIDを識別することで、リクエスト元を判断(Webサイト)
❼これまでの通信と整合性を取った上で、ページを返却する(Webサイト)

ブラウザが受信したCookieをローカルに保存し、別ページへのリクエストに自動送信、サーバーがセッションIDを認識して整合性を確認した上でページを返却する流れを示す図

コメント

タイトルとURLをコピーしました