Thymeleafでフォームの入力内容を効率的に画面表示する仕組みと実装方法
山崎講師こんにちは。ゆうせいです。
新人研修中に受講者から以下の質問をいただきました。
フォームの入力内容を効率的に画面に表示する方法はありませんか？
今回はこの質問に答えたいと思います。
Webアプリケーションの開発において、ユーザーがフォームに入力した内容を画面に効率よく表示したり、入力エラー時にその内容を保持して再表示したりする処理は頻繁に求められます。JavaのフレームワークであるSpring Bootなどでよく使われるThymeleafというテンプレートエンジンには、この処理を簡素化するための機能が備わっています。今回は、フォームのデータ表示を効率化するth:objectとth:fieldという二つの属性について解説します。
th:objectとth:fieldによる効率的な画面表示の仕組み
画面の入力欄とプログラムのデータを手作業で一つずつ結びつけるのは手間がかかりますが、Thymeleafの機能を使うことで、ひとかたまりのデータをまとめて扱うことができます。
この仕組みは、高校の部活動で提出する入部届に例えることができます。
入部届という用紙の枠組み全体が、プログラムの中でデータを保持するオブジェクトに相当します。そして、その用紙の中にある名前や連絡先といった個々の記入欄が、オブジェクトの内部にあるフィールドに相当します。
Thymeleafでは、th:objectが入部届の用紙全体をフォームに割り当てる役割を担います。そしてth:fieldが、用紙内の具体的な記入欄をHTMLの入力要素へと個別に結びつけます。
具体的な実装例
実際のプログラムでどのように記述するかを確認します。まずは、データを格納するJavaのクラスと、画面を表示するコントローラーの記述例です。
public class UserForm {
private String name;
private String email;
// ゲッターとセッターは省略します
}
@Controller
public class UserController {
@GetMapping("/form")
public String showForm(Model model) {
model.addAttribute("userForm", new UserForm());
return "formScreen";
}
}次に、Thymeleafを使用したHTML側の記述例です。
<form th:action="@{/submit}" th:object="${userForm}" method="post">
<label for="name">お名前：</label>
<input type="text" th:field="*{name}" />
<label for="email">メールアドレス：</label>
<input type="text" th:field="*{email}" />
<button type="submit">送信</button>
</form>
HTMLのformタグでth:objectを指定してオブジェクトを受け取り、inputタグのth:fieldでアスタリスクを用いて内部のフィールドを指定します。
この方法を採用するメリット
th:objectとth:fieldを組み合わせて使用することには、以下のようなメリットがあります。
- HTMLのname属性やid属性、value属性が自動的に生成されるため、開発者が記述するコードの量を削減できる
- 画面の入力欄とJavaオブジェクトのフィールドが自動的に対応づけられるため、値の受け渡しが円滑になる
- 入力内容の確認やエラーによる画面の再表示を行う際、ユーザーが直前に入力した値が自動的に保持されて入力欄に残る
この方法を採用するデメリットと注意点
便利な一方で、導入の際には以下のような注意点も存在します。
- コントローラー側でオブジェクトをあらかじめ準備して画面に渡していない場合、画面の表示処理の時点でエラーが発生する
- 仕組みや記法を正しく理解していない場合、画面が正常に表示されないときの原因特定に時間がかかる
- 一つのフォームの中で完全に異なる複数のオブジェクトを同時に扱おうとすると、記述が複雑になりやすい
まとめと今後の学習ステップ
th:objectとth:fieldを活用することで、フォームの入力内容を効率的に画面に表示し、データの受け渡しを簡潔に実装できます。
この機能を段階的に習得するためのステップを提示します。
- まずは空のオブジェクトを準備し、エラーを出さずにフォーム画面を表示させる
- 送信ボタンを押した際に、入力した値がサーバー側のオブジェクトに正しく格納されるかを確認する
- 入力チェックの機能を組み込み、エラー発生時に値が保持されたまま画面が再表示される動作を確認する
基本的な文字列の入力から始め、少しずつ扱うデータの種類を増やすことで、この仕組みの便利さを実感しながら習得を進めることができます。
セイ・コンサルティング・グループでは新人エンジニア研修のアシスタント講師を募集しています。
投稿者プロフィール
