Error State — フィールドエラーの表示とAndroidでの実装

Androidのフィールドエラー状態とは？

Error Stateは、入力されたデータが検証に失敗したときにアクティブになる入力フィールドの特別な表示モードです。視覚的に、Error Stateには3つのコンポーネントが含まれます：フィールドの境界線または背景色の変更（通常は赤色）、エラーを説明するテキストメッセージがフィールドの下に表示され、オプションでアイコンまたはハイライトが表示されます。Error Stateの目的は、問題のあるフィールドにユーザーの注意を即座に引き付け、エラーの修正方法を提案することです。

Androidでは、Error StateはMaterial Design ComponentsのTextInputLayoutレベルで実装されています。TextInputLayoutはEditTextをラップし、その状態（normal、focused、error、disabled）を管理します。setError(String)メソッドはフィールドをエラー状態に切り替え、境界線の色を変更し、メッセージを表示します。テキストが変更されるか、setError(null)が呼び出されると、フィールドはnormalに戻ります。

Material Design Guidelinesによると、Error Stateは目立つが支配的ではない必要があります。赤い境界線の色は通常の状態とコントラストをなす必要がありますが、インターフェースに過負荷をかけてはいけません。エラーメッセージには、問題とその解決方法に関する具体的な情報を含める必要があります。エラーアイコン（感嘆符付きの赤い丸など）は、視覚的な信号を強化します。

TextInputLayoutでのsetErrorの仕組み

setError(CharSequence errorText)メソッドは、TextInputLayoutをエラー状態に切り替えます。errorTextパラメータは、フィールドの下に表示されるテキストです。nullが渡されると、エラーはクリアされます。TextInputLayoutはアニメーションを管理します：エラーテキストはスムーズなフェードインで表示され、境界線は赤に変わります。エラーアイコン（デフォルト：丸の中の感嘆符）がフィールドの最後に表示されます。

重要な詳細：エラーメッセージ用のスペースを確保するために、setErrorの前にsetErrorEnabled(true)を呼び出す必要があります。そうしないと、スペースが確保されていないため、エラーが表示されたときにレイアウトが「跳ねる」可能性があります。レイアウトのずれを防ぐために、XMLでapp:errorEnabled="true"を介して常にエラーサポートを有効にすることをお勧めします。

setErrorEnabled(true)が有効になっている場合、setErrorメソッドはフィールドテキストが変更されると自動的にクリアされます。この動作はリアルタイム検証に便利です。ユーザーがエラーの修正を開始するとすぐに、赤い境界線が消え、フィールドは通常の状態に戻ります。ただし、複雑なシナリオでは、この自動クリアが望ましくない場合があります。そのような場合は、エラーを手動で管理してください。

val til = findViewById<TextInputLayout>(R.id.til_email)

// エラーサポートを有効にする（それ以外の場合はXMLで設定）
til.isErrorEnabled = true

// エラーメッセージを設定
til.error = "Invalid email address"

// エラーをクリア
til.error = null

// エラーが存在するか確認
if (til.error != null) {
    // フィールドはエラー状態です
}

この例では、setError/isErrorEnabledにアクセスするためにKotlinプロパティを使用しています。TextInputLayoutは自動的にUIを更新します：boxStrokeColorを変更し、エラーアイコンを表示し、エラーテキストを表示します。EditTextのテキストが変更されると、エラーは自動的にクリアされます。手動でリセットするには、error = nullを設定します。

エラー表示の代替方法

すべてのプロジェクトがMaterial Design Componentsを使用するわけではありません。カスタムエラー表示には、EditTextの下に個別のTextViewを使用し、エラー時に表示することができます。このアプローチにより、スタイルとメッセージの配置を完全に制御できます。たとえば、メッセージをフィールドの右側に配置したり、異なる背景色を使用したり、テキストの左側にアイコンを追加したりできます。

Jetpack Composeでは、Error StateはOutlinedTextFieldまたはTextFieldのisErrorパラメータを介して実装されます。isError = trueの場合、境界線が赤くなり、supportingTextを介してエラーテキストを表示できます。Composeにはテキスト変更時の自動クリア機能が組み込まれていません。開発者はrememberとmutableStateOfを使用してエラー状態を手動で管理します。

グループエラー（複数のフィールドに対する単一のメッセージ、例：「必須フィールドをすべて入力してください」）には、フォームの上部にSnackbar、Dialog、またはインラインブロックを使用します。グループエラーは個々のフィールドのError Stateを置き換えるのではなく、補完します。ユーザーは最初に一般的なメッセージを表示し、次にエラーのある特定のフィールドを探します。

エラーの色、アイコン、アニメーション

Material Design ComponentsのError Stateの色は、boxStrokeErrorColor属性またはテーマのcolorError属性を介して制御されます。デフォルトではシステムの赤色が使用されますが、アプリのテーマまたはTextInputLayoutで直接app:boxStrokeErrorColor="@color/customErrorColor"を介して上書きできます。ダークテーマのサポートには、ライトモードとダークモードで異なる色のセレクターを使用することをお勧めします。

エラーアイコンはapp:errorIconDrawableを介して設定されます。デフォルトでは、丸の中に感嘆符が表示されます。カスタムアイコンに置き換えたり、app:errorIconDrawable="@null"を設定して完全に削除したりできます。アイコンはTextInputLayoutの最後に表示され、追加の視覚的マーカーとして機能します。Material Design 3では、アクセシビリティのためにエラーアイコンが必須です。

エラー表示のアニメーションはTextInputLayoutに組み込まれています：テキストが不透明度のスムーズな変化とともに下からスライドアップします。カスタムアニメーションには、Transition APIまたはMotionLayoutを使用します。たとえば、エラー時にフィールドを振動させると、追加の注意を引くことができます。ただし、アニメーションを過剰に使用するとUXが低下します。スムーズなメッセージ表示で十分です。

検証中のエラー状態の管理

Error Stateの管理は、フィールド検証中のエラー設定と修正時のエラークリアの2段階に分かれています。最も単純なケースでは、検証はTextWatcher.afterTextChangedで呼び出されます：値が無効な場合は、エラーメッセージとともにsetErrorが呼び出されます。有効な場合は、setError(null)が呼び出されます。setError(null)が状態をクリアすると、TextInputLayoutは自動的にエラーを非表示にします。

フォーム検証の場合、エラーはフォーム送信段階で設定されます。すべてのフィールドをループし、それぞれを検証し、無効なフィールドにエラーを設定し、最初のエラーフィールドにフォーカスします。このプロセス中、送信ボタンはブロックされます。フォームが大きい場合は、最初のエラーフィールドまでスクロールし、自動的にフォーカスを設定することをお勧めします。

単一エラーフォーカスルール：フォーム送信時には、最初のエラーフィールドにのみフォーカスを設定します。ユーザーは一度に1つのエラーを修正し、修正後、次のエラーフィールドが自動的にフォーカスを受け取ります。この段階的なアプローチにより、認知負荷が軽減されます。Material TextInputLayoutはエラー設定時にフォーカスをインターセプトしません。これはrequestFocus()を介して手動で行う必要があります。

Error Stateを使用する際の一般的な間違い

最初の間違い — isErrorEnabledの欠如。setErrorの前にsetErrorEnabledが呼び出されないと、エラーメッセージが表示されたときにレイアウトがずれる可能性があります。これは、フィールドが画面の中央にある場合に特に重要です。ユーザーはスクロール位置を失います。エラーを設定する前に、XMLでapp:errorEnabled="true"を介して、またはプログラムで常にsetErrorEnabled(true)を有効にしてください。

2番目の間違い — 長すぎるエラーメッセージ。長いテキストは複数行に折り返され、隣接するフィールドと重なる可能性があります。推奨されるエラーメッセージの長さは20〜40文字です。より多くの情報が必要な場合は、通常状態のhelperTextまたは追加説明用のツールチップを使用してください。簡潔さが良いError Stateの基本です。

3番目の間違い — アクセシビリティの無視。Error Stateはスクリーンリーダーがアクセスできる必要があります。TextInputLayoutはcontentDescriptionを介して自動的にエラーを通知しますが、カスタム実装では手動で行う必要があります。エラーメッセージにはannounceForAccessibility()またはandroid:importantForAccessibilityを使用してください。TalkBackユーザーはエラーが表示されたらすぐに聞こえる必要があります。