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
1.1k
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
400
Jetpack Composeとデザインシステム
rmakiyama
0
1k
TextField theme in Compose
rmakiyama
0
300
Androidエンジニアが1人という不安と向き合う
rmakiyama
6
6.8k
Jetpack Compose Canvas入門
rmakiyama
0
1.5k
HiltはDIをどうやってやっているのか
rmakiyama
1
280
Radiotalk Androidアプリにおけるモジュール分割の課題とこれから
rmakiyama
1
320
Androidでオーディオアプリを作るということ
rmakiyama
1
3.3k
getChangePayload in DiffUtil
rmakiyama
0
3.2k
Other Decks in Technology
See All in Technology
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
190
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
230
Language Update: Java
skrb
2
250
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
150
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
190
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
540
AI開発ツールCreateがAnythingになったよ
tendasato
0
110
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
140
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
120
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
8.6k
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.1k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Gamification - CAS2011
davidbonilla
81
5.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Documentation Writing (for coders)
carmenintech
74
5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
KATA
mclloyd
32
14k
Statistics for Hackers
jakevdp
799
220k
RailsConf 2023
tenderlove
30
1.2k
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