Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ステート管理を超えるRecoil運用の考え方

uhyo
January 20, 2023

 ステート管理を超えるRecoil運用の考え方

Harajuku.ts Meetup 〜 Recoilの事例集めました〜

uhyo

January 20, 2023
Tweet

More Decks by uhyo

Other Decks in Technology

Transcript

  1. イベント趣旨
    Recoilがリリースされてから2年半が経った。
    これだけ経てば使っている人も結構多いはず。
    しかし、そのわりに具体的な「事例」が世に出ていない気がする。
    今回は、Recoilを使いこなしている皆さんにお越しいただいて、
    事例を語ってもらうことにした。

    View full-size slide

  2. イベント趣旨
    Twitterで何となくRecoil勉強会したいな~と言ったところ、
    話したい人・聞きたい人がいたため開催に繋げることができた。
    ありがとうございます
    こんな勉強会をしてほしい等のアイデアも募集中!

    View full-size slide

  3. 事前アンケート結果
    参加者の皆さんにアンケートに答えていただきました。
    Recoil使われていますか?
    使って
    みたい
    194
    使って
    いる
    160
    使う予定はない 19

    View full-size slide

  4. 事前アンケート結果
    参加者の皆さんにアンケートに答えていただきました。
    RecoilとJotaiのどちらがお好きですか?
    Recoil
    142
    わから
    ない
    202
    Jotai 29

    View full-size slide

  5. 事前アンケート結果
    参加者の皆さんにアンケートに答えていただきました。
    RecoilとJotaiのどちらがお好きですか?
    Recoil
    142
    わから
    ない
    202
    Jotai 29
    Recoilが優勢だが、浮動票が多くJotaiも
    巻き返しのチャンス。
    ※本イベントはRecoilをテーマにしていますが、
    Jotaiもかなり似たライブラリですので、
    Jotai派の方は脳内変換しながらお聞きください。

    View full-size slide

  6. ステート管理を超える
    Recoil運用の考え方
    Harajuku.ts Meetup ~Recoilの事例集めました~
    uhyo (株式会社バベル プリンシパルエンジニア)

    View full-size slide

  7. 登壇者紹介
    uhyo
    2022年10月から株式会社バベル勤務。
    最近サーバーサイドを見ていることも
    多いが、心はフロントエンドエンジニア。
    TypeScript入門書
    好評発売中!→

    View full-size slide

  8. 商談解析クラウド では、フロントエンドに
    ReactとともにRecoilを使用。
    移行が終わっていないため他の状態管理手法と混ざっているが、
    Recoilに寄せていく狙いがある。
    Why? How? をお話しします
    aileadとRecoil

    View full-size slide

  9. このトークの要約
    • 実はFluxって天才だったのでは?
    • Recoilくんとならやり直せる気がする

    View full-size slide

  10. 事の発端
    公式サイトによれば、Reactは
    “A JavaScript library for building user interfaces” である。
    https://reactjs.org/ より引用

    View full-size slide

  11. 事の発端
    公式サイトによれば、Reactは
    “A JavaScript library for building user interfaces” である。
    ということは、UIを構築する以外の仕事をさせないほうが筋が
    いいのでは?
    UI以外のことはReactから切り離したい。

    View full-size slide

  12. UI以外のことの例
    • 外部からのデータの読み込み
    • アプリケーションの状態の保持
    • ビジネスロジックの計算

    View full-size slide

  13. 理想的と思われるアーキテクチャ
    React層
    コア層 • 状態の保持
    • 状態遷移の定義
    • DOMへの最適化された
    レンダリング
    整形層
    • 外部からの
    データの読み込み
    • UI用にデータを整形
    UIへの入力

    View full-size slide

  14. どこかで見たような……
    React層
    コア層
    整形層
    https://facebook.github.io/flux/docs/in-depth-
    overview/
    から引用

    View full-size slide

  15. Fluxとどこが違うのか?
    Fluxだと「Store」となっているところ
    が、コア層と整形層に分離した。
    単純なFluxだと成果物が「でかい状態
    の塊」になってしまうのでつらい。
    そもそも、コアな状態は少なければ
    少ないほどいい。
    (useMemoで済むのにuseStateを使うべきではない
    のと同様)
    あと、アクションの概念は要らない。
    React層
    コア層
    整形層

    View full-size slide

  16. Recoil運用のアイデア
    ここをRecoilにやってもらうのが
    良いのでは?
    React層
    コア層
    整形層

    View full-size slide

  17. Recoilの良いところ
    atom(自身で状態を保持する)とselector(ほかの状態を見て計算する)
    があり、コアな状態(atom)がどれなのかを設計上明らかに
    しやすい。
    非同期ネイティブであり、非同期処理もselectorとして扱える。
    (データ読み込みの結果や進捗などはコアな状態として扱う必要がない)
    思想がReactと近い。「ロジック用のReact」のような使い心地。
    • イミュータブル・冪等性が前提のAPI
    • 計算結果の一貫性保証

    View full-size slide

  18. atomとselectorの使い分け
    他に従属しない状態がatom。それ以外は何が何でもselectorに
    する。
    例: 検索画面
    • 検索条件: atom (ユーザーが独立に変更できるため)
    • ページ数: atom (ユーザーが独立に変更できるため)
    • 検索結果: selector (上2つ(+サーバーの状態)から計算できるため)
    ※ページングがカーソルベースだった場合はすこし迷うが、サーバーから可能な
    選択肢を取得してそのなかから選んだと考えてカーソルをatomに保存するか

    View full-size slide

  19. Recoil層とReact層のつなぎ込み
    React層
    コア層
    整形層
    出力用フック
    入力用フック
    Recoil層とReact層の境界は当然
    フック。
    出力用フックは無くてもいいという
    説もあるが、useMemoやuseEffect
    が必要になったときのエスケープ
    ハッチとしては有用か。

    View full-size slide

  20. 具体例
    React層
    検索
    条件
    ページ

    検索
    結果
    useSearchResult
    useSearchQuery
    usePagination
    atomから始まるデータの流れが
    RecoilのAPIを用いて定義される。
    (データフローグラフ)

    View full-size slide

  21. 具体例
    React層
    検索
    条件
    ページ

    検索
    結果
    useSearchResult
    useSearchQuery
    usePagination
    React層からの入力は基本的にコア
    状態の変更として作用するので、
    入力用フックを介してコア状態を
    更新する。
    グローバルなアクションといった
    概念は存在せず、ユースケースに
    応じた個別の入力用フックがある。
    入力用フックもコア層の一部と
    して扱うのが筋良さそう

    View full-size slide

  22. 具体例
    React層
    検索
    条件
    ページ

    検索
    結果
    useSearchResult
    useSearchQuery
    usePagination
    Reactコンポーネントツリーの
    上から下にデータが流れる様子に
    似ているが、
    Recoilを使う場合はReactに入る前
    に計算が終わっているという
    点が異なる。

    View full-size slide

  23. Reactにロジックを乗せると良くない点
    ReactにUI以外のことを無理にやらせると、アプリケーションの
    整合性を保つのが困難になる。
    例: Reactでやる場合
    const [検索条件] = useState();
    useEffect(() => {
    検索結果取得();
    }, [検索条件]);
    検索条件変更

    レンダリング

    useEffect発火

    検索結果取得開始


    View full-size slide

  24. Reactにロジックを乗せると良くない点
    ReactにUI以外のことを無理にやらせると、アプリケーションの
    整合性を保つのが困難になる。
    例: Reactでやる場合
    const [検索条件] = useState();
    useEffect(() => {
    検索結果取得();
    }, [検索条件]);
    検索条件変更

    レンダリング

    useEffect発火

    検索結果取得開始


    検索条件が変わったのに
    検索結果が前のままと
    いう中途半端な状態が
    レンダリングされて
    しまっている

    View full-size slide

  25. Reactにロジックを乗せると良くない点
    ReactにUI以外のことを無理にやらせると、アプリケーションの
    整合性を保つのが困難になる。
    例: Recoilでやる場合
    検索条件変更

    検索結果取得開始

    レンダリング Recoil内部で整合性の
    とれた状態を計算し
    終わってからReactに
    ステートが伝達される
    検索
    条件
    ペー
    ジ数
    検索
    結果

    View full-size slide

  26. ReactとRecoilの整合性保証
    Reactの整合性保証
    レンダリングの際は、
    ある瞬間の状態がコンポーネント
    ツリー全体に反映される。
    古い状態と新しい状態が
    画面上で混在することはない。
    状態→画面の整合性
    Recoilの整合性保証
    グラフの状態計算の際は、
    ある瞬間の状態がグラフ全体に
    反映される。
    古い状態と新しい状態が
    React上で混在することはない。
    グラフ→状態の整合性

    View full-size slide

  27. ReactとRecoilの整合性保証
    ここの整合性をRecoilが担当
    ここの整合性はReactが担当
    React層
    コア層
    整形層

    View full-size slide

  28. Recoilを活用するデータフロー設計
    Recoilの魅力は、atomやselectorをはじめとする
    シンプル・ローレベルなAPIから構成されているところ。
    これらを組み合わせることで独自の機能を持ったノードを作ること
    ができる。
    さらに、Reactよりも無理がきかない(エスケープハッチが無い)。
    望ましい設計を保ちやすい。

    View full-size slide

  29. Recoilを活用するデータフロー設計
    例: 検索
    条件
    Graph
    QL
    GraphQLリクエストを行う
    selector
    検索
    条件
    ページ

    他の状態が変化したら
    リセットされるatom

    View full-size slide

  30. まとめ
    Recoilをロジックに用いる設計を試している。
    改めて見てみると、Fluxの良いところを受け継ぎつつ良くない
    ところを直したような構成になっている。
    ReactはそろそろUIライブラリに専念させてあげたい。
    文章で読みたい方はこちらもどうぞ(宣伝):
    Recoilにロジックを載せる運用戦略
    https://zenn.dev/babel/articles/recoil-for-babel

    View full-size slide