Slide 1

Slide 1 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. AndroidのViewにおける ステートフルとステートレスと 状態ホルダーの話

Slide 2

Slide 2 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 自己紹介 鈴木善陽(スズキ ヨシタカ) チームラボ所属 Androidエンジニア4年目 Fitbit Charge 6 買いました

Slide 3

Slide 3 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 1. 発端 2. ステートフルって? a. ステートフルの特徴 3. ステートレスって? a. ステートレスの特徴 4. どちらを選択するべき? 5. まとめ 目次

Slide 4

Slide 4 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ● UIの状態はViewModelで持つべきだと漠然と思っていた🤔 ● Android Viewではあまり意識しなかったけど、Composeだと rememberやrememberSaveableといった概念が登場した ステートレスやステートフル、 状態ホルダーについて良く知りたくなった💡 発端

Slide 5

Slide 5 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ステートフルって?

Slide 6

Slide 6 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ● ViewがUI状態を持っていること ステートフルって?

Slide 7

Slide 7 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ステートフルって? ● 呼び出し側

Slide 8

Slide 8 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ● メリット ○ 呼び出し側はViewの状態を考慮しなくて良い ■ 値を渡したり、渡されなくて良いので、スッキリかける ● デメリット ○ テストしづらい ■ Composable内でロジックがある場合、 ViewModelのUnitTestではカバーできない ○ ビジネスロジックから制御できない ステートフルの特徴

Slide 9

Slide 9 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ステートレスって?

Slide 10

Slide 10 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ● ViewがUI状態を持っていないこと ステートレスって?

Slide 11

Slide 11 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ● 呼び出し側 ステートレスって?

Slide 12

Slide 12 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ● ViewModel ステートレスって?

Slide 13

Slide 13 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ● メリット ○ UIとロジックの関心が分離できる ○ ビジネスロジックから制御ができる ○ UIを再利用しやすい ● デメリット ○ コードが複雑になる ■ ビジネスロジックから UIの間でデータのやりとりがコードに現れる ステートレスの特徴

Slide 14

Slide 14 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. どちらを選択すべき?

Slide 15

Slide 15 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 公式資料を読んでみる どちらを選択すべき?

Slide 16

Slide 16 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. どちらを選択すべき? ● ビジネスロジックから制御する必要のない部分はステートフル ○ 例:スクロール状態 ○ 例:Expand、Collapseの動作 ● ビジネスロジックから制御する必要がある部分はステートレス ○ 例:TextFieldへ入力した値に対するバリデーション ○ 例:Horizontal PagerとTab Rowで、APIの返却によって選択タブを制御 状況に応じてハイブリッドに組み合わせる

Slide 17

Slide 17 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 参考:https://developer.android.com/topic/architecture/ui-layer/stateholders?hl=ja#choose-viewmodel どちらを選択すべき? 「最終的には、消費される場所に最も近い 状態ホルダーを使用して UI 状態を生成す る必要があります。」 by 公式

Slide 18

Slide 18 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 実際にコードで見てみる どちらを選択すべき?

Slide 19

Slide 19 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. どちらを選択すべき?

Slide 20

Slide 20 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 参考:https://developer.android.com/topic/architecture/ui-layer/stateholders?hl=ja#choose-viewmodel イベント 状態 状態ホルダーまで遠い どちらを選択すべき?

Slide 21

Slide 21 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. どちらを選択すべき?

Slide 22

Slide 22 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 参考:https://developer.android.com/topic/architecture/ui-layer/stateholders?hl=ja#choose-viewmodel イベント 状態 状態ホルダーまで近い どちらを選択すべき?

Slide 23

Slide 23 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. どちらを選択すべき? ● 今回のサンプルの場合だと... ○ バリデーションなど、ビジネスロジックを通してから UI状態を決定したい →ステートレス ○ ビジネスロジックを通す必要がない、 ただ入力状態を表示するだけで良い →ステートフル

Slide 24

Slide 24 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. まとめ できるだけ状態ホルダーまでの道のりは短くしつつ、 ステートレスとステートフルを使い分ける or 組み合わせる

Slide 25

Slide 25 text

We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. EOF