MENU

Jotai — 日本語「状態」を名前にしたatom型ライブラリ

Jotai アイキャッチ
Jotai

Jotai(じょうたい)はDaishi Kato(加藤大志)氏が2020年に公開した、React向けの状態管理ライブラリです。ライブラリ名はそのまま日本語の「状態」をローマ字表記したもので、Recoilと同じatomベースの設計思想を、より小さく・よりTypeScriptフレンドリーに再構築している点が特徴です。Poimandres(pmndrs)コレクティブ傘下で活発に開発が続いており、停滞気味のRecoilからの実質的な乗り換え先として、中規模以上のReactアプリで採用が拡大しているライブラリです。

目次

この記事の目次

  1. atomという最小単位
  2. Daishi Katoが2020年に公開
  3. 細粒度UIでの典型用途
  4. Recoil・Zustandとの違い
  5. まとめ

atomという最小単位

atomという最小単位

Jotaiの中心概念は「atom」です。atom関数に初期値を渡すだけで状態の単位が作れ、useAtomフックで読み書きするとReactのuseStateと同じ感覚で利用できます。Recoilと違いkey(文字列ID)の指定が不要で、変数として宣言されたatomそのものがIDの代わりになります。TypeScriptの型推論が自然に効くため、ジェネリクスや手書きの型注釈が少なくて済むのも実務上の利点です。

atomは他のatomを入力にして派生atomを作ることもできます。派生atomは依存するatomが更新されたときだけ再計算され、結果は自動的にメモ化されるため、Reduxのreselectやselectorと同じく派生値を宣言的に表現できます。オプションのProviderコンポーネントを使えばatomツリーをスコープ分割でき、テストやモジュール単位の独立性を確保することも可能です。

Daishi Katoが2020年に公開

Daishi Katoが2020年に公開

Jotaiは2020年10月、日本人エンジニアのDaishi Kato(加藤大志)氏が初版を公開しました。加藤氏は他にもReact用のValtio、グローバルストアを扱うZustand周辺ライブラリなど、Poimandres傘下のReact向けライブラリを多数手掛けてきた人物で、「日本人が中心になって開発する世界的なOSS」の代表例とも言える存在です。

Recoilが2020年5月、Jotaiが2020年10月とほぼ同時期に登場した中で、Jotaiは活発な開発と頻繁なメジャーアップデートで地歩を固めていきました。v2ではAPIを整理し、Reactの外(フレームワーク非依存)でもatomを利用できるようにする刷新が行われ、React以外の環境への展開も視野に入っています。Recoilのメンテ縮小がコミュニティで認識されて以降、Jotaiへの移行記事が急増し、事実上の後継ポジションを獲得しました。

細粒度UIでの典型用途

細粒度UIでの典型用途

Jotaiが力を発揮するのは「画面内に独立した状態が大量にある」UIです。Figma風のホワイトボードアプリ、ダッシュボードのウィジェット、フォームビルダーの各フィールドなど、「個別に更新されてほしいが、全体としては一貫した状態として管理したい」場面でatomの粒度が活きます。atomごとに購読を分けられるため、片方の変更が画面全体の再レンダリングを引き起こさず、性能が出やすいのが強みです。

公式の追加パッケージ「jotai-immer」「jotai-tanstack-query」「jotai-redux」などで他ライブラリとの橋渡しもでき、サーバ状態はTanStack QueryやSWRに任せ、クライアント状態だけJotaiで管理する組み合わせも一般的です。Next.jsのApp RouterではProviderを最小限のスコープに留める設計が推奨されており、サーバーコンポーネントとの境界を意識しやすいことも、Jotaiが2020年代後半に伸びている理由の1つです。

Recoil・Zustandとの違い

Recoil・Zustandとの違い

Recoilと比べたJotaiの優位点は、まず開発の活発さです。RecoilがほぼメンテモードであるのにJotaiは継続的にバージョンが上がり、Reactの新機能にも追従しています。API面でもkey不要、TypeScript型推論が自然、Suspenseとの統合がより洗練されている、といった改善が積み重ねられており、「同じ思想で書ける、より新しい選択肢」というポジションを確立しています。

同じPoimandres傘下のZustandとは設計思想が異なります。Zustandは中央集約のストアを1つ作るのに対し、Jotaiは状態をatomという原子に分散させる発想です。「大量の小さな状態を細かく管理したい」ならJotai、「アプリの中核状態をシンプルに1ヶ所で持ちたい」ならZustand、という棲み分けが現在のフロントエンド界で定着しつつあります。両者をプロジェクトで併用するチームも珍しくなく、用途に応じた使い分けが進んでいます。

まとめ

JotaiはDaishi Kato氏が2020年に公開した、atom指向のReact向け状態管理ライブラリです。Recoilの思想を継承しつつTypeScript親和性と開発の継続性で勝り、Poimandres傘下で活発に進化し続けています。細粒度のクライアント状態を扱う現代のReact開発で、代表的な選択肢の1つとしての地位を確立した存在です。

※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次