UIの構成要素に関する考察

モバイル開発LTナイト 〜アプリ開発者交流会〜 の発表資料です
https://karabiner.connpass.com/event/316762/

Transcript

1. UI の構成要素に関する考察 モバイル開発LT ナイト 〜アプリ開発者交流会〜 mikan( 一瀬喜弘)
2. 自己紹介 object Mikan { val name = " 一瀬喜弘" val company = "karabiner.tech" val work = Engineer.Android val hobby = listOf( " 漫画", " アニメ", " ゲーム", " 折り紙", "OSS 開発・コントリビュート", ) }
3. Compose で大きめの画面のUI を 組んだときのつらみ
4. Composable 関数のパラメータ 多すぎ
5. @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, ) { /* ... */ }
6. ラムダ式の区別がつかない
7. 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, ) { /* ... */ }
8. 理想 UiState やイベントハンドラーは1 本化されて高凝集な状態 @Composable fun HomeScreen( uiModel: HomeUiModel, onUiEvent: (UiEvent) -> Unit, ) { /* ... */ }
9. 闇雲に実装しても沼にはまるの でUI の作りを見直す
13. UI は大きく分けて2 つのものを もっているのではないか
14. 状態 と イベント
15. 状態 画面を構成する動的な情報を含んだデータホルダー 任意の時刻における状態を取得することができる 連続的
16. イベント ユーザーインタラクションやエラー等を表現したもの 特定の時刻に特定のイベントが発行される 離散的
17. スクリーンレベルとUI レベル
18. スクリーンレベルの状態 ローディング 成功 エラー スクリーンレベルのイベント エラー 画面遷移
19. UI レベルの状態 UI レベルのイベント ユーザーインタラクション
20. UI レベルの状態とイベントは階 層構造を持つ → 今回は割愛
21. どう実装に落とし込むのか データホルダーとしてStateFlow( 状態) とSharedFlow( イベント) をもちいる イベントの合成だったり、イベントをもとに新しいイベントを発行したり、非同期処理を実行したり、状態を 更新したり → FRP だったりTEA(The Elm Architecture) 、圏論等の関数型プログラミングの知見をつかう