Jetpack Compose の基本のメモ#3 ~コンポーザブルを再利用する~

コンポーザブルを再利用する

• 再利用可能な小さいコンポーネントを作成すると、アプリで使用する UI 要素のライブラリを簡単に構築できる
• ベストプラクティスは、デフォルトでは空の修飾子を割り当てた修飾子パラメータを関数に含めること
• →とりあえず、引数にmodifierを持たせておく

そうですね。例えば、Greeting("Android")を何度も呼び出すことで同じ結果を得ることは可能です。しかし、これには以下のようなデメリットがあります。

再利用可能なコンポーザブルのメリット

1. コードの冗長性を避ける:

   • 毎回 Greeting("Android", modifier = Modifier.padding(innerPadding)) のように同じコードを繰り返し書く必要がなくなります。再利用可能なコンポーザブルを作成することで、コードの重複を避け、メンテナンスを容易にします。

2. 可読性の向上:

   • コンポーザブルを小さな部品に分割し、それを再利用することで、コードの可読性が向上します。例えば、MyApp コンポーザブル内に必要なロジックをまとめることで、メインのレイアウトコードが簡潔になります。

3. 一貫性の確保:

   • 再利用可能なコンポーザブルを使用することで、同じUI要素の一貫性を保つことができます。全ての場所で同じコンポーネントを使用することで、アプリ全体のデザインが統一されます。

具体例

1. Greeting を直接何度も呼び出す場合

@Composable
fun MainContent() {
    Column {
        Greeting(name = "Android", modifier = Modifier.padding(innerPadding))
        Greeting(name = "iOS", modifier = Modifier.padding(innerPadding))
        Greeting(name = "Windows", modifier = Modifier.padding(innerPadding))
    }
}

2. MyApp を使用する場合

@Composable
fun MyApp(modifier: Modifier = Modifier) {
    Surface(
        modifier = modifier,
        color = MaterialTheme.colorScheme.background
    ) {
        Column {
            Greeting("Android")
            Greeting("iOS")
            Greeting("Windows")
        }
    }
}

@Composable
fun MainContent() {
    MyApp(modifier = Modifier.padding(innerPadding))
}

結論

MyApp を使用することで、コードが簡潔になり、再利用性が向上します。特に大規模なプロジェクトでは、再利用可能なコンポーザブルを作成することで、メンテナンスが容易になり、全体のコード品質が向上します。

例えば、MyApp の中で色やパディングの設定を一括して行い、各 Greeting コールの際に同じ設定を適用することができます。これにより、UIの一貫性を保ちつつ、コードをシンプルに保つことができます。

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(text = "Hello, $name!", modifier = modifier)
}

@Composable
fun MyApp(modifier: Modifier = Modifier) {
    Surface(
        modifier = modifier,
        color = MaterialTheme.colorScheme.background
    ) {
        Column {
            Greeting("Android", Modifier.padding(8.dp))
            Greeting("iOS", Modifier.padding(8.dp))
            Greeting("Windows", Modifier.padding(8.dp))
        }
    }
}

このように、MyApp コンポーザブルを使用することで、全ての Greeting に同じスタイルを適用し、コードの重複を避けることができます。