先生と生徒の会話形式で理解しよう

生徒

「PHPで作ったクッキーを、JavaScriptから読み取ったり書き換えたりすることってできますか？」

先生

「はい、できますよ。JavaScriptにはdocument.cookieという機能があって、PHPで作成したCookie（クッキー）にもアクセスできます。」

生徒

「JavaScriptって、Webページの見た目を変えるやつですよね？そんなこともできるんですか？」

先生

「はい、JavaScriptはWebページの見た目だけじゃなく、クッキーのような“データの保存場所”にもアクセスして、読み取ったり書き換えたりできるんですよ。これから実際に、PHPのCookieをJavaScriptで操作する基本をやさしく解説していきましょう！」

-

1. Cookie（クッキー）とは？初心者でもわかる意味と使い方

Cookie（クッキー）は、インターネットのWebサイトで「ちょっとしたメモ」のように使える仕組みです。例えば、Webサイトで「ログイン状態を保持」したり、「前回入力した名前を覚えておく」などに使われます。

クッキーは、Webブラウザの中に小さなデータとして保存され、Webサーバー（PHPなど）とJavaScriptの両方から操作できます。

2. PHPでCookieを作成する方法

まず、PHPでクッキーを作るには、setcookieという関数を使います。例えば次のように書くと、ユーザー名を「Taro」として保存できます。


setcookie("username", "Taro", time() + 3600); // 1時間有効

このコードでは、「username」という名前で「Taro」という値を、1時間（3600秒）保存するようにしています。設定したクッキーは、ブラウザに保存されます。

3. JavaScriptでCookieを読み取るには？

PHPで作ったクッキーは、JavaScriptでも読み取れます。そのとき使うのがdocument.cookieです。

例えば次のように書くと、すべてのクッキーが文字列として見られます。


console.log(document.cookie);

結果は次のような形になります：


username=Taro

このように、document.cookieでブラウザに保存されている全てのクッキーを「名前=値」の形で確認できます。

4. JavaScriptで特定のCookieを取得する方法

document.cookieはすべてのクッキーを1つの文字列として返すため、「username」など特定のクッキーを取り出すには少し工夫が必要です。次のように分割して探すのが基本です。


function getCookie(name) {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        const c = cookies[i].trim();
        if (c.startsWith(name + "=")) {
            return c.substring(name.length + 1);
        }
    }
    return "";
}

const username = getCookie("username");
console.log(username); // Taro

この関数は「username」という名前のクッキーがあればその値を返します。

-

5. JavaScriptでCookieを書き換える・保存する方法

JavaScriptでもクッキーを書き換えることができます。方法は、document.cookie = "名前=値; オプション"という形で文字列を代入するだけです。


document.cookie = "username=Hanako; max-age=3600"; // 1時間保存

このコードでは「username」というクッキーの値を「Hanako」に書き換えています。max-ageは「何秒間保存するか」を意味します。

6. クッキーを使うときの注意点とセキュリティ

クッキーは便利ですが、使い方を間違えるとセキュリティ上のリスクもあります。例えば、パスワードや個人情報など「大事なデータ」は絶対にクッキーに保存しないようにしましょう。

また、JavaScriptからアクセスできないようにする「HttpOnly」や、安全な通信でしか送らない「Secure」などの設定もPHP側で必要に応じて使うべきです。

7. 実用例：前回入力した名前をクッキーで保存して表示する

よくある使い方の一例として、ユーザーがフォームに入力した名前をクッキーに保存して、次回アクセス時に表示する方法を紹介します。


<input type="text" id="nameInput" placeholder="名前を入力">
<button onclick="saveName()">保存</button>
<p id="greeting"></p>

<script>
function saveName() {
    const name = document.getElementById("nameInput").value;
    document.cookie = "username=" + encodeURIComponent(name) + "; max-age=86400";
    alert("名前を保存しました！");
}

function showGreeting() {
    const name = getCookie("username");
    if (name) {
        document.getElementById("greeting").innerText = name + "さん、ようこそ！";
    }
}

function getCookie(name) {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        const c = cookies[i].trim();
        if (c.startsWith(name + "=")) {
            return decodeURIComponent(c.substring(name.length + 1));
        }
    }
    return "";
}

showGreeting();
</script>

このサンプルでは、名前を入力するとJavaScriptでクッキーに保存され、次にページを開いたときに「〇〇さん、ようこそ！」と表示されます。