読み込み、成功、エラーのUI
ネットワークのあらゆる結果をきれいに表示します。
「読み込み、成功、エラーのUI」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Every Request Has Three Outcomes
A network call is either still loading, finished with data, or failed. Great screens show something honest for all three.
Model State With a Sealed Class
A sealed class captures those outcomes as distinct types, so the compiler forces you to handle each case in the UI.
sealed class UiState {
object Loading : UiState()
data class Success(val users: List<User>) : UiState()
data class Error(val message: String) : UiState()
}Start in the Loading State
Initialize your state as Loading so the screen shows a spinner the instant it appears, before any data arrives.
var state by mutableStateOf<UiState>(UiState.Loading)Update on Success
When the call returns, swap the state to Success with the fetched list. Compose recomposes and reveals the content.
state = UiState.Success(api.getUsers())Update on Error
In your catch block, move to the Error state with a friendly message instead of leaving the user stuck on a spinner.
catch (e: Exception) {
state = UiState.Error("Couldn't load users")
}Branch With when
In the Composable, use a when over the state. Each branch renders exactly the right UI for that outcome.
when (val s = state) {
is UiState.Loading -> { }
is UiState.Success -> { }
is UiState.Error -> { }
}Show a Spinner While Loading
For the loading branch, a centered CircularProgressIndicator reassures users that something is happening. ⏳
is UiState.Loading -> CircularProgressIndicator()Render the Data on Success
The success branch reads the list and draws it, usually in a LazyColumn so long results scroll smoothly.
is UiState.Success -> UserList(s.users)Offer a Retry on Error
The error branch should show the message plus a Retry button that re-runs your load function. Failures shouldn't be dead ends.
is UiState.Error -> RetryView(s.message, ::loadUsers)Handle the Empty Case
Success doesn't always mean items. When the list is empty, show a calm empty state rather than a blank screen.
One State Drives the Whole Screen
Because a single state object decides everything, your UI can never show a spinner and data at once. It stays predictable.
Quick Check
Why model loading, success, and error as a sealed class?
Recap: Rendering Every Outcome
You modeled state as a sealed class, branched with when, and showed loading, data, errors, and empties. You can now ship a robust networked screen.
よくある質問
「読み込み、成功、エラーのUI」レッスンは無料ですか？
はい。「読み込み、成功、エラーのUI」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「読み込み、成功、エラーのUI」で何を学びますか？
ネットワークのあらゆる結果をきれいに表示します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「読み込み、成功、エラーのUI」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。