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
820
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.2k
ZOZOの新規サービス 「FAANS」の開発 Android編/FAAN App Create on Android
yshogo
0
1.4k
PORT_Firebase___Algolia.pdf
yshogo
0
230
Flutter_meetup_tokyo__10.pdf
yshogo
0
5.9k
PORT Firebase x Flutter
yshogo
0
400
ZOZOTech meetup Frontend #10
yshogo
2
1.7k
flutter-meetup.pdf
yshogo
0
60
Potetochips #61
yshogo
1
510
Firebase ML Kitを使った デモアプリ活用事例 @Google App DOJO
yshogo
1
180
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Fireside Chat
paigeccino
37
3.4k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Statistics for Hackers
jakevdp
798
220k
Typedesign – Prime Four
hannesfritz
41
2.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The World Runs on Bad Software
bkeepers
PRO
68
11k
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