Modifier沼から抜け出す！拡張関数を使った美しい整理術

Jetpack Composeを使っていると、ついついModifierが増えてしまい、コードがModifier沼に沈んでしまうことがあります。
今回は、そんなModifierをシンプルに整理するためのベストプラクティスを紹介します！

Modifierを拡張関数にして再利用性を高める

頻繁に使うModifierの組み合わせを拡張関数としてまとめることで、コードがシンプルになり、再利用しやすくなります。

サンプルコード

fun Modifier.fancyCardStyle(): Modifier = this
    .fillMaxWidth()
    .padding(16.dp)
    .background(Color.LightGray)

@Composable
fun FancyCard(content: String) {
    Text(
        text = content,
        modifier = Modifier.fancyCardStyle()
    )
}

こうすることで、同じ装飾を複数の箇所で使う際にもコードの可読性が高まり、メンテナンスが容易になります。clickableやselectableなどのインタラクション系のModifierは長くなりがちなので、特にそういう場合に役に立ちます。

条件付きのModifierも拡張関数でスッキリと

条件に応じてModifierを切り替える場合でも、拡張関数を利用すると分かりやすく記述できます。

fun Modifier.optionalHighlight(condition: Boolean): Modifier =
    if (condition) this.border(2.dp, Color.Red) else this

// 使用例
Box(modifier = Modifier
    .fancyCardStyle()
    .optionalHighlight(highlightCondition)
) {
    // コンテンツ
}

まとめ

• Modifierは拡張関数でまとめて整理する
• 条件付きModifierも拡張関数化して見通しを良くする

この整理術を使って、Modifier沼から華麗に抜け出しましょう！