JavaScriptとCookies

こんにちは、未来のJavaScriptの魔法使いたち！今日は、クッキーの世界への美味しい旅を始めましょう。牛乳に浸ける的那种クッキーではありません（今でも一つほしいですが）、ウェブ体験をスムーズでパーソナライズされたものにするデジタルのクッキーです。那么、仮想のエプロンを身に着けて、コーディングを始めましょう！

JavaScript - Cookies

クッキーとは？

クッキーは、ユーザーのコンピュータにウェブサイトが保存する小さなデータの断片です。これを、ウェブサイトがあなたのコンピュータに貼る小さなデジタルなメモとして考えてください。これらの「メモ」には、あなたの設定、ログイン情報、またはショッピングカート内の商品など、さまざまな情報が含まれることがあります。

初めてクッキーについて学んだとき、小さなコンピュータの精霊がメモを書き込んで私のPCに詰め込んでいる姿を想像しました。実際にはそういうわけではありませんが、この概念を視覚化するためには悪くない方法です！

クッキーが必要な理由

「なぜ、これらのクッキーのようなものなしでウェブサイトが情報を覚えることができないのか」と思うかもしれません。それでは、少し話を聞いてください。

imagine you're at a busy cafe. You order a coffee and a sandwich, but then you need to use the restroom. When you come back, how does the barista know which order is yours among the sea of customers? That's where cookies come in handy in the digital world.

クッキーが必要な理由はいくつかあります：

ユーザーの設定を覚える
ユーザーをログインした状態に保つ
ショッピングカート内の商品を追跡する
ユーザー体験をパーソナライズする
ユーザーの行動を分析して改善する

クッキーなしでは、每次ウェブサイトを訪れるたびに初めて会うかのように、設定やログイン情報、ショッピングカートの商品が覚えられていません。非常に不便ですよね？

どのように動作する？

それでは、デジタルのクッキーが実際にどのように動作するかを覗いてみましょう。心配しないでください。それほど複雑ではありません！

ウェブサイトを訪れると、そのウェブサイトはブラウザにクッキーを送信できます。ブラウザはそのクッキーをコンピュータに保存します。次に、同じウェブサイトを再訪すると、ブラウザはそのクッキーをウェブサイトに送信します。まるでコンピュータとウェブサイト間の秘密の握手のようです。

以下はその動作の簡単な図です：

ユーザーがウェブサイトを訪れる
↓
ウェブサイトがクッキーを送信
↓
ブラウザがクッキーを保存
↓
ユーザーがウェブサイトを再訪
↓
ブラウザがクッキーを送信
↓
ウェブサイトがユーザーを認識

基本を理解したので、それではJavaScriptでクッキーを操作してみましょう！

クッキーの設定/保存

クッキーを設定するのは、後で見返すためのメモを残すようなものです。JavaScriptでは、document.cookieプロパティを使用してクッキーを作成します。以下のようにします：

document.cookie = "username=John Doe";

以下のように分解します：

document.cookieは、クッキーと対話するために使用するプロパティです。
"username=John Doe"は実際のクッキーです。これはキーと値のペアで、usernameがキー、John Doeが値です。

複数のクッキーを設定することもできます：

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

各document.cookieステートメントは、新しいクッキーを作成します。既存のものを上書きすることはありません。

クッキーの読み取り

クッキーを読み取るのは、自分自身が残したメモを探すようなものです。以下のように読み取ります：

let allCookies = document.cookie;
console.log(allCookies);

これはすべてのクッキーを一つの長い文字列として返します。しかし、通常は特定のクッキーの値を取得したいものです。以下の関数を使用します：

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// 使用例
let username = getCookie("username");
console.log(username); // 出力: John Doe

この関数はクッキー文字列を分割し、各クッキーをループでチェックし、一致する場合は値を返します。

クッキーの有効期限を設定

クッキーは牛乳のように、放置すると腐ります。デフォルトでは、クッキーはブラウザセッションが終了するときに期限切れになりますが、特定の有効期限を設定することもできます：

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

このクッキーは1か月後に期限切れになります。expires属性は、ブラウザにクッキーを削除する時期を伝えます。

クッキーの削除

時々、クッキーを捨てる必要があります。クッキーを削除するには、期限を過去の日期に設定します：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

これはクッキーの値を空にし、期限を過去の日期に設定することで、効果的に削除します。

クッキーの更新

クッキーを更新するのは、新しい値で再度設定するだけです：

document.cookie = "username=Jane Doe";

既に存在するクッキー名「username」があれば、この値を更新します。存在しない場合は、新しいクッキーを作成します。

クッキーメソッドの表

以下に、学んだメソッドのまとめを示します：

アクション	メソッド
クッキーを設定	`document.cookie = "key=value";`
すべてのクッキーを読み取る	`let allCookies = document.cookie;`
特定のクッキーを読み取る	使用する関数 `getCookie()`
有効期限を設定	`document.cookie = "key=value; expires=date";`
クッキーを削除	期限を過去の日期に設定
クッキーを更新	クッキーを再度設定

そして、ここまでです、皆さん！あなたは今、JavaScriptでクッキーを操作するための知識を持ちました。力には責任が伴います。ユーザーのプライバシーを尊重し、クッキーの使用について透明性を持ってください。

次回、ウェブサイトがあなたの設定を覚えるとき、知識を披露して、「啊、クッキーが動いています！」と微笑んでください。ハッピーコーディングを、そしてデジタルのクッキーは常に新鮮で、実際のクッキーは常に美味しいものにしてください！

Credits: Image by storyset