0Pricing
Android Academy · レッスン

エラー処理とUX

sealed class(Loading/Success/Error)でUIの状態をモデル化します。ProgressBarや、Retryアクション付きのSnackbarを表示し、TextInputLayoutでインラインの入力検証エラーを示します。

「エラー処理とUX」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン3/6です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全6レッスンが含まれています。

エラー処理が重要な理由

説明もなくクラッシュしたりフリーズしたりするアプリは、壊れているように感じられます。ユーザーは何が起きたのか、次に何をすればよいのか分かりません。

適切なエラー処理には、次のことが含まれます。

  • アプリが安定して動作する
  • ユーザーに明確なメッセージを表示する
  • 再試行したり、必要な操作を行ったりできる

これが、アプリの評価が星2つになるか星5つになるかの違いです。

UI状態のモデル化

すべてのUI状態をsealed classでモデル化する、分かりやすいパターンを紹介します。

  • Loading — リクエストの処理中
  • Success(data) — データを利用できる
  • Error(message) — 何らかの問題が発生した

ViewModelがこれらの状態のいずれかを発行し、UIがその状態を描画します。

Sealed Class UiState

考えられるすべての状態に対応するsealed classを定義します。

sealed class UiState<out T> {
    object Loading : UiState<Nothing>()
    data class Success<T>(val data: T) : UiState<T>()
    data class Error(val message: String) : UiState<Nothing>()
}

// In ViewModel:
private val _state = MutableLiveData<UiState<List<Post>>>()
val state: LiveData<UiState<List<Post>>> = _state

fun loadPosts() {
    _state.value = UiState.Loading
    viewModelScope.launch {
        try {
            val posts = withContext(Dispatchers.IO) { repo.getPosts() }
            _state.value = UiState.Success(posts)
        } catch (e: Exception) {
            _state.value = UiState.Error(e.message ?: "Unknown error")
        }
    }
}

UIでの状態の描画

状態を監視し、それぞれのケースに応じた適切なビューを表示します。

viewModel.state.observe(this) { state ->
    when (state) {
        is UiState.Loading -> {
            binding.progressBar.visibility = View.VISIBLE
            binding.recyclerView.visibility = View.GONE
            binding.tvError.visibility = View.GONE
        }
        is UiState.Success -> {
            binding.progressBar.visibility = View.GONE
            binding.recyclerView.visibility = View.VISIBLE
            adapter.submitList(state.data)
        }
        is UiState.Error -> {
            binding.progressBar.visibility = View.GONE
            binding.tvError.text = state.message
            binding.tvError.visibility = View.VISIBLE
        }
    }
}

読み込み中のProgressBar

データを待機している間はProgressBarを表示します。

  • 回転するローダーにはandroid:indeterminate="true"を使用します
  • View.VISIBLEとView.GONEを切り替えて表示状態を変更します
  • GONEはビューを非表示にするだけでなく、レイアウトから除外します(スペースも占有しません)

SnackbarとToastの比較

エラーメッセージにはToastよりもSnackbarを優先します。

  • Snackbarにはアクションボタン(例:「再試行」)を追加できます
  • 現在の画面に付随するため、他のアプリの上に浮かびません
  • 自動的に消えるか、タップして消去できます

再試行機能付きSnackbar

再試行アクションボタン付きのエラーを表示します。

import com.google.android.material.snackbar.Snackbar

fun showError(message: String) {
    Snackbar.make(
        binding.root,  // root view of the screen
        message,
        Snackbar.LENGTH_INDEFINITE  // stays until dismissed
    ).setAction("Retry") {
        viewModel.loadPosts()  // retry the request
    }.show()
}

入力値の検証

ユーザー入力をサーバーに送信する前に検証します。

  • TextInputLayoutのerrorプロパティを使用して、フィールドの下にインラインエラーを表示します
  • APIを呼び出す前に、未入力のフィールド、メールアドレスの形式、パスワードの長さを確認します
  • ユーザーが入力を始めたらエラーを消去します

TextInputLayoutのエラー

フォームフィールドにインラインの入力検証エラーを表示します。

fun validateAndSubmit() {
    val email = binding.etEmail.text.toString().trim()
    val password = binding.etPassword.text.toString()

    var hasError = false

    if (email.isBlank() || !email.contains("@")) {
        binding.tilEmail.error = "Enter a valid email"
        hasError = true
    } else {
        binding.tilEmail.error = null  // clear error
    }

    if (password.length < 6) {
        binding.tilPassword.error = "Minimum 6 characters"
        hasError = true
    } else {
        binding.tilPassword.error = null
    }

    if (!hasError) viewModel.login(email, password)
}

理解度チェック

ビューをレイアウトから完全に除外し、スペースを占有しなくする表示状態はどれですか。

まとめ:エラー処理とUX

これで、アプリでエラーを適切に処理できるようになりました。

  • sealed classを使って、状態をLoading / Success / Errorとしてモデル化する
  • 読み込み中にProgressBarを表示する
  • ネットワークエラーには、再試行アクション付きのSnackbarを表示する
  • フォーム検証にはTextInputLayoutのインラインエラーを使用する
  • View.GONEとView.INVISIBLEの違い — 除外と非表示

最後のレッスンでは、アプリをPlay Storeに公開します。

よくある質問

「エラー処理とUX」レッスンは無料ですか?

はい。「エラー処理とUX」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全6レッスンが含まれています。

「エラー処理とUX」で何を学びますか?

sealed class(Loading/Success/Error)でUIの状態をモデル化します。ProgressBarや、Retryアクション付きのSnackbarを表示し、TextInputLayoutでインラインの入力検証エラーを示します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Android Academyを始めるのに経験は必要ですか?

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

「エラー処理とUX」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. RetrofitとREST API
  2. Coilによる画像読み込み
  3. エラー処理とUX
  4. プッシュ通知
  5. WorkManagerとバックグラウンドタスク
  6. Play Storeへの公開
← Android Academyに戻る