Cookie とは？ウェブサイトでの仕組みと実用的な使い方

Web開発•2025/1/21

ウェブサイトにアクセスすると、ブラウザに小さなファイルのようなデータを保存される場面がありますね。それが Cookie です。

Cookieはウェブサイトを便利に利用するために欠かせない仕組みと言われることが多いです。ただ、初めて触れる方にとっては「いったい何をしているのか」「危険なことはないのか」と不安に感じるかもしれません。

ここではCookieの概要と使い方、そして実務レベルでどんな場面に活用されるのかを分かりやすく紹介します。ウェブ業界へ転職を考える方や学習を始めたばかりの方にも役立つよう、なるべく専門用語をかみ砕いて説明します。

Cookieの基本的なイメージ

Cookieとは、サーバー側またはクライアント側が、ウェブブラウザに対して一時的なデータを保存させる仕組みです。保存されたデータは同じサイトを再度訪れたときに送信されるため、ユーザーの状態や設定を追跡できるようになります。

例えば、ショッピングサイトでカートに商品を追加しても、ページを移動している間にカート情報がリセットされずに残るのはCookieのおかげと言えるでしょう。また、ログイン状態を維持するのにもCookieが関わっています。あまり意識することはないかもしれませんが、ウェブをスムーズに楽しむ上で重要な役割を果たしています。

一方で、Cookieが原因でセキュリティ上の懸念が生じるケースもあるため、使い方と管理を誤るとリスクが高まります。そのため、Cookieの基礎と活用シーンをしっかり理解しておくことが大切です。

Cookieが利用される理由

Cookieがこれほど広く使われているのは、ウェブが本来「ステートレス」だからです。ステートレスとは、サーバーがユーザーの状態を記憶しない仕組みを指します。

ウェブサイトとサーバーは、ページをリクエストするたびに新しい通信を行っています。何度も同じブラウザからアクセスしていても、サーバー側は「誰がアクセスしているか」を忘れやすい構造です。

そこでCookieを使うことで「現在、あなたはこのアカウントでログインしている」というような状態をサーバーと共有できます。このおかげで、ショッピングカートの中身が次のページ遷移でも保持されるわけです。

Cookieが果たす具体的な役割

Cookieは、主に以下のような場面で役立ちます。それぞれが実務にも直結するケースなので、ウェブ開発の現場では頻繁に活用されます。

ログイン情報の保持

認証が完了したかどうかを記録し、別のページに移動してもログアウトにならないようにするために使われます。

ユーザー設定の保存

サイトの配色や文字サイズを変更した際、次回訪問時にも設定内容を反映できるようにします。

ショッピングカートの中身の維持

購入手続き中にページを行き来しても、カートの内容を失わないようにするために使われます。

トラッキングとアクセス解析

ページに何回訪問したか、どれくらいの頻度で来るのかなどを、アクセス解析ツールと連動して記録する場合に利用します。

ただし、トラッキングに関してはプライバシーの観点から議論が多いです。規制が強まる国や地域も増えており、Cookieの使用目的を明示するポップアップが設置されるサイトが増えています。

Cookieの仕組み

Cookieは、HTTPヘッダーの一種としてサーバーがクライアントに送る形が基本です。具体的には、サーバーからレスポンスを返すときに Set-Cookie ヘッダーを送信し、それをブラウザが受け取って内部に保存します。

次のリクエストの際には、ブラウザが保存していたCookieを Cookie ヘッダーとしてサーバーに送ります。サーバー側はそのCookieを参照することで、「このユーザーはどの状態にいるか」を判断できます。

こういった流れを簡単に示すと、以下のような手順になります。クライアントとサーバーがCookieをやり取りするイメージを押さえておくと理解しやすいでしょう。

ユーザーがサイトにアクセスする
サーバーがレスポンスを返すとき、Set-Cookie ヘッダーを含めて送信
ブラウザがCookieを保存
次に同じサーバーへリクエストを送るとき、ブラウザは保存したCookieを Cookie ヘッダーとして送信
サーバーがCookieを参照してユーザーの状態を把握

Cookieを使った実装例（ブラウザ側）

ここではブラウザ側のJavaScriptを使ってCookieを扱う単純な例を見てみましょう。ウェブページ上でCookieを設定し、読み取る例を示します。


// Cookieを設定する例
document.cookie = "username=guest; path=/; max-age=3600";

// Cookieの値を読み取る関数
function getCookie(name) {
  const pairs = document.cookie.split("; ");
  for (const pair of pairs) {
    const [key, value] = pair.split("=");
    if (key === name) {
      return value;
    }
  }
  return null;
}

// 使用例
console.log(getCookie("username"));

上記のコードで注目したいのは、 document.cookie に代入する形でCookieを設定している点です。「username=guest」というデータをブラウザに保存し、max-age で有効期限を指定しています。

path=/ は、サイト内のどのパスでもCookieを送信してほしい場合に指定します。もし特定のディレクトリだけでCookieを使いたいなら、適切なパスに変えることが多いです。

Cookieを使った実装例（サーバー側：Node.js + Express）

次にサーバー側の実装として、Node.jsのExpressフレームワークを使った例を見てみます。以下のサンプルでは、特定のルートにアクセスした際にCookieをセットし、同時にブラウザが送ったCookieをコンソールへ表示しています。


const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  // クライアントから送られたCookieを確認
  console.log("Received Cookies: ", req.headers.cookie);

  // Cookieをセットしてレスポンスを返す
  res.setHeader("Set-Cookie", "sessionId=abc123; HttpOnly; Max-Age=3600");
  res.send("Cookieがセットされました");
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

この例では、sessionId=abc123 というCookieをセットしています。 HttpOnly オプションを付けることで、JavaScriptの document.cookie からは直接読み取れなくなるため、セキュリティを高められます。 Max-Age=3600 は有効期限を1時間に設定しているイメージです。

実務の場面では、認証済みかどうかを表すトークンや、ユーザーごとに固有のセッションIDをCookieに保存するケースが多いです。ただし、機密性の高いデータをCookieに直接入れるのは避けることが一般的です。

Cookieのメリットとデメリット

Cookieは便利ですが、メリットとデメリットの両面を理解しておくことが欠かせないです。使い方を間違えるとセキュリティやプライバシーの問題が起こりかねません。

メリット

ユーザーごとの状態管理が容易

ログイン状態やショッピングカートの内容を保持するなど、ユーザー体験が向上しやすいです。

サーバーの負荷を分散できる

状態管理をCookieに任せることで、サーバー側のセッション管理を軽量化できる場合があります。

ウェブサービスの使いやすさ向上

設定内容や好みを記録することで、再訪問時にカスタマイズされたページを見せることができます。

デメリット

セキュリティリスク

攻撃者にCookieを盗まれると不正ログインなどに悪用される可能性があります。

ブラウザの設定に依存する

ユーザーがCookieを無効化すると、正常に動作しない機能が出てくるかもしれません。

プライバシーの懸念

トラッキング目的のCookieがあるため、プライバシー保護の観点で問題視されることがあります。

Cookieのセキュリティ上の注意点

Cookieはデータをやり取りするだけでなく、認証情報を保持していることが多いです。そのため、以下のような対策を考慮するとよいでしょう。

Secureフラグの利用

Cookieには Secure オプションを付与できます。これを指定するとHTTPS接続のときだけCookieが送信されるようになるため、ネットワーク経路で盗聴されるリスクが下がります。

HttpOnlyオプション

先ほどのコード例にもあったように、Cookieに HttpOnly を付ければ、JavaScriptからアクセスできなくなります。これにより、XSS（クロスサイトスクリプティング）の攻撃によるCookieの奪取を防ぐことが期待できます。

SameSite属性

SameSite はCSRF（クロスサイトリクエストフォージェリ）対策として利用されます。 SameSite=Lax などを設定しておくと、外部サイトからのリクエストでCookieが送信されにくくなるため、セキュリティを高められます。

Cookieで認証情報をやり取りするときは、HTTPSやHttpOnlyなどの対策をしっかり講じないと不正利用されやすくなります。

実務でのCookie活用イメージ

具体的な企業のウェブサービス開発を想定すると、ログイン機能やオンライン決済などでCookieは欠かせません。ユーザー認証が済むと、サーバーはユーザーIDを紐づけたセッションIDをCookieに格納し、アクセスのたびにそのCookieを確認します。

さらに、顧客の好みに合わせた画面表示をするサイトでは「ダークモードを選んでいるか」「言語設定は何か」などの情報をCookieやセッション管理と結びつけることが多いです。実装段階では、機密性を求めるデータはサーバーセッションやデータベースで管理しつつ、Cookieはそのキーだけを保存する方針がよくとられます。

Cookieとローカルストレージの違い

Cookieと同様に、ブラウザには ローカルストレージ という仕組みも存在します。両者は似ていますが、次のような違いがあるので用途によって使い分けが必要です。

CookieはHTTPヘッダーでもやり取りできるが、ローカルストレージはJavaScriptから操作するのが主流
Cookieには明確な有効期限を設定できるが、ローカルストレージはブラウザが消さない限り基本的に残り続ける
Cookieはサイズが4KB程度に制限されがちだが、ローカルストレージはもう少し大きな容量が扱える

セッション管理や認証情報はCookieで扱うことが多いですが、単なるメモやカスタマイズ情報であればローカルストレージでも十分です。ただし、セキュリティの観点で保護が必要な情報は、どちらを使うにしても暗号化やサーバー側の管理を検討することが大切です。

Cookieの期限管理

Cookieには「セッションCookie」と「永続的Cookie」の2種類があります。セッションCookieはブラウザを閉じると削除されるのに対し、永続的Cookieは指定した有効期限や寿命（expires や max-age）に応じてブラウザに保存されます。

例えば、特定のサイトに30日間ログイン状態を維持したいなら、期限を30日後に設定したCookieを発行することが多いです。ただし、長期間保存しすぎるとセキュリティリスクが上がるため、慎重に設定します。

Cookie削除の方法

ブラウザ側からCookieを削除する場合には、過去の日付を expires に指定したり、同名のCookieを再度発行して上書きしたりします。 JavaScriptであれば、次のように実行できます。


// 有効期限を過去に設定してCookieを上書きする
document.cookie = "username=; max-age=0; path=/";

このようにすると、Cookieを手動で削除できます。サーバー側ではユーザーがログアウトしたタイミングで、ブラウザへ「もうこのCookieは不要ですよ」という合図を送る場合に使われます。

Cookieに関する最新動向

プライバシー保護の観点から、主要なブラウザがサードパーティCookieを制限する動きが続いています。そのため、広告や解析の仕組みに変更が求められるケースも増えています。

また、GDPR（欧州の一般データ保護規則）などの法規制でCookieの扱いが厳しくなりました。 Cookieを使う際にユーザーの同意を得ることが必須になるなど、法律面での配慮が求められる国も多いです。

Cookieは便利ですが、扱い方を間違えるとユーザーのプライバシーを侵害する可能性があります。実装の前に、自分の開発するウェブサイトの利用目的を十分に説明できるようにしておくことが大事ですね。

実務における注意点と対策

Cookieを使うときは、下記のようなポイントに気を付けるとトラブルを防ぎやすくなります。

適切なCookieのサイズと有効期限を設定する

不要にデータ量を増やさないようにして、ブラウザやサーバーに無駄な負荷をかけないようにします。

機密情報を直接保存しない

どうしても必要な場合は、暗号化やトークン化などを検討してみましょう。

同意ポリシーの明確化

ユーザーがCookieを受け入れるかどうかを選択できるようにするケースが増えています。国や地域によっては法的に義務付けられている場合があります。

クロスサイト攻撃を想定した設定

SameSite や HttpOnly を活用し、XSSやCSRFなどの対策を実施します。

こういった対策を踏まえると、ユーザーにとって快適な環境を提供しつつ、安全性も維持できるでしょう。

Cookieを理解するメリット

Cookieについて理解が深まると、ログイン状態の管理やショッピングカートの維持など、多くの機能を開発できるようになります。また、セキュリティ面でもCookieの仕組みを知っておくと、どこにリスクがあるかを把握しやすいです。

ウェブ開発を始めたばかりの方にとっては、Cookieの活用イメージを掴むことがキャリアを広げるきっかけになるかもしれません。例えば、実際のサービスを作る際に「ユーザーごとにデータを分けるにはどうするのか」と悩んだとき、Cookieが解決策の一端になることがあります。

まとめ

Cookieはウェブサイトとユーザーの間に「状況のメモ」を残すような存在です。ステートレスなHTTP通信を便利にするために欠かせない仕組みと言えます。

一方で、セキュリティやプライバシーにまつわる課題もあるため、HttpOnly や Secure フラグ、 SameSite 属性などで安全性を高めることが重要です。また、ユーザーがCookieを望まない場合への配慮や、法規制に対応することも求められるでしょう。

Cookieの扱いをしっかり身につけることで、ウェブ開発の幅はぐっと広がります。ログイン機能やショッピングカートの実装だけでなく、様々なカスタマイズや利用者に合わせたサービスの提供につながるからです。