Thymeleafのth:selected属性の使い方を完全解説！初心者でもわかるセレクトボックス選択状態の指定方法
生徒
「フォームのセレクトボックスで、選択された値を初期状態で指定したいんですが、Thymeleafではどうやってやるんですか？」
先生
「Thymeleafでは、th:selected属性を使えば、特定の条件に応じて選択状態にできますよ。」
生徒
「なるほど！でもどうやって使うのか、実例で見てみたいです！」
先生
「それでは、th:selectedの基本的な使い方から詳しく説明していきましょう。」
1. th:selectedとは？セレクトボックスでの役割
Thymeleaf（タイムリーフ）のth:selected属性は、HTMLのセレクトボックス（<select>）内の<option>に付けて「どれを選択済みにするか」を決めるための仕組みです。
サーバー側（Spring MVCなど）から受け取った値に応じて、表示時点で自動的に選択状態を切り替えられます。
通常のHTMLでは、固定的にselectedを手書きします。対してThymeleafではth:selectedに条件式を置き、式がtrueならその<option>が選択され、falseなら選ばれません。
これにより、編集画面・確認画面・再表示（バリデーションエラー後）などでも、ユーザーが選んだ内容を自然に復元できます。
<!-- 例：性別の初期選択をサーバーの値で反映する -->
<select name="gender">
<option value="">-- 選択してください --</option>
<option value="male" th:selected="${gender == 'male'}">男性</option>
<option value="female" th:selected="${gender == 'female'}">女性</option>
<option value="other" th:selected="${gender == 'other'}">その他</option>
</select>
上の例では、テンプレート変数${gender}が'female'なら「女性」にだけselectedが付与されます。つまり「HTMLのselectedを自動で付け外しするスイッチ」がth:selectedです。
初期値が未設定のときは、空の選択肢（冒頭の-- 選択してください --）を用意しておくと、誤選択を防げます。
2. th:selectedの基本構文と使い方
th:selectedの基本的な使い方は以下のようになります。
条件がtrueになったときに、その<option>が選択状態（selected）になります。
<option th:selected="${value == 'A'}" value="A">選択肢A</option>
<option th:selected="${value == 'B'}" value="B">選択肢B</option>
<option th:selected="${value == 'C'}" value="C">選択肢C</option>
上記のように${value == 'A'}という条件がtrueであれば、「選択肢A」が初期選択された状態で表示されます。
これは、例えば「編集画面」や「再表示」のような場面でよく使われます。
3. th:selectedを使ったフォームの完全サンプル
ここでは、Spring BootとThymeleafを使って、セレクトボックスにth:selectedを適用する具体例を紹介します。
<select name="gender">
<option th:selected="${gender == 'male'}" value="male">男性</option>
<option th:selected="${gender == 'female'}" value="female">女性</option>
<option th:selected="${gender == 'other'}" value="other">その他</option>
</select>
上記では、${gender}が"female"の場合、「女性」のオプションが選択されて表示されます。
4. th:eachと組み合わせた動的なセレクトボックス
th:selectedはth:eachと組み合わせることで、選択肢をリストから動的に生成しながら、値に応じて選択状態を制御できます。
以下はその例です。
<select name="category">
<option th:each="item : ${categoryList}"
th:value="${item.id}"
th:text="${item.name}"
th:selected="${item.id == selectedCategoryId}">
</option>
</select>
この例では、categoryListの中から<option>を繰り返し生成し、selectedCategoryIdと一致する項目が選択状態になります。
このように、th:selectedはセレクトボックスの柔軟な実装に欠かせない機能です。
5. th:fieldを使った書き方との違いと注意点
Thymeleafにはth:fieldという便利な属性もあり、こちらを使うとth:selectedを明示的に書かなくても自動的に選択状態を処理してくれます。
しかし、状況によってはth:selectedの方が細かい制御がしやすくなります。
<select th:field="*{gender}">
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">その他</option>
</select>
このようにth:fieldを使うと、フォームバッキングオブジェクト（例：Modelに入れたgender）の値と一致するvalueが自動的に選択されます。
しかしながら、選択条件が少し複雑な場合や、表示と値の対応が異なるケースでは、th:selectedを活用する方がよい場面もあります。
6. th:selectedをチェックボックスやラジオボタンに使えるか？
th:selectedはセレクトボックス専用です。チェックボックスやラジオボタンで同じようなことをしたい場合は、th:checked属性を使います。
<input type="radio" name="gender" value="male" th:checked="${gender == 'male'}"> 男性
<input type="radio" name="gender" value="female" th:checked="${gender == 'female'}"> 女性
このように、HTMLの構造に応じてth:selectedとth:checkedを使い分けるのがThymeleafの基本です。
7. 初心者がよくある間違いとその対処法
初心者がth:selectedを使うときにありがちなのが、「選択されない」「常に一番上が選ばれてしまう」という現象です。
これは、比較対象の変数がnullだったり、型が一致していない場合に起きることがあります。
そのようなときは、以下のポイントをチェックしましょう：
- 比較対象の変数（例：
valueやselectedCategoryId）がちゃんとModelに渡っているか？ - 値の型（String、Integerなど）が一致しているか？
- ループ内での変数名が正しいか？
まとめ
今回はThymeleaf（タイムリーフ）で使われるth:selected属性の基本から応用までを、初心者向けにわかりやすく解説しました。
th:selectedは、セレクトボックスにおいて選択済みの状態を動的に制御できる重要な属性です。
Spring BootやSpring MVCなどのフレームワークと組み合わせて使うことで、フォームの編集機能やバリデーション時の再表示など、現実的なWebアプリ開発において大いに活用されます。
特にth:eachと組み合わせることで、リストデータから<option>を動的に生成し、サーバーから渡された選択値に応じてselected状態を切り替えることができる点は非常に便利です。
さらに、th:fieldを使えば自動で選択状態が処理されるため、単純な用途にはこちらが有効です。
ただし、カスタム条件で制御したい場合にはth:selectedの明示的な記述が適しています。
また、よくある間違いとしては、型の不一致やモデルへの値の未設定によって、意図した選択状態が反映されないケースです。 こういった問題は、開発時によく直面するので、今回の解説を通じて仕組みをしっかり理解しておくことが大切です。
最後に、th:selectedはセレクトボックス用であり、ラジオボタンやチェックボックスにはth:checkedを使うという区別も覚えておきましょう。
確認用の簡易サンプル
<select name="color">
<option th:selected="${color == 'red'}" value="red">赤</option>
<option th:selected="${color == 'blue'}" value="blue">青</option>
<option th:selected="${color == 'green'}" value="green">緑</option>
</select>
このようにth:selectedを使うことで、ユーザーの選択に応じた状態を柔軟に再現できます。
フォームの使いやすさは、ユーザー体験を向上させる大切なポイントです。
生徒
「th:selectedって、セレクトボックスの選択状態を動的に変えられるのがすごく便利だと思いました！」
先生
「そうですね。特に、編集フォームやデータの再表示時に自動的に選ばれるようにしておくと、ユーザーにとって使いやすいフォームになりますよ。」
生徒
「あと、th:eachと一緒に使う方法もわかりやすかったです。選択肢が増えても柔軟に対応できますね！」
先生
「ええ、ループ処理との組み合わせはとても実用的です。次はth:checkedを使ってチェックボックスやラジオボタンにも挑戦してみましょう！」
この記事を読んだ人からの質問
