Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack ComposeへのリファクタリングのTIPS: CustomViewの便利な使...

shogo.yamada
January 25, 2024
580

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

shogo.yamada

January 25, 2024
Tweet

Transcript

  1. © ZOZO, Inc. 株式会社ZOZO
 ブランドソリューション開発本部 FAANS部 フロントエンドブロック Android担当
 
 山田

    尚吾
 ・X(旧Twitter): @yshogo87
 ・2018年入社(入社6年目)ZOZOTOWN → FAANS
 ・趣味は、読書、スポーツ鑑賞
 (読書好きの方お話しましょう!)
 2
  2. © 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) ) } } }
  3. © ZOZO, Inc. リファクタリングをする上でよくある失敗
 13 • レイアウトを小さな単位に分割し、それぞれに CustomViewを作成する
 • CutomViewの中だけをJetpack

    Composeにリファク タリングする
 • できたCustomViewだけをレビューしてもらう
 • 全てのCustomViewができたら最後にこれらを呼び 出してリファクタリング完了

  4. © 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 ) } }
  5. © ZOZO, Inc. リファクタリングをする上でよくある失敗
 複雑なレイアウト Jetpack Compose 頑張って
 リファクタリングする
 複雑なレイアウト

    レイアウトを分割する 分割したレイアウトの CustomViewを作る Jetpack Compose 分割して少しずつ
 リファクタリングしていく

  6. © ZOZO, Inc. CustomViewを作ることのメリット
 
 19 • ミスを早い段階で見つける
 • 現在のリファクタリングの進行状況がわかりやすい


    • 全てリファクタリングしてなくても、CustomViewが残ってい る状態でリリースすることも可能
 

  7. © ZOZO, Inc. CustomViewを作ることのメリット
 21 • 他に優先すべきタスクがある。(時間がない)
 →レイアウトを小さな単位で実装するので、細切れの時間 を利用できる
 •

    レイアウトが複雑すぎて大変
 → 小さい単位だけをリファクタリングするので複雑さを緩 和できる
 • バグが怖い
 → 段階リリースも可能なので、バグがないことを確認しな がら進めることができる

  8. © ZOZO, Inc. まとめ
 
 23 • 複雑なレイアウトをいきなりリファクタリングするのは大変
 ◦ バグを作りやすくなる


    ◦ 差分も大きくなるのでレビュワーが大変
 • レイアウトを分割してそれぞれをCustomViewを使ってその 中でJetpack Composeにリファクタリングしていく
 

  9. © ZOZO, Inc. まとめ
 
 24 • CustomViewでリファクタリングしたらその都度レビューを依 頼する
 ◦

    差分が小さくなる
 ◦ 不具合に最初に気づきやすくなる
 
→ いきなり全てをリファクタリングするのではなく、
 CustomViewを一回挟もう!