Composeのイベント地獄から脱出しよう！ The Elm Architectureの導入にみる可能性

2025/9/24 After DroidKaigi 2025 from ピクシブ

↓ 配信アーカイブはこちら！！
https://youtu.be/P5h4isMYmMY

-------------------------------------------

# Composeのイベント地獄から脱出しよう！The Elm Architectureの導入にみる可能性

Composeでは、複数のUIパーツから成るコンポーネントを関数として手軽にコンポーネント化できます。
しかしその反面、UIコンポーネントから発生するイベント(タップ, 文字の入力, etc)を引数として宣言する必要があり、複雑な画面ではComposableの引数の数は爆発的に増加します。特に巨大な画面ではイベントの数がプログラマには把握するのが困難なほどに膨れ上がり、Composableの引数に大量のイベントが宣言される「イベント地獄」に陥ります。
このセッションでは、「イベント地獄」を緩和するために、The Elm Architectureの思想をComposeに持ち込んで試行錯誤した過程を紹介します。
具体的には、Elm ArchitectureのMsg, Updateの考え方をComposeでどのように実現するのか、導入の結果どんなメリット・デメリットがあったのか、実際のプロダクトに適用した際の内容を交えてお伝えします。
なお、最終的にElm Architectureは採用しないという判断に至りましたが、その過程で見えてきた知見や他のMVI実装への応用のポテンシャルなど、Composeを利用した開発全般にも活かせるような内容です。

Transcript

1. @Composable internal fun ProposalScreen( uiState: ProposalUiState, windowInsets: WindowInsets, onAppBarBackButtonClick: () -> Unit, onAppBarShareButtonClick: () -> Unit, onBottomBarPrevProposalButtonClick: () -> Unit, onBottomBarNextProposalButtonClick: () -> Unit, onBottomBarLikeButtonClick: () -> Unit, onPullToRefresh: () -> Unit, onErrorRetryButtonClick: () -> Unit, onShareButtonClick: () -> Unit, onLikeButtonClick: () -> Unit, onSpeakerExpandButtonClick: () -> Unit, onSpeakerUrlClick: (Uri) -> Unit, onSpeakerHistoryItemClick: (Uri) -> Unit, ) { イベント地獄、書いてますか？
2. @Composable internal fun ProposalScreen( uiState: ProposalUiState, windowInsets: WindowInsets, onAppBarBackButtonClick: () -> Unit, onAppBarShareButtonClick: () -> Unit, onBottomBarPrevProposalButtonClick: () -> Unit, onBottomBarNextProposalButtonClick: () -> Unit, onBottomBarLikeButtonClick: () -> Unit, onPullToRefresh: () -> Unit, onErrorRetryButtonClick: () -> Unit, onShareButtonClick: () -> Unit, onLikeButtonClick: () -> Unit, onSpeakerExpandButtonClick: () -> Unit, onSpeakerUrlClick: (Uri) -> Unit, onSpeakerHistoryItemClick: (Uri) -> Unit, ) Kotlin
3. interface ProposalScreenEvents { fun onAppBarBackButtonClick() fun onAppBarShareButtonClick() fun onBottomBarPrevProposalButtonClick() fun onBottomBarNextProposalButtonClick() fun onBottomBarLikeButtonClick() fun onPullToRefresh() fun onErrorRetryButtonClick() fun onShareButtonClick() fun onLikeButtonClick() fun onSpeakerExpandButtonClick() fun onSpeakerUrlClick(url: Uri) fun onSpeakerHistoryItemClick(itemUrl: Uri) } @Composable internal fun ProposalScreen( uiState: ProposalUiState, events: ProposalScreenEvents, ) Kotlin
4. interface ProposalScreenEvents { fun onAppBarBackButtonClick() fun onAppBarShareButtonClick() fun onBottomBarPrevProposalButtonClick() fun onBottomBarNextProposalButtonClick() fun onBottomBarLikeButtonClick() fun onPullToRefresh() fun onErrorRetryButtonClick() fun onShareButtonClick() fun onLikeButtonClick() fun onSpeakerExpandButtonClick() fun onSpeakerUrlClick(url: Uri) fun onSpeakerHistoryItemClick(itemUrl: Uri) } @Composable internal fun ProposalScreen( uiState: ProposalUiState, events: ProposalScreenEvents, ) Kotlin
5. DroidKaigi 2025 Composeのイベント地獄から脱出 しよう！ The Elm Architectureの 導入にみる可能性 wcaokaze Android Engineer @ Palcy
6. wcaokaze わかおかぜ Androidアプリエンジニア Jetpack Composeが好き
7. なぜイベント地獄に陥るのか？
10. @Composable internal fun ProposalScreen( uiState: ProposalUiState, ) { ... } Kotlin
11. @Composable internal fun ProposalScreen( uiState: ProposalUiState, onLikeButtonClick: () -> Unit, ) { ... } Kotlin
12. @Composable internal fun ProposalScreen( uiState: ProposalUiState, onLikeButtonClick: () -> Unit, ) { ... } Kotlin
13. @Composable internal fun ProposalScreen( uiState: ProposalUiState, onLikeButtonClick: () -> Unit, ) { ... } Kotlin
14. @Composable internal fun ProposalScreen( uiState: ProposalUiState, onLikeButtonClick: () -> Unit, ) { ... } Kotlin
15. @Composable internal fun ProposalScreen( uiState: ProposalUiState, onLikeButtonClick: () -> Unit, ) { ... } Kotlin
16. @Composable internal fun ProposalScreen( uiState: ProposalUiState, onLikeButtonClick: () -> Unit, onGoButtonClick: () -> Unit, ) { ... } Kotlin
17. @Composable internal fun ProposalScreen( uiState: ProposalUiState, onLikeButtonClick: () -> Unit, onGoButtonClick: () -> Unit, onSwitchCheckedChange: (Boolean) -> Unit, ) { ... } Kotlin
18. @Composable internal fun ProposalScreen( uiState: ProposalUiState, onLikeButtonClick: () -> Unit, onGoButtonClick: () -> Unit, onSwitchCheckedChange: (Boolean) -> Unit, onCheckboxCheckedChange: (Boolean) -> Unit, ) { ... } Kotlin
19. イベント地獄の原因はパーツが多いこと？
20. イベント地獄の原因はパーツが多いこと？ 🙅
21. イベント地獄の原因はパーツが多いこと？ 🙅 イベントが多いときにイベントの宣言が多いのは当たり前
23. Scaffold( topBar = { @OptIn(ExperimentalMaterial3Api::class) TopAppBar( title = { }, navigationIcon = { IconButton( onClick = onAppBarBackButtonClick, ) { Icon( imageVector = Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back", ) } }, actions = { IconButton( onClick = onShareButtonClick, ) { Icon( imageVector = Icons.Default.Share, contentDescription = "Share", ) } }, windowInsets = windowInsets, ) }, bottomBar = { BottomAppBar( contentPadding = PaddingValues(horizontal = 16.dp), windowInsets = windowInsets, ) { BottomBarButton( icon = Icons.AutoMirrored.Default.KeyboardArrowLeft, text = "前へ", onClick = onBottomBarPrevProposalButtonClick, ) BottomBarButton( icon = Icons.AutoMirrored.Default.KeyboardArrowRight, text = "次へ", onClick = onBottomBarNextProposalButtonClick, ) Spacer( modifier = Modifier .weight(1.0f) ) BottomBarButton( icon = Icons.Default.FavoriteBorder, text = "いいね", onClick = onBottomBarLikeButtonClick, ) } }, contentWindowInsets = windowInsets, ) { innerPadding -> LoadingUi( state = uiState.proposal, error = { _, _ -> ErrorUi( onRetryButtonClick = onErrorRetryButtonClick, ) } ) { proposal, isReloading -> @OptIn(ExperimentalMaterial3Api::class) PullToRefreshBox( isRefreshing = isReloading, onRefresh = onPullToRefresh, modifier = Modifier .padding(innerPadding) .fillMaxSize() ) { Column( modifier = Modifier .background(MaterialTheme.colorScheme.background) .verticalScroll(rememberScrollState()) .padding(16.dp) ) { Column( modifier = Modifier .fillMaxWidth() ) { Text( text = proposal.title, style = MaterialTheme.typography.headlineMedium ) val formattedDate = remember(proposal.date) { Kotlin
24. Scaffold( topBar = { @OptIn(ExperimentalMaterial3Api::class) TopAppBar( title = { }, navigationIcon = { IconButton( onClick = onAppBarBackButtonClick, ) { Icon( imageVector = Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back", ) } }, actions = { IconButton( onClick = onShareButtonClick, ) { Icon( imageVector = Icons.Default.Share, contentDescription = "Share", ) } }, windowInsets = windowInsets, ) }, bottomBar = { BottomAppBar( contentPadding = PaddingValues(horizontal = 16.dp), windowInsets = windowInsets, ) { BottomBarButton( icon = Icons.AutoMirrored.Default.KeyboardArrowLeft, text = "前へ", onClick = onBottomBarPrevProposalButtonClick, ) BottomBarButton( icon = Icons.AutoMirrored.Default.KeyboardArrowRight, text = "次へ", onClick = onBottomBarNextProposalButtonClick, ) Spacer( modifier = Modifier .weight(1.0f) ) BottomBarButton( icon = Icons.Default.FavoriteBorder, text = "いいね", onClick = onBottomBarLikeButtonClick, ) } }, contentWindowInsets = windowInsets, ) { innerPadding -> LoadingUi( state = uiState.proposal, error = { _, _ -> ErrorUi( onRetryButtonClick = onErrorRetryButtonClick, ) } ) { proposal, isReloading -> @OptIn(ExperimentalMaterial3Api::class) PullToRefreshBox( isRefreshing = isReloading, onRefresh = onPullToRefresh, modifier = Modifier .padding(innerPadding) .fillMaxSize() ) { Column( modifier = Modifier .background(MaterialTheme.colorScheme.background) .verticalScroll(rememberScrollState()) .padding(16.dp) ) { Column( modifier = Modifier .fillMaxWidth() ) { Text( text = proposal.title, style = MaterialTheme.typography.headlineMedium ) val formattedDate = remember(proposal.date) { Kotlin
25. @Composable internal fun Speaker( speaker: Proposal.Speaker, modifier: Modifier = Modifier, ) { Column { Text("登壇者プロフィール") Column { Row { AsyncImage(speaker.avatarUrl) Text(speaker.name) } Text(speaker.description) if (speaker.url != null) { Kotlin
26. @Composable private fun SpeakerHistory( history: Proposal.Speaker.History, modifier: Modifier = Modifier, ) { Column { for (item in history.items) { Row { Text(item.date) Text(history.title) } } } } Kotlin
27. @Composable internal fun ProposalScreen( uiState: ProposalUiState, ) { ... Speaker( speaker = uiState.proposal.speaker ) ... } Kotlin
28. @Composable internal fun ProposalScreen( uiState: ProposalUiState, ) { ... Speaker( speaker = uiState.proposal.speaker ) ... } Kotlin
29. @Composable internal fun Speaker( speaker: Proposal.Speaker, modifier: Modifier = Modifier, ) { ... SpeakerHistory( history = speaker.history ) ... } Kotlin
30. @Composable internal fun Speaker( speaker: Proposal.Speaker, modifier: Modifier = Modifier, ) { ... SpeakerHistory( history = speaker.history ) ... } Kotlin
31. @Composable fun ProposalScreen() { Speaker( speaker = uiState.proposal.speaker ) } @Composable fun Speaker() { SpeakerHistory( history = speaker.history ) } @Composable fun SpeakerHistory() { } Kotlin
32. @Composable fun ProposalScreen() { Speaker( speaker = uiState.proposal.speaker ) } @Composable fun Speaker() { SpeakerHistory( history = speaker.history ) } @Composable fun SpeakerHistory() { } Kotlin
33. @Composable fun ProposalScreen() { Speaker( speaker = uiState.proposal.speaker ) } @Composable fun Speaker() { SpeakerHistory( history = speaker.history ) } @Composable fun SpeakerHistory( onItemClick: (Uri) -> Unit, ) { Kotlin
34. @Composable fun ProposalScreen() { Speaker( speaker = uiState.proposal.speaker ) } @Composable fun Speaker() { SpeakerHistory( history = speaker.history, onItemClick = { uri -> navController.navigate() }, ) } Kotlin
35. @Composable fun ProposalScreen() { Speaker( speaker = uiState.proposal.speaker ) } @Composable fun Speaker( onHistoryItemClick: (Uri) -> Unit, ) { SpeakerHistory( history = speaker.history, onItemClick = onHistoryItemClick, ) } Kotlin
36. @Composable fun ProposalScreen( onSpeakerHistoryItemClick: (Uri) -> Unit, ) { Speaker( speaker = uiState.proposal.speaker, onHistoryItemClick = onSpeakerHistoryItemClick, ) } @Composable fun Speaker( onHistoryItemClick: (Uri) -> Unit, ) Kotlin
37. ProposalScreen( uiState = uiState, onSpeakerHistoryItemClick = { uri -> navController.navigate(...) }, ) @Composable fun ProposalScreen( onSpeakerHistoryItemClick: (Uri) -> Unit, ) Kotlin
38. ProposalScreen AppBar ProposalDescription Speaker SpeakerHistory
39. ProposalScreen AppBar ProposalDescription Speaker SpeakerHistory onItemClick
40. ProposalScreen AppBar ProposalDescription Speaker SpeakerHistory onItemClick onSpeakerHistoryItemClick
41. ProposalScreen AppBar ProposalDescription Speaker SpeakerHistory onItemClick onSpeakerHistoryItemClick onHistoryItemClick
42. ProposalScreen AppBar Proposal Speaker SpeakerHistory ErrorUi LikeButton ShareButton TableOfContents BottomBar PullToRefreshBox ShareButton LikeButton NextProposalButton PrevProposalButton
43. ProposalScreen AppBar Proposal Speaker SpeakerHistory ErrorUi LikeButton ShareButton TableOfContents BottomBar PullToRefreshBox ShareButton LikeButton NextProposalButton PrevProposalButton onClick onClick onClick onClick onClick onClick onPullToRefresh onRetryButtonClick onItemClick onUrlClick
44. ProposalScreen AppBar Proposal Speaker SpeakerHistory ErrorUi LikeButton ShareButton TableOfContents BottomBar PullToRefreshBox ShareButton LikeButton NextProposalButton PrevProposalButton onClick onClick onClick onClick onClick onClick onPullToRefresh onRetryButtonClick onItemClick onUrlClick onHistoryItemClick onShareButtonClick onLikeButtonClick onShareButtonClick onPrevProposalButtonClick onNextProposalButtonClick onLikeButtonClick
45. ProposalScreen AppBar Proposal Speaker SpeakerHistory ErrorUi LikeButton ShareButton TableOfContents BottomBar PullToRefreshBox ShareButton LikeButton NextProposalButton PrevProposalButton onClick onClick onClick onClick onClick onClick onPullToRefresh onRetryButtonClick onItemClick onUrlClick onHistoryItemClick onShareButtonClick onLikeButtonClick onShareButtonClick onPrevProposalButtonClick onNextProposalButtonClick onLikeButtonClick onAppBarShareButtonClick onBottomBarPrevProposalButtonClick onBottomBarNextProposalButtonClick onBottomBarLikeButtonClick onPullToRefresh onErrorRetryButtonClick onProposalLikeButtonClick onProposalShareButtonClick onSpeakerUrlClick onSpeakerHistoryItemClick
46. 公式の見解
47. 納得できるものが少ない 再利用性が向上する 同時実行の問題を回避できる コードの複雑さが軽減される 動作を理解しやすくなる 依存関係が明示的である デバッグが容易である
48. 納得できるものが少ない 再利用性が向上する 同時実行の問題を回避できる コードの複雑さが軽減される 動作を理解しやすくなる 依存関係が明示的である デバッグが容易である
49. @Composable fun LikeButton( onClick: () -> Unit, modifier: Modifier = Modifier, ) { IconButton( onClick = onClick, modifier = modifier ) { Icon( imageVector = Icons.Default.Favorite, contentDescription = "Like", ) } } Kotlin 汎用性が高い！
50. @Composable internal fun Speaker( speaker: Proposal.Speaker, onUrlClick: (Uri) -> Unit, onHistoryItemClick: (Uri) -> Unit, modifier: Modifier = Modifier, ) { Column( modifier = modifier .padding(16.dp) ) { Text( text = "登壇者プロフィール", ) Column( modifier = Modifier Kotlin
51. interface ProposalScreenEvents { fun onAppBarBackButtonClick() fun onAppBarShareButtonClick() fun onBottomBarPrevProposalButtonClick() fun onBottomBarNextProposalButtonClick() fun onBottomBarLikeButtonClick() fun onPullToRefresh() fun onErrorRetryButtonClick() fun onShareButtonClick() fun onLikeButtonClick() fun onSpeakerExpandButtonClick() fun onSpeakerUrlClick(url: Uri) fun onSpeakerHistoryItemClick(itemUrl: Uri) } Kotlin
52. @Composable internal fun ProposalScreen( uiState: ProposalUiState, events: ProposalScreenEvents, ) Kotlin
53. ProposalScreen( uiState = uiState, events = object : ProposalScreenEvents { override fun onAppBarBackButtonClick() { ... } override fun onAppBarShareButtonClick() { ... } override fun onBottomBarPrevProposalButtonClick() { ... } override fun onBottomBarNextProposalButtonClick() { ... } override fun onBottomBarLikeButtonClick() { ... } override fun onPullToRefresh() { ... } override fun onErrorRetryButtonClick() { ... } override fun onShareButtonClick() { ... } override fun onLikeButtonClick() { ... } override fun onSpeakerExpandButtonClick() { ... } override fun onSpeakerUrlClick(url: Uri) { ... } override fun onSpeakerHistoryItemClick(itemUrl: Uri) { ... } } ) Kotlin
54. ProposalScreen( uiState = uiState, events = remember { object : ProposalScreenEvents { override fun onAppBarBackButtonClick() { ... } override fun onAppBarShareButtonClick() { ... } override fun onBottomBarPrevProposalButtonClick() { ... } override fun onBottomBarNextProposalButtonClick() { ... } override fun onBottomBarLikeButtonClick() { ... } override fun onPullToRefresh() { ... } override fun onErrorRetryButtonClick() { ... } override fun onShareButtonClick() { ... } override fun onLikeButtonClick() { ... } override fun onSpeakerExpandButtonClick() { ... } override fun onSpeakerUrlClick(url: Uri) { ... } override fun onSpeakerHistoryItemClick(itemUrl: Uri) { ... } } Kotlin
55. ProposalScreen( uiState = uiState, events = remember(viewModel, coroutineScope, context) { object : ProposalScreenEvents { override fun onAppBarBackButtonClick() { ... } override fun onAppBarShareButtonClick() { ... } override fun onBottomBarPrevProposalButtonClick() { ... } override fun onBottomBarNextProposalButtonClick() { ... } override fun onBottomBarLikeButtonClick() { ... } override fun onPullToRefresh() { ... } override fun onErrorRetryButtonClick() { ... } override fun onShareButtonClick() { ... } override fun onLikeButtonClick() { ... } override fun onSpeakerExpandButtonClick() { ... } override fun onSpeakerUrlClick(url: Uri) { ... } override fun onSpeakerHistoryItemClick(itemUrl: Uri) { ... } } Kotlin
56. @Composable internal fun ProposalScreen( uiState: ProposalUiState, events: ProposalScreenEvents, ) { Scaffold( topBar = { AppBar( events::onAppBarBackButtonClick, events::onAppBarShareButtonClick ) }, bottomBar = { BottomBar( events::onBottomBarPrevProposalButtonClick, events::onBottomBarNextProposalButtonClick, events::onBottomBarLikeButtonClick Kotlin
57. @Composable internal fun ProposalScreen( uiState: ProposalUiState, events: ProposalScreenEvents, ) { Scaffold( topBar = { AppBar( events ) }, bottomBar = { BottomBar( events Kotlin
58. イベントをまとめると… • どんなイベントが発生するのかわかりづらくなる • 呼び出しコードが複雑になる • 必要以上の引数を子孫Composableに渡す
59. The Elm Architecture
60. -- MODEL type alias Model = { proposal: LoadingState Proposal } init : Model init = { proposal = Loading } -- MSG type Msg = ShareButtonClick | LikeButtonClick | SpeakerHistoryItemClick Uri -- UPDATE update : Msg -> Model -> Model Elm
61. // MODEL data class Model( val proposal: LoadingState<Proposal> ) fun init(): Model = Model(Loading) // MSG sealed class Msg { data object ShareButtonClick : Msg() data object LikeButtonClick : Msg() data class SpeakerHistoryItemClick(val url: Uri) : Msg() } // UPDATE fun update(msg: Msg, model: Model): Model { return when (msg) { is Msg.ShareButtonClick -> model Kotlin
62. 重要な概念 • Model • View • Msg • Update
63. data class Model( val proposal: LoadingState<Proposal> ) Kotlin
64. fun view(model: Model): Html<Msg> { return div( attrs = listOf(), children = listOf( appBar(), when (model.proposal) { is Loading -> loadingView() is Error -> errorView() is Success -> div( attrs = listOf(), children = listOf( proposalView(model.proposal.value) ) ) }, bottomBar(), ) ) Kotlin
65. fun likeButton(): Html<Msg> { return button( attrs = listOf( onClick(Msg::LikeButtonClick) ), children = listOf( img( attrs = listOf( src("like.png") ), children = listOf() ) ) ) } Kotlin
66. fun likeButton(): Html<Msg> { return button( attrs = listOf( onClick(Msg::LikeButtonClick) ), children = listOf( img( attrs = listOf( src("like.png") ), children = listOf() ) ) ) } Kotlin イベント宣言が ない！
67. sealed class Msg { data object AppBarBackButtonClick : Msg() data object AppBarShareButtonClick : Msg() data object BottomBarPrevProposalButtonClick : Msg() data object BottomBarNextProposalButtonClick : Msg() data object BottomBarLikeButtonClick : Msg() data object PullToRefresh : Msg() data object ErrorRetryButtonClick : Msg() data object ShareButtonClick : Msg() data object LikeButtonClick : Msg() data object SpeakerExpandButtonClick : Msg() data class SpeakerUrlClick(val uri: Uri) : Msg() data class SpeakerHistoryItemClick(val url: Uri) : Msg() } Kotlin
68. fun likeButton(): Html<Msg> { return button( attrs = listOf( onClick(Msg::LikeButtonClick) ), children = listOf( img( attrs = listOf( src("like.png") ), children = listOf() ) ) ) } Kotlin
69. fun update(msg: Msg, model: Model): Model { return when (msg) { is Msg.AppBarBackButtonClick -> ... is Msg.AppBarShareButtonClick -> ... is Msg.BottomBarPrevProposalButtonClick -> ... is Msg.BottomBarNextProposalButtonClick -> ... is Msg.BottomBarLikeButtonClick -> ... is Msg.PullToRefresh -> ... is Msg.ErrorRetryButtonClick -> ... is Msg.ShareButtonClick -> ... is Msg.LikeButtonClick -> ... is Msg.SpeakerExpandButtonClick -> ... is Msg.SpeakerUrlClick -> ... is Msg.SpeakerHistoryItemClick -> ... } } Kotlin
70. fun update(msg: Msg, model: Model): Model { return when (msg) { is Msg.AppBarBackButtonClick -> ... is Msg.AppBarShareButtonClick -> ... is Msg.BottomBarPrevProposalButtonClick -> ... is Msg.BottomBarNextProposalButtonClick -> ... is Msg.BottomBarLikeButtonClick -> ... is Msg.PullToRefresh -> ... is Msg.ErrorRetryButtonClick -> ... is Msg.ShareButtonClick -> ... is Msg.LikeButtonClick -> ... is Msg.SpeakerExpandButtonClick -> ... is Msg.SpeakerUrlClick -> ... is Msg.SpeakerHistoryItemClick -> ... } } Kotlin 発生したMsg 新しいModel 現在のModel
71. fun update(msg: Msg, model: Model): Model { return when (msg) { is Msg.AppBarBackButtonClick -> ... is Msg.AppBarShareButtonClick -> ... is Msg.BottomBarPrevProposalButtonClick -> ... is Msg.BottomBarNextProposalButtonClick -> ... is Msg.BottomBarLikeButtonClick -> ... is Msg.PullToRefresh -> ... is Msg.ErrorRetryButtonClick -> ... is Msg.ShareButtonClick -> ... is Msg.LikeButtonClick -> { model.copy(proposal = いいね完了後の状態) } is Msg.SpeakerExpandButtonClick -> ... is Msg.SpeakerUrlClick -> ... is Msg.SpeakerHistoryItemClick -> ... } Kotlin
72. fun update(msg: Msg, model: Model): Model fun view(model: Model): Html<Msg> Kotlin
73. fun update(msg: Msg, model: Model): Model fun view(model: Model): Html<Msg> Model Html Msg
74. sealed class Msg { data object AppBarBackButtonClick : Msg() data object BottomBarPrevProposalButtonClick : Msg() data object BottomBarNextProposalButtonClick : Msg() data object PullToRefresh : Msg() data object ErrorRetryButtonClick : Msg() data object ShareButtonClick : Msg() data object LikeButtonClick : Msg() data class SpeakerHistoryItemClick(val url: Uri) : Msg() } fun view(model: Model): Html<Msg> fun proposalView(proposal: Proposal): Html<Msg> fun speakerView(speaker: Speaker): Html<Msg> Kotlin イベントはここにま とめられる イベント宣言なし
75. Composeに導入する Elm ArchitectureをCompose上で再現することができれば イベント地獄から脱出できるのではないか？
76. Composeに当てはめてみる
77. data class Model( val proposal: LoadingState<Proposal> ) Kotlin
78. fun view(model: Model): Html<Msg> { return div( attrs = listOf(), children = listOf( appBar(), when (model.proposal) { is Loading -> loadingView() is Error -> errorView() is Success -> div( attrs = listOf(), children = listOf( proposalView(model.proposal.value) ) ) }, bottomBar(), ) ) Kotlin @Composable fun View(model: Model) { Column { AppBar() when (model.proposal) { is Loading -> { LoadingUi() } is Error -> { ErrorUi() } is Success -> { Proposal( proposal = model. ) } } BottomBar()
79. var model by remember { mutableStateOf(Model(Loading)) } View( model = model ) Kotlin
80. sealed class Msg { data object AppBarBackButtonClick : Msg() data object AppBarShareButtonClick : Msg() data object BottomBarPrevProposalButtonClick : Msg() data object BottomBarNextProposalButtonClick : Msg() data object BottomBarLikeButtonClick : Msg() data object PullToRefresh : Msg() data object ErrorRetryButtonClick : Msg() data object ShareButtonClick : Msg() data object LikeButtonClick : Msg() data object SpeakerExpandButtonClick : Msg() data class SpeakerUrlClick(val uri: Uri) : Msg() data class SpeakerHistoryItemClick(val url: Uri) : Msg() } Kotlin
81. fun update(msg: Msg, model: Model): Model { return when (msg) { is Msg.AppBarBackButtonClick -> ... is Msg.AppBarShareButtonClick -> ... is Msg.BottomBarPrevProposalButtonClick -> ... is Msg.BottomBarNextProposalButtonClick -> ... is Msg.BottomBarLikeButtonClick -> ... is Msg.PullToRefresh -> ... is Msg.ErrorRetryButtonClick -> ... is Msg.ShareButtonClick -> ... is Msg.LikeButtonClick -> ... is Msg.SpeakerExpandButtonClick -> ... is Msg.SpeakerUrlClick -> ... is Msg.SpeakerHistoryItemClick -> ... } } Kotlin
82. Composeはupdate関数を実行しない どこかでこんな感じのコードを書く必要がある model = update(msg, model)
83. @Composable private fun LikeButton( modifier: Modifier = Modifier, ) { IconButton( onClick = { }, modifier = modifier ) { Icon( imageVector = Icons.Default.FavoriteBorder, contentDescription = "Like", ) } } Kotlin
84. @Composable private fun LikeButton( modifier: Modifier = Modifier, ) { IconButton( onClick = { model = update(Msg.LikeButtonClick, model) }, modifier = modifier ) { Icon( imageVector = Icons.Default.FavoriteBorder, contentDescription = "Like", ) } } Kotlin
85. @Composable private fun LikeButton( onMsg: (Msg) -> Unit, modifier: Modifier = Modifier, ) { IconButton( onClick = { model = update(Msg.LikeButtonClick, model) }, modifier = modifier ) { Icon( imageVector = Icons.Default.FavoriteBorder, contentDescription = "Like", ) } } Kotlin 引数を追加
86. var model by remember { mutableStateOf(Model(Loading)) } View( model = model, onMsg = { msg -> model = update(msg, model) } ) @Composable private fun LikeButton( onMsg: (Msg) -> Unit, modifier: Modifier = Modifier, ) { IconButton( onClick = { model = update(Msg.LikeButtonClick, model) Kotlin 引数を追加 updateを 呼べる！
87. var model by remember { mutableStateOf(Model(Loading)) } View( model = model, onMsg = { msg -> model = update(msg, model) } ) @Composable private fun LikeButton( onMsg: (Msg) -> Unit, modifier: Modifier = Modifier, ) { IconButton( onClick = { onMsg(Msg.LikeButtonClick) } Kotlin
88. var model by remember { mutableStateOf(Model(Loading)) } View( model = model, onMsg = { msg -> model = update(msg, model) } ) @Composable private fun LikeButton( onMsg: (Msg) -> Unit, modifier: Modifier = Modifier, ) { IconButton( onClick = { onMsg(Msg.LikeButtonClick) } Kotlin LikeButtonClick
89. @Composable fun View( model: Model, onMsg: (Msg) -> Unit ) { 途中のComposable( onMsg = onMsg ) } @Composable fun 途中のComposable( onMsg: (Msg) -> Unit ) { LikeButton( onMsg = onMsg ) } Kotlin
90. @Composable private fun LikeButton(onMsg: (Msg) -> Unit) { Icon( imageVector = Icons.Default.FavoriteBorder, modifier = modifier .pointerInput(Unit) { awaitEachGesture { detectGestures( onClick = {}, onLongClick = {}, onDoubleClick = {}, onSwipeLeft = {}, onSwipeUp = {}, onSwipeRight = {}, onSwipeBottom = {} ) } } Kotlin
91. @Composable private fun LikeButton(onMsg: (Msg) -> Unit) { Icon( imageVector = Icons.Default.FavoriteBorder, modifier = modifier .pointerInput(Unit) { awaitEachGesture { detectGestures( onClick = { onMsg(Msg.LikeButtonClick) }, onLongClick = { onMsg(Msg.LikeButtonLongClick) }, onDoubleClick = { onMsg(Msg.LikeButtonDoubleClick) }, onSwipeLeft = { onMsg(Msg.LikeButtonSwipeLeft) }, onSwipeUp = { onMsg(Msg.LikeButtonSwipeUp) }, onSwipeRight = { onMsg(Msg.LikeButtonSwipeRight) }, onSwipeBottom = { onMsg(Msg.LikeButtonSwipeBottom) } ) } } Kotlin
92. @Composable private fun LikeButton(onMsg: (Msg) -> Unit) { Icon( imageVector = Icons.Default.FavoriteBorder, modifier = modifier .pointerInput(Unit) { awaitEachGesture { detectGestures( onClick = { onMsg(Msg.LikeButtonClick) }, onLongClick = { onMsg(Msg.LikeButtonLongClick) }, onDoubleClick = { onMsg(Msg.LikeButtonDoubleClick) }, onSwipeLeft = { onMsg(Msg.LikeButtonSwipeLeft) }, onSwipeUp = { onMsg(Msg.LikeButtonSwipeUp) }, onSwipeRight = { onMsg(Msg.LikeButtonSwipeRight) }, onSwipeBottom = { onMsg(Msg.LikeButtonSwipeBottom) } ) } } Kotlin 7種類のイベントすべてを onMsgひとつで捌く！
93. ProposalScreen AppBar Proposal Speaker SpeakerHistory ErrorUi LikeButton ShareButton TableOfContents BottomBar PullToRefreshBox ShareButton LikeButton NextProposalButton PrevProposalButton onClick onClick onClick onClick onClick onClick onPullToRefresh onRetryButtonClick onItemClick onUrlClick onHistoryItemClick onShareButtonClick onLikeButtonClick onShareButtonClick onPrevProposalButtonClick onNextProposalButtonClick onLikeButtonClick onAppBarShareButtonClick onBottomBarPrevProposalButtonClick onBottomBarNextProposalButtonClick onBottomBarLikeButtonClick onPullToRefresh onErrorRetryButtonClick onProposalLikeButtonClick onProposalShareButtonClick onSpeakerUrlClick onSpeakerHistoryItemClick
94. ProposalScreen AppBar Proposal Speaker SpeakerHistory ErrorUi LikeButton ShareButton TableOfContents BottomBar PullToRefreshBox ShareButton LikeButton NextProposalButton PrevProposalButton onMsg onMsg onMsg onMsg onMsg onMsg onMsg onMsg onMsg onMsg onMsg onMsg onMsg onMsg
95. イベントをまとめると… • どんなイベントが発生するのかわかりづらくなる • 呼び出しコードが複雑になる • 必要以上の引数を子孫Composableに渡す
96. @Composable fun LikeButton( onMsg: (Msg) -> Unit, modifier: Modifier = Modifier, ) { IconButton( onClick = { onMsg(Msg.LikeButtonClick) }, modifier = modifier ) { Icon( imageVector = Icons.Default.FavoriteBorder, contentDescription = "Like", ) } } Kotlin
97. @Composable fun LikeButton( onMsg: (Msg) -> Unit, modifier: Modifier = Modifier, ) { IconButton( onClick = { onMsg(Msg.LikeButtonClick) }, modifier = modifier ) { Icon( imageVector = Icons.Default.FavoriteBorder, contentDescription = "Like", ) } } Kotlin
98. @Composable fun LikeButton( onMsg: (Msg) -> Unit, modifier: Modifier = Modifier, ) { IconButton( onClick = { onMsg(Msg.LikeButtonClick) }, modifier = modifier ) { Icon( imageVector = Icons.Default.FavoriteBorder, contentDescription = "Like", ) } } Kotlin 実際にはこれしか 発生しない
99. sealed class Msg { data object AppBarBackButtonClick : Msg() data object AppBarShareButtonClick : Msg() data object BottomBarPrevProposalButtonClick : Msg() data object BottomBarNextProposalButtonClick : Msg() data object BottomBarLikeButtonClick : Msg() data object PullToRefresh : Msg() data object ErrorRetryButtonClick : Msg() data object ShareButtonClick : Msg() data object LikeButtonClick : Msg() data object SpeakerExpandButtonClick : Msg() data class SpeakerUrlClick(val uri: Uri) : Msg() data class SpeakerHistoryItemClick(val url: Uri) : Msg() } Kotlin
100. sealed class Msg { sealed class AppBarMsg : Msg() { data object BackButtonClick : AppBarMsg() data object ShareButtonClick : AppBarMsg() } sealed class BottomBarMsg : Msg() { data object PrevProposalButtonClick : BottomBarMsg() data object NextProposalButtonClick : BottomBarMsg() data object LikeButtonClick : BottomBarMsg() } data object PullToRefresh : Msg() data object ShareButtonClick : Msg() data object LikeButtonClick : Msg() sealed class SpeakerMsg : Msg() { data class UrlClick(val uri: Uri) : SpeakerMsg() sealed class HistoryMsg : SpeakerMsg() { data class ItemClick(val url: Uri) : HistoryMsg() Kotlin
101. @Composable internal fun AppBar( onMsg: (AppBarMsg) -> Unit ) @Composable internal fun BottomBar( onMsg: (BottomBarMsg) -> Unit ) Kotlin
102. sealed class AppBarMsg : Msg() { data object BackButtonClick : AppBarMsg() data object ShareButtonClick : AppBarMsg() } @Composable internal fun AppBar( onMsg: (AppBarMsg) -> Unit ) sealed class BottomBarMsg : Msg() { data object PrevProposalButtonClick : BottomBarMsg() data object NextProposalButtonClick : BottomBarMsg() data object LikeButtonClick : BottomBarMsg() } @Composable internal fun BottomBar( onMsg: (BottomBarMsg) -> Unit ) Kotlin
103. @Composable internal fun AppBar( onMsg: (AppBarMsg) -> Unit ) @Composable internal fun ProposalScreen( uiState: ProposalUiState, onMsg: (Msg) -> Unit ) { AppBar( onMsg = onMsg ) } Kotlin 型が一致しない
104. Msg AppBarMsg
105. (A, B, C) -> R 共変 反変
106. (A, B, C) -> R 共変 反変 Function<in A, in B, in C, out R> Function<? super A, ? super B, ? super C, ? extends R> と同じ！
107. Msg AppBarMsg (Msg) -> Unit (AppBarMsg) -> Unit
108. @Composable internal fun AppBar( onMsg: (AppBarMsg) -> Unit ) @Composable internal fun ProposalScreen( uiState: ProposalUiState, onMsg: (Msg) -> Unit ) { AppBar( onMsg = onMsg ) } Kotlin そのまま渡せる！
109. ？
110. 気になる人は… 「ジェネリクス　変性」で検索！
111. @Composable internal fun AppBar( onMsg: (AppBarMsg) -> Unit ) @Composable internal fun ProposalScreen( uiState: ProposalUiState, onMsg: (Msg) -> Unit ) { AppBar( onMsg = onMsg ) } Kotlin 型が一致しない そのまま渡せる！
112. 仕上げ
113. View( model = model, onMsg = { msg -> model = update(msg, model) } ) fun update(msg: Msg, model: Model): Model { return when (msg) { is AppBarMsg.BackButtonClick -> ... is AppBarMsg.ShareButtonClick -> ... is BottomBarMsg.PrevProposalButtonClick -> ... is BottomBarMsg.NextProposalButtonClick -> ... is Msg.PullToRefresh -> ... is Msg.ErrorRetryButtonClick -> ... is Msg.LikeButtonClick -> ... is Msg.SpeakerMsg.UrlClick -> ... is Msg.SpeakerMsg.HistoryMsg.ItemClick -> ... Kotlin
114. View( model = model, onMsg = { msg -> model = when (msg) { is AppBarMsg.BackButtonClick -> ... is AppBarMsg.ShareButtonClick -> ... is BottomBarMsg.PrevProposalButtonClick -> ... is BottomBarMsg.NextProposalButtonClick -> ... is Msg.PullToRefresh -> ... is Msg.ErrorRetryButtonClick -> ... is Msg.LikeButtonClick -> ... is Msg.SpeakerMsg.UrlClick -> ... is Msg.SpeakerMsg.HistoryMsg.ItemClick -> ... } } ) Kotlin
115. View( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> ... is AppBarMsg.ShareButtonClick -> ... is BottomBarMsg.PrevProposalButtonClick -> ... is BottomBarMsg.NextProposalButtonClick -> ... is Msg.PullToRefresh -> ... is Msg.ErrorRetryButtonClick -> ... is Msg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.SpeakerMsg.UrlClick -> ... is Msg.SpeakerMsg.HistoryMsg.ItemClick -> ... } } ) Kotlin
116. 完成形
117. val viewModel = TODO() val model = viewModel.model ProposalScreen( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> { navController.popBackStack() } is BottomBarMsg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.PullToRefresh -> { viewModel.reloadProposal() } is Msg.ErrorRetryButtonClick -> { Kotlin
118. val viewModel = TODO() val model = viewModel.model ProposalScreen( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> { navController.popBackStack() } is BottomBarMsg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.PullToRefresh -> { viewModel.reloadProposal() } is Msg.ErrorRetryButtonClick -> { Kotlin
119. val viewModel: ProposalViewModel = koinViewModel() val model = viewModel.model ProposalScreen( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> { navController.popBackStack() } is BottomBarMsg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.PullToRefresh -> { viewModel.reloadProposal() } is Msg.ErrorRetryButtonClick -> { Kotlin
120. val viewModel: ProposalViewModel = koinViewModel() val model = viewModel.model ProposalScreen( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> { navController.popBackStack() } is BottomBarMsg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.PullToRefresh -> { viewModel.reloadProposal() } is Msg.ErrorRetryButtonClick -> { Kotlin
121. val viewModel: ProposalViewModel = koinViewModel() val model = viewModel.model ProposalScreen( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> { navController.popBackStack() } is BottomBarMsg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.PullToRefresh -> { viewModel.reloadProposal() } is Msg.ErrorRetryButtonClick -> { Kotlin
122. val viewModel: ProposalViewModel = koinViewModel() val model = viewModel.model ProposalScreen( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> { navController.popBackStack() } is BottomBarMsg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.PullToRefresh -> { viewModel.reloadProposal() } is Msg.ErrorRetryButtonClick -> { Kotlin
123. val viewModel: ProposalViewModel = koinViewModel() val model = viewModel.model ProposalScreen( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> { navController.popBackStack() } is BottomBarMsg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.PullToRefresh -> { viewModel.reloadProposal() } is Msg.ErrorRetryButtonClick -> { Kotlin
124. val viewModel: ProposalViewModel = koinViewModel() val model = viewModel.model ProposalScreen( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> { navController.popBackStack() } is BottomBarMsg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.PullToRefresh -> { viewModel.reloadProposal() } is Msg.ErrorRetryButtonClick -> { Kotlin Recomposed!
125. @Immutable sealed class ProposalMsg { data object PullToRefresh : ProposalMsg() data object ErrorRetryButtonClick : ProposalMsg() data object ShareButtonClick : ProposalMsg() data object LikeButtonClick : ProposalMsg() } @Composable internal fun ProposalScreen( model: ProposalModel, onMsg: (ProposalMsg) -> Unit ) Kotlin
126. @Immutable sealed class ProposalMsg { data object PullToRefresh : ProposalMsg() data object ErrorRetryButtonClick : ProposalMsg() data object ShareButtonClick : ProposalMsg() data object LikeButtonClick : ProposalMsg() } @Composable internal fun ProposalScreen( model: ProposalModel, onMsg: (ProposalMsg) -> Unit ) Kotlin
127. @Immutable sealed class SpeakerMsg : ProposalMsg() { data object ExpandButtonClick : SpeakerMsg() data class UrlClick(val uri: Uri) : SpeakerMsg() } @Composable internal fun Speaker( speaker: Proposal.Speaker, onMsg: (SpeakerMsg) -> Unit ) Kotlin
128. @Immutable sealed class HistoryMsg : SpeakerMsg() { data class ItemClick(val item: Speaker.History.Item) : HistoryMsg() } @Composable private fun SpeakerHistory( history: Proposal.Speaker.History, onMsg: (HistoryMsg) -> Unit ) Kotlin
129. Modifier.clickable( onClick = { onMsg(HistoryMsg.ItemClick(item)) } ) Kotlin
130. val viewModel: ProposalViewModel = koinViewModel() val model = viewModel.model ProposalScreen( model = model, onMsg = { msg -> when (msg) { is AppBarMsg.BackButtonClick -> { navController.popBackStack() } is BottomBarMsg.LikeButtonClick -> { viewModel.likeProposal() } is Msg.PullToRefresh -> { viewModel.reloadProposal() } is Msg.ErrorRetryButtonClick -> { Kotlin
131. 結論 天津チャーハンはおいしい
132. 結論 • イベント地獄からの脱出に成功 • 大きな代償もない • 美しい
133. 最後に
134. Q. ピクシブでも採用しているのですね？ A. いいえ…
135. Q. ピクシブでも採用しているのですね？ A. いいえ… このアーキテクチャはよいものですが、 3つの理由で採用していません
136. 1. Compose公式の推奨ではない • アーキテクチャの移行作業は大変 • イレギュラーな状況で知見がない
137. 2. 学習コスト • ComposeとElmを両方知っているエンジニアはいない • 新メンバーに対していきなりハードルを押し付けることになる
138. 3. こんな画面は存在しない ProposalScreen AppBar Proposal Speaker SpeakerHistory ErrorUi LikeButton ShareButton TableOfContents BottomBar PullToRefreshBox ShareButton LikeButton NextProposalButton PrevProposalButton onClick onClick onClick onClick onClick onClick onPullToRefresh onRetryButtonClick onItemClick onUrlClick onHistoryItemClick onShareButtonClick onLikeButtonClick onShareButtonClick onPrevProposalButtonClick onNextProposalButtonClick onLikeButtonClick onAppBarShareButtonClick onBottomBarPrevProposalButtonClick onBottomBarNextProposalButtonClick onBottomBarLikeButtonClick onPullToRefresh onErrorRetryButtonClick onProposalLikeButtonClick onProposalShareButtonClick onSpeakerUrlClick onSpeakerHistoryItemClick
139. 部分的に導入することも可能 こんな画面に遭遇したときだけ使う ProposalScreen AppBar Proposal Speaker SpeakerHistory ErrorUi LikeButton ShareButton TableOfContents BottomBar PullToRefreshBox ShareButton LikeButton NextProposalButton PrevProposalButton onClick onClick onClick onClick onClick onClick onPullToRefresh onRetryButtonClick onItemClick onUrlClick onHistoryItemClick onShareButtonClick onLikeButtonClick onShareButtonClick onPrevProposalButtonClick onNextProposalButtonClick onLikeButtonClick onAppBarShareButtonClick onBottomBarPrevProposalButtonClick onBottomBarNextProposalButtonClick onBottomBarLikeButtonClick onPullToRefresh onErrorRetryButtonClick onProposalLikeButtonClick onProposalShareButtonClick onSpeakerUrlClick onSpeakerHistoryItemClick
140. onAppBarNavigationButtonClick: () -> Unit, onAppBarShareButtonClick: () -> Unit, onBottomControllerLikeButtonClick: () -> Unit, onBottomControllerNextEpisodeButtonClick: () -> Unit, onBottomControllerPreviousEpisodeButtonClick: () -> Unit, onBottomControllerOrientationSwitchButtonClick: () -> Unit, onReloadButtonClick: () -> Unit, onPageSelected: (index: Int) -> Unit, onPagerContentClick: (index: Int) -> Unit, onPagerPreviousClick: (isMultipleTapping: Boolean) -> Unit, onPagerNextClick: (isMultipleTapping: Boolean) -> Unit, onPagerOverScrolled: () -> Unit, onLastPageLikeButtonClick: () -> Unit, onLastPageFavoriteButtonClick: () -> Unit, onLastPageShareButtonClick: () -> Unit, onLastPageFanletterWriteButtonClick: () -> Unit, onLastPageFanletterViewButtonClick: () -> Unit, onLastPageRecommendComicClick: (recommendComic: Comic) -> Unit, onLastPageNextEpisodeButtonClick: () -> Unit, Kotlin onMsg: (ViewerMsg) -> Unit,
141. ありがとうございました