1. はじめに
JavaScriptを使ったWeb開発では、Cookieはユーザー情報を保持するための重要な仕組みとして活用されています。
例えば、ログイン状態の維持やショッピングカートの情報保持など、ユーザーの利便性を向上させるために広く使用されています。
しかし、「Cookieとは何か？」や「JavaScriptでどのように操作できるのか？」について、初心者にとっては分かりにくい部分も多いでしょう。
本記事では、JavaScriptのCookie操作に関する基本から応用までを詳しく解説します。コード例を交えながら、実践的な使い方も紹介していくので、初心者から中級者まで役立つ内容になっています。
2. Cookieとは？
Cookieの基本概念
Cookieとは、Webブラウザに保存される小さなデータのことです。主に以下の用途で使用されます。
- ユーザーがサイトに入力した情報（例：ログイン情報）を保存する。
- 訪問者の行動履歴を記録し、マーケティングや分析に活用する。
- 設定情報（例：言語選択やテーマ設定）を保持して、ユーザー体験を向上させる。
Cookieの仕組み
Cookieは、キーと値のペアで構成されており、次のような形式で保存されます。
name=value; expires=Wed, 31 Dec 2025 23:59:59 GMT; path=/この例では、nameというキーにvalueが設定され、有効期限とパスも指定されています。
Cookieの主な構成要素
- 名前と値（name=value） – Cookieの基本情報。
- 有効期限（expiresまたはmax-age） – Cookieが有効な期間を指定。
- パス（path） – Cookieが適用されるディレクトリやページを指定。
- セキュア属性（secure） – HTTPS接続でのみ送信されるように設定。
- SameSite属性 – クロスサイトリクエスト対策。
このように、Cookieは柔軟に設定できるため、ユーザー体験の向上やセキュリティ強化に役立ちます。
3. JavaScriptでのCookie操作の基本
JavaScriptでは、document.cookieプロパティを使用してCookieを操作します。ここでは基本的な操作方法を紹介します。
Cookieの設定
以下は、新しいCookieを設定するコード例です。
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";ポイント：
username=John：キーと値を指定。expires：有効期限を設定。省略するとブラウザを閉じると同時に削除されます。path=/：サイト全体でCookieを使用できるよう指定。
Cookieの取得
すべてのCookieは次のように取得できます。
console.log(document.cookie);出力例：
username=John; theme=dark; lang=ja複数のCookieがセミコロン（;）で区切られているため、必要に応じて文字列を分割して処理します。
Cookieの削除
Cookieを削除するには、有効期限を過去の日付に設定します。
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";このコードは、usernameという名前のCookieを削除します。
4. Cookieの属性設定
Cookieの属性は、セキュリティや有効期限の設定に重要です。
有効期限の設定
- expires属性（日時指定）
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";- max-age属性（秒数指定）
document.cookie = "username=John; max-age=3600; path=/";これにより、1時間後にCookieが自動削除されます。
セキュリティ属性
- secure属性（HTTPS専用）
document.cookie = "username=John; secure";- SameSite属性（クロスサイトリクエスト対策）
document.cookie = "username=John; SameSite=Strict";これらの属性を適切に設定することで、セキュリティとプライバシーを強化できます。
5. 実用的なコード例
ユーザー訪問回数のカウント
function getCookie(name) {
let cookies = document.cookie.split('; ');
for (let i = 0; i < cookies.length; i++) {
let parts = cookies[i].split('=');
if (parts[0] === name) return parts[1];
}
return null;
}
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
let visits = getCookie("visits") ? parseInt(getCookie("visits")) : 0;
visits++;
setCookie("visits", visits, 365);
alert("あなたの訪問回数: " + visits);このコードでは、ユーザーの訪問回数をCookieに保存し、次回アクセス時にカウントを更新します。
6. サードパーティライブラリの活用
JavaScriptでは、document.cookieプロパティを使用してCookieを操作できますが、文字列の処理や属性設定がやや複雑です。このため、コードの記述量が増えたり、可読性が低下したりする可能性があります。
そこで、Cookieの管理を簡単にするために、サードパーティライブラリを活用する方法を紹介します。本記事では、特に人気のあるライブラリ「js-cookie」を中心に解説します。
1. js-cookieライブラリとは？
js-cookieは、Cookie操作を簡単にする軽量なJavaScriptライブラリです。主な特徴は以下のとおりです。
- シンプルなAPI：Cookieの取得、設定、削除が簡単に記述できる。
- 拡張性と柔軟性：セキュリティ設定やカスタム機能をサポート。
- 軽量：圧縮後のサイズはわずか約2KB。
2. js-cookieのインストール
CDN経由で読み込む場合
以下のコードをHTMLファイルの<head>タグ内に追加します。
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>npmまたはyarnでインストールする場合
プロジェクトで管理する場合は、以下のコマンドを使用します。
npm install js-cookieまたは
yarn add js-cookie3. 基本的な使い方
Cookieの設定
Cookies.set('username', 'John', { expires: 7 }); // 7日間有効Cookieの取得
let username = Cookies.get('username');
console.log(username); // 出力: JohnCookieの削除
Cookies.remove('username');4. 高度なオプション設定
有効期限とパスの指定
Cookies.set('session', 'active', { expires: 1, path: '/' });- expires：1日後に有効期限切れ。
- path：サイト全体で利用可能に設定。
セキュア属性の追加
Cookies.set('secureData', 'secret', { secure: true });- secure: true：HTTPS接続時のみ送信されるように設定。
SameSite属性の指定
Cookies.set('strictCookie', 'value', { sameSite: 'Strict' });- sameSite: ‘Strict’：クロスサイトリクエストを禁止し、セキュリティを強化。
7. セキュリティとプライバシーの考慮
JavaScriptでCookieを操作する際には、セキュリティ対策とプライバシー保護が非常に重要です。不適切な管理は、データ漏洩や不正アクセスの原因となる可能性があります。ここでは、Cookieの安全な取り扱い方法について詳しく解説します。
1. セキュリティ対策
HTTPS通信とSecure属性の使用
CookieにはSecure属性を設定し、HTTPS通信でのみ送信されるようにします。これにより、通信の盗聴や改ざんを防ぐことができます。
設定例：
document.cookie = "sessionID=abc123; Secure";また、サードパーティライブラリ「js-cookie」を使用する場合は、以下のように設定できます。
Cookies.set('sessionID', 'abc123', { secure: true });HttpOnly属性の利用（サーバー側設定）
JavaScriptでは、クライアント側でHttpOnly属性を設定できません。しかし、サーバー側でこの属性を設定することで、XSS攻撃（クロスサイトスクリプティング）を防ぐことができます。
例：サーバー側設定（PHPの場合）
setcookie('sessionID', 'abc123', [
'httponly' => true,
'secure' => true,
'samesite' => 'Strict'
]);SameSite属性によるCSRF攻撃対策
CSRF（クロスサイトリクエストフォージェリ）攻撃を防ぐためには、SameSite属性を設定します。
設定例：
document.cookie = "token=secureToken; SameSite=Strict";2. プライバシー保護
保存する情報の種類を厳選する
Cookieに個人情報や機密情報（パスワードなど）を保存するのは避けましょう。代わりに、セッションIDなど匿名性の高い情報を保存し、サーバー側で実際のデータと照合する方法が推奨されます。
例：セッションIDの利用
Cookies.set('sessionID', 'randomString123', { secure: true, httpOnly: true });GDPRとプライバシー規制への対応
欧州連合（EU）のGDPR（一般データ保護規則）や日本の個人情報保護法により、Cookieの使用に関しては以下の規制が求められます。
- 同意取得の義務化
ユーザーにCookieの使用目的を説明し、明示的な同意を取得する必要があります。 - オプトインとオプトアウトの提供
Cookie使用を拒否する機能（オプトアウト）をユーザーに提供します。
例：Cookie同意バナーの設置（JavaScriptコード）
if (!Cookies.get('cookieConsent')) {
let consent = confirm('このサイトではCookieを使用しています。許可しますか？');
if (consent) {
Cookies.set('cookieConsent', 'true', { expires: 365 });
}
}8. ブラウザでのCookie確認方法
JavaScriptでCookieを設定・取得・削除する際、ブラウザの開発者ツールを使って動作を確認することができます。ここでは、主要なブラウザでのCookie確認手順を詳しく解説します。
1. Google Chromeでの確認方法
開発者ツールを開く
- ページ上で右クリックし、「検証」または「要素を検証」を選択します。
- または、F12キーまたはCtrl + Shift + I（Macの場合はCmd + Opt + I）を押して開きます。
Cookieの表示手順
- 開発者ツール内の上部メニューから「アプリケーション」タブを選択します。
- 左側のメニューから「ストレージ」→「Cookie」をクリックします。
- ドメイン名がリスト表示されるので、対象のサイトを選択します。
Cookieの内容を確認
選択したサイトのCookieが表形式で表示されます。各列の意味は次のとおりです。
| 列名 | 説明 |
|---|---|
| Name | Cookie名（キー名） |
| Value | 値（内容） |
| Domain | Cookieが適用されるドメイン |
| Path | Cookieが適用されるパス |
| Expires/Max-Age | 有効期限 |
| Size | Cookieのサイズ（バイト単位） |
| HttpOnly | HttpOnly属性が設定されているかどうか（JavaScriptからアクセス不可） |
| Secure | Secure属性が設定されているかどうか（HTTPSのみで送信される） |
| SameSite | SameSite属性の設定（Strict、Lax、None） |
Cookieの変更・削除
- 編集：任意の行をダブルクリックして編集できます。
- 削除：行を選択してDeleteキーを押すか、右クリックして削除を選択します。
2. Firefoxでの確認方法
開発者ツールを開く
- ページ上で右クリックし、「要素を調査」を選択します。
- または、F12キーまたはCtrl + Shift + Iを押します。
Cookieの表示手順
- 「ストレージ」タブを選択します。
- 左側のメニューから「Cookie」をクリックします。
- 表示されたドメインから、対象のサイトを選択します。
編集・削除
Chromeと同様に、値を直接編集したり、選択して削除したりできます。
3. Safariでの確認方法（Macユーザー向け）
開発者ツールを有効にする
- Safariのメニューから「環境設定」を開きます。
- 「詳細」タブを選択し、「メニューバーに“開発”メニューを表示」にチェックを入れます。
開発者ツールを開く
- ページ上で右クリックし、「要素を検証」を選択します。
- または、Cmd + Opt + Iを押します。
Cookieの確認手順
- 「ストレージ」タブを選択します。
- 「Cookie」を選択して内容を確認します。
4. コマンドラインでのCookie確認
CookieはJavaScriptコンソールを使用して確認することもできます。
例：現在のCookie一覧を表示
console.log(document.cookie);特定のCookieを取得する例
let cookies = document.cookie.split('; ');
let username = cookies.find(row => row.startsWith('username=')).split('=')[1];
console.log(username);Cookieの追加や削除も直接コンソールから実行可能です。
9. まとめ
これまでのセクションで、JavaScriptにおけるCookie操作について基本から応用までを詳しく解説してきました。この記事の内容を振り返りながら、実践的なベストプラクティスをまとめます。
1. Cookieの基本と仕組み
Cookieは、Webブラウザに小さなデータを保存する仕組みです。
- 用途：ログイン情報の保持、ユーザー設定の管理、行動追跡など。
- 構成要素：キーと値、有効期限、パス、ドメイン、セキュリティ属性など。
基本的な仕組みを理解することで、さまざまな用途に柔軟に対応できます。
2. JavaScriptでのCookie操作
JavaScriptでは、document.cookieプロパティを使ってCookieを簡単に設定・取得・削除できます。
例：Cookieの設定
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";例：Cookieの取得
console.log(document.cookie);例：Cookieの削除
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";これらのコードは基本操作ですが、複雑な要件にはサードパーティライブラリの利用がおすすめです。
3. サードパーティライブラリの活用
ライブラリを活用することで、Cookieの管理がよりシンプルになります。
js-cookieの使用例
Cookies.set('username', 'John', { expires: 7, secure: true });
let username = Cookies.get('username');
Cookies.remove('username');利点：
- 短く直感的なコードが書ける。
- セキュリティ属性やオプション設定が簡単。
- クロスブラウザ対応がスムーズ。
4. セキュリティとプライバシー対策
Cookieは、セキュリティ設定とプライバシー保護を適切に行うことで、安全に使用できます。
セキュリティ対策のポイント
- HTTPSとSecure属性の使用：データの盗聴防止。
- SameSite属性の設定：CSRF攻撃対策。
- HttpOnly属性の利用：XSS攻撃防止（サーバー側設定）。
プライバシー保護のポイント
- 個人情報は保存しない：IDやトークンのみ保存し、サーバー側で管理。
- 法規制への対応：GDPRや個人情報保護法に準拠した同意管理システムを導入。
- データ暗号化：重要な情報は暗号化して保存。
5. Cookieの動作確認とデバッグ
開発者ツールを使ってCookieの内容を確認し、デバッグ作業を効率化できます。
ブラウザ別確認方法
- Google Chrome：もっとも使いやすく、多機能なインターフェース。
- Firefox：ストレージ管理機能が充実。
- EdgeとSafari：Chromeと同様の手順で管理。
JavaScriptコンソールの活用
console.log(document.cookie);これにより、手軽にテストやデバッグが可能です。
6. 実践的なベストプラクティス
Cookieを効率よく安全に運用するための具体的なポイントを以下にまとめます。
- 必要最小限の情報を保存する
不要なデータはCookieに保存せず、重要なデータはサーバー側で管理します。 - 適切な有効期限を設定する
短期間で有効期限が切れるよう設定し、不要になったCookieは削除します。 - セキュリティ設定を強化する
Secure属性やHttpOnly属性、SameSite属性を必ず設定します。 - ユーザー同意を取得する
GDPRなどの規制に対応した同意管理バナーを設置します。 - デバッグツールを活用する
ブラウザの開発者ツールを使って、Cookieの動作や属性設定を随時確認します。 - サードパーティライブラリを活用する
管理を簡素化し、コードの可読性を高めるために「js-cookie」などを導入します。
まとめ
この記事では、JavaScriptを使ったCookieの操作方法から、セキュリティ対策やプライバシー保護までを網羅的に解説しました。
学んだ内容の要点
- Cookieの基本的な仕組みと使い方。
- JavaScriptを使ったCookieの設定・取得・削除方法。
- セキュリティ強化と法規制対応の重要性。
- 開発者ツールやライブラリを使った効率的な運用方法。
今後のステップ
この記事を参考に、実際のプロジェクトでCookie管理を実践してみましょう。また、セキュリティ強化や最新のプライバシー法に対応するために、継続的な学習も重要です。
今後も新しい知識や技術を取り入れ、より安全でユーザーフレンドリーなWeb開発を目指してください。