Cookie（クッキー）とは？初心者向けに仕組みと使い方を徹底解説！【JavaScript】

導入部

Cookieの重要性と役割を説明

この記事を読むことで得られるメリットを提示

Cookieの基本的な概念を説明

Cookieとは何か？

Cookie（クッキー）とは、Webサイトがユーザーのブラウザに保存する小さなテキストデータのことです。WebサイトはCookieを利用することで、ユーザーの情報を一時的に保存し、後で利用することができます。

HTTP Cookie（HTTPクッキー）: HTTPプロトコルで使用されるCookieの正式名称です。
Web Cookie（ウェブクッキー）: Webサイトで使用されるCookieの一般的な名称です。
ブラウザCookie（ブラウザクッキー）: ブラウザに保存されるCookieを指します。

Cookieは、Webサイトがユーザーを識別したり、ユーザーの設定を記憶したり、ショッピングカートの中身を保持したりするために使用されます。

Cookieの仕組み：サーバーとブラウザ間のデータのやり取り

ユーザーがWebサイトにアクセスすると、サーバーはCookieをHTTPレスポンスヘッダーに含めてブラウザに送信します。
ブラウザは受け取ったCookieをローカルに保存します。
ユーザーが再び同じWebサイトにアクセスすると、ブラウザは保存されたCookieをHTTPリクエストヘッダーに含めてサーバーに送信します。
サーバーはCookieの情報に基づいて、ユーザーを識別したり、ユーザーの設定を復元したりします。

Cookieの歴史と進化

Cookieは、1994年にLou Montulliによって開発されました。当初は、ショッピングカートの実装を容易にするために使用されていましたが、その後、Webサイトのパーソナライズや広告ターゲティングなど、さまざまな用途に利用されるようになりました。

Cookieの種類

Cookieには、大きく分けて以下の3つの種類があります。

セッションCookie（Session Cookie）： ブラウザを閉じると削除される一時的なCookieです。ショッピングカートの中身を一時的に保持したり、ログイン状態を維持したりするために使用されます。
パーシステントCookie（Persistent Cookie）： 有効期限が設定されたCookieで、ブラウザを閉じても有効期限が切れるまで保存されます。ユーザーの設定を記憶したり、Webサイトの利用状況を追跡したりするために使用されます。
サードパーティCookie（Third-Party Cookie）： ユーザーがアクセスしているWebサイトとは異なるドメインから発行されるCookieです。広告ターゲティングやWebサイトの利用状況の追跡に使用されます。近年、プライバシー保護の観点から、サードパーティCookieの利用は制限される傾向にあります。

Cookieの仕組みを詳しく解説

Cookieの仕組みを理解するには、サーバーとブラウザ間のデータのやり取りを詳しく見ていく必要があります。

Cookieの作成と送信：サーバー側の処理

サーバーは、HTTPレスポンスヘッダーのSet-Cookieフィールドを使用してCookieを作成し、ブラウザに送信します。

HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: username=JohnDoe; expires=Wed, 21 Oct 2024 07:28:00 GMT; path=/

username=JohnDoe: Cookieの名前と値を指定します。
expires=Wed, 21 Oct 2024 07:28:00 GMT: Cookieの有効期限を指定します。
path=/: Cookieが有効なパスを指定します。この例では、Webサイト全体でCookieが有効になります。

Cookieの保存と管理：ブラウザ側の処理

ブラウザは、サーバーから受け取ったCookieをローカルに保存します。Cookieは、ドメイン、パス、有効期限などの情報とともに保存され、WebサイトがCookieを要求したときに、適切なCookieがサーバーに送信されます。

Cookieの送信：リクエストヘッダーへの付与

ユーザーが再び同じWebサイトにアクセスすると、ブラウザは保存されたCookieをHTTPリクエストヘッダーのCookieフィールドに含めてサーバーに送信します。

GET /index.html HTTP/1.1
Host: example.com
Cookie: username=JohnDoe

サーバーは、Cookieヘッダーに含まれる情報に基づいて、ユーザーを識別したり、ユーザーの設定を復元したりします。

JavaScriptでのCookieの扱い方

JavaScriptを使用すると、document.cookieプロパティを通じてCookieを操作できます。

document.cookieプロパティの使い方

document.cookieプロパティは、Cookieの読み込み、書き込み、削除に使用できます。

Cookieの読み込み: document.cookieプロパティを読み込むと、現在のドメインに関連付けられたすべてのCookieが文字列として返されます。
Cookieの書き込み: document.cookieプロパティに値を代入すると、新しいCookieが作成されます。
Cookieの削除: Cookieを削除するには、有効期限を過去の日時に設定します。

Cookieの読み込み、書き込み、削除

// Cookieの読み込み
const cookies = document.cookie;
console.log(cookies); // 例: "username=JohnDoe; age=30"

// Cookieの書き込み
document.cookie = "username=JaneDoe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

// Cookieの削除
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Cookieの有効期限とパスの設定

Cookieを作成する際には、有効期限とパスを適切に設定することが重要です。

有効期限: Cookieの有効期限を設定することで、Cookieがいつまで保存されるかを制御できます。有効期限を設定しない場合、CookieはセッションCookieとして扱われ、ブラウザを閉じると削除されます。
パス: Cookieが有効なパスを設定することで、特定のディレクトリ以下のページでのみCookieが有効になるように制限できます。

サンプルコード：JavaScriptでCookieを操作する

// Cookieを設定する関数
function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

// Cookieを取得する関数
function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

// Cookieを削除する関数
function eraseCookie(name) {
  document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

// Cookieの使用例
setCookie('myCookie', 'myValue', 7); // 7日間有効なCookieを設定
const myCookieValue = getCookie('myCookie'); // Cookieの値を取得
console.log(myCookieValue); // "myValue"
eraseCookie('myCookie'); // Cookieを削除

Cookieのセキュリティ

Cookieは便利な技術ですが、セキュリティリスクも伴います。

Cookieのセキュリティリスク：XSS（クロスサイトスクリプティング）攻撃、CSRF（クロスサイトリクエストフォージェリ）攻撃

XSS（クロスサイトスクリプティング）攻撃: 攻撃者がWebサイトに悪意のあるスクリプトを注入し、ユーザーのCookieを盗み取る攻撃です。
CSRF（クロスサイトリクエストフォージェリ）攻撃: 攻撃者がユーザーになりすまして、Webサイトに不正なリクエストを送信する攻撃です。

セキュリティ対策：HttpOnly属性、Secure属性、SameSite属性

HttpOnly属性: JavaScriptからCookieにアクセスできないようにする属性です。XSS攻撃によるCookieの盗難を防ぐことができます。
Secure属性: HTTPS接続でのみCookieを送信するようにする属性です。中間者攻撃によるCookieの盗聴を防ぐことができます。
SameSite属性: Cookieが送信されるコンテキストを制限する属性です。CSRF攻撃を軽減することができます。Strict、Lax、Noneの3つの値があります。

Cookieのプライバシー

Cookieは、ユーザーのプライバシーに関わる情報を含む可能性があるため、慎重に扱う必要があります。

Cookieとプライバシーの問題

Cookieは、ユーザーのWebサイトの利用状況を追跡するために使用されることがあります。これにより、ユーザーのプライバシーが侵害される可能性があります。

Cookie規制の動向：GDPR（一般データ保護規則）、CCPA（カリフォルニア州消費者プライバシー法）

近年、プライバシー保護の観点から、Cookieの利用に対する規制が強化されています。

GDPR（一般データ保護規則）: EU（欧州連合）における個人データ保護に関する規則です。Cookieを使用する際には、ユーザーの同意を得る必要があります。
CCPA（カリフォルニア州消費者プライバシー法）: カリフォルニア州における消費者プライバシー保護に関する法律です。消費者は、自分の個人情報の収集、利用、販売を拒否する権利を有します。

Cookie同意バナーの必要性

GDPRやCCPAなどの法律に対応するため、WebサイトではCookie同意バナーを表示し、ユーザーにCookieの使用に関する同意を求める必要があります。

Cookieの代替技術

Cookieの代替技術として、以下のものが挙げられます。

ローカルストレージ（Local Storage）： ブラウザにデータを永続的に保存するためのAPIです。Cookieよりも大容量のデータを保存できます。
セッションストレージ（Session Storage）： ブラウザにデータを一時的に保存するためのAPIです。ブラウザを閉じるとデータは削除されます。
IndexedDB： ブラウザに構造化されたデータを保存するためのデータベースAPIです。大量のデータを効率的に処理できます。

Cookieと代替技術の比較

技術	保存容量	有効期限	アクセス方法	セキュリティ
Cookie	4KB	設定可能	HTTPヘッダー、JavaScript	HttpOnly, Secure, SameSite
Local Storage	5MB	永続的	JavaScript	XSS対策が必要
Session Storage	5MB	セッション終了まで	JavaScript	XSS対策が必要
IndexedDB	制限なし	永続的	JavaScript	XSS対策が必要

まとめ

この記事では、Cookieの基本的な仕組みから、JavaScriptでの扱い方、セキュリティ対策、プライバシーの問題まで、幅広く解説しました。

この記事の主要ポイント

Cookieは、Webサイトがユーザーのブラウザに保存する小さなテキストデータである。
Cookieには、セッションCookie、パーシステントCookie、サードパーティCookieの3種類がある。
JavaScriptを使用すると、document.cookieプロパティを通じてCookieを操作できる。
Cookieには、XSS攻撃やCSRF攻撃などのセキュリティリスクがある。
Cookieは、ユーザーのプライバシーに関わる情報を含む可能性があるため、慎重に扱う必要がある。

次のステップ

Cookieに関するより詳細な情報を得るために、MDN Web Docsなどのドキュメントを参照する。
実際にJavaScriptでCookieを操作するコードを書いて、Cookieの仕組みを理解する。
Webサイトのセキュリティ対策を強化するために、HttpOnly属性、Secure属性、SameSite属性などの設定を確認する。

この記事が、Cookieの理解を深め、Web開発に役立てるための一助となれば幸いです。