React で Cookie を操作：useCookies フックとその他の実践的な方法

2024-05-11

React で Cookie を設定するには、主に以下の 2 つの方法があります。

useCookies フックは、react-cookie というライブラリを使用して、Cookie を簡単に設定および取得できるフックです。

例:

import React, { useState, useEffect } from 'react';
import { useCookies } from 'react-cookie';

const MyComponent = () => {
  const [cookies, setCookie, removeCookie] = useCookies(['myCookie']);

  const handleClick = () => {
    setCookie('myCookie', 'Hello, World!', { path: '/' });
  };

  const handleRemoveCookie = () => {
    removeCookie('myCookie');
  };

  return (
    <div>
      <button onClick={handleClick}>Cookie を設定する</button>
      <button onClick={handleRemoveCookie}>Cookie を削除する</button>
      <p>Cookie の値: {cookies.myCookie}</p>
    </div>
  );
};

export default MyComponent;

document.cookie API を使用して、Cookie を手動で設定することもできます。ただし、この方法は useCookies フックよりも煩雑で、エラー処理も自分で行う必要があります。

const setCookie = (name, value, options = {}) => {
  const expires = options.expires ?
    new Date(Date.now() + options.expires * 1000).toUTCString() :
    '';
  const path = options.path || '/';
  const domain = options.domain || '';
  const secure = options.secure ? 'secure' : '';
  const httpOnly = options.httpOnly ? 'HttpOnly' : '';
  document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires};path=${path};domain=${domain};${secure};${httpOnly}`;
};

const getCookie = (name) => {
  const cookies = document.cookie.split(';');
  for (const cookie of cookies) {
    const [key, value] = cookie.trim().split('=');
    if (key === name) {
      return decodeURIComponent(value);
    }
  }
  return '';
};

const removeCookie = (name) => {
  setCookie(name, '', { expires: -1 });
};

オプション

Cookie を設定する際に、以下のオプションを指定することができます。

expires: Cookie の有効期限 (ミリ秒単位)
path: Cookie が有効なパス
secure: Cookie が HTTPS のみで送信されるようにする
httpOnly: Cookie が JavaScript からアクセスできないようにする

注意事項

Cookie には、個人情報を含めないでください。
Cookie のサイズは 4KB までに制限されています。
ユーザーは、ブラウザの設定で Cookie を無効にすることができます。

上記以外にも、cookie-manager や js-cookie などのライブラリを使用して、React で Cookie を設定することができます。

ご自身の目的に合った方法を選択してください。

以下のサンプルコードは、useCookies フックを使用して、React で Cookie を設定および取得する方法を示しています。

import React, { useState, useEffect } from 'react';
import { useCookies } from 'react-cookie';

const MyComponent = () => {
  const [cookies, setCookie, removeCookie] = useCookies(['myCookie']);

  const handleClick = () => {
    setCookie('myCookie', 'Hello, World!', { path: '/' });
  };

  const handleRemoveCookie = () => {
    removeCookie('myCookie');
  };

  return (
    <div>
      <button onClick={handleClick}>Cookie を設定する</button>
      <button onClick={handleRemoveCookie}>Cookie を削除する</button>
      <p>Cookie の値: {cookies.myCookie}</p>
    </div>
  );
};

export default MyComponent;

このコードの説明:

import React, { useState, useEffect } from 'react';：React と useState フック、useEffect フックをインポートします。
import { useCookies } from 'react-cookie';：react-cookie ライブラリから useCookies フックをインポートします。
const [cookies, setCookie, removeCookie] = useCookies(['myCookie']);：useCookies フックを使用して、myCookie という名前の Cookie にアクセスするための変数 cookies、setCookie、removeCookie を定義します。
const handleClick = () => {：handleClick という名前の関数を定義します。
setCookie('myCookie', 'Hello, World!', { path: '/' });：myCookie という名前の Cookie に値 Hello, World! を設定します。オプション { path: '/' } は、Cookie がすべてのパスで有効になるように指定します。
};：handleClick 関数の終了を示します。
removeCookie('myCookie');：myCookie という名前の Cookie を削除します。
return (：JSX コードの返りを開始します。
<div>：div タグで囲まれた要素を作成します。
<button onClick={handleClick}>Cookie を設定する</button>：Cookie を設定する というテキストが表示されたボタンを作成し、クリック時に handleClick 関数を呼び出します。
<p>Cookie の値: {cookies.myCookie}</p>：myCookie という名前の Cookie の現在の値を表示する段落 (p) タグを作成します。
export default MyComponent;：MyComponent コンポーネントをデフォルトエクスポートします。

このコードを実行すると、以下のようになります。

ブラウザでこのページを開くと、Cookie の値: という段落に空の文字列が表示されます。
Cookie を設定する ボタンをクリックすると、myCookie という名前の Cookie に値 Hello, World! が設定されます。
ブラウザを更新すると、Cookie の値: という段落に Hello, World! と表示されます。

このサンプルコードを参考に、ご自身の目的に合った Cookie の操作を行ってください。

React で Cookie を設定するその他の方法

useCookies フックと document.cookie API 以外にも、React で Cookie を設定する方法はいくつかあります。

サードパーティ製のライブラリを使用する

cookie-manager や js-cookie などのサードパーティ製のライブラリを使用して、Cookie を設定することができます。これらのライブラリは、useCookies フックよりも多くの機能を提供している場合があります。

cookie-manager

import CookieManager from 'cookie-manager';

const setCookie = (name, value, options) => {
  CookieManager.set(name, value, options);
};

const getCookie = (name) => {
  return CookieManager.get(name);
};

const removeCookie = (name) => {
  CookieManager.remove(name);
};

js-cookie

import Cookies from 'js-cookie';

const setCookie = (name, value, options) => {
  Cookies.set(name, value, options);
};

const getCookie = (name) => {
  return Cookies.get(name);
};

const removeCookie = (name) => {
  Cookies.remove(name);
};

ローカルストレージを使用する

Cookie と同様に、ローカルストレージを使用してデータをブラウザに保存することもできます。ただし、ローカルストレージは、Cookie よりも容量が大きいため、大量のデータを保存するのに適しています。

const setItem = (key, value) => {
  localStorage.setItem(key, JSON.stringify(value));
};

const getItem = (key) => {
  const value = localStorage.getItem(key);
  return value ? JSON.parse(value) : null;
};

const removeItem = (key) => {
  localStorage.removeItem(key);
};

それぞれの方法の比較

方法	利点	欠点
`useCookies` フック	使いやすい	機能が限られている
`document.cookie` API	詳細な制御が可能	煩雑でエラー処理が必要
サードパーティ製のライブラリ	機能が豊富	ライブラリの導入が必要
ローカルストレージ	容量が大きい	Cookie に比べてセキュリティが低い