Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

@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, ) { /* ... */ }

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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, ) { /* ... */ }

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

状態 と イベント

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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