Webアプリケーションを開発する際、画面には表示したくないものの、プログラムの処理には必要なデータが存在します。例えば、編集したいデータの識別番号（ID）などが該当します。Spring Bootでは、HTMLのinput要素のtype属性にhiddenを指定することで、画面上に表示させずにデータを保持し、次の処理へ渡すことが可能です。Webアプリケーションの知識を持たない初心者の方に向けて、input type hiddenの仕組みと効果的な実装方法を解説します。
input type hiddenの概要と比喩による解説
Webアプリケーションでは、画面とサーバーの間でデータをやり取りします。input type hiddenは、ブラウザの画面上には表示されない隠し入力欄を作成するHTMLの機能です。
隠し入力欄の機能を高校生の皆さんにも分かりやすいように例えると、テーマパークの入場リストバンドに印字された管理用バーコードのようなものです。来園者であるユーザーは、普段そのバーコードの数字を意識することはありません。しかし、アトラクションに乗る際や再入場する際、スタッフがバーコードを読み取ることで、その来園者が誰であるかを正確に識別できます。
Webアプリケーションにおける隠し入力欄も同様の役割を持っています。画面に表示してユーザーに見せる必要はありませんが、サーバーがデータを識別するために、画面の裏側でデータを保持する仕組みとして機能します。
隠し入力欄を使用するメリットとデメリット
隠し入力欄を使用する際には、利点と注意点の両方を把握する必要があります。
- メリット
- 画面のデザインを損なわずにデータを保持できる：画面上に余計な入力項目や数値を表示させないため、すっきりとしたユーザーインターフェースを維持できます。
- 更新対象のデータを正確に特定できる：データベースの主キー（IDなど）を保持してサーバーに送信することで、どのデータを更新すべきかをサーバー側で確実に判断できます。
- デメリット
- ユーザーによる値の閲覧や改ざんが可能である：ブラウザの開発者ツールを使用すると、隠されているデータであっても簡単に閲覧や書き換えができてしまいます。
- セキュリティ対策が必須となる：改ざんのリスクがあるため、サーバー側で受け取ったデータが正しいものか、変更権限があるかといった検証処理を必ず実装する必要があります。
Spring Bootでの効果的なサンプルコード
ユーザーの情報を更新する画面を想定した具体的な実装例を確認しましょう。ユーザーの識別番号であるIDをhidden属性で保持し、名前を変更して保存する処理を実装します。
フォームオブジェクトとコントローラーの実装
画面から送信されたデータを受け取るためのフォームクラスと、処理を制御するコントローラークラスを作成します。
package com.example.demo;
public class UserForm {
private Long id;
private String name;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
@Controller
public class UserController {
@GetMapping("/edit")
public String editForm(Model model) {
UserForm form = new UserForm();
form.setId(123L);
form.setName("山田太郎");
model.addAttribute("userForm", form);
return "edit";
}
@PostMapping("/update")
public String update(@ModelAttribute UserForm form, Model model) {
System.out.println("更新対象のID: " + form.getId());
System.out.println("変更後の名前: " + form.getName());
model.addAttribute("message", "更新が完了しました。");
return "result";
}
}
画面（Thymeleaf）の実装
次に、HTML側の実装を行います。Spring Bootで標準的に使われるテンプレートエンジンであるThymeleafを使用します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ユーザー編集</title>
</head>
<body>
<h2>ユーザー情報編集</h2>
<form th:action="@{/update}" method="post">
<input type="hidden" name="id" th:value="${userForm.id}" />
<div>
<label>名前：</label>
<input type="text" name="name" th:value="${userForm.name}" />
</div>
<button type="submit">更新</button>
</form>
</body>
</html>
サンプルコードの解説
提示したサンプルコードの動きについて、順を追って確認していきましょう。理解できているか確かめながら読み進めてください。
初期表示の段階では、UserControllerのeditFormメソッドが呼び出されます。editFormメソッド内で、ユーザーIDに「123」という数値を設定し、名前を「山田太郎」としたUserFormオブジェクトを画面に渡しています。
HTML側では、name="id" th:value="${userForm.id}" という記述を用いています。Thymeleafは変数式（${...}）を解釈し、最終的に生成されるHTMLのinput要素の value 属性に対して、コントローラーから受け取った「123」という数値を埋め込みます。さらに、type="hidden" を指定しているため、ブラウザ上には123という数字は表示されません。また、送信用データとして認識させるために name="id" を明示的に指定しています。
ユーザーが名前を書き換えて更新ボタンを押すと、フォーム内のデータがサーバーのupdateメソッドに送信されます。送信の際、画面には表示されていなかったIDの123という情報も、name 属性をキーにして名前と一緒に送信されます。送信オブジェクトにIDが組み込まれることで、サーバー側では「IDが123のユーザーの名前を更新する」という指示を正確に理解することができます。
まとめと今後の学習ステップ
input type hiddenは、画面のデザインを維持しながら、裏側でデータを確実に引き継ぐための重要な仕組みです。ただし、ユーザーによって値が書き換えられるリスクを常に考慮する必要があります。
隠し入力欄の仕組みをより深く理解し、実践的なWebアプリケーションを開発するための学習ステップを提示します。
- サンプルコードを自身の開発環境で実行し、ブラウザの開発者ツール（F12キーなど）を開いて、HTMLのソースコード上にどのように値が埋め込まれているかを目視で確認してください。
- 送信ボタンを押した後のサーバー側のログを確認し、hiddenに設定したIDの数値が正しくコントローラーに受け取れているかを検証してください。
- 悪意のあるユーザーがhiddenの値を不正に書き換えて送信した場合を想定し、サーバー側で「存在しないIDが送られてきたらエラー画面を表示する」「ログイン中のユーザーがそのIDの変更権限を持っているかチェックする」というセキュリティ対策の実装に挑戦してください。
提示した3つのステップを順番に進めることで、単にデータを渡すだけでなく、安全で堅牢なシステム開発のスキルを身につけることができます。まずはコードを実際に動かすところから始めてみましょう。