Zenn
👻

【Jotai】状態管理ツールJotaiが良さげなので触りだけ解説

に公開
Next.js
jotai
tech

はじめに

最近、個人開発でTauriを使ってwebview製デスクトップアプリを作っています。
フロントはNextjsなのですが、状態管理をしようと思ってwebと同じ感覚でReduxを導入しようと思ったのですが、redux-devtoolsを使うのが結構が難しく悩んでいました。
そんな時に、状態管理ツール含めてwebview上でも関係なく動く、Jotaiに出会いました。
今回は良いと思ったJotaiの超基本的な部分について解説しようと思います。

Jotaiを導入する

まずは、プロジェクトにJotaiを導入します。
加えて、Jotaiを視覚化できるようにjotai-devtoolsも入れます。

pnpm add jotai
pnpm add -D jotai-devtools

コンポーネント間で状態を同期する

大きく分けて次の2つのことを実施します。

  • カウントアップするコンポーネントとは別のコンポーネントにカウントを表示
  • jotaiのdev-toolsを使う

早速、上の内容が動作するコードを書いていきます。

まずは、Jotaiのデータを管理するatom.tsにカウントアップ用の変数を定義します。

app/atom.ts
import { atom } from 'jotai';

export const countAtom = atom(0);

次にカウントアップするコンポーネントを作成します。
先ほど定義したcountAtomを呼び出し、JotaiからuseAtomを使ってカウントアップした値を入れるようにします。
見た目はReactのuseStateと同じですね。

app/components/CountUp.tsx
'use client';

import { countAtom } from '../atom';
import { useAtom } from 'jotai';

export const CountUp = () => {
  const [_count, setCount] = useAtom(countAtom);
  return (
    <div>
      <div>↓カウントアップボタン</div>
      <button onClick={() => setCount((prev: number) => prev + 1)}>+1</button>
    </div>
  );
};

次に、カウントアップのデータを表示するコンポーネントを作成します。
先ほどと同様に、countAtomとuseAtomを使って、表示だけするようにします。

app/components/CountGetter.tsx
'use client';

import { countAtom } from '../atom';
import { useAtom } from 'jotai';

export const CountGetter = () => {
  const [count, _setCount] = useAtom(countAtom);
  return (
    <div>
      <div>現在のカウント</div>
      <div>{count}</div>
    </div>
  );
};

今度は、上記までとは異なり、Jotaiのデータを監視するツールとして、画面上に表示するjotai-devtoolsのコンポーネントを作成します。

app/components/JotaiDevTools.tsx
'use client';

import { DevTools } from 'jotai-devtools';

export const JotaiDevTools = () => {
  return <DevTools />;
};

最後にpage.tsx上で各コンポーネントをまとめて呼ぶようにします。

app/page.tsx
import { CountUp } from './components/CountUp';
import { CountGetter } from './components/CountGetter';
import { JotaiDevTools } from './components/JotaiDevTools';

export default function Home() {
  return (
    <>
      <JotaiDevTools />
      <CountGetter />
      <CountUp />
    </>
  );
}

実際に動かした結果が以下です。
Providerやstoreを定義していないのに、別コンポーネントでデータが同期されていますね。

そして、画面左下にある、お化け👻マークですが、これはjotai-devtoolsです。
クリックすると、DevToolsが開きます。
カウントアップすると、DevToolsの中で管理しているデータも同様に反映されているのが確認できます。
これなら、webviewのデスクトップアプリ上でも画面上で状態を確認しながら開発を進められますね．

おわりに

今回は、Jotaiの基本とdevtoolsの使い方について解説しました。
シンプルでとても使いやすくちょっと衝撃でした。
webviewアプリでも使えるのでこれからどんどん使い倒していこうと思います。

Discussion