2025-11-06 Reactでようやく見つける

木曜日。5:00起床。いよいよいつ起きていつ寝ていつ起きるのかが自分で分からない。
ライブ明けの平日。詩織ちゃんのビルボードライブは昨日まで、今週の週末はファンクラブイベントで来週は五木ひろしのフェス、氣志團万博とももクロラッシュだ。
それが終わればついに次のチーム案件に入る。1ヶ月間を目安にした自分の少し長めの休憩期間もそろそろ佳境である。

今日もまたStorybookの学習。今日はReactの状態管理してるデータを適用したコンポーネントをどうやってStorybookのコンポーネントのサンプルとしてカタログ化するかの理解を深めた。
使ったライブラリは初めて使うJotai。名前のとおり、日本人の開発者が作った軽量の状態管理ライブラリである。

Jotai, primitive and flexible state management for React
https://jotai.org/

特徴として、状態管理のStateにあたる部分をAtomという概念を用いてReactのuseStateフックと差別化させやすくすると共に同じように使えるようにする考え方で作られたようだ。アプリの実装側は状態管理のプロセスを考えず、アプリ全体に共有させるグローバルな状態を、ただの値として扱うのか(getter)、更新させるセッターとして扱うのか(setter)だけを考えて実装する。
Atom自体の定義は、getter関数を同時に設定することが出来るようになっていて、stateの利用時にそのgetter関数が走るという仕組みである。setter関数はただ値を更新するだけでなく、payloadを渡してそれを元に再度計算させて値を更新させることが出来るようにもなっている。

ああなんだこんなことかと思うのだが、使ってみるとこれがなかなか分かりやすい。これまでのstateとaction dispatchを逐一使い分けていた頃とは一線を画す手段である。
非同期なデータ取得もgetter関数の中に処理を入れておけば、データの取得後にコンポーネント側のレンダリングが自動的に行われるという事になるからである。useStateと同じ機能を提供できているとすぐに分かる。
ちなみに、Storybookの方はコンポーネント内で使用しているAtomに初期値を注入する事でstateの分離が出来た。これもまた分かりやすい。VueにおけるPiniaの存在になるかもしれないと思った。

夜になってウォーキングに行っていない事に気がつく。今日は中目黒から五本木に向かうルートで6kmウォーキング。時間がすぎるのが早いなあ。もっとシンプルに習慣をこなすようになっていかないと何も達成できないぞ。