Compose で画面都合をそのまま API に持ち込まない

Jetpack Compose で共通コンポーネントを作っていると、複数の利用箇所で同じ指定が続くことがあります。

たとえば、ある Card コンポーネントを使う画面がいくつかあり、どの画面でも毎回 Modifier.padding(horizontal = 16.dp) を付けているとします。

@Composable
fun UserCard(
    name: String,
    modifier: Modifier = Modifier,
) {
    Surface(modifier = modifier) {
        Text(text = name)
    }
}

呼び出し側では毎回こう書いています。

@Composable
fun UserListItem(user: User) {
    UserCard(
        name = user.name,
        modifier = Modifier.padding(horizontal = 16.dp),
    )
}

@Composable
fun UserDetailHeader(user: User) {
    UserCard(
        name = user.name,
        modifier = Modifier.padding(horizontal = 16.dp),
    )
}

この状態を見ると、UserCard 側で最初から padding(horizontal = 16.dp) を持たせたくなります。

@Composable
fun UserCard(
    name: String,
    modifier: Modifier = Modifier,
) {
    Surface(
        modifier = modifier.padding(horizontal = 16.dp),
    ) {
        Text(text = name)
    }
}

呼び出し側の記述は減りますし、今の利用箇所だけを見ると自然に見えます。

何が責務なのかを考える

ただ、ここで考えたいのは、利用箇所で共通していることを、そのままコンポーネントの標準にしてよいとは限らない、ということです。

今回の 16.dp は、UserCard の性質というより、画面側のレイアウト都合かもしれません。それを内部に取り込むと、利用箇所の都合がコンポーネントの前提になります。

共通コンポーネントに持たせるべきなのは、そのコンポーネントの標準として説明できるものです。たまたま共通している指定まで取り込んでしまうと、API は少しずつ画面都合に引っ張られていきます。便利そうに見える変更ほど、それが本当にコンポーネントの責務なのかを、一度分けて考えたいものです。

参考文献