新人と先輩の会話形式で理解しよう

新人

「Spring MVCでフォームを作っていると、hiddenってよく出てきますが、画面に表示されないのに何のために使うんですか？」

先輩

「画面には出さないけれど、サーバーに一緒に送りたい情報があるときに使うんだよ。」

新人

「表示されない値を送るって、ちょっとイメージしにくいです。」

先輩

「Thymeleafのth:valueと一緒に考えると、仕組みがかなり分かりやすくなるよ。」

1. hiddenフィールドとは何か（画面に表示されない値の役割）

hiddenフィールドとは、Webフォームの中に配置される入力項目の一種で、画面上には表示されないという特徴を持っています。しかし、画面に表示されないからといって、存在しないわけではありません。

フォームが送信されるとき、hiddenフィールドに設定された値も、通常の入力項目と同じようにサーバーへ送信されます。そのため、ユーザーに直接入力させる必要はないが、処理上は必要な情報を保持する目的で使われます。

例えば、画面遷移の途中で保持したいIDや、内部的に管理している状態情報などは、hiddenフィールドとして扱われることが多くあります。Spring MVC初心者の方は、「画面には見えないが、裏でデータを運ぶための仕組み」と理解するとイメージしやすくなります。

2. Webフォームでhidden値が使われる理由

Webフォームでは、ユーザーが入力した情報だけでなく、画面を表示したときに決まっていた情報も一緒に送信したい場面がよくあります。こうした情報は、毎回ユーザーに入力させるものではありません。

例えば、一覧画面から詳細画面へ遷移し、その後に更新ボタンを押すような場合を考えてみてください。このとき、どのデータを更新するのかを判断するためのIDが必要になります。

そのIDを画面に表示してしまうと、ユーザーが意図せず変更してしまう可能性があります。そこで、画面には表示せず、hiddenフィールドとして値を保持し、フォーム送信時にサーバーへ渡すという設計が使われます。

hidden値は、画面操作をシンプルに保ちつつ、サーバー側で必要な情報を確実に受け取るための重要な役割を担っています。

3. Spring MVCとThymeleafにおけるhidden値の基本的な考え方

Spring MVCとThymeleafを組み合わせた開発では、サーバー側で用意した値をHTMLに埋め込み、フォームとしてブラウザに表示します。その際、画面に見せる値と、見せずに送信する値を明確に分けて考えることが大切です。

Thymeleafでは、th:value属性を使うことで、コントローラから渡された値をHTMLのinput要素に設定できます。これはhiddenフィールドでも同じです。

以下は、Thymeleafでhiddenフィールドを定義する非常に基本的な例です。


<form th:action="@{/confirm}" method="post">
    <input type="hidden" name="userId" th:value="${userId}">
    <button type="submit">送信</button>
</form>

この例では、userIdという値が画面には表示されませんが、フォーム送信時にはサーバーへ送られます。th:valueによって、コントローラで設定した値がhiddenフィールドに自動的に埋め込まれます。

次に、その値をコントローラ側で受け取る簡単な例を見てみましょう。


@Controller
public class SampleController {

    @PostMapping("/confirm")
    public String confirm(String userId) {
        return "confirm";
    }
}

このように、hiddenフィールドを使うことで、画面に表示しない情報も自然な形でサーバーに渡すことができます。Spring MVCとThymeleafでは、この仕組みが標準的に使われており、フォーム設計の基本となります。

初心者の方は、「th:valueでサーバーの値をhiddenに入れ、フォーム送信でそのまま受け取れる」という流れをしっかり押さえることが重要です。これが理解できると、Spring MVCの画面と処理のつながりが一段と分かりやすくなります。

4. Thymeleafでhiddenフィールドを作成する基本構文

Thymeleafでhiddenフィールドを作成する方法は、とてもシンプルです。通常の入力フォームと同じく、inputタグを使いますが、type属性にhiddenを指定する点が最大の特徴になります。

hiddenフィールドは画面に表示されないため、見た目としては何も変化がありません。しかし、HTMLの構造上はフォームの一部として存在しており、送信ボタンが押されたときには、ほかの入力項目と一緒に値が送信されます。

Spring MVCとThymeleafの画面表示では、まずコントローラが値を用意し、その値をViewであるHTMLに埋め込みます。その際、表示用の値なのか、hiddenとして裏で保持する値なのかを意識して書き分けることが重要です。

以下は、Thymeleafでhiddenフィールドを定義する最も基本的な構文例です。


<form th:action="@{/send}" method="post">
    <input type="hidden" name="status" value="confirm">
    <button type="submit">送信</button>
</form>

この例では、statusという名前のhiddenフィールドに、confirmという固定値を設定しています。画面上には表示されませんが、フォーム送信時にはこの値が必ずサーバーに送られます。

まずは、「typeがhiddenのinputタグは、画面に見えないだけで、通常の入力項目と同じ役割を持つ」という点をしっかり押さえておくことが大切です。

5. th:valueを使ってサーバー側の値をhiddenに設定する方法

Thymeleafを使う最大のメリットは、サーバー側で用意した値を、そのままHTMLに反映できる点にあります。hiddenフィールドでも、この仕組みは同じです。

th:valueを使うことで、コントローラから渡された値をhiddenフィールドに設定できます。これにより、画面を表示した時点で決まっている情報を、ユーザーに見せることなく次の処理へ引き渡すことが可能になります。

まずは、コントローラ側で値をModelに設定する例を見てみましょう。


@Controller
public class HiddenController {

    @GetMapping("/input")
    public String input(Model model) {
        model.addAttribute("orderId", "A001");
        return "input";
    }
}

このコントローラでは、orderIdという値をModelに設定し、input画面を表示しています。次に、この値をThymeleaf側でhiddenフィールドとして受け取ります。


<form th:action="@{/complete}" method="post">
    <input type="hidden" name="orderId" th:value="${orderId}">
    <button type="submit">確定</button>
</form>

ここで重要なのがth:valueの役割です。th:valueは、「サーバーから渡された値を、そのままvalue属性に設定する」ための仕組みです。

この結果、画面には表示されないorderIdが、フォーム送信時に自動的に含まれるようになります。Spring MVC初心者の方は、「th:valueは、サーバーと画面をつなぐ橋渡し役」とイメージすると理解しやすくなります。

6. フォーム送信時にhidden値がどのように送られるか

hiddenフィールドに設定された値は、フォーム送信時にほかの入力項目とまったく同じ流れでサーバーへ送信されます。特別な処理や設定は必要ありません。

画面表示の流れを整理すると、「画面表示 → hidden値の設定 → フォーム送信 → コントローラで受け取り」という一連の流れになります。この中で、hiddenフィールドは常に裏側でデータを保持し続けています。

次は、hiddenフィールドで送信された値をコントローラ側で受け取る例です。


@Controller
public class CompleteController {

    @PostMapping("/complete")
    public String complete(String orderId) {
        return "complete";
    }
}

このように、hiddenフィールドのname属性と同じ名前の引数をメソッドに用意するだけで、値を受け取ることができます。

ユーザーはorderIdの存在を意識することなく操作できますが、サーバー側では必要な情報として正しく処理が行われます。これが、Spring MVCにおけるhidden値の基本的な使われ方です。

Thymeleafのth:valueとhiddenフィールドを組み合わせることで、画面をシンプルに保ちながら、処理に必要な情報を確実に引き渡すことができます。この考え方は、フォーム設計の基礎として非常に重要です。

7. hidden値を使うときに初心者が混乱しやすいポイント

hidden値を使い始めた初心者が最初に混乱しやすいのは、「画面に表示されていないのに、なぜ値が送信されているのか」という点です。入力欄が見えないため、フォームの一部として存在しているという意識が持ちにくくなります。

特に多いのが、「いつhidden値が設定されたのか分からない」「コントローラに値が勝手に渡ってきたように感じる」といった状態です。これは、画面表示時にすでにhidden値がHTMLに埋め込まれている、という流れを理解できていないことが原因です。

Spring MVCとThymeleafでは、画面を表示した時点で、hidden値もすでに決まっています。フォーム送信時に新しく作られる値ではなく、「最初からフォームの中に存在していた値」がそのまま送信されているだけです。

例えば、次のようなhiddenフィールドは、画面に表示された瞬間からフォームの一部として存在しています。


<form th:action="@{/check}" method="post">
    <input type="hidden" name="mode" value="edit">
    <button type="submit">確認</button>
</form>

この例では、ユーザーが何も入力しなくても、modeという値は必ず送信されます。初心者のうちは、「hidden値も入力項目の一種である」という意識を持つことが、混乱を防ぐ第一歩になります。

8. hidden値を安全・分かりやすく使うための考え方

hidden値を分かりやすく使うためには、「なぜこの値をhiddenで持たせるのか」を明確にしておくことが重要です。画面に表示しないから、という理由だけで使うと、後から処理の意図が分からなくなります。

基本的な考え方として、hidden値は「画面遷移の途中で引き継ぎたい補助情報」に限定して使うのが安全です。例えば、処理対象を識別するためのIDや、画面の状態を表す区分値などが該当します。

コントローラ側では、hidden値を前提に処理を書くのではなく、「送られてきた値を受け取り、必要な判断に使う」という姿勢が大切です。以下は、hidden値を受け取る最小限の例です。


@Controller
public class ModeController {

    @PostMapping("/check")
    public String check(String mode) {
        return "check";
    }
}

このように、hidden値は通常のフォーム項目と同じ形で受け取れます。ただし、重要な情報ほど「hiddenに入れているから安全」と考えず、処理の中で適切に扱う意識が必要です。

hidden値は、画面と処理をつなぐための補助的な存在であり、主役ではない、という位置づけで考えると設計が整理しやすくなります。

9. hidden値を理解した次に学ぶべきThymeleafとSpring MVCの要素

hidden値の仕組みを理解できたら、次に意識したいのは「画面全体として、どのようにデータを受け渡しているか」という視点です。hidden値は、その流れの中の一部に過ぎません。

Spring MVCでは、Modelを使って画面に値を渡し、フォーム送信によって同じ値を受け取る、という往復の流れが基本になります。hidden値は、その往復を成立させるための一つの手段です。

例えば、画面表示時に複数の値をまとめて渡し、その一部をhiddenとして保持する、という設計もよく使われます。


@Controller
public class DisplayController {

    @GetMapping("/display")
    public String display(Model model) {
        model.addAttribute("userId", "U100");
        model.addAttribute("pageType", "detail");
        return "display";
    }
}

このようにModelで渡した値の中から、「表示するもの」「hiddenで持たせるもの」を分けて考えられるようになると、ThymeleafとSpring MVCの理解が一段深まります。

hidden値は、フォーム設計の入口となる重要な要素です。この考え方を押さえたうえで、画面と処理の関係を全体として捉えられるようになると、Spring MVCの学習がよりスムーズに進みます。