【React】カウントアップ機能を作成して”Jotai”に入門する

2023.02.19

Reactでアプリケーションの状態管理を行うのにはReduxを利用するのがポピュラーですが、Reduxは学習コストが少し高い上に、コードが複雑になりがちというデメリットがあります。

そこで、比較的小規模なアプリケーションであればその代替として、Jotaiという状態管理ライブラリを使用するのが最近のトレンドのようですので入門してみました。

本記事では、Jotaiを使ってカウントアップ機能を作成し、実例を基にJotaiを使用するメリットと使用方法をわかりやすく解説します。

目次
  1. Jotaiとは何か
  2. Jotaiを使ってカウントアップ機能を作る
  3. まとめ

Jotaiとは何か

Jotaiとは、Reactアプリケーションの状態管理を簡単かつ効率的に行うために開発されたライブラリです。

npm trendsを見てわかるように最近絶好調です。

Jotaiを使用するメリット

Jotaiを使用することによるメリットには以下のようなものがあります。

簡単な記述方法

Reduxと比較して、簡潔で直感的な記述方法となっており、atomを作成し、useAtomフックを使用するだけで、状態の更新が可能です。

パフォーマンスの向上

Jotaiは、状態の変更に伴って、Reactコンポーネントを再レンダリングする回数を最小限に抑えます。

これは、Jotaiがatomの更新を追跡し、必要なときだけ再レンダリングするためです。

Jotaiを使用するデメリット

Jotaiを使用することによるデメリットには以下のようなものがあります。

過剰な使用

Jotaiは、小規模なアプリケーションでは過剰に使用する必要がない場合があります。

状態管理ライブラリを使用するかどうかを判断するには、アプリケーションの規模と複雑さを考慮する必要があります。

Reduxとの比較

Jotaiは、Reduxと比較して、より小さくシンプルなライブラリですが、Reduxが提供する一連の機能をすべてカバーするわけではありません。

useStateではなくJotaiを採用する理由

ReactのuseStateフックは、Reactコンポーネント内で状態を管理するための機能です。

大規模なアプリケーションを開発する場合、useStateでは以下の問題が発生する可能性があります。

コンポーネント間の状態の共有が難しい

useStateを使用すると、その状態はReactコンポーネント内でのみ使用できます。つまり、コンポーネント間で状態を共有することができません。このため、複数のコンポーネントが同じ状態を共有する必要がある場合、コンポーネント間で状態を渡したり、親コンポーネントで状態を管理したりする必要があります。

コンポーネントが複雑になりやすい

大規模なアプリケーションでは、状態が多数のコンポーネントにまたがる場合があります。この場合、useStateを使用すると、コンポーネント内に複数の状態を管理する必要があるため、コンポーネントが複雑になりやすいという問題があります。

コンポーネントが再レンダリングされる回数が増える

useStateを使用すると、状態が変更されるたびにコンポーネントが再レンダリングされます。状態が多数のコンポーネントにまたがる場合、状態が変更されるたびに多数のコンポーネントが再レンダリングされるため、パフォーマンスが低下する可能性があります。

状態の更新が複雑になる

useStateを使用すると、状態の更新を行うために、新しい状態を作成する必要があります。複数の状態を管理する必要がある場合、状態の更新が複雑になる可能性があります。

Jotaiを使ってカウントアップ機能を作る

上記より、Jotaiとは何者なのかをなんとなく理解いただけたと思うので、実際にカウントアップ機能を作りながら、具体的なJotaiの使い方を見ていきましょう！

作成するのはこちらです。

+1、-1と、指定した数だけ追加することができる機能です。

作成手順

  1. Reactプロジェクト立ち上げ
  2. jotaiライブラリのinstall
  3. アプリケーション全体で使用する状態（atom）の設定
  4. Viewの作成

1. Reactプロジェクト立ち上げ

以下コマンドを実行して、npm を使ってReactプロジェクトを立ち上げます。

% npx create-react-app react-jotai

2. jotaiライブラリのinstall

% npm install jotai

Jotai, primitive and flexible state management for React
Jotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by combining atoms and renders ar...
jotai.org

3. アプリケーション全体で使用する状態（atom）の設定

srcディレクトリに、jotaiディレクトリを作成し、atomファイルを作成して、その中でアプリケーション全体で使用する状態を定義します。

import { atom } from "jotai";

export const counterAtom = atom(0);

jotaiのatomを使用して状態を定義することができ、initialStateは0であることを意味しています。

ここで作成したcounterAtomという変数は、アプリケーション全体で使用することができます。

4. Viewの作成

import { useAtom } from "jotai";
import { useState } from "react";
import "./App.css";
import { counterAtom } from "./jotai/atoms";

function App() {
  const [count, setCount] = useAtom(counterAtom);
  const [incrementAmount, setIncrementAmount] = useState(2);

  return (
    <div className="App">
      <h1>カウント数: {count}</h1>
      <div>
        <button onClick={() => setCount(count + 1)}>+1</button>
        <button onClick={() => setCount(count - 1)}>-1</button>
      </div>
      <div>
        <label style={{ display: "block" }}>
          1カウントで追加したい数を入力してください
        </label>
        <input
          onChange={(e) => setIncrementAmount(Number(e.target.value))}
          value={incrementAmount}
        />
        <button onClick={() => setCount(count + incrementAmount)}>追加</button>
      </div>
    </div>
  );
}

export default App;

3で作成したcounterAtomをimport して、jotaiのuseAtomを使用してcountの状態を扱います。

特徴的なのはそれくらいで、ReactのhooksであるuseStateを使用した場合とほぼほぼ同じように使うことができます。

まとめ

Jotaiは状態管理を行うためのライブラリであり、useStateライクでとっかかり易く、学習コスト低く習得することができるため状態管理を行う際の選択肢として検討したいものです。

以上、ご覧頂きありがとうございました。

コメント