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

生徒

「ホームページで入力した名前とかを、また次に開いたときに覚えておく方法ってあるんですか？」

先生

「はい、ありますよ。その仕組みは『Cookie（クッキー）』といって、PHPというプログラムで使われることが多いです。パソコンやスマートフォンの中に、ちょっとした情報を保存しておくことができます。」

生徒

「へぇ！PHPってサーバーのプログラムですよね？保存したデータはずっと残るんですか？」

先生

「とてもいい疑問ですね。クッキーは“期限つきのメモ”のようなもので、設定によって保存期間を決められます。今日はそのPHPでのクッキーの管理方法と、安全にデータを扱うベストプラクティスについて、わかりやすく解説していきましょう！」

-

1. Cookie（クッキー）とは？初心者でもわかる基本のしくみ

Cookie（クッキー）とは、Webサイトがあなたのパソコンやスマホに情報を一時的に保存するための仕組みです。たとえば、「前回入力した名前を覚える」や「ログインしたままにする」といった場面で使われます。

クッキーの情報は、Webページを開くたびにサーバー（PHP）にも送られます。つまり、PHPでその情報を読み取って処理ができるということです。

2. PHPでCookieを保存・読み込みする方法

PHPでは、setcookie()という関数を使ってクッキーを保存できます。保存されたクッキーは、次回アクセス時にPHPで読み取ることができます。


setcookie("username", "Taro", time() + 3600); // 1時間保存

この例では、「username」という名前のクッキーに「Taro」という値を1時間だけ保存しています。

読み取るときは、次のように$_COOKIE変数を使います。


echo $_COOKIE["username"];

3. クライアントサイドとサーバーサイドの違いとは？

初心者の方にとって混乱しやすい言葉ですが、「クライアントサイド」とは「あなたのパソコンやスマホ側」のことを指します。一方「サーバーサイド」とは、Webページを配信しているサーバー側のことです。PHPはこのサーバーサイドで動く言語です。

クッキーは、クライアントサイド（ユーザーの端末）に保存されるので、JavaScriptでも操作できますし、サーバー側のPHPでも利用できます。

4. クッキーの使用上の注意点

クッキーを使うときに気をつけるべきことがいくつかあります。まず1つ目は「保存できる容量が少ない」ということ。通常、1つのクッキーは4KB（キロバイト）以下に制限されています。

2つ目は「セキュリティ」の問題です。クッキーはブラウザで誰でも見られるため、個人情報やパスワードなど、重要な情報は絶対に保存しないようにしましょう。

-

5. セキュリティを高めるPHPのクッキー設定

PHPでクッキーを安全に扱うには、以下のような設定を追加します。


setcookie(
    "username",
    "Taro",
    [
        "expires" => time() + 3600,
        "path" => "/",
        "secure" => true,
        "httponly" => true,
        "samesite" => "Strict"
    ]
);

secureは、暗号化された通信（https）のときだけ送信される設定です。httponlyをtrueにすると、JavaScriptからクッキーにアクセスできなくなり、不正アクセスを防ぎます。

samesiteは、他のサイトからの不正なアクセスを防ぐための設定で、「Strict」や「Lax」などの値を指定できます。

6. JavaScriptと連携してクッキーを扱う方法

PHPだけでなく、JavaScriptでもクッキーを扱うことで、より柔軟な動作ができます。たとえば、入力した名前を保存して、次にページを開いたときに自動で表示するような処理も可能です。


<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でクッキーを操作すれば、画面の表示を動的に変えることができます。