Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

株式会社サイバーエージェント 
 株式会社CyberZ OPENREC.tv 2019年度 未踏スーパークリエータ Mori Atsushi Twitter: @at_sushi_at 2019年度 未踏スーパークリエータ LINE株式会社（2023年4⽉〜） Android application engineer 
 詳解 Kotlin Coroutines [ 2021 ] Katalog / Koject / InsetsX

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

今回のゴール Jetpack ComposeでReduxっぽいアーキテクチャ 
 を試す⽅法と、そのメリット/デメリットを知る 1. 標準的なアーキテクチャの⾟み 2 . Reduxっぽいアーキテクチャを試す 3. ⾮同期処理を扱う 4 . Reducerを分割する 5. まとめ 🚀

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ViewModelも肥⼤しがち…

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

StateとActionを定義する

Slide 18

Slide 18 text

Reducerを作る

Slide 19

Slide 19 text

Storeを作る

Slide 20

Slide 20 text

StoreをCompositionLocalで提供

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

⾮同期処理を扱う 3

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Reducerを分割する 4

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Stateをネストさせる

Slide 36

Slide 36 text

各Stateに対してReducerを作る

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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