[ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法

今回は、Reactを使用したフロントエンド開発において、データをcookieへ保存するだけでなく、画面上でcookie上に保存したデータを取得したり、cookie上のデータを削除する方法についてサンプルコードを用いて、解説していきます。

React + JavaScriptの環境を準備
react-cookieのインストール
react-cookieの使い方
ユーザー情報管理プログラムを作成
動作確認
1. Coopkieにデータを保存
2. Cookieに保存したデータを削除
まとめ
最後に

React + JavaScriptの環境を準備

以下の記事でOSごとの環境構築方法について解説しておりますので、参考にしてもらえたらと思います。

React + JavaScript - 開発環境構築方法(Windows & Mac)

これからReactの学習を始めていかれる方必見！本記事では、WindowsもしくはMacのPC上にReact + JavaScriptの開発環境構築をする方法についてご紹介しております。Node.jsの準備から動作の確認までまとめてますので参考になれば嬉しいです。

react-cookieのインストール

デフォルトのReact環境には、react-cookieはインストールされておりませんので、まずは準備したReactの開発環境上にインストールしていきます。

react-cookieをインストール

1
Reactのアプリフォルダへ移動
ターミナルを起動したら以下のコマンドを実行します。(アプリ名は、各々で設定したものを入力してください。)
```
cd アプリ名
```
私は、cookie_sampleという名前で作成しましたため、cookie_sampleフォルダへ移動します。
2
react-cookieをインストール
続いて、インストール用のコマンドを実行していきます。
```
npm i react-cookie
```
以下のようにエラーなくインストールが完了すればOKです。

react-cookieの使い方

使い方(書き方)のイメージとしては、以下の画像をご覧ください。

ユーザー情報管理プログラムを作成

実際にreact-cookieを使って、ユーザー情報をcookie上で管理するようなプログラムを作っていこうと思います。主な機能としては、ユーザー情報の登録(保存), 取得, 削除, 更新などになります。

index.jsを編集

CookieProviderをimportする。
Appコンポーネントをラップすることで、Appコンポーネント以下のコンポーネントでCookieの値を共有します。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { CookiesProvider } from "react-cookie";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <CookiesProvider>
            <App/>
        </CookiesProvider>
    </React.StrictMode>
);

App.jsを編集

ユーザー情報管理

useCookiesとuseStateを定義

import React, { useState } from "react";
// useCookiesをimport
import { useCookies } from "react-cookie";

const App= () => {
  // usernameの状態を管理するためのuseStateを定義
  const [UserNameVal, setUserNameVal] = useState("");
  // ageの状態を管理するためのuseStateを定義
  const [AgeVal, setAgeVal] = useState("");
  // cookie名として、usernameとageを設定する
  const [cookies, setCookie, removeCookie] = useCookies(["username", "age"]);
  return (
    <></>
  );
}

export default App;

JSX部分を記述

<></>の下に以下のコードを記述してください。

<div className="wrap">　
  <div className="main">
    <h2>ユーザー登録</h2>
    // 氏名が変更されたらuserNameChange関数を呼び出す
    <input type="text" name="useradd" onChange={(e) => userNameChange(e)} className="input_margin"  />
    // 年齢が変更されたらAgeChange関数を呼び出す
    <input type="text" name="useradd" onChange={(e) => AgeChange(e)} className="input_margin" />
    <div className="button-group">
      // 保存ボタンを押下したら、CookieDataAdd関数を呼び出す
      <button onClick={() => CookieDataAdd()}>保存</button>
      // 削除ボタンを押下したら、CookieDataDelete関数を呼び出す
      <button onClick={() => CookieDataDelete()}>削除</button>
    </div>
    <br/>
    <hr/>
    <h3>値を参照(取得)</h3>
    <p>
      氏名<br/>
      {cookies.username ? cookies.username + "さん" : ""}</p>
    <p>
      年齢<br/>
      {cookies.age ? cookies.age + "歳" : ""}
    </p>
  </div>
</div>

cookies.username ? cookies.username + “さん” : “”
→ cookies.usernameの値が取得できた場合は、「さん」を末尾につけて画面に出力。出来なかった場合は、空文字を設定。cookies.age ? cookies.age + “歳” : “”
→ cookies.ageの値が取得できた場合は、「歳」を末尾につけて画面に出力。出来なかった場合は、空文字を設定。

各関数を定義

const userNameChange = (e) => {
  setUserNameVal(e.target.value);
};

const AgeChange = (e) => {
  setAgeVal(e.target.value);
};

const CookieDataDelete = () => {
  removeCookie("username");
  removeCookie("age");
};

const CookieDataAdd = () => {
  setCookie("username", UserNameVal);
  setCookie("age", AgeVal);
};

4
全コード確認

以下が最終コードになります。(後ほど確認するcookie.cssのコードを確認出来ます。)

動作の確認をする際には、右側のプレビュー画面左下にある「Open preview in new window」をクリックしてからしてください。そうしないと正常に動作しませんのでご注意ください。

cookie.cssを作成・コードを記述

input {　
  display: block;
}

p {
  text-align: center;
}

hr {
  width: 300px;
  border-width: 2px;
  border-color: darkblue;
}

.wrap {
  width: 100%;
  margin-top: 20px;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
  margin:0 auto;
  background-color: aliceblue;
}

.button-group {
  display: flex;
}

.input_margin {
  margin-bottom: 10px;
}

App.jsでcookie.cssをimportする

App.jsの上部に以下のコードを追加しましょう。追加をし忘れるとCSSが反映されませんので注意してください。

import "./cookie.css";

動作確認

コードの記述がすべて完了したら各種動作確認をしていきましょう。

まずは、ローカルサーバーを起動します。作業ディレクトリに移動していることを確認したらターミナルで以下のコマンドを実行しましょう。

npm start

http://localhost:3000 へアクセスすると、次のような画面が表示されるはずです。

Coopkieにデータを保存

Cookieにデータの保存をし、デベロッパーツールでデータの確認をしてみましょう。

氏名は「Utubou」, 年齢に「27」と入力し、保存ボタンを押下してみます。

すると、同時に値が取得されていると思います。取得されていない場合は、正常に保存が出来ていないため、ブラウザのCookieの有効化がONになっているか確認してみてください。

加えて、デベロッパーツールを開き、Applicationタブを開きましょう。

緑枠の箇所に、保存したデータが確認出来ればOKです。

Cookieに保存したデータを削除

保存されていることと、データが画面上で取得できていることが確認出来たらそのまま削除ボタンを押下してみてください。

すると、画面上で取得できていたデータが消えます。デベロッパーツール上でcookieのデータをリロードしてみても同じくデータが削除されていることが分かります。

まとめ

フロントエンド側でReactを用いる際にcookieを使用する場合は、react-cookie(useCookies)を使うと便利
react-cookie(useCookies)を使うことで、cookieの取得/保存/削除の全てが出来る

英語になりますが、使い方をまとめたGithubが公開されてますので、こちらも参考にしてみてください。

cookies/packages/react-cookie at main · bendotcodes/cookies

Load and save cookies within your Web application. Contribute to bendotcodes/cookies development by creating an account on GitHub.

JavaScriptコードを用いて、cookieにデータを保存・取得(参照)する方法については以下の記事でご紹介してます。

[ JavaScript 基礎 ] Cookieにデータを保存 / データの取得(参照)

今回は、JavaScriptを用いて、Cookie(クッキー)にデータを保存する方法(document.cookie)と保存したデータを参照する方法についてサンプルコードを用いながら解説しています。デベロッパーツール上でのCookieデータの確認方法も載せてます。

最後に

ここまで読んで頂き、有り難う御座います。

プログラミングを学習している方やこれから始めようと考えている方にお知らせです。

⇩⇩⇩⇩⇩⇩

独学で学習を続けても中々、理解が定着しない..
エラーが出てしまい、想定した結果が得られない…
フリーランスとしてデビューしたいが何からやったらいいかわからない…

などの悩みがある方必見！

実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。

話題のAWSから人気のプログラミング言語Pythonをはじめとする
様々な教材(HTML/CSS, JavaScript, jQuery, Ruby, Ruby on rails, PHP, Laravel, Django, Java, Spring, Git, 機械学習, Linuxなど50種類以上)が無制限で閲覧可能。
オンラインで利用できるため、隙間時間で学習ができる。
質問掲示板も24時間活用することが出来るため、自己学習や教材を通した学習で詰まっても気軽に質問が出来る。(講師の方が回答してくれる時間帯は、10:00～22:00です。)
入会金不要で、あわないなと思ったらいつでも退会が可能。
実務経験が３年以上の選び抜かれたエンジニアが講師として多数在籍しているため、安心。
質問掲示板でも解決できない疑問や悩みは、プラン応じて月1回~受講できるオンラインレッスンで解決できる