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
420
Jetpack Composeとデザインシステム
rmakiyama
0
1.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
290
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
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
190
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.5k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
310
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
230
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
600
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
190
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The World Runs on Bad Software
bkeepers
PRO
72
11k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Language of Interfaces
destraynor
162
25k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
BBQ
matthewcrist
89
9.8k
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