Mosh-ヘンリー合同ギベンLT-MobXの感想.pdf

Transcript

1. Copyright © Henry, Inc. All rights reserved. MobXを導入されたメンバー視点 Redux, Jotaiと比較して 川原 祐 (@task-k0414) Mosh × ヘンリー合同技術勉強会
2. Copyright © Henry, Inc. All rights reserved. name: 川原 祐 (@task-k0414) job: Frontend Engineer team: EMR joined: 去年7月 hobby: - 娘(2歳) に遊ばれること - サ活 - 麻雀 - 社内大会でトップとりました！ - キャンプ - 行けてない - ゲーム - モンハンやりたいとおもって... 自己紹介
3. Copyright © Henry, Inc. All rights reserved. 状態管理にMobXを 導入した話
4. Copyright © Henry, Inc. All rights reserved. 先日、弊社アーキテクトの @creasty がMobXを導入した話をテックブログに出 しました - https://dev.henry.jp/entry/mobx MobXを導入した話
5. Copyright © Henry, Inc. All rights reserved. MobXとは？
6. Copyright © Henry, Inc. All rights reserved. • シグナルベースの状態管理ライブラリで、関数型リアクティブプログラミン グを透過的に適用 • 「アプリケーションの状態から導出できるものは、自動的に導出されるべ き」という哲学 MobXとは？(概念)
7. Copyright © Henry, Inc. All rights reserved. • シンプルさ：ボイラープレートが少なく、直感的なコード記述が可能 • 最適なレンダリング：状態変更を自動的に追跡し、必要な時だけ再計算・再 レンダリング • アーキテクチャの自由度：特定のUIフレームワークに依存せず、アプリケー ション状態を管理可能 • 透過的な関数型リアクティブプログラミング（TFRP）：グリッチフリー、同 期的、予測可能、効率的な実装 MobXとは？(特徴)
8. Copyright © Henry, Inc. All rights reserved. • シンプルさ：ボイラープレートが少なく、直感的なコード記述が可能 • 最適なレンダリング：状態変更を自動的に追跡し、必要な時だけ再計算・再 レンダリング • アーキテクチャの自由度：特定のUIフレームワークに依存せず、アプリケー ション状態を管理可能 • 透過的な関数型リアクティブプログラミング（TFRP）：グリッチフリー、同 期的、予測可能、効率的な実装 MobXとは？(特徴)
9. Copyright © Henry, Inc. All rights reserved. • クラスベースで書けて、関数型プログラミングとオブジェクト指向のいいと こ取りできそうなライブラリ、という理解。 • 複雑なドメインをクラスベースで整理して書けそう。 MobXとは？(要するに)
10. Copyright © Henry, Inc. All rights reserved. 複雑なドメインを豊か に表現できる
11. Copyright © Henry, Inc. All rights reserved. クラスベースでドメインモデルを振る舞いまで集約して書ける カプセル化によって重要なビジネスロジックをドメインモデルに隠蔽できる 入れ子になっている複雑なドメインも直感的に実装できる 複雑なドメインを豊かに表現できる 医師の処方の指示 薬と用法などの 指示のブロック 医薬品とその成分量や 用法などの内容
12. Copyright © Henry, Inc. All rights reserved. 医師の処方の指示 薬と用法などの 指示のブロック 医薬品とその成分量や 用法などの内容 クラスベースでドメインモデルを振る舞いまで集約して書ける カプセル化によって重要なビジネスロジックをドメインモデルに隠蔽できる 入れ子になっている複雑なドメインも直感的に実装できる 複雑なドメインを豊かに表現できる 医師や患者の紐づ け 飲み合わせな どの禁忌 投薬日数 調剤の指示 医薬品の種類 成分量の算出
13. Copyright © Henry, Inc. All rights reserved. 他の状態管理ライブ ラリと比較して
14. Copyright © Henry, Inc. All rights reserved. 入れ子構造を持ったモデルを表現する（MobX Class）
15. Copyright © Henry, Inc. All rights reserved. Redux
16. Copyright © Henry, Inc. All rights reserved. Jotai
17. Copyright © Henry, Inc. All rights reserved. MobX vs Jotai
18. Copyright © Henry, Inc. All rights reserved. MobX vs Jotai
19. Copyright © Henry, Inc. All rights reserved. • オブジェクト指向の知識があれば理解しやすい • デコレーターさえ受け入れられれば、すごく簡単にかける • リアクティブプログラミングの考え方に慣れる必要がある 比較してMobXのいいところ
20. Copyright © Henry, Inc. All rights reserved. • React Functional Component は基本的にイミュータブルで単方向フローの データを要求している • MobXでは observer() を使って High-Order Component の形でリアクティ ビティを提供する • 暗黙的なところが辛くなることもありそう • Jotaiとかできっちり関数型ドメインモデリングできるとかっこいい！ とはいえ,,,
21. Copyright © Henry, Inc. All rights reserved. • モデルに状態を持っているので、コンポーネント単位で複雑でない場合は ViewModelを噛まさずにDomain Modelに直接書いている部分がある • ある程度整理しないと、Domain Model が境界を超えて肥大化するのでは • 暗黙的なところが辛くなる可能性はある。やめたくなったときにすんなりと いこうできるのか？ • ある程度はクラスベースを維持しつつも不変性や単方向フローに寄らせるこ とはできそう 今後についての個人の感想
22. Copyright © Henry, Inc. All rights reserved. • 最近流行りの AI駆動開発だと、関数型、純粋関数に寄ったほうがよいので は？ • 実はコード量が少なく、文脈がある方がLLMもミスが少ない可能性 • 世の中のコードがOOPの方が多い説 おまけ
23. Copyright © Henry, Inc. All rights reserved. https://note.com/henry_app 会社ブログやってます We are hiring!! https://henry.jp/ Thank you https://dev.henry.jp/ 技術ブログやってます