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
Jetpack ComposeへのリファクタリングのTIPS: CustomViewの便利な使...
Search
shogo.yamada
January 25, 2024
0
580
Jetpack ComposeへのリファクタリングのTIPS: CustomViewの便利な使い方 / Refactoring TIPS to Jetpack Compose: Useful usage of CustomView
shogo.yamada
January 25, 2024
Tweet
Share
More Decks by shogo.yamada
See All by shogo.yamada
Android StudioのLiveTemplateの便利な使い方 / Android LiveTemplate Method
yshogo
0
980
ZOZOの新規サービス 「FAANS」の開発 Android編/FAAN App Create on Android
yshogo
0
1.2k
PORT_Firebase___Algolia.pdf
yshogo
0
220
Flutter_meetup_tokyo__10.pdf
yshogo
0
5.7k
PORT Firebase x Flutter
yshogo
0
360
ZOZOTech meetup Frontend #10
yshogo
2
1.6k
flutter-meetup.pdf
yshogo
0
51
Potetochips #61
yshogo
1
490
Firebase ML Kitを使った デモアプリ活用事例 @Google App DOJO
yshogo
1
170
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
Optimizing for Happiness
mojombo
375
69k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
GitHub's CSS Performance
jonrohan
1030
450k
How To Stay Up To Date on Web Technology
chriscoyier
787
250k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Debugging Ruby Performance
tmm1
73
12k
The Language of Interfaces
destraynor
154
24k
The Invisible Customer
myddelton
119
13k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
110
6.9k
Transcript
Jetpack ComposeへのリファクタリングのTIPS: CustomViewの便利な使い方 株式会社ZOZO ブランドソリューション開発本部 FAANS部 フロントエンドブロック 山田 尚吾 Copyright
© ZOZO, Inc. ZOZO Tech Meetup - Android (2024/01/23)
© ZOZO, Inc. 株式会社ZOZO ブランドソリューション開発本部 FAANS部 フロントエンドブロック Android担当 山田
尚吾 ・X(旧Twitter): @yshogo87 ・2018年入社(入社6年目)ZOZOTOWN → FAANS ・趣味は、読書、スポーツ鑑賞 (読書好きの方お話しましょう!) 2
© ZOZO, Inc. アジェンダ 3 • リファクタリングへのモチベーション • リファクタリングする上でのよくある失敗 •
CustomViewの便利な使い方 • CustomViewを使うメリット • まとめ
© ZOZO, Inc. アジェンダ 4 • リファクタリングへのモチベーション • リファクタリングする上でのよくある失敗 •
CustomViewの便利な使い方 • CustomViewを使うメリット • まとめ
© ZOZO, Inc. 既存のコードをリファクタリングするモチベーション 5 (例)Androidでリストを作る XMLで作るとき→ RecylerViewを設置、RecyclerAdapterを作成、差分処理、etc… Jetpack
Compose→ @Composable fun SimpleList(listItems: List<String>) { LazyColumn { items(listItems) { item -> Text( text = item, modifier = Modifier.padding(16.dp) ) } } }
© ZOZO, Inc. 既存のコードをリファクタリングするモチベーション 6 Jetpack Composeでレイアウトを作った方が楽
© ZOZO, Inc. 既存のコードをリファクタリングするモチベーション 7 リファクタリングを後回しにしてしまう理由 • 他に優先すべきタスクがある(時間がない) •
レイアウトが複雑すぎて大変 • バグが怖い • etc..
© ZOZO, Inc. アジェンダ 8 • リファクタリングへのモチベーション • リファクタリングする上でのよくある失敗 •
CustomViewの便利な使い方 • CustomViewを使うメリット • まとめ
© ZOZO, Inc. リファクタリングをする上でよくある失敗 9 複雑なレイアウトほど 1. 変更行数が大きくなる 2. 実装に時間をかけすぎてしまう
© ZOZO, Inc. リファクタリングをする上でよくある失敗 10 RecyclerViewで実装すると.. • ViewTypeが少なくとも4個必要 •
それぞれに複雑なレイアウトが実装されてい る 例
© ZOZO, Inc. リファクタリングをする上でよくある失敗 11 これをCustomViewを使って解決する
© ZOZO, Inc. アジェンダ 12 • リファクタリングへのモチベーション • リファクタリングする上でのよくある失敗 •
CustomViewの便利な使い方 • CustomViewを使うメリット • まとめ
© ZOZO, Inc. リファクタリングをする上でよくある失敗 13 • レイアウトを小さな単位に分割し、それぞれに CustomViewを作成する • CutomViewの中だけをJetpack
Composeにリファク タリングする • できたCustomViewだけをレビューしてもらう • 全てのCustomViewができたら最後にこれらを呼び 出してリファクタリング完了
© ZOZO, Inc. CustomViewの便利な使い方 14 class HogeCutomView @JvmOverloads constructor( context:
Context, attrs: AttributeSet? = null, defStyle: Int = 0 ) : AbstractComposeView(context, attrs, defStyle) { var selectedDate by mutableStateOf("") @Composable override fun Content() { HogeWithPager( selectedDate = selectedDate ) } }
© ZOZO, Inc. CustomViewの便利な使い方 15 <jp.android.com.hoge.HogeCutomView android:id="@+id/hoge_tab" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@id/container"
app:tabMode="scrollable" />
© ZOZO, Inc. リファクタリングをする上でよくある失敗 複雑なレイアウト Jetpack Compose 頑張って リファクタリングする 複雑なレイアウト
レイアウトを分割する 分割したレイアウトの CustomViewを作る Jetpack Compose 分割して少しずつ リファクタリングしていく
© ZOZO, Inc. アジェンダ 17 • リファクタリングへのモチベーション • リファクタリングする上でのよくある失敗 •
CustomViewの便利な使い方 • CustomViewを使うメリット • まとめ
© ZOZO, Inc. CustomViewを作ることのメリット 18 実装を分割することによって、差分が小さくなり、 レビュワーの負担を軽減できる 例)
+239 -83
© ZOZO, Inc. CustomViewを作ることのメリット 19 • ミスを早い段階で見つける • 現在のリファクタリングの進行状況がわかりやすい
• 全てリファクタリングしてなくても、CustomViewが残ってい る状態でリリースすることも可能
© ZOZO, Inc. CustomViewを作ることのメリット 20 リファクタリングを後回しにしてしまう理由 • 他に優先すべきタスクがある(時間がない) •
レイアウトが複雑すぎて大変 • バグが怖い • etc..
© ZOZO, Inc. CustomViewを作ることのメリット 21 • 他に優先すべきタスクがある。(時間がない) →レイアウトを小さな単位で実装するので、細切れの時間 を利用できる •
レイアウトが複雑すぎて大変 → 小さい単位だけをリファクタリングするので複雑さを緩 和できる • バグが怖い → 段階リリースも可能なので、バグがないことを確認しな がら進めることができる
© ZOZO, Inc. 22 まとめ
© ZOZO, Inc. まとめ 23 • 複雑なレイアウトをいきなりリファクタリングするのは大変 ◦ バグを作りやすくなる
◦ 差分も大きくなるのでレビュワーが大変 • レイアウトを分割してそれぞれをCustomViewを使ってその 中でJetpack Composeにリファクタリングしていく
© ZOZO, Inc. まとめ 24 • CustomViewでリファクタリングしたらその都度レビューを依 頼する ◦
差分が小さくなる ◦ 不具合に最初に気づきやすくなる → いきなり全てをリファクタリングするのではなく、 CustomViewを一回挟もう!
None