Jetpack Compose Academy · レッスン

再コンポジション：再描画のきっかけ

Composeがコードを再実行するタイミングを理解します。

「再コンポジション：再描画のきっかけ」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

What Is Recomposition?

Recomposition is Compose re-running your Composable functions to update the screen after some state they read has changed.

Triggered by State Reads

A redraw is triggered only when a piece of state a Composable read actually changes. No state change means no recomposition.

Only Readers Re-Run

Compose is smart: it re-runs only the Composables that read the changed state, not your whole screen. This keeps updates cheap.

Recomposition Can Skip

If a Composable's inputs did not change, Compose may skip re-running it entirely. Unchanged work is simply reused.

It Can Run Out of Order

Compose may recompose Composables in any order or even in parallel. Never assume one runs before another.

It Can Run Often

Recomposition can happen frequently, even every animation frame. Your Composable code should be fast and lightweight.

Keep Composables Pure

Treat Composables as side-effect free. Avoid writing files or starting work directly in the body, since it may re-run many times.

@Composable
fun Greeting(name: String) {
    Text("Hi " + name)
}

Watch a Counter Recompose

Each time count changes, the Text that reads it recomposes and shows the new number, while untouched siblings stay put.

var count by remember { mutableStateOf(0) }
Text("Value: " + count)

Don't Do Heavy Work Inline

Running an expensive calculation in the body repeats it on every recomposition. Move it out or remember the result.

remember Caches Computations

Wrap a costly value in remember so Compose computes it once and reuses it across recompositions instead of redoing the work.

val sorted = remember(items) { items.sorted() }

Mental Model

Think of the UI as a function of state. Change the state, Compose recomputes the affected parts, and the screen follows.

Quick Check

What actually triggers a recomposition?

Recap

You now know recomposition re-runs only the readers of changed state, can run often and out of order, so keep Composables fast and pure. 🎯

よくある質問

「再コンポジション：再描画のきっかけ」レッスンは無料ですか？

はい。「再コンポジション：再描画のきっかけ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「再コンポジション：再描画のきっかけ」で何を学びますか？

Composeがコードを再実行するタイミングを理解します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「再コンポジション：再描画のきっかけ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る