JavaScript　クッキーを操作する：設定・取得・削除・更新方法とChromeでの確認手順

この記事では、JavaScriptを使用してクッキーを設定・取得・削除・更新する方法を詳しく解説します。

クッキーを設定する方法について教えてください。

クッキーを設定するには、document.cookieプロパティを使用します。この記事では、JavaScriptを使ってクッキーの設定・取得・削除・更新方法を詳細に解説しています。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

クッキーとは

　クッキーは、ウェブサイトがブラウザに送信して、ユーザーのデバイス（コンピューターやスマートフォン）に保存される小さなテキストファイルです。クッキーは、ウェブページがユーザーの状況や設定を記憶し、後で参照できるようにすることで、ウェブブラウジングの利便性を向上させます。

クッキーの主な用途

クッキーの主な用途には以下のようなものがあります。

クッキーの種類

クッキーの種類には以下の様なものがあります。

　クッキーを利用する際は、プライバシー保護や法的規制に留意し、適切に使用してください。ユーザーに対してクッキーの使用目的や種類を適切に説明し、必要に応じて同意を得ることが重要です。

　特に、EU域内では一般データ保護規則（GDPR）が適用され、クッキーの使用に関して厳格なルールが定められています。適切な情報提供と同意取得プロセスを実装することで、ユーザーのプライバシーを尊重し、法的な問題を回避できます。

document.cookieプロパティとは

　document.cookieプロパティは、JavaScriptを使ってウェブページのクッキーにアクセスし、操作するためのプロパティです。

これにより、ウェブサイトの開発者は、クッキーを読み取り、作成、更新、削除することができます。このプロパティを利用することで、ウェブページの状態管理やユーザー設定の保存など、様々な機能を実装することが可能になります。

document.cookieプロパティの主な特徴

以下はdocument.cookieプロパティの主な特徴です。

クッキーをコントロールする主要な関数

以下の表は、クッキーをコントロールするための主要な関数をまとめたものです。

以下に各関数の実装例を示します。

// クッキーを設定する関数
function setCookie(name, value, days) {
  let date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  let expires = "; expires=" + date.toUTCString();
  document.cookie = name + "=" + value + expires + "; path=/";
}

// クッキーを取得する関数
function getCookie(name) {
  let cookieName = name + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let cookies = decodedCookie.split(';');
  
  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim();
    if (cookie.indexOf(cookieName) === 0) {
      return cookie.substring(cookieName.length, cookie.length);
    }
  }
  return "";
}

// クッキーを削除する関数
function deleteCookie(name) {
  setCookie(name, "", -1);
}

// クッキーを更新する関数
function updateCookie(name, newValue, newDays = null) {
  let existingCookieValue = getCookie(name);
  if (existingCookieValue !== "") {
    let days = newDays ? newDays : getCookieDays(name);
    setCookie(name, newValue, days);
  }
}

// クッキーの有効期限（日数）を取得する補助関数
function getCookieDays(name) {
  // この関数は、クッキーの作成時に有効期限を取得するために使用されます。
  // 必要に応じて実装を追加してください。
}

サンプルプログラムを使った解説：クッキーの作成、読み取り、削除

　以下のサンプルプログラムでは、JavaScriptのdocument.cookieプロパティを使ってクッキーを作成、読み取り、削除する方法を説明します。

// クッキーを設定する関数
function setCookie(name, value, days) {
  let date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  let expires = "; expires=" + date.toUTCString();
  document.cookie = name + "=" + value + expires + "; path=/";
}

// クッキーを取得する関数
function getCookie(name) {
  let cookieName = name + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let cookies = decodedCookie.split(';');
  
  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim();
    if (cookie.indexOf(cookieName) === 0) {
      return cookie.substring(cookieName.length, cookie.length);
    }
  }
  return "";
}

// クッキーを削除する関数
function deleteCookie(name) {
  setCookie(name, "", -1);
}

// クッキーを設定する例
setCookie("username", "JohnDoe", 7);

// クッキーを取得する例
let username = getCookie("username");
console.log("username: " + username);

// クッキーを削除する例
deleteCookie("username");

setCookie関数では、クッキーの名前、値、有効期限（日数）を引数として受け取り、document.cookieプロパティに代入してクッキーを作成します。

getCookie関数では、クッキーの名前を引数として受け取り、document.cookieプロパティから該当するクッキーの値を取得します。クッキーが見つからない場合、空文字列を返します。

deleteCookie関数では、クッキーの名前を引数として受け取り、過去の有効期限を設定してクッキーを削除します。これは、setCookie関数を利用して、-1日の有効期限を設定することで実現されます。

Chromeでクッキーを確認する方法：開発者ツールを利用したクッキーの確認

Google Chromeブラウザでクッキーを確認する方法は、開発者ツール（DevTools）を利用して行います。以下に手順を説明します。

これらの手順に従って、Chromeブラウザでクッキーを確認・操作することができます。開発者ツールは、ウェブページのデバッグや分析に役立つ強力な機能を提供しており、クッキーの管理だけでなく、様々な用途で利用できます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

クッキーを設定・取得・削除・更新する方法を解説しました。

クッキーの設定方法や確認方法が分かりやすく理解できました。今後ウェブ開発に役立てたいと思います。

ウェブ開発において、クッキーは非常に便利な機能ですが、ユーザーのプライバシーや法的規制に配慮して使用してください。

document.cookieプロパティ以外にも、より安全で柔軟なクッキー操作を実現するためのライブラリや、新しい技術（例：Web Storage API）も存在しますので、それらも検討してみることをお勧めします。これからのウェブ開発に役立ててください。