$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ステート管理を超えるRecoil運用の考え方
Search
uhyo
January 20, 2023
Technology
16
12k
ステート管理を超えるRecoil運用の考え方
Harajuku.ts Meetup 〜 Recoilの事例集めました〜
uhyo
January 20, 2023
Tweet
Share
More Decks by uhyo
See All by uhyo
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.9k
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
7
2.4k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
3.7k
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
26
9k
React 19を概念から理解する
uhyo
22
9.7k
require(ESM)とECMAScript仕様
uhyo
6
1.9k
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
8
1.7k
Shadow DOMとCSSの現状
uhyo
11
7.3k
TypeScriptってどんな言語? 言語そのものを知る面白さ
uhyo
16
8.9k
Other Decks in Technology
See All in Technology
Hyperledger Fabric(再)入門
gakumura
3
6.7k
ARRが3年で10倍になったプロダクト開発とAI活用の軌跡
akiroom
0
150
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
30
15k
2024年のAmazon Bedrockアップデート一挙おさらい 〜まだ間に合う! re:Invent直前までの重大ニュースを速習しよう〜
minorun365
PRO
3
150
プラットフォームエンジニアリングアーキテクチャ道場 on AWS & EKS Kubernetes / Platform Engineering Architecture Dojo
riita10069
7
16k
241130紅白ぺぱ合戦LT「編集の技術」
toya524287
3
460
Behind the scenes of 24-hour global online event “JAWS PANKRATION 2024”
syoshie
0
100
A Tour of Anti-patterns for Functional Programming
guvalif
0
2.3k
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
220
Next.jsとNuxtが混在? iframeでなんとかする!
ypresto
3
2.3k
LLMOps: Eval-Centric を前提としたMLOps
asei
4
280
Android 15 でウィジェットピッカーのプレビュー画像をGlanceで魅せたい/nikkei-tech-talk-27-1
nikkei_engineer_recruiting
0
120
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Raft: Consensus for Rubyists
vanstee
136
6.7k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Designing the Hi-DPI Web
ddemaree
280
34k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
It's Worth the Effort
3n
183
27k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Code Reviewing Like a Champion
maltzj
520
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Adopting Sorbet at Scale
ufuk
73
9.1k
Transcript
None
イベント趣旨 Recoilがリリースされてから2年半が経った。 これだけ経てば使っている人も結構多いはず。 しかし、そのわりに具体的な「事例」が世に出ていない気がする。 今回は、Recoilを使いこなしている皆さんにお越しいただいて、 事例を語ってもらうことにした。
イベント趣旨 Twitterで何となくRecoil勉強会したいな~と言ったところ、 話したい人・聞きたい人がいたため開催に繋げることができた。 ありがとうございます こんな勉強会をしてほしい等のアイデアも募集中!
事前アンケート結果 参加者の皆さんにアンケートに答えていただきました。 Recoil使われていますか? 使って みたい 194 使って いる 160 使う予定はない
19
事前アンケート結果 参加者の皆さんにアンケートに答えていただきました。 RecoilとJotaiのどちらがお好きですか? Recoil 142 わから ない 202 Jotai 29
事前アンケート結果 参加者の皆さんにアンケートに答えていただきました。 RecoilとJotaiのどちらがお好きですか? Recoil 142 わから ない 202 Jotai 29
Recoilが優勢だが、浮動票が多くJotaiも 巻き返しのチャンス。 ※本イベントはRecoilをテーマにしていますが、 Jotaiもかなり似たライブラリですので、 Jotai派の方は脳内変換しながらお聞きください。
ステート管理を超える Recoil運用の考え方 Harajuku.ts Meetup ~Recoilの事例集めました~ uhyo (株式会社バベル プリンシパルエンジニア)
登壇者紹介 uhyo 2022年10月から株式会社バベル勤務。 最近サーバーサイドを見ていることも 多いが、心はフロントエンドエンジニア。 TypeScript入門書 好評発売中!→
商談解析クラウド では、フロントエンドに ReactとともにRecoilを使用。 移行が終わっていないため他の状態管理手法と混ざっているが、 Recoilに寄せていく狙いがある。 Why? How? をお話しします aileadとRecoil
このトークの要約 • 実はFluxって天才だったのでは? • Recoilくんとならやり直せる気がする
事の発端 公式サイトによれば、Reactは “A JavaScript library for building user interfaces” である。
https://reactjs.org/ より引用
事の発端 公式サイトによれば、Reactは “A JavaScript library for building user interfaces” である。
ということは、UIを構築する以外の仕事をさせないほうが筋が いいのでは? UI以外のことはReactから切り離したい。
UI以外のことの例 • 外部からのデータの読み込み • アプリケーションの状態の保持 • ビジネスロジックの計算
理想的と思われるアーキテクチャ React層 コア層 • 状態の保持 • 状態遷移の定義 • DOMへの最適化された レンダリング
整形層 • 外部からの データの読み込み • UI用にデータを整形 UIへの入力
どこかで見たような…… React層 コア層 整形層 https://facebook.github.io/flux/docs/in-depth- overview/ から引用
Fluxとどこが違うのか? Fluxだと「Store」となっているところ が、コア層と整形層に分離した。 単純なFluxだと成果物が「でかい状態 の塊」になってしまうのでつらい。 そもそも、コアな状態は少なければ 少ないほどいい。 (useMemoで済むのにuseStateを使うべきではない のと同様) あと、アクションの概念は要らない。
React層 コア層 整形層
Recoil運用のアイデア ここをRecoilにやってもらうのが 良いのでは? React層 コア層 整形層
Recoilの良いところ atom(自身で状態を保持する)とselector(ほかの状態を見て計算する) があり、コアな状態(atom)がどれなのかを設計上明らかに しやすい。 非同期ネイティブであり、非同期処理もselectorとして扱える。 (データ読み込みの結果や進捗などはコアな状態として扱う必要がない) 思想がReactと近い。「ロジック用のReact」のような使い心地。 • イミュータブル・冪等性が前提のAPI •
計算結果の一貫性保証
atomとselectorの使い分け 他に従属しない状態がatom。それ以外は何が何でもselectorに する。 例: 検索画面 • 検索条件: atom (ユーザーが独立に変更できるため) •
ページ数: atom (ユーザーが独立に変更できるため) • 検索結果: selector (上2つ(+サーバーの状態)から計算できるため) ※ページングがカーソルベースだった場合はすこし迷うが、サーバーから可能な 選択肢を取得してそのなかから選んだと考えてカーソルをatomに保存するか
Recoil層とReact層のつなぎ込み React層 コア層 整形層 出力用フック 入力用フック Recoil層とReact層の境界は当然 フック。 出力用フックは無くてもいいという 説もあるが、useMemoやuseEffect
が必要になったときのエスケープ ハッチとしては有用か。
具体例 React層 検索 条件 ページ 数 検索 結果 useSearchResult useSearchQuery
usePagination atomから始まるデータの流れが RecoilのAPIを用いて定義される。 (データフローグラフ)
具体例 React層 検索 条件 ページ 数 検索 結果 useSearchResult useSearchQuery
usePagination React層からの入力は基本的にコア 状態の変更として作用するので、 入力用フックを介してコア状態を 更新する。 グローバルなアクションといった 概念は存在せず、ユースケースに 応じた個別の入力用フックがある。 入力用フックもコア層の一部と して扱うのが筋良さそう
具体例 React層 検索 条件 ページ 数 検索 結果 useSearchResult useSearchQuery
usePagination Reactコンポーネントツリーの 上から下にデータが流れる様子に 似ているが、 Recoilを使う場合はReactに入る前 に計算が終わっているという 点が異なる。
Reactにロジックを乗せると良くない点 ReactにUI以外のことを無理にやらせると、アプリケーションの 整合性を保つのが困難になる。 例: Reactでやる場合 const [検索条件] = useState(); useEffect(()
=> { 検索結果取得(); }, [検索条件]); 検索条件変更 ↓ レンダリング ↓ useEffect発火 ↓ 検索結果取得開始 ↓ …
Reactにロジックを乗せると良くない点 ReactにUI以外のことを無理にやらせると、アプリケーションの 整合性を保つのが困難になる。 例: Reactでやる場合 const [検索条件] = useState(); useEffect(()
=> { 検索結果取得(); }, [検索条件]); 検索条件変更 ↓ レンダリング ↓ useEffect発火 ↓ 検索結果取得開始 ↓ … 検索条件が変わったのに 検索結果が前のままと いう中途半端な状態が レンダリングされて しまっている
Reactにロジックを乗せると良くない点 ReactにUI以外のことを無理にやらせると、アプリケーションの 整合性を保つのが困難になる。 例: Recoilでやる場合 検索条件変更 ↓ 検索結果取得開始 ↓ レンダリング
Recoil内部で整合性の とれた状態を計算し 終わってからReactに ステートが伝達される 検索 条件 ペー ジ数 検索 結果
ReactとRecoilの整合性保証 Reactの整合性保証 レンダリングの際は、 ある瞬間の状態がコンポーネント ツリー全体に反映される。 古い状態と新しい状態が 画面上で混在することはない。 状態→画面の整合性 Recoilの整合性保証 グラフの状態計算の際は、
ある瞬間の状態がグラフ全体に 反映される。 古い状態と新しい状態が React上で混在することはない。 グラフ→状態の整合性
ReactとRecoilの整合性保証 ここの整合性をRecoilが担当 ここの整合性はReactが担当 React層 コア層 整形層
Recoilを活用するデータフロー設計 Recoilの魅力は、atomやselectorをはじめとする シンプル・ローレベルなAPIから構成されているところ。 これらを組み合わせることで独自の機能を持ったノードを作ること ができる。 さらに、Reactよりも無理がきかない(エスケープハッチが無い)。 望ましい設計を保ちやすい。
Recoilを活用するデータフロー設計 例: 検索 条件 Graph QL GraphQLリクエストを行う selector 検索 条件
ページ 数 他の状態が変化したら リセットされるatom
まとめ Recoilをロジックに用いる設計を試している。 改めて見てみると、Fluxの良いところを受け継ぎつつ良くない ところを直したような構成になっている。 ReactはそろそろUIライブラリに専念させてあげたい。 文章で読みたい方はこちらもどうぞ(宣伝): Recoilにロジックを載せる運用戦略 https://zenn.dev/babel/articles/recoil-for-babel