ウェブは、ウェブブラウザからウェブサイトへのリクエストがすべて個別に処理されるように設計されています。ウェブは設計上「メモリ」がありません。ウェブページを開くたびに、アクセスしているウェブサイトは前回のセッションの情報を記憶できません。リクエストとレスポンスを追跡するメカニズムが不要になるため、ウェブの効率化に役立ちます。
しかし、ウェブの忘れっぽい性質も問題となります。たとえば、ウェブサイトがカートに追加した商品を記憶できない場合、ショッピング カートはどのように機能するのでしょうか？
Cookie は、この問題を解決するために考案されました。
Cookie はウェブサイトに記憶機能を提供します
ウェブサイトのページにアクセスすると、ウェブブラウザはウェブサイトのサーバーに対して、HTML、CSS、JavaScript、画像など、ページに含まれるリソースをリクエストします。
ウェブブラウザとウェブサイトは、HTTP プロトコルに従ってやり取りします。これは、通信のための標準化された一連のルールです。
ウェブサイト サーバーは、リソースに対する HTTP リクエストへのレスポンスとして、リソース自体とともにヘッダーと呼ばれる追加情報を含めることができます。HTTP レスポンスに含まれる Set-Cookie ヘッダーは、ブラウザにテキスト（名前と値）を保存するよう指示します。これは Cookie と呼ばれます。たとえば、レスポンス ヘッダー Set-Cookie: cat=tabby は、ブラウザに「cat」という名前で「tabby」という値の Cookie を保存するよう指示します。
この Cookie が設定されると、ブラウザからウェブサイトへの後続のリクエストにはヘッダー Cookie: cat=tabby が含まれます。ウェブサイトのサーバーは、リクエスト ヘッダーから Cookie にアクセスして、値を利用できます。
Cookie の仕組み: 手順
たとえば、ウェブサイト cats.example にアクセスしたとします。このサイトでは、猫の画像をランダムに表示し、どの猫が表示されたかを記録します。
次の手順では、Cookie を使用してこれを行う方法について説明します。
1. ブラウザがファイルをリクエストする
ウェブサイト cats.example のホームページにアクセスします。
ブラウザがホームページの HTML を処理すると、cats.example の cat.jpg を含む、ページ上のファイルがリクエストされます。
2. ウェブサイトのサーバーが応答する
cats.example のサーバーが画像ファイル cat.jpg を返します。
サーバーは、レスポンスに Set-Cookie: cat=tabby ヘッダーを含めます。
3. ブラウザがレスポンスを受信
ブラウザは画像ファイルを受信し、それに含まれる Set-Cookie: cat=tabby ヘッダーを処理します。
Cookie が保存されます（名前: cat、値: tabby）。
4. ブラウザが追加のリクエストを行う
以降、ブラウザは cats.example へのリクエストにヘッダー Cookie: cat=tabby を含めます。
cats.example ウェブサーバーがリクエストを受け取ると、Cookie を処理して、その値を使って必要な処理を行うことができます。たとえば、同じトラ猫の画像を再び送信しないようにするなどです。
Cookie のプロセス全体は次のとおりです。
- ブラウザがウェブサイトのサーバーからファイルをリクエストします。
- サーバーは、リクエストへのレスポンスとして送信するファイルに、
Set-Cookie: cat=tabbyなどのヘッダーを含めることができます。 - ブラウザがレスポンスを受け取ると、Cookie が保存されます。
- それ以降のリクエストごとに、ブラウザは
Cookie: cat=tabbyヘッダーで Cookie をサーバーに送信します。
JavaScript で Cookie にアクセスする
前の例では、Set-Cookie レスポンス ヘッダーを使用して Cookie を設定しています。
Cookie は、JavaScript で document.cookie メソッドを使用して作成することもできます。
デモ（javascript-cookie.glitch.me）をお試しください。
詳細: ドキュメント: cookie プロパティ。
Cookie が必要な理由
1994 年、エンジニアの Lou Montulli はソフトウェア会社 Netscape に勤務していました。Netscape は 1990 年代半ばに最も人気のあるウェブブラウザを開発しました。一方、通信会社 MCI は、世界初のオンライン ストアの 1 つのショッピング カートを構築しようとしていました。MCI は Montulli に連絡を取り、問題について説明しました。Montulli は、サイトがユーザーのウェブブラウザに少量のテキスト（名前と値のペア（cart-id=123 など））を保存できるようにする機能を HTTP に追加することで対応しました。当時、プログラマーはデータ通信に含まれる小さな追加情報を「マジック Cookie」と呼んでいたため、彼はそれを「Cookie」と名付けました。
Montulli は 1 週間以内に HTTP Cookie の作業を完了しました。そのとき、Cookie が広告、ログイン、支払い、不正行為の検出など、重要なウェブ プラットフォーム機能に不可欠なものになるとは、誰も思っていませんでした。Cookie は、一見すると単純なテクノロジーですが、広範囲にわたる副作用があります。
Cookie の使用目的
Cookie を使用すると、ブラウザはユーザーに関する少量の情報を保存し、複数のリクエストにわたって何かを「記憶」できます。Cookie には次のような用途があります。
- セッション管理
ウェブサイトがユーザーを認識できるようにします。たとえば、異なるページ間でログイン状態を維持できます。 - パーソナライズ
言語、テーマ、最近閲覧したアイテムなどのユーザー設定を保存して、ウェブサイトのユーザー エクスペリエンスをカスタマイズします。 - トラッキング
これまで、Cookie はウェブサイト全体でユーザーの行動をトラッキングし、ターゲット広告などのユースケースに使用されてきました。
Cookie は、情報を直接保存するのではなく、主に識別子に使用されます。
たとえば、オンライン ペットショップのショッピング カートの Cookie には商品がリストされず、代わりにアカウント ID が提供されます。この ID を使用して、ペットショップはサーバーサイドのデータ ストレージでカートの中身を検索できます。
ペットショップ サーバーへのリクエストには、次のような Cookie ヘッダーが含まれる場合があります。
Cookie: _cart=CART1.2.34567890.123456789
サーバーは、データストアで _cart アカウントを検索し、リクエストに関するその他の情報を含めることができます。
関連リソース
- Cookie 属性
- サードパーティ Cookie とは
- HTTP リクエストとレスポンス
- Cookie ツール
- Cookie のデモ
- HTTP Cookie の使用
- マジック Cookie: Lou Montulli がウェブの健忘症をどのように治療したか
- HTTP Cookie（元の仕様）
- HTTP Cookie、またはプロトコルを設計しない方法