Jetpack Compose入門｜基本の部品と状態管理の早見表

Jetpack Compose は、Android の画面を Kotlin の関数で書くしくみです。 @Composable を付けた関数が画面の部品になり、状態（State）が変わると、その状態を読んでいる関数だけがもう一度呼ばれて、画面が書き換わります（再コンポーズ）。XML のレイアウトと findViewById で View を書き換える作り方から、「状態を書き換えれば画面が追いかける」作り方に変わります。

@Composable
fun Counter() {
    var count by remember { mutableIntStateOf(0) }       // 状態
    Column(modifier = Modifier.padding(16.dp)) {
        Text("押した回数：$count")                         // count を読む → count が変わると呼び直される
        Button(onClick = { count++ }) { Text("押す") }    // 状態を書き換えるだけ
    }
}

確認環境：この記事は、Android Developers（developer.android.com）の Jetpack Compose のドキュメントで、API 名・引数・説明を確かめて書いています。Compose BOM は 2026.09.00（BOM の対応表のページの最新）、Compose のリリースページの安定版は compose.ui・foundation・runtime 1.12.1、material3 1.4.0（2026年10月7日更新）です。Android の SDK を使ったビルドと実機での表示はしていません。「よくあるコンパイルエラー」の文は、Kotlin 2.4.20 に含まれる Compose コンパイラープラグインで、@Composable 注釈だけを用意した最小のコードをコンパイルして確かめました（確認日 2026年10月13日）。

始める準備：Gradle の設定

Android Studio の「Empty Activity」テンプレートで新しく作ると、Compose の設定が入った状態で始まります。既存のプロジェクトに足すときの設定は次のとおりです（developer.android.com の Compose Compiler・BOM のページの形）。

// app/build.gradle.kts
plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id("org.jetbrains.kotlin.plugin.compose") version "2.4.10"   // Kotlin と同じ版
}

android {
    buildFeatures {
        compose = true
    }
}

dependencies {
    val composeBom = platform("androidx.compose:compose-bom:2026.09.00")
    implementation(composeBom)
    implementation("androidx.compose.material3:material3")
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
    implementation("androidx.activity:activity-compose")
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose")
    implementation("androidx.lifecycle:lifecycle-runtime-compose")
}

• BOM（Bill of Materials） は、Compose の各ライブラリの版をそろえる表。BOM の版だけ書けば、個々のライブラリには版を書かずに済む
• Compose コンパイラーは Kotlin 2.0 以降、Kotlin の Gradle プラグイン（org.jetbrains.kotlin.plugin.compose）として入れる。版は Kotlin と同じにする
• activity-compose・lifecycle-* は Compose の BOM に含まれないので、実際には版を書く（lifecycle-runtime-compose はドキュメントの例で 2.11.0）

Gradle の書き方は、関連記事「build.gradle書き方｜Groovy/Kotlin DSL対訳と依存設定一覧」で扱っています。

// MainActivity.kt
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {                       // ここから下が Compose の画面
            MaterialTheme {
                Counter()
            }
        }
    }
}

基本の部品の早見表

表示・入力の部品

Material 3 の部品（Button・TextField・Card など）は androidx.compose.material3 にあります。

並べる部品（レイアウト）

@Composable
fun TodoScreen(todos: List<Todo>, onAdd: () -> Unit) {
    Scaffold(
        topBar = { TopAppBar(title = { Text("TODO") }) },
        floatingActionButton = {
            FloatingActionButton(onClick = onAdd) { Icon(Icons.Default.Add, contentDescription = "追加") }
        },
    ) { innerPadding ->
        LazyColumn(
            modifier = Modifier.padding(innerPadding),          // ← Scaffold の余白を必ず使う
            contentPadding = PaddingValues(16.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp),
        ) {
            items(todos, key = { it.id }) { todo ->
                Card(Modifier.fillMaxWidth()) {
                    Row(Modifier.padding(16.dp), verticalAlignment = Alignment.CenterVertically) {
                        Text(todo.title, modifier = Modifier.weight(1f))
                        Checkbox(checked = todo.done, onCheckedChange = null)
                    }
                }
            }
        }
    }
}

• Scaffold は、上下のバーの分の余白（innerPadding）を中身に渡す。ドキュメントでは、中身の一番外の部品に当てるよう書かれている。当てないと、中身がバーの下に隠れる
• LazyColumn の items には key を渡す。ドキュメントでは、安定した一意のキーを渡すと、並びが変わっても各行の状態が保たれる、と説明されている
• 数の多いリストを Column で書くと、見えていない行も全部作るので遅くなる（ドキュメントの注意）

TextField は2つの書き方がある

// 状態（TextFieldState）で持つ書き方：ドキュメントで推奨
val username = rememberTextFieldState()
TextField(
    state = username,
    lineLimits = TextFieldLineLimits.SingleLine,
    placeholder = { Text("ユーザー名") },
)
// 値は username.text で読む

// 値と onValueChange で持つ書き方：以前からある形
var name by remember { mutableStateOf("") }
TextField(value = name, onValueChange = { name = it }, singleLine = true)

developer.android.com では、TextFieldState を使う書き方が推奨されています。onValueChange で非同期の処理を挟んで入力がずれる問題が起きず、状態は再コンポーズ・画面の回転・プロセスの終了をまたいで残る、と説明されています。

Modifier の早見表

順番に意味がある

Modifier.clickable { … }.padding(16.dp)   // 余白も含めて全部押せる
Modifier.padding(16.dp).clickable { … }   // 余白の部分は押せない

developer.android.com の説明では、padding を clickable の後に書くと、余白も含めて全体が押せる範囲になり、逆にすると余白は押しても反応しません。Modifier は上（左）から順に、外側から内側へ包んでいくと考えると、順番の違いが読めます。

自分で作る部品には、modifier: Modifier = Modifier の引数を用意して、一番外の部品に渡すのが、ドキュメントで勧められている形です。

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text("Hello $name", modifier = modifier.padding(8.dp))
}

状態管理の早見表

remember と mutableStateOf

var expanded by remember { mutableStateOf(false) }

• mutableStateOf は、値の変化を Compose に知らせる入れ物（MutableState）を作る。値が変わると、それを読んでいる部品の再コンポーズが予約される
• remember は、最初に呼ばれたときの値を覚えておき、再コンポーズのときはその値を返す。部品が画面から消えると忘れる
• by で書くときは、import androidx.compose.runtime.getValue と setValue が要る

ドキュメントには、同じ意味の書き方が3つ載っています。

val state = remember { mutableStateOf(0) }       // state.value で読み書き
var value by remember { mutableStateOf(0) }      // value で読み書き（よく使う）
val (value2, setValue) = remember { mutableStateOf(0) }

数値には mutableIntStateOf・mutableLongStateOf・mutableFloatStateOf もあります（数を箱に入れずに持てる）。

リストを mutableListOf() や ArrayList で持ち、中身を add しても、画面は更新されません。 ドキュメントでも、Compose が変化を知れない可変のオブジェクトを状態に使うと、画面に前のままのデータが出る、と注意されています。

var items by remember { mutableStateOf(listOf<String>()) }
items = items + "新しい行"                        // 新しいリストに置き換える

val items2 = remember { mutableStateListOf<String>() }
items2.add("新しい行")                            // Compose 用の変化を知らせるリスト

rememberSaveable：回転しても残す

var text by rememberSaveable { mutableStateOf("") }

remember は、画面の回転（構成の変更）で Activity が作り直されると値を失います。rememberSaveable は Bundle（Android が状態を保存する入れ物）に保存するので残ります。Bundle に入らない型は、@Parcelize を付けるか、mapSaver・listSaver で保存の方法を渡します。ドキュメントによると、利用者が最近使ったアプリの一覧から上にスワイプして閉じた場合は、rememberSaveable でも残りません。

State hoisting（状態を親に引き上げる）

@Composable
fun HelloScreen() {                                    // 状態を持つ（stateful）
    var name by rememberSaveable { mutableStateOf("") }
    HelloContent(name = name, onNameChange = { name = it })
}

@Composable
fun HelloContent(name: String, onNameChange: (String) -> Unit) {   // 状態を持たない（stateless）
    Column(Modifier.padding(16.dp)) {
        Text("Hello, $name")
        OutlinedTextField(value = name, onValueChange = onNameChange, label = { Text("名前") })
    }
}

状態の変数を、今の値（value: T）と、変更を頼むイベント（onValueChange: (T) -> Unit）の2つの引数に置き換えるのが基本の形です。値は親から子へ流れ、イベントは子から親へ上がります（単方向データフロー）。状態を持たない HelloContent は、プレビューやテストで値を渡すだけで表示できます。どこまで引き上げるかは、ドキュメントでは「その状態を読み書きする部品の、一番近い共通の親」とされています。

ViewModel と StateFlow

画面全体の状態と、業務の処理（保存・通信）は ViewModel に置きます。

data class TodoUiState(val todos: List<Todo> = emptyList(), val loading: Boolean = false)

class TodoViewModel(private val repo: TodoRepository) : ViewModel() {
    private val _uiState = MutableStateFlow(TodoUiState())
    val uiState: StateFlow<TodoUiState> = _uiState.asStateFlow()

    fun add(title: String) {
        viewModelScope.launch {
            repo.add(title)
            _uiState.update { it.copy(todos = repo.all()) }
        }
    }
}

@Composable
fun TodoRoute(viewModel: TodoViewModel = viewModel()) {      // 画面の入口だけで ViewModel を受け取る
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    TodoScreen(
        todos = uiState.todos,
        onAdd = { viewModel.add("新しいTODO") },
    )
}

• viewModel() は lifecycle-viewmodel-compose、collectAsStateWithLifecycle() は lifecycle-runtime-compose にある
• collectAsStateWithLifecycle() は、画面が見えている間だけ Flow を集める。ドキュメントで、Android で Flow を集める推奨の方法とされている
• ViewModel は、子の部品に渡さない。ドキュメントでは、画面の入口の部品で受け取り、子には値とラムダだけを渡すよう書かれている（上の TodoRoute → TodoScreen の形）
• 引数のある ViewModel（上の repo）は、viewModel(factory = …) か Hilt の hiltViewModel() で作る

StateFlow の使い方は、関連記事「Kotlin Flowの使い方 StateFlowとSharedFlowの違い」で扱っています。

副作用（画面の外に影響する処理）

コルーチンの基本は、関連記事「Kotlinコルーチン入門｜launch・async・runBlocking」で扱っています。

再コンポーズのしくみ

flowchart TD
    A[イベント<br/>ボタンを押す・入力する] --> B[状態を書き換える<br/>count++ / _uiState.update]
    B --> C[その状態を読んでいる<br/>Composable を無効にする]
    C --> D[再コンポーズ<br/>無効になった関数だけ呼び直す]
    D --> E{引数は前と同じ?}
    E -- 同じ --> F[スキップ<br/>呼ばない]
    E -- 違う --> G[呼び直して<br/>新しい UI の木を作る]
    G --> H[レイアウト → 描画]
    F --> H
    H --> I[画面に反映]
    I -.次のイベント.-> A

developer.android.com の「Thinking in Compose」で説明されている性質です。

@Composable
fun BadCounter(items: List<String>) {
    var count = 0
    Column {
        items.forEach {
            Text(it)
            count++          // 避ける：再コンポーズのたびに動く副作用
        }
    }
    Text("$count 件")
}

ドキュメントのまとめは「Composable 関数は、速く、何度呼んでも同じ結果になり、副作用の無い形に保つ」です。副作用は、ボタンの onClick などのコールバックか、上の LaunchedEffect などで書きます。

以前の View（XML）との対応表

Compose の部品と、XML の View のおおよその対応です。

ドキュメントでは、LazyColumn などは「RecyclerView を使ったことがあれば、同じ考え方」と説明されています。また、View では入れ子のレイアウトが遅くなる場合があったのに対し、Compose は何度も測り直さないので、深く入れ子にしても性能に響きにくい、とされています。

既存の画面に少しずつ入れるときは、XML の中に ComposeView を置いて Compose を表示する方法と、Compose の中に AndroidView で View を置く方法があります。

プレビュー

@Preview(showBackground = true, widthDp = 320)
@Composable
fun HelloContentPreview() {
    MaterialTheme {
        HelloContent(name = "RJC", onNameChange = {})
    }
}

• プレビューは ui-tooling-preview、表示には ui-tooling（debugImplementation）が要る
• ドキュメントによると、プレビューではネットワーク・ファイルにアクセスできず、ViewModel を使う部品は表示できない（ViewModel に渡すリポジトリなどを作れないため）。State hoisting で値とラムダだけ受け取る部品にしておくと、プレビューできる
• Android Studio の「インタラクティブモード」では、プレビューの中でクリックや入力を試せる

よくあるエラー

コンパイルエラー：@Composable を通常の関数から呼んだ

@Composable fun Greeting(name: String) { Text("Hello $name") }

fun onClick() {
    Greeting("A")                              // 通常の関数から呼ぶ
}

class Holder {
    val onClick: () -> Unit = { Text("x") }   // ただのラムダの中
}

error: functions which invoke @Composable functions must be marked with the @Composable annotation
error: @Composable invocations can only happen from the context of a @Composable function

Composable 関数は、Composable 関数（か setContent { } などの Composable のラムダ）の中からしか呼べません。 ボタンを押したときに画面を変えたいなら、onClick の中では状態を書き換えるだけにして、表示は Composable の中で状態を見て切り替えます。forEach のような inline の関数の中では呼べました。

コンパイルエラー：remember・try の中で呼んだ

val a = remember { Label("x") }   // remember の中で Composable を呼ぶ
try {
    Label("y")
} catch (e: Exception) { }

error: @Composable invocations can only happen from the context of a @Composable function
error: try catch is not supported around composable function invocations.

remember { } の中は、値を計算するだけの場所で、部品は呼べません。Composable 関数の呼び出しを try〜catch で囲むこともできません。エラーになりうる処理は、ViewModel などで先に済ませて、結果を状態として渡します。

実行時：同じ向きのスクロールを入れ子にした

Column(Modifier.verticalScroll(rememberScrollState())) {
    LazyColumn { /* … */ }        // IllegalStateException
}

ドキュメントによると、縦にスクロールする Column の中に、高さの決まっていない LazyColumn を入れると IllegalStateException になります。全体を1つの LazyColumn にして、上の部分も item { } で入れます。

画面が更新されない

よくある質問

Q. XML の View と Compose は、どちらで始めればよいですか。 A. developer.android.com では、Jetpack Compose は「ネイティブ UI を作るための、Android の推奨のモダンなツールキット」と紹介されています。既存の XML の画面は、ComposeView で画面の一部から Compose にできるので、両方を混ぜて少しずつ移す形も選べます。

Q. remember と ViewModel の使い分けは。 A. その部品の中だけの見た目の状態（開閉・アニメーション）は remember、画面をまたぐデータや保存・通信が絡むものは ViewModel です。上の状態管理の早見表のとおりです。

Q. Compose で書いた画面は、iOS やデスクトップでも動きますか。 A. Jetpack Compose は Android 用です。JetBrains の Compose Multiplatform は、同じ書き方でデスクトップ・iOS・Web に対応しています（androidx ではなく org.jetbrains.compose のライブラリ）。

Q. Kotlin の文法でつまずきます。 A. Compose は、ラムダ・拡張関数・by による委譲を多く使います。ラムダ式は関連記事「Kotlinラムダ式と高階関数の書き方 it・関数型・::・inline」で、by は関連記事「Kotlin by 委譲の使い方 クラス委譲とby lazy・監視」で扱っています。Kotlin 全体は関連記事「Kotlin入門｜Javaとの違いと基本文法をコピペで学ぶ【2.4対応】」で扱っています。

まとめ

• @Composable 関数が画面の部品。状態が変わると、その状態を読む関数だけが呼び直される（再コンポーズ）
• 並べるのは Column・Row・Box、長いリストは LazyColumn（key を渡す）、画面の骨組みは Scaffold（innerPadding を当てる）
• Modifier は順番に意味がある。margin は無く padding だけ
• 状態は remember（一時）→ rememberSaveable（回転でも残す）→ State hoisting（親へ）→ ViewModel ＋ StateFlow（画面全体） の順に広くなる
• 可変のリストに add しても画面は変わらない。新しいリストに置き換えるか mutableStateListOf
• Composable 関数は、Composable の中からしか呼べない。remember { } と try の中でも呼べない
• プレビューでは ViewModel が使えないので、値とラムダだけ受け取る部品に分ける

参考・出典

確認日はいずれも 2026年10月13日です。

• Android Developers「Jetpack Compose」：https://developer.android.com/compose
• Android Developers「Thinking in Compose」：https://developer.android.com/develop/ui/compose/mental-model
• Android Developers「State and Jetpack Compose」：https://developer.android.com/develop/ui/compose/state
• Android Developers「Where to hoist state」：https://developer.android.com/develop/ui/compose/state-hoisting
• Android Developers「Architecting your Compose UI」：https://developer.android.com/develop/ui/compose/architecture
• Android Developers「Side-effects in Compose」：https://developer.android.com/develop/ui/compose/side-effects
• Android Developers「Compose modifiers」：https://developer.android.com/develop/ui/compose/modifiers
• Android Developers「Compose layout basics」：https://developer.android.com/develop/ui/compose/layouts/basics
• Android Developers「Lists and grids」：https://developer.android.com/develop/ui/compose/lists
• Android Developers「Scaffold」：https://developer.android.com/develop/ui/compose/components/scaffold
• Android Developers「Configure text fields」：https://developer.android.com/develop/ui/compose/text/user-input
• Android Developers「Preview your UI with composable previews」：https://developer.android.com/develop/ui/compose/tooling/previews
• Android Developers「Compose Compiler Gradle plugin」：https://developer.android.com/develop/ui/compose/compiler
• Android Developers「Use a Bill of Materials」：https://developer.android.com/develop/ui/compose/bom
• Android Developers「BOM to library version mapping」：https://developer.android.com/develop/ui/compose/bom/bom-mapping
• Android Developers「Compose releases」：https://developer.android.com/jetpack/androidx/releases/compose
• Android Developers「ViewModel APIs cheat sheet」：https://developer.android.com/topic/libraries/architecture/viewmodel/viewmodel-apis

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。