JavaScriptとCookie

Articles

JavaScriptとCookie

この記事ではJavaScriptとCookieについて説明します。

Cookieの基本から、読み書き、セキュリティ、実用的な例まで、ステップバイステップで丁寧に解説します。

YouTube Video

javascript-cookie.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-cookie.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScriptとCookie

Cookieとは、ユーザーのブラウザに保存される小さなデータです。主に次の用途で使用されます。

ユーザー認証（ログイン状態の維持）
ユーザー設定の保存（言語、テーマなど）
トラッキング（訪問履歴など）

JavaScriptでは、document.cookie を使ってCookieを読み書きできます。

`Cookie`の作成（書き込み）

Cookieは次の構文で作成します。

1document.cookie = "username=JohnDoe";

このコードは、ブラウザに "username=JohnDoe" というCookieを保存します。

期限付きの`Cookie`を作成する

Cookieには有効期限を設定できます。有効期限を設定しない場合、**セッションCookie**として扱われ、ブラウザを閉じると削除されます。

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text  : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);

expiresには、Cookie の有効期限を UTC 形式で指定します。
pathには、Cookie が送信されるパスを指定します。/ はサイト全体を意味します。
SameSite=Noneを指定すると、クロスサイトリクエストでもCookieが送信されます。ただし、この場合は必ずSecure属性を付与する必要があります。
Secureを指定すると、Cookieは HTTPS 通信のみに制限され、セキュリティが向上します。
document.cookieを参照すると、現在のページで利用可能なすべてのCookieが文字列として取得できます。
console.logで、実際にブラウザに設定したCookieの内容と、取得可能なCookieの値の違いを確認しています。

`Cookie`の取得（読み込み）

document.cookie で全てのCookieを文字列として取得できます。

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"

document.cookieの戻り値は、すべてのCookieが「key=value;」の形式で連結された単一の文字列です。
この文字列を解析して目的の値を取り出すには、関数化が便利です。

`Cookie`の値を取得する関数

 1function getCookie(name) {
 2    const cookies = document.cookie.split('; ');
 3    for (const cookie of cookies) {
 4        const [key, value] = cookie.split('=');
 5        if (key === name) {
 6            return decodeURIComponent(value);
 7        }
 8    }
 9    return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"

この関数は、split() でキーと値を分け、指定したキーに一致したら値を返します。
decodeURIComponent を使うことで、エンコードされた文字も正しく取得できます。
該当するキーが存在しない場合は null を返します。

`Cookie`の削除

Cookieの有効期限を過去に設定すれば削除できます。

1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"

username に空の値を代入し、有効期限を過去に設定することで削除されます。
Cookieを削除する場合も、作成時と同じ path や SameSite、Secure 属性を一致させる必要があります。
この例では username が削除され、theme=darkといった他のCookieは残ります。

`Cookie`のオプション

Cookieには、動作を制御するためのさまざまなオプションを指定できます。主なものは以下の通りです。

expires Cookieの有効期限をUTC形式の日付で指定します。指定しない場合、ブラウザを閉じると削除されるセッションCookieになります。
max-age Cookieの有効期限を秒数で指定します。expiresよりも優先されます。
path Cookieが送信されるURLのパスを指定します。たとえば/adminを指定すると、その配下のページでのみCookieが送信されます。
domain Cookieが有効なドメインを指定します。通常は現在のドメインで設定されますが、.example.comのようにサブドメイン全体に適用することも可能です。
secure この属性を指定すると、CookieはHTTPS通信時にのみ送信されます。セキュリティ向上のため、機密性のある情報には必ず付与するようにします。
SameSite クロスサイトリクエスト時のCookieの送信可否を制御します。以下の3つの値を指定できます。
- Strict 完全に同一サイトのリクエストのみCookieを送信します。
- Lax 一般的なリンク遷移では送信されますが、一部制限があります。
- None クロスサイトでも送信可能です。ただし、Secure属性も必要です。

例：セキュアな`Cookie`

1document.cookie = "sessionId=abc123; secure; SameSite=Strict";

secure を指定すると、HTTPS 通信でのみ Cookie が送信されます。
SameSite=Strict を指定すると、クロスサイトリクエスト時には Cookie が送信されず、CSRF 対策として有効です。
このようなセキュア属性は、認証情報やセッション管理などの重要な Cookie に必須です。

エンコードとデコード

Cookieの値には特殊文字を含めることがあるため、encodeURIComponent を使うのが安全です。

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6    "username=" + encodeURIComponent(username) +
7    "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"

encodeURIComponent を使うことで、空白や記号などを安全に Cookie に保存できます。
読み出す際には decodeURIComponent を使って元の文字列に戻します。
この例では max-age=604800 を利用して、有効期限を「7日（604,800秒）」に設定しています。これは expires と同じく有効期限を指定する方法です。max-age は秒数で指定でき、より扱いやすい場合が多いです。

実用的なサンプル：テーマの保存と読み込み

以下は、ユーザーのテーマ選択をCookieに保存し、次回訪問時に自動で適用する例です。

 1function setTheme(theme) {
 2    document.cookie =
 3        "theme=" + encodeURIComponent(theme) +
 4        "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
 5    applyTheme(theme);
 6}
 7
 8function applyTheme(theme) {
 9    document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10    document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14    const cookies = document.cookie.split('; ');
15    for (const cookie of cookies) {
16        const [key, value] = cookie.split('=');
17        if (key === name) {
18            return decodeURIComponent(value);
19        }
20    }
21    return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26    applyTheme(savedTheme);
27}

1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>

setTheme 関数は、選択したテーマを Cookie に保存し、その場で applyTheme を呼び出して画面を更新します。
applyTheme 関数は、テーマに応じて body の背景色と文字色を切り替えます。
この例では max-age=604800 を設定しているため、テーマ設定は 1 週間保持されます。
ページを再訪問した際にユーザーの選択を維持できるので、UX が向上します。

`Cookie`の制限と注意点

Cookieを使用する際には、以下の点に注意が必要です。

サイズ制限 1つのCookieのサイズは最大で約4KBまでに制限されています。
保存できる数の制限 ブラウザによって異なりますが、1つのドメインあたり20〜50個程度までしか保存できません。
セキュリティ上の注意 Cookieの内容は基本的に平文で保存されるため、パスワードなどの機密情報を保存するのには適していません。
JavaScriptからアクセスできないCookie HttpOnly 属性が付けられたCookieは、セキュリティ強化のためJavaScriptからは読み取ることができません。

サーバーと`Cookie`

1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

JavaScriptではHttpOnlyなど一部のCookie属性は設定できません。これらはサーバーサイドで設定する必要があります。

まとめ

JavaScriptからCookieを操作することで、ユーザー体験の向上や状態の保持が可能になります。ただし、以下の点に留意して安全かつ適切に扱う必要があります。

必要最小限の情報のみ保存 プライバシー保護とセキュリティの観点から、個人情報や機密情報の保存は避け、必要なデータだけを記録します。
セキュリティ属性の適切な設定 Secure や SameSite 属性を設定して、XSSやCSRFなどクロスサイト攻撃を防止しましょう。
データのエンコードとデコード 特殊文字や日本語などが正しく扱えるよう、encodeURIComponent と decodeURIComponent を使用してCookieの値を安全に保存したり、読み取ります。

Cookieの正しい使い方を習得すれば、より高度で安全なWebアプリケーションを構築できます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。ぜひYouTubeチャンネルもご覧ください。

YouTube Video

JavaScriptにおける`Shared Worker`

JavaScriptとCookie

YouTube Video

JavaScriptとCookie

Cookieの作成（書き込み）

期限付きのCookieを作成する

Cookieの取得（読み込み）

Cookieの値を取得する関数

Cookieの削除

Cookieのオプション

例：セキュアなCookie

エンコードとデコード

実用的なサンプル：テーマの保存と読み込み

Cookieの制限と注意点

サーバーとCookie

まとめ

YouTube Video

`Cookie`の作成（書き込み）

期限付きの`Cookie`を作成する

`Cookie`の取得（読み込み）

`Cookie`の値を取得する関数

`Cookie`の削除

`Cookie`のオプション

例：セキュアな`Cookie`

`Cookie`の制限と注意点

サーバーと`Cookie`