入力フォームに初期値を表示する方法（th:value）を初心者向けにやさしく解説！

入力フォームに初期値を表示する方法（th:value）

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

新人

「先輩、Thymeleafを使って入力フォームを作ってるんですが、テキストボックスに初期値を入れるにはどうすればいいですか？」

先輩

「それならth:value属性を使えば簡単に初期値を設定できるよ。Springの@Controllerと組み合わせることで、データをビューに渡して表示できるんだ。」

新人

「なるほど！じゃあ、基本的な使い方を教えてもらえますか？」

先輩

「もちろん。まずはth:valueの基本的な意味から見ていこうか。」

1. th:valueとは？

Thymeleafのth:valueは、HTMLのinputタグなどに値を設定するための属性です。フォームの初期値を表示するときによく使われます。

例えば、名前入力フォームに「山田太郎」という名前を初期表示させたいとき、以下のように記述します。


<input type="text" th:value="'山田 太郎'" />

このように、th:valueに文字列や変数を指定することで、フォームの初期値として表示されます。

ただし、実際の開発ではJavaの@Controllerから値を渡して表示するケースが多いので、それについては次の章で解説します。

2. 入力フォームで初期値を表示する基本的な使い方

ここでは、th:valueを使って、Springのコントローラーから値をビューに渡し、フォームに初期値を表示する方法を解説します。PleiadesでGradle構成のSpringプロジェクトを作成していることが前提です。

まずは、Javaのコントローラーを用意します。今回はnameという文字列をModelに入れてビューに渡します。


@Controller
public class FormController {

    @GetMapping("/form")
    public String showForm(Model model) {
        model.addAttribute("name", "田中 一郎");
        return "form";
    }
}

次に、form.htmlというテンプレートファイルに、th:valueを使って入力フォームを記述します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>名前入力フォーム</title>
</head>
<body>
    <h2>名前を入力してください</h2>
    <form action="#" method="post">
        <label>名前：</label>
        <input type="text" name="name" th:value="${name}" />
        <button type="submit">送信</button>
    </form>
</body>
</html>

このように、コントローラー側で設定したnameという値が、th:value="${name}"によってフォームに初期表示されます。

この方法は、編集画面やプロフィール設定画面など、既存データをあらかじめ表示させたい場面で非常に便利です。

初心者が注意すべきポイント

th:valueの値には必ず「${...}」の形式で変数を入れることを忘れないようにしましょう。また、HTMLだけでは初期値は動的に変化しないため、Javaの@Controllerで適切に値を渡すことが必要です。

開発環境がPleiadesであれば、コントローラーとテンプレートの紐づけも簡単に確認できます。テンプレートファイルはsrc/main/resources/templatesの中に配置しましょう。


src/
└── main/
    └── resources/
        └── templates/
            └── form.html

初心者の方でも、上記のように正しく構成すればth:valueを使った初期値の表示が簡単にできるようになります。

3. コントローラーから値を渡して初期値を表示する方法

前のセクションでは文字列を直接コントローラーから渡して初期値を設定する方法を紹介しました。ここでは、Javaオブジェクトを使ってフォームと連携する方法を解説します。これは、特に複数の入力項目がある場合に便利で、実務でもよく使われるth:valueの使い方です。

まず、ユーザーデータを保持するクラスを用意します。ここではUserFormというクラスを例にします。


public class UserForm {
    private String name;
    private String email;

    // getterとsetterを忘れずに
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

次に、Springの@Controllerでこのフォームオブジェクトに初期値を設定して、テンプレートに渡します。


@Controller
public class UserController {

    @GetMapping("/edit")
    public String showEditForm(Model model) {
        UserForm userForm = new UserForm();
        userForm.setName("佐藤 花子");
        userForm.setEmail("hanako@example.com");
        model.addAttribute("userForm", userForm);
        return "editForm";
    }
}

テンプレート側では、userFormからプロパティを参照して、th:valueで初期値として表示します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ユーザー情報編集</title>
</head>
<body>
    <h2>ユーザー情報を編集</h2>
    <form action="#" method="post">
        <label>名前：</label>
        <input type="text" name="name" th:value="${userForm.name}" /><br><br>

        <label>メール：</label>
        <input type="email" name="email" th:value="${userForm.email}" /><br><br>

        <button type="submit">更新</button>
    </form>
</body>
</html>

このように、フォームオブジェクトとth:valueを組み合わせることで、複数項目の初期値を簡単に管理できます。特に初心者の方にとっては、HTMLの入力欄とJavaのプロパティの対応関係を意識することで、データの流れが理解しやすくなります。

4. フォーム入力と初期値の連動（ユーザー編集画面の例など）

ここでは、既存のユーザー情報を編集する画面を想定して、初期値の使い方と入力の流れを詳しく説明します。ユーザー編集画面では、画面表示時に現在のユーザー情報が入力欄に表示されていることが一般的です。これをth:valueを使って実現します。

ユーザー情報をデータベースなどから取得する部分は省略しますが、UserFormクラスの値を使って初期値を設定する流れは同じです。


@Controller
public class UserController {

    @GetMapping("/user/edit")
    public String editUser(Model model) {
        // 仮のユーザー情報を用意
        UserForm user = new UserForm();
        user.setName("高橋 太一");
        user.setEmail("taichi@example.com");

        model.addAttribute("userForm", user);
        return "userEdit";
    }

    @PostMapping("/user/edit")
    public String updateUser(@ModelAttribute UserForm userForm) {
        // ここで更新処理を行う（省略）
        return "redirect:/user/edit";
    }
}

テンプレート（userEdit.html）では、th:valueを使って初期値を表示し、フォームをpostで送信します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ユーザー編集</title>
</head>
<body>
    <h2>ユーザー編集フォーム</h2>
    <form th:action="@{/user/edit}" th:object="${userForm}" method="post">
        <label>名前：</label>
        <input type="text" th:field="*{name}" /><br><br>

        <label>メールアドレス：</label>
        <input type="email" th:field="*{email}" /><br><br>

        <button type="submit">保存</button>
    </form>
</body>
</html>

th:fieldを使うと、Springの@ModelAttributeと連携しやすくなり、th:valueの代わりとしても使われます。th:fieldは、name属性とvalue属性を同時に自動で生成するので、フォームのデータ連携がより簡単になります。

初心者が覚えておきたいポイント

th:valueは、フォームに初期値を設定する基本的な方法。
th:fieldは、th:valueを内包し、より簡単にデータ連携ができる。
@ControllerでJavaのオブジェクトを作成し、テンプレートにModelで渡す。
開発環境は、Pleiades＋Gradle構成で、テンプレートはsrc/main/resources/templatesに配置。

このように、th:valueと@Controllerを正しく連携させることで、初心者でも簡単に入力フォームの初期値を表示できるようになります。特にユーザー情報を編集するような画面では、初期値の表示は非常に重要な機能になります。

Spring MVCとThymeleafを使ったフォーム開発の基本として、th:valueの使い方をしっかり理解しておくことは、今後のアプリケーション開発でも大きな武器となります。

5. 入力エラー時に入力値を保持する方法（th:fieldとの併用）

Spring MVCとThymeleafでフォームを使うとき、初心者がよく困るのが「入力エラーで画面が再表示されたときに、入力した値が消えてしまう」問題です。これを防ぐためには、th:valueではなく、th:fieldを使うことが推奨されています。

th:fieldを使うと、Spring側でバインドされた値や入力済みの値を自動でフォームに戻してくれます。

以下に、エラー時でも入力値を保持するサンプルを示します。


@Controller
public class RegisterController {

    @GetMapping("/register")
    public String showForm(Model model) {
        model.addAttribute("userForm", new UserForm());
        return "registerForm";
    }

    @PostMapping("/register")
    public String submitForm(@ModelAttribute("userForm") UserForm userForm, BindingResult result) {
        if (userForm.getName() == null || userForm.getName().isBlank()) {
            result.rejectValue("name", "error.name", "名前は必須です");
        }
        if (result.hasErrors()) {
            return "registerForm";
        }
        return "redirect:/register";
    }
}

上記のように、BindingResultを使ってバリデーションエラーを処理し、入力値をth:fieldで保持します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>会員登録</title>
</head>
<body>
    <h2>会員登録フォーム</h2>
    <form th:action="@{/register}" th:object="${userForm}" method="post">
        <label>名前：</label>
        <input type="text" th:field="*{name}" />
        <div th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></div>

        <br><br>
        <button type="submit">登録</button>
    </form>
</body>
</html>

th:fieldを使うことで、POST送信後にエラーが出ても、ユーザーが入力した値が消えないという便利な機能を実現できます。これは実務でも非常によく使われるテクニックで、初心者にとっても習得すべきポイントです。

6. th:valueのよくあるミスとその対策

初心者がth:valueを使うときにやってしまいがちなミスはいくつかあります。ここでは代表的なものと、その対処方法を紹介します。

① ${} を忘れてしまう

th:valueに変数を渡すときは、必ず${}を使って書く必要があります。


<!-- NG -->
<input type="text" th:value="name" />

<!-- OK -->
<input type="text" th:value="${name}" />

${}を忘れると、文字列「name」がそのまま表示されてしまうため、値が出力されません。

② Modelに値がセットされていない

コントローラー側でmodel.addAttribute()を忘れると、ビューでth:valueに変数を指定しても空白になります。


// NG：modelに何も渡していない
@GetMapping("/form")
public String showForm() {
    return "form";
}

// OK：値をセットする
@GetMapping("/form")
public String showForm(Model model) {
    model.addAttribute("name", "山本 太郎");
    return "form";
}

③ プロパティ名のスペルミス

th:value="${userForm.nmae}"など、プロパティ名を間違えるとデータが表示されません。Javaクラスのgetter/setterと一致しているか必ず確認しましょう。

こうしたミスを避けるためには、入力欄が増えてきたらth:fieldで統一して使うのもおすすめです。

7. 実務で活用するポイントや注意点

最後に、実際の業務でth:valueを使う際の注意点や、効率的に活用するためのコツを紹介します。

① `th:field`の利用を前提に設計する

実務では、入力チェック・バリデーション・データバインディングが重要です。th:value単独ではなく、th:fieldとth:objectを併用して、オブジェクト全体を扱う設計にすると効率的です。

② コードの共通化を意識する

複数の画面で同じフォーム項目を使う場合は、fragmentで共通パーツとして切り出すのがおすすめです。テンプレートの再利用性が上がり、保守性も向上します。

③ テスト環境で実際に入力して動作を確認する

画面上で初期値が正しく表示されているか、入力後に再表示された値が保持されているか、テスト環境で動作確認を必ず行いましょう。特に入力エラー時の再表示処理は、ユーザー体験に直結するため重要です。

④ Pleiades＋Gradle環境に慣れる

Pleiadesを使ったSpring開発では、Eclipseベースでの操作に慣れておくと効率が上がります。テンプレートの配置や依存関係の設定など、Gradleでの構成も意識しながらプロジェクトを進めましょう。


src/
└── main/
    ├── java/
    │   └── com/example/demo/
    │       └── controller/UserController.java
    └── resources/
        └── templates/
            ├── registerForm.html
            ├── userEdit.html
            └── fragments/

こうした構成にすることで、th:valueの使い方もよりスムーズに理解でき、実務での活用も一段としやすくなります。

初心者の方も、まずは単純な入力フォームから試しながら、@Controllerとの連携、th:valueやth:fieldの使い分けに慣れていくことが、スキルアップの第一歩です。