JavaScriptでdocument.cookieを設定する7つの方法

●document.cookieとは？
- ○document.cookieの基本的な使い方
- ○Cookieの構文と属性について
●Cookieの値を設定する
●Cookieの値を取得する
- ○サンプルコード5：単一のCookie値取得
- ○サンプルコード6：複数のCookie値を配列で取得
●Cookieの値を削除する
- ○サンプルコード7：Cookieの削除
●Cookieを使う際の注意点
●よくあるエラーと対処法
●document.cookieの応用的な使い方
- ○サンプルコード8：訪問回数カウンター
- ○サンプルコード9：最終ログイン日時の保存
まとめ

●document.cookieとは？

JavaScriptでWebブラウザのCookieを操作する際に欠かせないのが、document.cookieというプロパティです。こ

のdocument.cookieを使えば、Cookieの設定や取得、削除などが簡単にできてしまいます。

でも、document.cookieってどんなものなのか、どうやって使うのかイマイチよくわからないという方も多いのではないでしょうか。

そこで今回は、document.cookieの基本的な使い方からおさらいしていきたいと思います。

一緒にCookie操作のプロフェッショナルを目指しましょう！

○document.cookieの基本的な使い方

document.cookieは、現在のページに関連づけられたCookieを読み書きするための特別なプロパティです。

これを使うと、JavaScriptからCookieを自由自在に操れるようになります。

document.cookieに値を代入すると、新しいCookieの設定や既存のCookieの上書きができます。

一方、document.cookieを参照すると、現在のページに関連づけられたCookie文字列が返ってきます。

例えば、下記のようなコードを実行すると、”username=John”というCookieが設定されます。

document.cookie = "username=John";

逆に、document.cookieを参照すると、設定されているCookie文字列が取得できます。

console.log(document.cookie);
// 出力結果: "username=John"

○Cookieの構文と属性について

Cookieを設定する際のdocument.cookieへの代入では、”キー=値”の形式で指定します。

また、Cookieにはさまざまな属性を付与することができ、これらの属性も”キー=値”の形式で指定します。

複数の属性を指定する場合は、セミコロンで区切ります。

よく使われるCookieの属性には次のようなものがあります。

expires -> Cookieの有効期限を指定する。UTCタイムスタンプか日付文字列で指定。
max-age -> Cookieの有効期間を秒数で指定する。経過秒数が指定値に達すると削除される。
path -> Cookieを適用するパスを指定する。
domain -> Cookieを適用するドメインを指定する。
secure -> httpsでの接続時のみCookieを送信するかどうかを指定する。

例えば、secure属性とmax-age属性を付与してCookieを設定するには、以下のようなコードを書きます。

document.cookie = "username=John; secure; max-age=3600";

このように書くことで、httpsでの接続時のみ送信される、有効期間が1時間のCookieを設定することができるわけです。

●Cookieの値を設定する

document.cookieを使ってCookieを設定する方法、興味ありますよね。

JavaScriptでCookieを扱うには欠かせないスキルなので、ここではその基本から応用までしっかり身につけていきましょう。

サンプルコードを交えながら、様々なCookieの設定パターンを見ていきます。

単純なCookieの設定から、有効期限やパス、ドメイン指定など、実際の開発で役立つテクニックを解説していきます。

それではさっそく始めていきましょう！

○サンプルコード1：単純なCookie設定

まずは、もっともシンプルなCookieの設定方法から見ていきましょう。

“キー=値”の形式でdocument.cookieに代入するだけで、Cookieを設定することができます。

document.cookie = "username=John";

このコードを実行すると、”username”というキーで”John”という値のCookieが設定されます。

設定されたCookieは、同じドメイン内のページから参照・更新が可能です。

設定したCookieが正しく保存されているか確認してみましょう。

document.cookieを出力してみると、設定したCookie文字列が表示されるはずです。

console.log(document.cookie);
// 出力結果: "username=John"

単純なCookieの設定は、本当に簡単ですね。

でも、実際の開発ではもう少し複雑な設定が必要になることが多いです。

例えば、Cookieの有効期限を指定したり、特定のパスやドメインに限定したりといったことです。

○サンプルコード2：有効期限付きCookie設定

Cookieのデフォルトの有効期限は、ブラウザを閉じるまでです。

つまり、ブラウザを閉じてしまうとCookieは消えてしまうということですね。

でも、もっと長い期間Cookieを保持したい場合もあるでしょう。

そんな時は、Cookieの属性に”expires”か”max-age”を指定します。

“expires”は有効期限を日付形式で指定し、”max-age”は現在からの有効期間を秒数で指定します。

有効期限を明日の同じ時刻に設定してCookieを保存するには、こんなコードを書きます。

const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
document.cookie = `username=John; expires=${tomorrow.toUTCString()}`;

また、現在から1時間だけ有効なCookieを設定するなら、max-ageを使ってこう書きます。

document.cookie = "username=John; max-age=3600";

有効期限の指定によって、ブラウザを閉じても、指定した期間はCookieが保持されるようになります。

ユーザーのログイン情報を一定期間保持したい場合など、有効期限付きのCookieは大変便利に使えます。

○サンプルコード3：パス指定付きCookie設定

Cookieはデフォルトで、設定したページと同じパスにあるページからのみアクセス可能です。

でも、Cookieを複数のページで共有したい場合はどうすればいいのでしょうか。

そんな時は、Cookieの属性に”path”を指定します。pathに特定のディレクトリを指定すると、そのディレクトリ以下のページ全てから、設定したCookieにアクセスできるようになります。

例えば、Webサイトのルートディレクトリ以下の全ページでCookieを共有できるよう、こんな風にpathを指定します。

document.cookie = "username=John; path=/";

pathの指定を応用すれば、特定のディレクトリ内だけでCookieを共有したりといった使い方もできます。

Webアプリケーション開発では、こうした柔軟なCookie設定が求められる場面が多いので、pathの指定方法はぜひ覚えておきましょう。

○サンプルコード4：ドメイン指定付きCookie設定

同一ドメイン内の異なるサブドメイン間でCookieを共有したい場合は、Cookieの属性”domain”を指定します。

domainにルートドメインを指定すると、そのドメインとサブドメイン間でCookieが共有できるようになります。

例えば、”example.com”と、そのサブドメイン”sub.example.com”の間でCookieを共有するには、こんなコードを書きます。

document.cookie = "username=John; domain=example.com";

こうすることで、”example.com”と”sub.example.com”のどちらのページからも、同じCookieにアクセスできるようになるわけです。

ただし、domainの指定には注意が必要です。

ブラウザのセキュリティ制限により、現在のドメインよりも上位のドメインは指定できません。

例えば、”sub.example.com”から”example.com”のCookieは設定できますが、逆はできないということです。

●Cookieの値を取得する

Cookieを設定できたら、次は取得する番ですよね。

でも、Cookieの値ってどうやって取り出せばいいのでしょうか。

ご安心ください。

document.cookieを使えば、設定されているCookieの値も簡単に取得できちゃいます。

Cookieの取得といっても、単一のCookieを取り出すパターンと、複数のCookieを一括で取得するパターンの2通りがあります。

ここではそれぞれのサンプルコードを見ながら、Cookieの値を取得する方法をマスターしていきましょう。

○サンプルコード5：単一のCookie値取得

1つのCookieの値を取得するのは、とってもシンプルです。

document.cookieから、取得したいCookieのキーを指定するだけ。特定のキーを指定する際は、キー=の形式で検索します。

例えば、”username”というキーのCookieの値を取り出すには、こんなコードを書きます。

const cookie = document.cookie.split("; ").find((row) => row.startsWith("username="));
const username = cookie ? cookie.split("=")[1] : "";
console.log(username);
// 出力結果: "John" (もしusernameのCookieが設定されていれば)

ちょっとややこしいですが、document.cookieから返される文字列を、;で分割し、username=で始まる要素を探しています。

見つかった要素を=で分割し、値の部分を取り出しているわけですね。

ただ、このコードだと、指定したキーのCookieが存在しない場合、undefinedが返ってきてしまいます。

エラー対策として、三項演算子を使い、Cookieが見つからなかった場合は空文字を返すようにしておくのがベターでしょう。

○サンプルコード6：複数のCookie値を配列で取得

今度は、設定されている全てのCookieをまとめて取得してみましょう。

複数のCookieを配列形式で取り出すには、document.cookieをうまく加工する必要があります。

const cookies = document.cookie.split("; ").map((cookie) => {
  const [key, value] = cookie.split("=");
  return { key, value };
});
console.log(cookies);
// 出力結果: [{ key: "username", value: "John" }, { key: "lastLogin", value: "2023-05-19" }]

こんな感じで、document.cookieから取得した文字列を;で分割し、さらにそれぞれの要素を=で分割することで、キーと値のペアを作っています。

これを配列にマッピングすれば、全てのCookieを配列形式で取得できるというわけです。

●Cookieの値を削除する

Cookieの設定や取得方法はバッチリ理解できましたか？

でも、ちょっと待ってください。

Cookieを使い終わったら、ちゃんと削除することも大切なんです。

古くなったCookieを放置していると、セキュリティ上の問題につながる可能性もあります。

ユーザーのプライバシーを守るためにも、不要になったCookieは適切に削除する習慣をつけましょう。

○サンプルコード7：Cookieの削除

Cookieを削除するには、削除したいCookieの有効期限を過去の日時に設定するという少しトリッキーな方法を使います。

例えば、”username”というCookieを削除するには、こんなコードを書きます。

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

ポイントは、expires属性に過去の日時を指定することです。

ここでは、UTCで1970年1月1日の0時0分0秒を指定しています。

これによって、即座にCookieが期限切れになり、ブラウザから削除されるというわけですね。

ちなみに、path属性も指定していますが、これはCookieを削除する際に必要になります。

Cookieを設定した時と同じパスを指定しておかないと、正しく削除されないので気をつけましょう。

削除が成功したかどうかは、document.cookieを出力して確認してみるといいですよ。

console.log(document.cookie);
// 出力結果: "" (空文字)

もし、削除対象のCookieが見当たらなければ、削除は成功しているはずです。

Cookieの削除は、ユーザーのログアウト処理などで使われることが多いです。

例えば、ユーザーがログアウトしたら、認証に関連するCookieを削除することで、セキュリティを保つことができます。

ただ、Cookieの削除処理を忘れてしまうと、セキュリティホールになりかねません。

開発する際は、Cookieの削除が必要な場面がないか、しっかりチェックしておくことが大切です。

●Cookieを使う際の注意点

ここまでCookieの基本的な使い方について見てきましたが、実際にCookieを使う際には、いくつか注意しなければならない点があります。

Cookieは便利な反面、セキュリティ上のリスクを伴う場合もあるからです。

ここでは、Cookieを使う上で特に気をつけたい3つのポイントを解説します。

セキュリティへの配慮、Cookieサイズの上限、そしてCookieの有効期限です。

これらを理解しておくことで、より安全で効果的なCookie活用ができるようになるでしょう。

○セキュリティについての配慮

まず大切なのは、セキュリティへの配慮です。

Cookieは平文で保存されるため、機密情報をそのまま保存するのは避けるべきです。

例えば、ユーザーのパスワードをCookieに保存するのは、セキュリティ上のリスクが高すぎます。

また、Cookieは改ざんされる可能性もあります。

悪意のあるユーザーがCookieの値を書き換えて不正なリクエストを送信してくるかもしれません。

そのため、Cookieから取得した値は、必ず検証することが大切です。

セキュリティを高めるためには、Cookieに保存する情報を最小限に抑え、機密情報は暗号化するなどの対策が必要不可欠です。

また、Cookieを使う際は、HTTPS通信を利用することで、Cookieの盗聴や改ざんのリスクを減らすことができます。

○Cookieサイズの上限

次に気をつけたいのは、Cookieのサイズ上限です。

一般的にブラウザは、1つのドメインあたり最大4KBまでのCookieしか保存できません。

この上限を超えてCookieを設定しようとすると、単純に無視されてしまいます。

4KBという上限は、それほど大きくありません。

複数のCookieを設定する場合や、少し大きめの値を保存する場合は、すぐに上限に達してしまう可能性があります。

Cookieに大量のデータを保存する必要がある場合は、サーバー側で管理するセッション機能の利用を検討した方がいいかもしれません。

Cookieのサイズ上限は、ブラウザによって多少の差があります。

ただ、どのブラウザでも動作するようにするためには、4KBを目安にCookieのサイズを管理することが賢明でしょう。

○Cookieの有効期限

最後は、Cookieの有効期限についてです。

Cookieにはそれぞれ有効期限が設定されており、有効期限が切れるとブラウザから自動的に削除されます。

有効期限を設定しない場合、ブラウザを閉じた時点でCookieは削除されてしまいます。

逆に、有効期限を長く設定しすぎると、ユーザーの端末に不要なCookieが残り続けてしまう可能性があります。

これは、ユーザーのプライバシーに関わる問題になる可能性もあるので注意が必要です。

Cookieの有効期限は、Cookieの用途に合わせて適切に設定することが大切です。

例えば、ユーザーのログイン状態を保持するためのCookieなら、数日から数週間程度の有効期限が適当でしょう。

一方、ユーザーの言語設定など、長期的に保持したい情報の場合は、数ヶ月から数年の有効期限を設定するのがいいかもしれません。

●よくあるエラーと対処法

Cookieを使ったWebアプリケーション開発をしていると、思わぬエラーに遭遇することがあります。

ここでは、Cookieを扱う際によく遭遇する3つのエラーとその対処法を解説します。

Cookieが設定されない場合や、正しく値が取得できない場合、複数ドメインでのCookie共有がうまくいかない場合など、実際の開発でぶつかりそうな問題をピックアップしました。

このエラーに適切に対処できれば、スムーズなCookie活用が可能になるでしょう。

○Cookieが設定されない場合

「Cookieを設定しているはずなのに、なぜか設定されない！」こんな経験ありませんか？

Cookieが設定されない原因として考えられるのは、Cookieのキーや値に無効な文字が含まれている場合です。

例えば、Cookieのキーや値に、セミコロン(;)やカンマ(,)、空白などの区切り文字が含まれていると、正しくCookieが設定されません。

この文字はCookieの構文で特別な意味を持つため、エンコードする必要があります。

encodeURIComponent()関数を使って、キーと値をエンコードしてからCookieを設定するようにしましょう。

const key = encodeURIComponent("user name");
const value = encodeURIComponent("John Doe");
document.cookie = `${key}=${value}`;

このようにエンコードすることで、特殊文字を含むキーや値でもCookieを正しく設定できるようになります。

○Cookieの値が正しく取得できない場合

一方、Cookieの値を取得する際に、思ったような値が取れないことがあります。

こんな時は、Cookieの値をデコードし忘れていないか確認しましょう。

Cookieを設定する際にencodeURIComponent()でエンコードした値は、取得時にdecodeURIComponent()でデコードする必要があります。

デコードを忘れると、エンコードされたままの値が返ってきてしまいます。

const cookie = document.cookie
  .split("; ")
  .find((row) => row.startsWith("user%20name="));
const value = cookie ? decodeURIComponent(cookie.split("=")[1]) : "";
console.log(value);
// 出力結果: "John Doe"

このように、取得したCookieの値をdecodeURIComponent()でデコードすれば、元の値を正しく取り出せます。

エンコードとデコードのペアを忘れずに実装することが肝心ですね。

○複数ドメインでのCookie共有がうまくいかない場合

Cookieを使って複数のドメインでユーザー情報を共有したい場合、ドメインの指定方法を間違えていると思ったようにCookieが共有されないことがあります。

よくある間違いは、現在のドメインのサブドメインに対してCookieを設定しようとすることです。

例えば、”example.com”のページから”.sub.example.com”というドメイン指定でCookieを設定しても、うまく共有されません。

Cookieを複数ドメインで共有するには、ルートドメインを指定する必要があります。

つまり、”example.com”と”.sub.example.com”でCookieを共有したい場合は、”.example.com”というドメインを指定します。

document.cookie = "user=John; domain=.example.com";

この例のように、ドメインの先頭にドットをつけることで、サブドメインを含めたドメイン全体でCookieが共有されるようになります。

ただし、ブラウザのセキュリティ設定によっては、ドメインをまたいだCookieの共有が制限される場合もあります。

その場合は、サーバー側でセッション管理するなどの別の方法を検討する必要があることには注意が必要です。

●document.cookieの応用的な使い方

これまでCookieの基本的な使い方や注意点について見てきましたが、実際の開発ではもっと応用的なCookieの使い方が求められることがあります。

ここでは、よくあるCookieの応用例を3つ紹介します。

訪問回数のカウントや、最終ログイン日時の保存、カートの商品情報の保存など、実際のWebアプリケーション開発でよく使われるシーンを想定したサンプルコードを用意しました。

これらの例を参考に、Cookieを使った様々な機能実装のイメージを膨らませてみてください。

Cookieの応用的な使い方をマスターすれば、より高度なWebアプリケーション開発に挑戦できるようになるでしょう。

○サンプルコード8：訪問回数カウンター

まずは、Cookieを使って訪問回数をカウントする例です。

ユーザーがWebサイトを訪れるたびに、訪問回数を増やしてCookieに保存します。

これによって、ユーザーの訪問頻度を把握することができます。

// 現在の訪問回数を取得する
let count = parseInt(getCookie("visitCount")) || 0;

// 訪問回数を1増やす
count++;

// 訪問回数をCookieに保存する
setCookie("visitCount", count, 365);

// 訪問回数を表示する
console.log(`訪問回数: ${count}回`);

// Cookieの値を取得する関数
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
}

// Cookieに値を設定する関数
function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = date.toUTCString();
  document.cookie = `${name}=${value}; expires=${expires}; path=/`;
}

このコードでは、getCookie()関数とsetCookie()関数を使って、Cookieから訪問回数を取得し、増やした上で再度Cookieに保存しています。

訪問回数は365日間保持されるようになっています。

実行結果

訪問回数: 1回

2回目以降のアクセスでは、カウントが増えていくはずです。

訪問回数: 2回

訪問回数は、ユーザーのエンゲージメントを測る指標の1つになります。

このような機能を使えば、リピーターを識別したり、コンテンツの人気度を測ったりすることができそうですね。

○サンプルコード9：最終ログイン日時の保存

次は、ユーザーの最終ログイン日時をCookieに保存する例です。

ユーザーがログインするたびに、現在の日時をCookieに記録することで、前回のログインからどのくらいの期間が空いているかを把握できます。

// ログイン処理が成功した時点で、最終ログイン日時を記録する
setCookie("lastLogin", new Date().toISOString(), 365);

// 最終ログイン日時を取得する
const lastLogin = getCookie("lastLogin");
console.log(`最終ログイン日時: ${lastLogin}`);

// Cookieの値を取得する関数
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
}

// Cookieに値を設定する関数
function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = date.toUTCString();
  document.cookie = `${name}=${value}; expires=${expires}; path=/`;
}

このコードでは、ログイン処理が成功した時点で、setCookie()関数を使って現在の日時をISO 8601形式の文字列としてCookieに保存しています。

保存された日時は365日間保持されます。

最終ログイン日時を取得する際は、getCookie()関数を使ってCookieから値を取り出します。

実行結果

最終ログイン日時: 2023-05-25T12:34:56.789Z

最終ログイン日時を記録しておけば、ユーザーの利用頻度を分析したり、長期間ログインのないユーザーにリーチアウトしたりといったことができます。

ユーザーエンゲージメントを高める施策を打つ上で、重要な指標になるでしょう。

まとめ

さて、ここまでJavaScriptのdocument.cookieを使ったCookie操作について、基本から応用まで幅広く見てきました。

今回のdocument.cookieの知識は、きっと皆さんの開発に役立つはずです。

セキュリティにも十分気をつけ、これからも頑張っていきましょう！