Jetpack Composeを使っていると、ついついModifierが重なり複雑になってしまうことがあります。定期的にModifierを棚卸しして、コードを軽やかにしましょう。

Modifierの重複を整理する

Modifierを重ねると、コードが冗長になり、可読性が低下します。重複したModifierは積極的に整理してまとめましょう。

改善前

Modifier
    .padding(16.dp)
    .padding(8.dp)
    .background(Color.Blue)
    .background(Color.Blue)

改善後

Modifier
    .padding(24.dp) // パディングをまとめる
    .background(Color.Blue) // 重複を削除

親コンポーネントで共通のModifierを設定

同じ余白や配置を持つ子コンポーネントが複数ある場合、親コンポーネント側でまとめて設定するとコードがスッキリします。

改善前

Column {
    Text("Hello", modifier = Modifier.padding(8.dp))
    Text("World", modifier = Modifier.padding(8.dp))
}

改善後

Column(
    modifier = Modifier.padding(8.dp)
    verticalArrangement = Arrangement.spacedBy(16.dp) // 親で余白を指定
) {
    Text("Hello")
    Text("World")
}

こうすることで、子コンポーネントごとに個別に余白を設定せず、一括で管理できます。

まとめ

Modifierの重複を見つけて整理する
共通の余白や配置は親コンポーネント側で設定

この整理術を取り入れて、読みやすくメンテナンスしやすいComposeコードを目指しましょう！