📘 Vol.9.10：【Struts2】UX向上！エラー表示のUIデザイン編   〜 視認性・操作性を高める実践テクニック 〜

## 🧭 本記事の目的

Struts2のバリデーション機能を使ってエラーメッセージを表示する際、  
**ただ出すだけではユーザー体験（UX）を損なう**こともあります。

本記事では `<s:fielderror>` を軸に、**見やすく・分かりやすいエラー表示**を  
実現するためのデザイン／UI改善テクニックを紹介します。

---

## ✅ 本記事で扱うテーマ

- `<s:fielderror>` のカスタマイズ表示
- 入力欄とエラーメッセージのひもづけ
- CSSによる赤枠強調や警告アイコン表示
- ツールチップやバルーンの導入
- JavaScriptと連携したリアルタイムエラーチェック

---

## 🎯 1. デフォルトの `<s:fielderror>` の課題

Struts2では以下のように記述することで、バリデーションエラーを一括表示できます。

```jsp
<s:form action="login" method="post">
  <s:fielderror />
  <s:textfield name="userId" label="ユーザーID" />
  <s:password name="password" label="パスワード" />
</s:form>
```

----

ただし、この方法では以下のような課題があります：

- すべてのエラーがページ上部に表示され、どの入力欄に対応しているのか分かりにくい

- フォームの長さによっては、エラーが視界に入らず気づかれにくい

- エラー後の再入力が手間になる

---

### 🛠 2. 各入力欄の直下にエラーを表示する
以下のように、入力項目ごとに `<s:fielderror fieldName="..." />` を使うことで、
フィールド単位でエラーメッセージを表示できます。

```jsp
<s:textfield name="userId" label="ユーザーID"
    cssClass="%{#fieldErrors.userId != null ? 'error-field' : ''}" />
<s:fielderror fieldName="userId" />
```
こうすることで、ユーザーは「どこが間違っているのか」を
***視覚的にすぐ理解できるようになります。***

---

### 🎨 3. CSSで赤枠表示や警告アイコンを追加

```css
.error-field {
  border: 2px solid red;
  background-color: #fff0f0;
}
```
補足として、入力欄の右側に ⚠ アイコンを表示することも有効です。
`::after` 擬似要素などを使えば、デザインへの影響も最小限に抑えられます。

---

### 💡 4. ツールチップやリアルタイムチェックの導入

JavaScript（jQuery など）を活用すれば、以下のようなUX向上も可能です。
- フォーカスアウト時に即時エラー表示

- エラーメッセージをバルーン型で表示

- 入力中に問題箇所をリアルタイムで検知・補助

```js
$('#userId').on('blur', function() {
  if (!$(this).val()) {
    $(this).addClass('error-field');
    $('#userIdError').text('ユーザーIDは必須です');
  }
});

```
---

### 🧪 5. エラー表示改善の効果まとめ
| 改善内容            | ユーザビリティへの効果             |
| --------------- | ----------------------- |
| エラーをフィールドの直下に表示 | 問題箇所がすぐ分かる              |
| 赤枠や背景色による強調     | 視覚的に明示的、誤操作の防止につながる     |
| 警告アイコンやツールチップ   | 短文エラー＋説明補足で操作誘導がスムーズになる |
| JS連携のリアルタイム表示   | 入力中に即座に修正でき、ユーザー負荷が軽減   |

---

### ✅ まとめ
Struts2の <s:fielderror> は、ちょっとした工夫でUXが大きく改善できます。

- 入力欄との位置連動

- 視覚的な強調（CSS）

- JavaScriptによる補助的な誘導

を組み合わせることで、ユーザーに優しいフォーム設計が実現可能です。

---

### [🧭 次回予告：Vol.9.11](https://qiita.com/juehara-crypto/items/7d33c9cd812b37153c12)
次回は、***複数フォームのバリデーション管理***について解説！

- 複数フォームが1ページにある場合の `validate()` の戦略

- 入力チェック処理の分離・共通化

- `Ajax×Struts2`によるハイブリッドなバリデーション制御

など、実務で役立つ知見をお届けします！



---

### ✨ シリーズまとめ（Vol.9.x バリデーション編）

| 回   | テーマ                                         | 内容の一部紹介                              |
|------|----------------------------------------------|--------------------------------------------|
| [9.1](https://qiita.com/juehara-crypto/items/a67976acd60430fa0da6)  | `validate()`メソッドの基本                    | Struts2標準の入力チェック基礎              |
| [9.2](https://qiita.com/juehara-crypto/items/44fd5012bfbc809d352a)  | `@Validations` アノテーション活用             | 宣言的バリデーション設計                   |
| [9.3](https://qiita.com/juehara-crypto/items/fd6881d2c54de07b3ae4)  | `validation.xml` 外部定義でのバリデーション   | 大規模PJでのメンテナンス性                 |
| [9.4](https://qiita.com/juehara-crypto/items/c82203f583b2712be395)  | `conversion.properties` と型変換              | 日付/数値/Enum変換の実務対応               |
| [9.5](https://qiita.com/juehara-crypto/items/c44fae5980a5c9b40312)  | 入力エラー時のメッセージ制御                  | `addFieldError()` / メッセージキー運用     |
| [9.6](https://qiita.com/juehara-crypto/items/de18b174f1740f9b3646)  | バリデーション共通化                         | 共通部品によるDRY設計                      |
| [9.7](https://qiita.com/juehara-crypto/items/793e85ad47b981d6fbae)  | サーバサイドとクライアントサイドの協調        | jQueryやHTML5との併用戦略                  |
| [9.8](https://qiita.com/juehara-crypto/items/b11017ca621d94599f72)  | 実務シナリオでのバリデーション総仕上げ       | 会員登録/投稿処理などの実例適用           |
| [9.9](https://qiita.com/juehara-crypto/items/6df87d22d07818df5166)  | バリデーション処理の単体テスト編       | validate()／独自バリデータ／input遷移の検証を網羅的に |
| [9.10](https://qiita.com/juehara-crypto/items/6c042593898aa598cba4)  | エラー表示のUIデザイン編        | 視認性・操作性を高める実践テクニック |
| [9.11](https://qiita.com/juehara-crypto/items/7d33c9cd812b37153c12)  | Ajax×バリデーション連携編        | クライアント×サーバーで UX＆保守性を両立するハイブリッド構成 |

---