Composable関数の仕組みと基本的な使い方【Jetpack Compose入門③】

Composable関数とは？
1. Jetpack Composeの基礎
2. Composable関数の役割
Composable関数の基本構造
1. @Composableアノテーション
2. Composable関数の呼び出し
UIレイアウトを構築する基本コンポーネント
状態管理とremember
1. mutableStateOfとrememberの使用
2. ViewModelとの連携
まとめ

Composable関数とは？

Jetpack Composeの基礎

Jetpack Composeは、Googleが提供するAndroidの最新UIツールキットであり、宣言型UIを構築するためのフレームワークです。従来のXMLを用いたレイアウト作成とは異なり、KotlinのコードのみでUIを構築できます。

このJetpack Composeの中核をなすのが「Composable関数」です。Composable関数を使うことで、簡潔かつ柔軟なUI設計が可能になります。

Composable関数の役割

Composable関数は、Jetpack ComposeにおいてUIコンポーネントを表す特別なKotlin関数です。@Composableアノテーションを付与することで、Jetpack Composeのフレームワークが適切に管理・描画できるようになります。

例えば、テキストを表示する最もシンプルなComposable関数は次のように記述できます。

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

この関数は、name というパラメータを受け取り、その値を埋め込んだテキストを表示する役割を果たします。

Composable関数の基本構造

@Composableアノテーション

Composable関数を定義する際には、必ず@Composableアノテーションを付与する必要があります。

@Composable
fun SampleComposable() {
    Text(text = "これはComposable関数です")
}

このアノテーションがない場合、Jetpack Composeの仕組みに認識されず、正しく動作しません。

Composable関数の呼び出し

Composable関数は、他のComposable関数の内部でのみ呼び出すことができます。通常のKotlin関数の内部で直接呼び出すことはできません。

@Composable
fun ParentComposable() {
    ChildComposable()
}

@Composable
fun ChildComposable() {
    Text(text = "子Composable関数")
}

このようにComposable関数は、階層的に組み合わせてUIを作成するのが一般的です。

UIレイアウトを構築する基本コンポーネント

Text（テキスト表示）

Jetpack Composeで文字を表示するには、Textコンポーネントを使用します。

@Composable
fun Greeting() {
    Text(text = "こんにちは、Jetpack Compose！")
}

また、フォントサイズや色を指定することも可能です。

Text(
    text = "カスタムテキスト",
    fontSize = 20.sp,
    color = Color.Blue
)

Button（ボタン）

クリック可能なボタンを作成するには、Buttonコンポーネントを使用します。

@Composable
fun MyButton() {
    Button(onClick = { /* クリック時の処理 */ }) {
        Text(text = "クリックしてね！")
    }
}

Column・Row（レイアウト管理）

複数のコンポーネントを縦または横に並べるには、ColumnやRowを使用します。

@Composable
fun ColumnExample() {
    Column {
        Text(text = "上部のテキスト")
        Button(onClick = {}) {
            Text(text = "ボタン")
        }
    }
}

Rowを使うと、横に並べることができます。

@Composable
fun RowExample() {
    Row {
        Text(text = "左")
        Text(text = "中央")
        Text(text = "右")
    }
}

状態管理とremember

mutableStateOfとrememberの使用

Jetpack Composeでは、状態を保持するためにmutableStateOfとrememberを使用します。

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text(text = "カウント: $count")
        Button(onClick = { count++ }) {
            Text(text = "増加")
        }
    }
}

このコードでは、rememberを使用することでcountの状態が保持され、ボタンをクリックするたびに値が更新されます。

ViewModelとの連携

Jetpack ComposeはAndroidのViewModelと連携して状態を管理することも可能です。

class CounterViewModel : ViewModel() {
    var count by mutableStateOf(0)
        private set

    fun increment() {
        count++
    }
}

@Composable
fun CounterScreen(viewModel: CounterViewModel = viewModel()) {
    Column {
        Text(text = "カウント: ${viewModel.count}")
        Button(onClick = { viewModel.increment() }) {
            Text(text = "増加")
        }
    }
}