Jetpack Composeで Reduxっぽいアーキテクチャを試す

Transcript

1. .PSJ
   "UTVTIJ 4IJCVZBBQL
    
  +FUQBDL
   $PNQPTFͰ 
 3FEVYͬΆ͍ΞʔΩςΫνϟΛࢼ͢ +FUQBDL
   $PNQPTF "SDIJUFDUVSF

2. 株式会社サイバーエージェント 
 株式会社CyberZ OPENREC.tv 2019年度 未踏スーパークリエータ Mori Atsushi Twitter: @at_sushi_at

   2019年度 未踏スーパークリエータ LINE株式会社（2023年4⽉〜） Android application engineer 
 詳解 Kotlin Coroutines [ 2021 ] Katalog / Koject / InsetsX

3. Jetpack Compose進めています IUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHMJOE@EFTJHO@TZTUFN@XJUI@KFUQBDL@DPNQPTF

4. 今回のゴール Jetpack ComposeでReduxっぽいアーキテクチャ 
 を試す⽅法と、そのメリット/デメリットを知る 1. 標準的なアーキテクチャの⾟み 2 . Reduxっぽいアーキテクチャを試す

   3. ⾮同期処理を扱う 4 . Reducerを分割する 5. まとめ 🚀

5. 標準的な 
 アーキテクチャの⾟み 1

6. 標準的なアーキテクチャ ViewModelでStateを保持

7. 複雑な画⾯だと… Composableの引数が爆増 🤯 ࡍݶͳ͘૿͑Δ 
 εςʔτͱΞΫγϣϯ

8. バケツリレー地獄 7JFX.PEFM 4UBUF "DUJPO 末端のコンポーネントと情報をやりとりするのは⼤変

9. 単⼀責任の原則の違反 末端の変更に合わせて、親も変更する必要が出てくる มߋ͕ൃੜʂ ߹Θͤͯมߋ ߹Θͤͯมߋ ߹Θͤͯมߋ

10. 不要なrecomposeの発⽣ ը໘ߋ৽ SFDPNQPTF SFDPNQPTF SFDPNQPTF 末端の更新のために親もrecomposeされる

11. ViewModelも肥⼤しがち…

12. ViewModelを分割？ 状態を共有する場合等、上⼿く⾏かないケースも 7JFX.PEFM 7JFX.PEFM

13. Reduxっぽい 
 アーキテクチャを試す 2

14. Reudxとは？ JavaScriptアプリケーションのための状態管理ライブラリ 7JFX "DUJPO 3FEVDFS 4UPSF

15. Storeをコンポーネントが参照できる 4UPSF

16. GitHubに実装を上げています IUUQTHJUIVCDPNNPSJBUTVTIJLSFEVY

17. StateとActionを定義する

18. Reducerを作る

19. Storeを作る

20. StoreをCompositionLocalで提供

21. Storeの値を監視する 4FMFDUͰඞཁͳ஋ 
 ͚ͩ؂ࢹ͢Δ

22. ActionをDispatchする %JTQBUDIFSΛऔಘ "DUJPOΛݺͼग़͠

23. アプリケーションロジックを 
 CompositionLocalで提供する？ 暗黙的なデータ渡しになる 公式では推奨されていない Reduxを再現するため、今回は許容 🤔

24. 💡 単⼀⽅向のデータフローが強制される 複雑なステートが管理しやすくなる ⼊⼒と出⼒がはっきりしてるのでテストが書きやすい デメリット：単純なステート管理には書くコードが増える バケツリレー地獄からの脱却 ⼦コンポーネントで直接Storeを参照できる デメリット：やりすぎると再利⽤性に⽀障が出る メリット/デメリット

25. ⾮同期処理を扱う 3

26. ⾮同期処理は苦⼿ Action -> Stateのデータフローから逸脱するため いろんな対応⽅法が存在 ActionCreator内で処理する ActionとIntentを分けてその間で処理する Reducer内で処理する（the Composable Architecture）

27. MiddlewareでSideE ff ectをもたせる 7JFX "DUJPO 3FEVDFS 4UPSF .JEEMFXBSF "1*
    
    %#

28. Actionを定義する UIからのActionに、⾮同期処理のActionを加える

29. SideE ff ectでActionを監視する 3FRVFTUͷ"DUJPOΛ
    ؂ࢹ͢Δ

30. SideE ff ectでActionを監視する ,PUMJO
    $PSPVUJOFTͰ
    ඇಉظॲཧΛݺͼग़͠

31. SideE ff ectでActionを監視する ඇಉظॲཧ͕׬ྃͨ͠Β
    "DUJPOΛݺͼग़͢

32. Flowも監視してActionに変換可能

33. Reducerを分割する 4

34. Reducerが肥⼤化する… ࡍݶͳ͘૿͑Δ 
 "DUJPO

35. Stateをネストさせる

36. 各Stateに対してReducerを作る

37. 複数のReducerを組み合わせる ਌4UBUFΛ෼ղ ਌4UBUFΛ૊ΈཱͯΔ

38. まとめ Reduxっぽいアーキテクチャを導⼊することで、 
 いくつかの課題が解決できそう 
 軽量なアーキテクチャなので、コピペして使うことができる 検討事項： 
 簡単な画⾯には不要な複雑さをもたらす 学習コストがかかる

    標準的なアーキテクチャを逸脱することによる不安感