※本ページはプロモーションが含まれています Java / Spring Boot 開発

Spring BootでHTMLの入力値をJava側で受け取る方法｜フォーム送信をControllerで受け取る

 

ラビット
ラビット
Spring Bootで画面から入力値を取得するにはどうすればいいのかな？

 

この記事で分かること

  • HTMLフォームから送信した値をSpring Bootで受け取る流れ
  • <form> と Controller のつながり
  • 値を受け取れないときの確認ポイント

 

今回は、HTMLの入力フォームで入力して送信し、その値をSpring BootのControllerで受け取る部分について解説していきます！

 

Spring Bootの処理全体の流れの基本をもっと詳しく知りたい人は、下記の記事でも詳しく紹介しているので一緒に読んでみてください。

 

Spring BootのController・Service・Repository何が違う？

    この記事で分かること Controller Service Repositoryの違い Controller Service Repositoryの役割 三層アーキテクチャ ...

続きを見る

 

目次
  1. HTMLからJavaへ値が渡る仕組み
  2. 事前準備
  3. 動作確認
  4. うまくいかない場合
  5. まとめ

HTMLからJavaへ値が渡る仕組み

 

フロント側（HTML）からサーバー側（java）に値を渡す仕組みとしては主に下記のような流れが基本になります。

 

ポイント

HTML→inputに値を入力→submit→Controllerへ送信→Controllerで値を受け取る

 

特に「Controllerへ送信→Controllerで値を受け取り」の時に実際に値を受け取るんですが、Spring Bootでは@RequestMappingなどのアノテーションを使います。

 

@RequestMappingは、ブラウザから特定のURLでリクエストされた際に、javaのコントローラ側でキャッチするためのアノテーションになります。

具体的な例として、

 

@RequestMapping（GET）

    @RequestMapping(value = "user/list", method = RequestMethod.GET)
    public String showList() {
        //ユーザー一覧画面
        return "list";
    }

 

@RequestMapping（POST）

    @RequestMapping(value = "user/create", method = RequestMethod.POST)
    public String create() {
        // ユーザー作成処理後、一覧画面にリダイレクト
        return "redirect:/user/list";
    }

 

こんな感じで使います！

 

おもに、

GET：検索などで情報閲覧のみで、サーバー側のデータを変えないとき

POST：サーバーデータを増やしたり書き換えたりするとき

 

注意ポイント

パスワードなど、URL上に表示させたくない情報を送信する場合は、GETは避けてPOSTを使うようにしましょう。

 

ラビット
ラビット
因みに、@RequestMappingはもっと便利なショートカットアノテーションが用意されてるよ！

 

@RequestMappingでの記述は、記述量が多いので、可読性を上げる意味でもショートカットアノテーションを使うと便利です。

 

もっと詳しく

@GetMapping：データの取得・画面表示
@PostMapping：データの登録・送信
@PutMapping：データの更新
@PatchMapping：データの部分更新
@DeleteMapping：データの削除

 

と言っても、私自身、画面を中心としたSpring Boot開発では@GetMappingと@PostMappingを使うことが多かったです。

 

因みに、値を受け取る方法は他にも「@RequestParam」を使う方法もあります。

@RequestParamでの値の取得に関してはまた別の記事で紹介しますね！

 

事前準備

 

では実際に動かすために準備をしていきます！

 

HTMLに入力フォームを作る

 

まずは入力フォームを作ります。

HTML側はタイムリーフを使って作成しています！

 

index.html

<form method="POST" th:object="${user}" th:action="@{${searchUrl}}">

    <div class="form-group">
        <label for="name">名前</label>
        <input type="text" placeholder="例：山田 太郎" th:field="*{userName}">
        <input type="hidden" th:field="*{userId}">
    </div>

    <div class="form-group">
        <label for="email">メールアドレス</label>
        <input type="email" placeholder="example@example.com" th:field="*{mail}">
    </div>

    <div class="form-group">
        <label for="department">所属</label>
        <select id="department" th:field="*{department}">
            <option value="">選択してください</option>
            <option value="1">開発部</option>
            <option value="2">営業部</option>
            <option value="3">管理部</option>
        </select>
    </div>

    <div class="button-area">
        <button type="submit" class="primary-button">
            登録
        </button>
    </div>

</form>

 

Fromクラスを作成する

 

今回は複数の入力値をまとめて扱いやすくするため、Formクラスを作成します！

 

ラビット
ラビット
Requestクラス、DTOクラスとか人によっていろんな言い方をするよね！

 

UserForm.java

@Data 
public class UserForm {

    // ユーザー
    private Integer userId;

    // ユーザー名
    private String userName;

    // メール
    private String mail;

    // 所属
    private Integer department;

    // 所属名
    private String departmentName;

}

 

HTMLのnameとFormクラスのプロパティ名を対応させます。

 

Controllerで送信先を作る

 

受け取るためのControllerクラスを作っていきます！

 

IndexConrtoller.java

    @PostMapping("/insert")
    public String insert(Model model, UserForm userForm) {
        indexService.insert(userForm);

        return "redirect:" + "/index";
    }

 

Controllerの引数にFormクラスを指定すると、Springが送信された値を対応するプロパティへバインドしてくれます。

 

動作確認

 

では実際に、受け取れるかデバッグしながら見ていきましょう！

 

 

まずは入力フォームで値を入力します。

 

そのあと、登録ボタンを押下します。

 

 

入力した値がしっかりとれているのが確認できます！

 

うまくいかない場合

 

うまくいかないときは、4つのポイントを基にチェックしてみてください！

 

  • inputタグのnameがリFromクラスと一致しているか
  • formタグのメソッドとController側が合っているか
  • Fromクラスにgetter / setterがあるか
  • actionと@PostMappingのURLが一致しているか

 

404や405が出る場合

404 → URLが違う可能性
405 → GET / POSTが合っていない可能性

 

inputタグのnameがリFromクラスと一致しているか

 

入力値をサーバー側に送信する際に、java側はFromクラスという「受け皿」を用意しています。

その受け皿の名前と、HTML側の名前が一致しているかが重要です。

 

HTML側では「name」に入るのが、Fromクラスのプロパティ名と一致させる必要があります。

※因みに、タイムリーフでは「th:field="*{userName}"」という書き方をすることで、HTML側の「id」「name」「value」を自動で生成してくれます。

解説は別途どこかでやりますね！

 

formタグのメソッドとController側が合っているか

 

HTML側の<form>の中に「method="post"」と記述して、Controllerで該当のURLが「@PostMapping」で記述されているかを確認してください！

 

同じURLでもPOSTかGETかは、java側は違うもの扱いになるため、一致する処理を作ってないとエラーになります。

※因みに、応用すると同じURLでもコントローラの受け取り先を変更する方法もあるので、解説を別途どこかでやりますね！

 

Fromクラスにgetter / setterがあるか

 

今回は、＠Lombokというライブラリを使っています。

これを使うと、getter / setterを自動で生成してくれる便利な恩恵を受けることができます！

そのため、Lombokの@Dataを使ってgetter / setterを自動生成しています。

Lombokを使わない場合はgetter / setterが用意されているか確認してください。

 

まとめ

 

今回は、HTMLの入力フォームから送信した値を、Spring BootのControllerで受け取る方法について解説しました。

ポイントをまとめると、次のとおりです。

 

ポイント

・ HTMLの`<form>`から送信された値は、Controllerで受け取る
・ @RequestMappingや@GetMapping、@PostMappingで、どのURL・HTTPメソッドのリクエストを処理するか指定する
・HTML側の`name`とFormクラスのプロパティ名を対応させる
・Controllerの引数にFormクラスを指定すると、Springが入力値を自動でバインドしてくれる

 

最初は「HTMLで入力した値が、どうやってJava側に渡るの？」と少し分かりづらいですが、

「HTML → Formクラス → Controller」という流れを理解すると、フォーム処理の仕組みがかなり見やすくなると思います！

-Java / Spring Boot, 開発
-,