• 1．フォームの構成
• 2．フォームのHTML
• 3．Formクラス

この記事は「Javaで学習するSpringによるWebアプリ開発」というトレノキャンプのeラーニング講座を基に解説した記事です。

前回の記事では、Springとデータベースの連携について解説し、SpringJDBCで情報の取得を実践しました。

この記事以降では、確認ページつきのお問い合わせフォームを作っていきます。

1．フォームの構成

お問い合わせフォームの作成にあたって、まずはフォームを作成し、次に確認ページの作成、そして最後に完了処理を作成していくという流れで進めていきます。

また、今回はデータベース操作は無しにして、純粋にデータをページごとに渡し、最後は完了処理でまたFormに戻ってくるという構成で行います。

今回メインとなるファイルは、入力欄を表示するためのHTMLファイルと、フォームからの入力値をまとめるためのFormクラスというJavaクラスの2種です。

それでは、次にコントローラーに関して確認していきます。

ControllerクラスはInquiryControllerという物を使います。

こちらは@GetMapping(“/form”)でinquiry/formをreturnするように指定されているので、/formへGETでアクセスした際にform、つまり入力欄が表示される、という設計になっています。

続いて、HTMLとFormクラスについて確認しましょう。

2．フォームのHTML

こちらが今回作成していくHTMLとFormクラスになります。

ここでは、まずform.htmlの<form>タグの中のth:action=”@{/inquiry/confirm}”という記述に注目してください。URLが@という記号から始まっていますが、この@はThymeleafではドメインを表しており、今回の場合ではドメインに/inquiry/confirmを付け加えたURLとして展開されます。

ドメインは変更になる可能性もあるので、<form>タグのactionにはドメインをそのまま記述するのではなく、かわりに@で記述するということを覚えておいてください。

次に、Formクラスについて解説していきます。

3．Formクラス

HTMLがデータを入力するためのものであるのに対して、FormクラスはHTMLから入力されたデータをJavaで受け取るためのクラスです。

この二者は対になるので、具体的には<form>内の各要素のname属性とそのデータを受けとるFormクラス側の変数名を一致させる必要があります。

今回の例では入力欄は合計3つあり、それぞれのname属性はname、email、contentsとなっているため、必然的にFormクラスのフィールド名もそれぞれname、email、contentsとなります。

また、Formクラスのフィールドに注目すると、それぞれアノテーションが付いていることに気付きます。

例えば、nameフィールドには「@Size」アノテーションが付いており、さらにminが1、maxが20、さらにmessageとして文字列が指定されています。こちらは名前の通り、入力値のサイズを検査するためのもので、minを最小値、maxを最大値とし、適さなかった場合に指定したメッセージが返却されます。

同様に、「@NotNull」を付与するとNullがデータとして送られてきた場合にはまたForm画面へ送り返すといった処理を組むことが可能です。

このように、Formクラスのフィールドにアノテーションを付けておくだけで、簡単に入力値に対して検査をかけることが可能となり、こういった検査のことを「Validation」と呼びます。

それではここまで確認できたら、次の記事ではフォームを表示させるところまで実際に製作していきましょう。