UI の構成要素に関する考察 モバイル開発LT ナイト 〜アプリ開発者交流会〜 mikan( 一瀬喜弘)

自己紹介 object Mikan { val name = " 一瀬喜弘" val company = "karabiner.tech" val work = Engineer.Android val hobby = listOf( " 漫画", " アニメ", " ゲーム", " 折り紙", "OSS 開発・コントリビュート", ) }

Compose で大きめの画面のUI を 組んだときのつらみ

Composable 関数のパラメータ 多すぎ

@Composable fun HomeScreen( aSectionUiModel: ASectionUiModel, onClickAItem: (itemId: String) -> Unit, onClickHelp: () -> Unit, bSectionUiModel: BSectionUiModel, onClickBItem: (itemId: String) -> Unit, onClickMoreButton: () -> Unit, cSectionUiModel: CSectionUiModel, onClickBItem: (itemId: String) -> Unit, dSectionUiModel: DSectionUiModel, onClickDItem: (itemId: String) -> Unit, eSectionUiModel: ESectionUiModel, ) { /* ... */ }

ラムダ式の区別がつかない

onClickHelp: () -> Unit, onClickMoreButton: () -> Unit, @Composable fun HomeScreen( aSectionUiModel: ASectionUiModel, onClickAItem: (itemId: String) -> Unit, bSectionUiModel: BSectionUiModel, onClickBItem: (itemId: String) -> Unit, cSectionUiModel: CSectionUiModel, onClickBItem: (itemId: String) -> Unit, dSectionUiModel: DSectionUiModel, onClickDItem: (itemId: String) -> Unit, eSectionUiModel: ESectionUiModel, ) { /* ... */ }

理想 UiState やイベントハンドラーは1 本化されて高凝集な状態 @Composable fun HomeScreen( uiModel: HomeUiModel, onUiEvent: (UiEvent) -> Unit, ) { /* ... */ }

闇雲に実装しても沼にはまるの でUI の作りを見直す

No content

No content

No content

UI は大きく分けて2 つのものを もっているのではないか

状態 と イベント

状態 画面を構成する動的な情報を含んだデータホルダー 任意の時刻における状態を取得することができる 連続的

イベント ユーザーインタラクションやエラー等を表現したもの 特定の時刻に特定のイベントが発行される 離散的

スクリーンレベルとUI レベル

スクリーンレベルの状態 ローディング 成功 エラー スクリーンレベルのイベント エラー 画面遷移

UI レベルの状態 UI レベルのイベント ユーザーインタラクション

UI レベルの状態とイベントは階 層構造を持つ → 今回は割愛

どう実装に落とし込むのか データホルダーとしてStateFlow( 状態) とSharedFlow( イベント) をもちいる イベントの合成だったり、イベントをもとに新しいイベントを発行したり、非同期処理を実行したり、状態を 更新したり → FRP だったりTEA(The Elm Architecture) 、圏論等の関数型プログラミングの知見をつかう