📘 Vol.9.5：【Struts2】<s:fielderror>徹底活用編   〜 入力チェックエラーの表示をデザイン＆UX向上させよう 〜

Struts2 におけるバリデーションシリーズ、今回は「エラー表示」の UX 向上をテーマにお届けします。

---

## 🎯 本記事のゴール
- `<s:fielderror>` の基本と応用的な使い方を理解
- 入力フォームとエラー表示を連携してUXを改善
- 実務的に使えるデザイン改善例を紹介

---

## 🧩 1. `<s:fielderror>` 基本構文のおさらい

Struts2 の入力バリデーションエラーを画面に表示するための専用タグです。

```jsp
<s:fielderror />
```

- すべてのフィールドのエラーメッセージをリスト形式で表示

- 通常は `<s:form>` 内の上部に配置

フィールド単位で表示することも可能です。
```jsp
<s:fielderror fieldName="username"/>
```

---

### 🎨 2. UIを整える！よくある表示改善テクニック
### ✅ 例：パスワード欄の直下に表示させる
```jsp
<s:textfield name="password" label="パスワード"/>
<s:fielderror fieldName="password" cssClass="error-message"/>
```

### ✅ CSSで見た目を整える
```css
.error-message {
  color: red;
  font-size: 0.9em;
  margin: 2px 0 10px;
}
```

---

### ✨ 3. エラーがあるフィールドをハイライト！
```jsp
<s:textfield name="username"
  cssClass="%{#fieldErrors.username != null ? 'input-error' : ''}"
  label="ユーザ名"/>
```

```css
.input-error {
  border: 2px solid red;
  background-color: #fff0f0;
}
```

- エラーが発生している場合のみ、スタイルを付与
- #fieldErrors.フィールド名 で判定可能

---

### 🧠 4. fieldErrors / actionErrors / actionMessages の違い

| 種別               | 対象            | 使用タグ                | 主な用途        |
| ---------------- | ------------- | ------------------- | ----------- |
| `fieldErrors`    | フィールド単位のエラー   | `<s:fielderror>`    | 入力バリデーション   |
| `actionErrors`   | 全体エラー（認証失敗など） | `<s:actionerror>`   | ロジック的な失敗    |
| `actionMessages` | 成功メッセージなど     | `<s:actionmessage>` | 登録成功や更新完了など |

---

### 💡 5. 実装例（GitHub）
以下のプロジェクトでは、LoginAction に対して `validate()` によるチェックを行い、
その結果を `<s:fielderror>` で表示しています。

🔗 LoginAction.java（GitHub） の validate 実装（[77〜95行目](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/03.%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/Bulletinboard/src/main/java/com/company/bulletinboard/action/login/LoginAction.java#L77-L95)）

🔗 login.jsp（GitHub）の実装 ([14行目～18行目)](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/03.%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/Bulletinboard/WebContent/login.jsp#L14-L18))


---

### 📝 補足Tips：複数フィールドを1箇所にまとめて表示したい場合

```jsp
<c:if test="%{hasFieldErrors()}">
  <ul class="error-summary">
    <s:fielderror />
  </ul>
</c:if>
```

エラーまとめ表示用の領域を作ることで、ページ上部に一覧でエラーを提示する形式も可能です。

---

### 📘 まとめ

| テクニック                         | 効果                   |
| ----------------------------- | -------------------- |
| `<s:fielderror>` 使用           | 入力ミスを視覚化             |
| CSS連動でハイライト                   | UX向上・入力補助            |
| 表示位置や構成の工夫                    | エラー箇所がすぐわかる          |
| `actionErrors`/`messages`との併用 | より柔軟なユーザーフィードバックが可能に |

---

### 🧭 次回予告：[🔜 Vol.9.6：多言語対応とメッセージ活用](https://qiita.com/juehara-crypto/items/de18b174f1740f9b3646)
次回は…
***🌐 多言語対応（i18n）とメッセージプロパティの使いこなし***
エラー表示やラベルをリソースファイルに分離して、国際化・保守性向上を図る方法を紹介予定です！

---

### 📚 Struts2バリデーションシリーズ

[Vol.9.1：validate()の基本編](https://qiita.com/juehara-crypto/items/a67976acd60430fa0da6)

[Vol.9.2：validate()の実装編](https://qiita.com/juehara-crypto/items/44fd5012bfbc809d352a)

[Vol.9.3：XMLバリデーション編](https://qiita.com/juehara-crypto/items/fd6881d2c54de07b3ae4)

[Vol.9.4：条件付きチェック編](https://qiita.com/juehara-crypto/items/c82203f583b2712be395)

---





## 🔎 Vol.9系で扱うトピック（予定）

| 回   | テーマ                                         | 内容の一部紹介                              |
|------|----------------------------------------------|--------------------------------------------|
| [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＆保守性を両立するハイブリッド構成 |



---