Jetpack ComposeへのリファクタリングのTIPS: CustomViewの便利な使い方 / Refactoring TIPS to Jetpack Compose: Useful usage of CustomView

Transcript

1. Jetpack ComposeへのリファクタリングのTIPS: CustomViewの便利な使い方
 株式会社ZOZO
 ブランドソリューション開発本部 FAANS部 フロントエンドブロック
 山田 尚吾 Copyright © ZOZO, Inc. ZOZO Tech Meetup - Android (2024/01/23)

2. © ZOZO, Inc. 株式会社ZOZO
 ブランドソリューション開発本部 FAANS部 フロントエンドブロック Android担当
 
 山田 尚吾
 ・X(旧Twitter): @yshogo87
 ・2018年入社(入社６年目）ZOZOTOWN → FAANS
 ・趣味は、読書、スポーツ鑑賞
 (読書好きの方お話しましょう！）
 2
3. © ZOZO, Inc. アジェンダ
 3 • リファクタリングへのモチベーション
 • リファクタリングする上でのよくある失敗
 • CustomViewの便利な使い方
 • CustomViewを使うメリット
 • まとめ

4. © ZOZO, Inc. アジェンダ
 4 • リファクタリングへのモチベーション
 • リファクタリングする上でのよくある失敗
 • CustomViewの便利な使い方
 • CustomViewを使うメリット
 • まとめ

5. © 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) ) } } }
6. © ZOZO, Inc. 既存のコードをリファクタリングするモチベーション
 6 Jetpack Composeでレイアウトを作った方が楽

7. © ZOZO, Inc. 既存のコードをリファクタリングするモチベーション
 7 リファクタリングを後回しにしてしまう理由
 
 • 他に優先すべきタスクがある(時間がない)
 • レイアウトが複雑すぎて大変
 • バグが怖い
 • etc..
 

8. © ZOZO, Inc. アジェンダ
 8 • リファクタリングへのモチベーション
 • リファクタリングする上でのよくある失敗
 • CustomViewの便利な使い方
 • CustomViewを使うメリット
 • まとめ

9. © ZOZO, Inc. リファクタリングをする上でよくある失敗
 9 複雑なレイアウトほど
 1. 変更行数が大きくなる
 2. 実装に時間をかけすぎてしまう

10. © ZOZO, Inc. リファクタリングをする上でよくある失敗
 10 RecyclerViewで実装すると..
 
 • ViewTypeが少なくとも4個必要
 • それぞれに複雑なレイアウトが実装されてい る
 例
11. © ZOZO, Inc. リファクタリングをする上でよくある失敗
 11 これをCustomViewを使って解決する

12. © ZOZO, Inc. アジェンダ
 12 • リファクタリングへのモチベーション
 • リファクタリングする上でのよくある失敗
 • CustomViewの便利な使い方
 • CustomViewを使うメリット
 • まとめ

13. © ZOZO, Inc. リファクタリングをする上でよくある失敗
 13 • レイアウトを小さな単位に分割し、それぞれに CustomViewを作成する
 • CutomViewの中だけをJetpack Composeにリファク タリングする
 • できたCustomViewだけをレビューしてもらう
 • 全てのCustomViewができたら最後にこれらを呼び 出してリファクタリング完了

14. © 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 ) } }
15. © 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" />
16. © ZOZO, Inc. リファクタリングをする上でよくある失敗
 複雑なレイアウト Jetpack Compose 頑張って
 リファクタリングする
 複雑なレイアウト レイアウトを分割する 分割したレイアウトの CustomViewを作る Jetpack Compose 分割して少しずつ
 リファクタリングしていく

17. © ZOZO, Inc. アジェンダ
 17 • リファクタリングへのモチベーション
 • リファクタリングする上でのよくある失敗
 • CustomViewの便利な使い方
 • CustomViewを使うメリット
 • まとめ

18. © ZOZO, Inc. CustomViewを作ることのメリット
 
 18 実装を分割することによって、差分が小さくなり、
 レビュワーの負担を軽減できる
 
 例）
 +239 -83
 

19. © ZOZO, Inc. CustomViewを作ることのメリット
 
 19 • ミスを早い段階で見つける
 • 現在のリファクタリングの進行状況がわかりやすい
 • 全てリファクタリングしてなくても、CustomViewが残ってい る状態でリリースすることも可能
 

20. © ZOZO, Inc. CustomViewを作ることのメリット
 20 リファクタリングを後回しにしてしまう理由
 
 • 他に優先すべきタスクがある(時間がない)
 • レイアウトが複雑すぎて大変
 • バグが怖い
 • etc..
 

21. © ZOZO, Inc. CustomViewを作ることのメリット
 21 • 他に優先すべきタスクがある。(時間がない)
 →レイアウトを小さな単位で実装するので、細切れの時間 を利用できる
 • レイアウトが複雑すぎて大変
 → 小さい単位だけをリファクタリングするので複雑さを緩 和できる
 • バグが怖い
 → 段階リリースも可能なので、バグがないことを確認しな がら進めることができる

22. © ZOZO, Inc. 22 まとめ

23. © ZOZO, Inc. まとめ
 
 23 • 複雑なレイアウトをいきなりリファクタリングするのは大変
 ◦ バグを作りやすくなる
 ◦ 差分も大きくなるのでレビュワーが大変
 • レイアウトを分割してそれぞれをCustomViewを使ってその 中でJetpack Composeにリファクタリングしていく
 

24. © ZOZO, Inc. まとめ
 
 24 • CustomViewでリファクタリングしたらその都度レビューを依 頼する
 ◦ 差分が小さくなる
 ◦ 不具合に最初に気づきやすくなる
 
→ いきなり全てをリファクタリングするのではなく、
 CustomViewを一回挟もう！