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
680
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
1.1k
ZOZOの新規サービス 「FAANS」の開発 Android編/FAAN App Create on Android
yshogo
0
1.3k
PORT_Firebase___Algolia.pdf
yshogo
0
220
Flutter_meetup_tokyo__10.pdf
yshogo
0
5.8k
PORT Firebase x Flutter
yshogo
0
380
ZOZOTech meetup Frontend #10
yshogo
2
1.7k
flutter-meetup.pdf
yshogo
0
51
Potetochips #61
yshogo
1
500
Firebase ML Kitを使った デモアプリ活用事例 @Google App DOJO
yshogo
1
170
Featured
See All Featured
A better future with KSS
kneath
238
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
The Pragmatic Product Professional
lauravandoore
32
6.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
BBQ
matthewcrist
85
9.4k
Optimising Largest Contentful Paint
csswizardry
33
3k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Navigating Team Friction
lara
183
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
It's Worth the Effort
3n
183
28k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
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