Android Academy · レッスン

入力値のバリデーション

Q: 「入力値のバリデーション」で何を学びますか？

入力値を確認し、役立つエラーを表示します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

入力値を確認し、役立つエラーを表示します。

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

入力を検証する理由

ユーザーは、名前を空欄にしたり、形式が正しくないメールアドレスを入力したり、短すぎるパスワードを設定したりします。優れたフォームは、こうした間違いを早い段階で検出し、何を修正すればよいかを明確に説明します。

このレッスンでは、Composeのフォームに検証を追加し、フィールド内にエラーを表示して、すべてが有効になるまで送信ボタンを無効にします。

検証ルールは単なる関数

検証ロジックは、値を受け取って有効かどうか（またはエラーメッセージ）を返す、通常のKotlin関数として記述します。これにより、ルールを再利用しやすく、テストもしやすくなります。

ここでは、簡単なメールアドレスのチェックを見てみましょう。

fun emailError(email: String): String? = when {
    email.isBlank() -> "Email is required"
    !email.contains("@") -> "Enter a valid email"
    else -> null
}

フィールドにエラーを表示する

OutlinedTextFieldにはisErrorフラグとsupportingTextスロットがあります。これらを組み合わせると、赤いフィールドと、その下のメッセージを表示できます。

エラーは検証関数から直接取得します。

var email by remember { mutableStateOf("") }
val error = emailError(email)

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    isError = error != null,
    supportingText = { if (error != null) Text(error) }
)

早い段階で怒らない

ユーザーがまだフィールドに触れてもいないのに「メールアドレスは必須です」と表示すると、威圧的に感じられます。一般的な対策は、フィールドが操作済みかどうかを追跡し、操作された後にだけエラーを表示することです。

ここでは、フィールドからフォーカスが外れた時点で操作済みとしてマークします。

var email by remember { mutableStateOf("") }
var touched by remember { mutableStateOf(false) }
val error = if (touched) emailError(email) else null

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    isError = error != null,
    modifier = Modifier.onFocusChanged {
        if (!it.isFocused) touched = true
    }
)

パスワードを検証する

パスワードには通常、複数のルールがあります。最初に失敗したルールを返すと、ユーザーは一度に1つずつ問題を修正できます。

ここでも、UIを含まない純粋な関数になっていることに注目してください。

fun passwordError(pw: String): String? = when {
    pw.length < 8 -> "At least 8 characters"
    pw.none { it.isDigit() } -> "Add a number"
    pw.none { it.isUpperCase() } -> "Add an uppercase letter"
    else -> null
}

フィールド間の検証

「確認用パスワードはパスワードと一致する必要がある」のように、2つのフィールドに関係するルールもあります。このようなルールは単一フィールド用の関数には置けないため、両方の値を利用できる場所で計算します。

var password by remember { mutableStateOf("") }
var confirm by remember { mutableStateOf("") }

val confirmError =
    if (confirm.isNotEmpty() && confirm != password)
        "Passwords don't match"
    else null

有効になるまで送信を無効にする

すべてのルールに合格すると、フォーム全体が有効になります。1つのブール値を計算し、それを使って送信ボタンを有効または無効にします。

これにより、ユーザーが不正なデータを最初から送信するのを防げます。

val formValid =
    emailError(email) == null &&
    passwordError(password) == null &&
    confirmError == null

Button(onClick = { submit() }, enabled = formValid) {
    Text("Create Account")
}

送信時に検証する

フィールド内の検証はユーザーを案内するものですが、送信ボタンを押したときにもすべてを再検証する必要があります。送信ハンドラーが、処理を続行するか、すべてのエラーを一度に表示するかを判断します。

fun onSubmit() {
    val errors = listOfNotNull(
        emailError(email),
        passwordError(password)
    )
    if (errors.isEmpty()) {
        register(email, password)
    } else {
        // show errors / mark fields touched
    }
}

入力できる内容を制限する

検証は予防的に行うこともできます。電話番号の場合は、onValueChange内で数字以外の文字を単純に無視し、不正な入力が状態に入らないようにします。

後からユーザーを責めるよりも、親切な方法です。

var phone by remember { mutableStateOf("") }

OutlinedTextField(
    value = phone,
    onValueChange = { input ->
        phone = input.filter { it.isDigit() }.take(10)
    },
    label = { Text("Phone") }
)

ViewModelに検証を集約する

実際の画面では、検証をViewModelに置き、UIは結果を表示するだけにします。ViewModelはエラーとisValidフラグを公開します。

これにより、コンポーザブルをシンプルに保ち、ルールを単体テストできるようになります。

class SignUpViewModel : ViewModel() {
    var email by mutableStateOf("")
        private set

    val emailError: String?
        get() = emailError(email)

    val isValid: Boolean
        get() = emailError == null && email.isNotBlank()

    fun onEmailChange(value: String) { email = value }
}

Pure Kotlin: ルールをテストする

検証関数は純粋な関数なので、どこでも実行できます。ここでは、メールアドレスとパスワードのルールを単独で実行しています。単体テストから呼び出す場合と同じです。

fun emailError(email: String): String? = when {
    email.isBlank() -> "Email is required"
    !email.contains("@") -> "Enter a valid email"
    else -> null
}

fun main() {
    println(emailError(""))
    println(emailError("nope"))
    println(emailError("ada@dev.io"))
}

確認問題

フィールドを無効としてマークし、その下にメッセージを表示するには、OutlinedTextFieldのどのプロパティの組み合わせを使いますか。

まとめ

Composeのフォームを適切に検証できるようになりました。

ルールは、エラーメッセージまたはnullを返す純粋な関数として記述します。
isErrorとsupportingTextでエラーを表示し、フィールドが操作される前にエラーを表示するのは避けます。
フィールド間のルールは、両方の値を参照できる場所で処理します。
フォーム全体が有効になるまで送信を無効にし、送信時にも再検証します。
filterで不正な入力を防ぎ、ルールをViewModelに集約します。

次は、キーボードの種類、IMEアクション、フォーカス管理について学びます。

よくある質問

「入力値のバリデーション」レッスンは無料ですか？

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

「入力値のバリデーション」で何を学びますか？

入力値を確認し、役立つエラーを表示します。ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「入力値のバリデーション」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Android Academyに戻る