Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UI State設計とテスト方針
Search
rmakiyama
December 20, 2024
Technology
4
960
UI State設計とテスト方針
Ebisu.mobile #8 大忘年会 STORES kubell Kyash asken
https://hey.connpass.com/event/335971/
rmakiyama
December 20, 2024
Tweet
Share
More Decks by rmakiyama
See All by rmakiyama
KMPプロジェクトでマニュアルDIを使う選択
rmakiyama
0
240
Jetpack Composeとデザインシステム
rmakiyama
0
720
TextField theme in Compose
rmakiyama
0
240
Androidエンジニアが1人という不安と向き合う
rmakiyama
6
6.6k
Jetpack Compose Canvas入門
rmakiyama
0
1.4k
HiltはDIをどうやってやっているのか
rmakiyama
1
240
Radiotalk Androidアプリにおけるモジュール分割の課題とこれから
rmakiyama
1
280
Androidでオーディオアプリを作るということ
rmakiyama
1
3.2k
getChangePayload in DiffUtil
rmakiyama
0
3k
Other Decks in Technology
See All in Technology
新卒1年目、はじめてのアプリケーションサーバー【IBM WebSphere Liberty】
ktgrryt
0
160
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識してほしい!リファクタリング勉強会
kajitack
2
250
PaaSの歴史と、 アプリケーションプラットフォームのこれから
jacopen
7
1.6k
Mocking your codebase without cursing it
gaqzi
0
110
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
130
JAWS-UG20250116_iOSアプリエンジニアがAWSreInventに行ってきた(真面目編)
totokit4
0
170
第27回クラウド女子会 ~re:Invent 振り返りLT会~ 宣言型ポリシー、使ってみたらこうだった!
itkr2305
0
110
コスト削減と精度維持を両立!類似画像検索システムの内製化成功事例
shutotakahashi
0
150
実践!生成AIのビジネス活用 / How to utilize Generative AI in your own business
gakumura
1
110
【JAWS-UG大阪 reInvent reCap LT大会 サンバが始まったら強制終了】“1分”で初めてのソロ参戦reInventを数字で振り返りながら反省する
ttelltte
0
160
コロプラのオンボーディングを採用から語りたい
colopl
5
1.4k
Git scrapingで始める継続的なデータ追跡 / Git Scraping
ohbarye
5
570
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
Designing Experiences People Love
moore
139
23k
Gamification - CAS2011
davidbonilla
80
5.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
Become a Pro
speakerdeck
PRO
26
5.1k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Producing Creativity
orderedlist
PRO
343
39k
Unsuck your backbone
ammeep
669
57k
Transcript
©2024 Kyash Inc. ©2024 Kyash Inc. UI State設計とテスト方針 2024/12/20 rmakiyama(MAKIYAMA
Ryo) Ebisu.mobile #8 大忘年会 STORES kubell Kyash asken
©2024 Kyash Inc. 2 • Kyash Inc (2022/10 -) •
Android Engineer • Engineering Manager • @_rmakiyama • @rmakiyama MAKIYAMA Ryo 自己紹介
©2024 Kyash Inc. 3 Kyashについて お支払いも お金の管理も かんたんに Visaプリペイドカードとスマホで、いつでもどこでも、かんたんにお支払い。 アプリへのリアルタイムな履歴反映や自動カテゴリー分類で、お金の管理もかんたんに。
©2024 Kyash Inc. KyashとJetpack Compose • 2021年5月から導入開始 • Fragmentの上にComposeViewを載せる運用 •
新規実装する画面は基本的にJetpack Composeを利用 • 大小含め100画面以上を実装 Jetpack Composeがデファクトスタンダード 4 ※2024年5月現在
©2024 Kyash Inc. アジェンダ • KyashのKotlin Multiplatform構成 ◦ Reactor概説 ◦
UI Stateのサンプル • UI Stateの設計で考えていること • テスト方針 UI State設計とテスト方針 5
©2024 Kyash Inc. KyashのKMP構成概略 6 • ReactorKitを汲んだMVIライクな設計 ◦ State/Action/Event •
各OSでWrapper実装がある
©2024 Kyash Inc. KyashのKMP構成概略 / UI Layer 7
©2024 Kyash Inc. KyashのKMP構成概略 / UI Layer / Reactor 8
class InputAmountReactor( mainDispatcher: CoroutineDispatcher, ) : AbstractReactor<Reactor.LoadState<State>, Action, Mutation, Event>( mainDispatcher = mainDispatcher, initialState = Reactor.LoadState.Loading(), ) { override fun mutate(action: Action): Flow<Mutation> = flow {...} override fun reduce( state: Reactor.LoadState<State>, mutation: Mutation, ): Reactor.LoadState<State> = when (mutation) {...} data class State(...) : Reactor.State sealed class Action : Reactor.Action sealed class Mutation : AbstractReactor.Mutation sealed class Event : Reactor.Event }
©2024 Kyash Inc. ©2024 Kyash Inc. UI State設計⚒ 9 9
©2024 Kyash Inc. ©2024 Kyash Inc. 簡単なサンプル 10 10
©2024 Kyash Inc. Sample app 11
©2024 Kyash Inc. Sample app 12 • 金額を入力してOKをおしてSubmit • 金額を入力しないとOKが押せない
• 1000円以上でないとエラーとする
©2024 Kyash Inc. Sample app / UI State 13 data
class UiState( val amount: Long?, )
©2024 Kyash Inc. Sample app / UI State 14 data
class UiState( val amount: Long?, ) 🤔
©2024 Kyash Inc. Sample app / UI State 15 data
class UiState( val amount: Long?, ) : Reactor.State { val hasError: Boolean = amount &= null && amount &= 0L && amount < 1000L val buttonEnabled: Boolean = amount &= null && isError.not() }
©2024 Kyash Inc. Sample app / UI State 16 data
class UiState( val amount: Long?, ) : Reactor.State { val hasError: Boolean = amount &= null && amount &= 0L && amount < 1000L val buttonEnabled: Boolean = amount &= null && isError.not() } 関心の分離ができている! 仕様・振る舞いが見えてくる!
©2024 Kyash Inc. UI Stateの設計で考えていること UI Stateで仕様や振る舞いを表現する • 見た目(Element)と状態(State)で関心の分離をする ◦
Composable関数を簡単にレンダリングできるデータとして定義 • UIの理解容易性とテスタビリティを高める • ※ 網羅性を意識しすぎない 17 https://developer.android.com/topic/architecture/ui-layer
©2024 Kyash Inc. ©2024 Kyash Inc. テスト方針🧪 18 18
©2024 Kyash Inc. 2024年現在のKyashアプリのテスト方針 State Holder / UI Stateの ユニットテストを重点的にやる
• Reactorのユニットテストを最低限行う ◦ Actionに対するStateの期待値をテスト ◦ 状態遷移のテストはUI Stateに対するテスト • UIの振る舞いのテストの一部をカバー ◦ UI Stateの責務の工夫とセット 19
©2024 Kyash Inc. 2024年現在のKyashアプリのテスト方針の背景 問題をできるだけ早い段階で検出し 開発/アウトカムのフィードバックループを早めたい • KMPだとユニットテストのROIが高い ◦ バグの検出コストを最小限に抑える
• UIテストの責務を絞り効果を高める ◦ テストの関心を分離 ◦ UIロジックや外観のテストにフォーカス 20
©2024 Kyash Inc. Thank you!! • UIを見た目(Element)と状態(State)に分けてUI Stateを設計している ◦ UI
Stateで仕様や振る舞いを表現 • State Holder/UI Stateのテストで仕様や振る舞いのテストを一部カバー • みんなはどうやってる?このあと話しましょう!! まとめ 21
©2024 Kyash Inc. Last one… • モバイルエンジニアを募集中です! • 懇親会でも気軽に話しましょう! WE
ARE HIRING 22 エンジニアの求人一覧 Advent Calendar 2024
©2024 Kyash Inc.
©2024 Kyash Inc. Appendix 24 https://www.wantedly.com/companies/wantedly/post_articles/300999 https://developer.android.com/topic/architecture/ui-layer?hl=ja https://developer.android.com/topic/architecture/ui-layer/stateholders?hl=ja https://developer.android.com/develop/ui/compose/migrate/other-considerations?hl=ja#prio ritize-splitting-state
https://developer.android.com/training/testing/fundamentals/strategies?hl=ja https://developer.android.com/training/testing/fundamentals?hl=ja