Jetpack ComposeとKotlinの組み合わせ：最新UI開発のベストプラクティス【Kotlin入門⑱】

Jetpack Composeとは？
1. Jetpack Composeの概要
Jetpack Composeの導入
1. 必要な環境
2. Gradleの設定
Jetpack Composeの基本コンポーネント
Jetpack ComposeとMVVMアーキテクチャ
1. ViewModelとの統合
Jetpack Composeのベストプラクティス
1. ベストプラクティス一覧
2. 不要なリコンポーズを避ける
まとめ

Jetpack Composeとは？

Jetpack Composeの概要

Jetpack Composeは、Googleが提供するKotlinベースの最新UIツールキットです。従来のXMLレイアウトと異なり、宣言的なUI構築が可能で、AndroidアプリのUI開発をよりシンプルかつ直感的に行えます。

Jetpack Composeの主な特徴

宣言的UI：状態に応じてUIを自動更新。
Kotlinとの高い親和性：UIをKotlinの関数として記述可能。
コードの簡潔化：ボイラープレートを削減し、可読性向上。
リアクティブなデータバインディング：State や LiveData との統合が容易。

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

@Preview
@Composable
fun PreviewGreeting() {
    Greeting("Kotlin")
}

Jetpack Composeの導入

必要な環境

Jetpack Composeを使用するには、以下の環境が必要です。

Android Studio Dolphin（またはそれ以降）
Kotlin 1.5以上
Gradle 7以上
Android APIレベル 21以上

Gradleの設定

build.gradle.kts に以下を追加してJetpack Composeを有効化します。

android {
    compileSdk = 33

    defaultConfig {
        minSdk = 21
        targetSdk = 33
    }

    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

dependencies {
    implementation("androidx.compose.ui:ui:1.3.2")
    implementation("androidx.compose.material:material:1.3.2")
    implementation("androidx.compose.ui:ui-tooling-preview:1.3.2")
    debugImplementation("androidx.compose.ui:ui-tooling:1.3.2")
}

Jetpack Composeの基本コンポーネント

Text（テキスト表示）

@Composable
fun SimpleText() {
    Text(text = "Hello, Jetpack Compose!")
}

Button（ボタン）

@Composable
fun SimpleButton() {
    Button(onClick = { println("Button clicked!") }) {
        Text("Click me")
    }
}

Column と Row（レイアウトの管理）

@Composable
fun LayoutExample() {
    Column {
        Text("Item 1")
        Text("Item 2")
    }
}

@Composable
fun RowExample() {
    Row {
        Text("Left")
        Text("Right")
    }
}

State を使った状態管理

Composeでは、State を使用してリアクティブなUIを作成できます。

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

Jetpack ComposeとMVVMアーキテクチャ

ViewModelとの統合

Composeは、ViewModelと連携することで状態管理をより効率的に行えます。

class CounterViewModel : ViewModel() {
    private val _count = MutableLiveData(0)
    val count: LiveData<Int> = _count

    fun increment() {
        _count.value = (_count.value ?: 0) + 1
    }
}

@Composable
fun CounterScreen(viewModel: CounterViewModel = viewModel()) {
    val count by viewModel.count.observeAsState(0)
    Column {
        Text("Count: $count")
        Button(onClick = { viewModel.increment() }) {
            Text("Increment")
        }
    }
}

Jetpack Composeのベストプラクティス

ベストプラクティス一覧

状態のリフトアップ（State Hoisting）を活用
不要なリコンポーズを避ける
ViewModelと適切に連携
スコープ関数（apply, run など）を活用
Compose Previewを活用してデザインを効率化

不要なリコンポーズを避ける

@Composable
fun OptimizedCounter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Count: $count")
    }
}