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年入社(入社６年目）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) { 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

© 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を一回挟もう！
 


No content