Spring Boot

【Spring Boot】Thymeleafでプルダウンを作成する方法

2021年9月6日

はじめに

Javaのフレームワーク「Spring Boot」とテンプレートエンジン「Thymeleaf」を使用してプルダウンを簡単に作成する方法を紹介します。

本記事で作成するプルダウンのサンプルは次のとおりです。

プルダウン画面イメージ

テーブル定義

本画面で使用するテーブルのテーブル定義は次のとおりです。

物理名論理名データ型NOT NULL説明
code都道府県コードCHAR(2)〇主キー
name都道府県名VARCHAR(45)〇都道府県の名称

[CREATE文]

CREATE TABLE `sampledb`.`prefectures` (
  `code` CHAR(2) NOT NULL,
  `name` VARCHAR(45) NOT NULL,
  PRIMARY KEY (`code`));

[INSERT文]

INSERT INTO `sampledb`.`prefectures` (`code`, `name`) VALUES ('01', '北海道');
INSERT INTO `sampledb`.`prefectures` (`code`, `name`) VALUES ('02', '青森県');
INSERT INTO `sampledb`.`prefectures` (`code`, `name`) VALUES ('03', '岩手県');
INSERT INTO `sampledb`.`prefectures` (`code`, `name`) VALUES ('04', '宮城県');
INSERT INTO `sampledb`.`prefectures` (`code`, `name`) VALUES ('05', '秋田県');

スポンサーリンク

ディレクトリ構成

ディレクトリ構成は次のとおりです。

springSample
  |
  |___src.main.java
       |
       |___com.example.demo
       |    |
       |    |___controller
       |    |    |
       |    |    |__TestController.java
       |    |
       |    |___entity
       |    |    |
       |    |    |___Prefectures.java
       |    |
       |    |___repository
       |    |    |
       |    |    |___PrefecturesRepository.java
       |    |
       |    |___service
       |         |
       |         |___TestService.java
       |
       |___src.main.resources
            |
            |___templates
            |    |
            |    |___test.html
            |
            |___application.properties

バックエンド（サーバー）側のソースコード

コントローラークラス（TestController）

コントローラクラスは次のとおりです。

package com.example.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import com.example.demo.entity.Prefectures;
import com.example.demo.service.TestService;

/**
 * テスト用 Controller
 */
@Controller
public class TestController {

    /**
     * テスト用 Service
     */
    @Autowired
    private TestService testService;

    /**
     * テスト画面表示
     * @param model Model
     * @return テスト画面
     */
    @GetMapping(value = "/test")
    public String displayList(Model model) {

        List<Prefectures> prefecturesList = testService.getPrefecturesAll();
        model.addAttribute("prefecturesList", prefecturesList);

        // プルダウンの初期値を設定する場合は指定
        //model.addAttribute("selectedValue", "01");

        return "test";
    }
}

都道府県マスタのリストを画面で操作できるように「model.addAttribute("prefecturesList", prefecturesList);」で設定しています。

また、上記の例ではコメントアウトしていますが、プルダウンの初期値（初期表示時に選択状態とする値）を設定する場合は「model.addAttribute("selectedValue", "01");」で初期値を設定します。（※selectedValueは画面側で使用している）

スポンサーリンク

サービスクラス（TestService.java）

サービスクラスは次のとおりです。

package com.example.demo.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.entity.Prefectures;
import com.example.demo.repository.PrefecturesRepository;

/**
 * テスト用 Service
 */
@Service
public class TestService {

    /**
     * 都道府県マスタ Repository
     */
    @Autowired
    private PrefecturesRepository prefecturesRepository;

    /**
     * 都道府県マスタ 全検索
     * @return 検索結果
     */
    public List<Prefectures> getPrefecturesAll() {
        return prefecturesRepository.findAll();
    }
}

サービスクラスでは、リポジトリクラス（※データベースからデータを取得する方法にはSpring Data JPA使用）を呼び出し都道府県マスタの全データを取得しています。

エンティティクラス（Prefectures.java）

都道府県マスタテーブルのエンティティクラスは次のとおりです。

package com.example.demo.entity;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.Data;

/**
 * 都道府県マスタ Entity
 */
@Entity
@Data
@Table(name = "prefectures")
public class Prefectures implements Serializable {

    /**
     * 都道府県コード
     */
    @Id
    @Column(name = "code")
    private String code;

    /**
     * 都道府県名
     */
    @Column(name = "name")
    private String name;
}

リポジトリクラス（PrefecturesRepository.java）

リポジトリクラスは次のとおりです。

package com.example.demo.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.example.demo.entity.Prefectures;

/**
 * 都道府県マスタ Repository
 */
@Repository
public interface PrefecturesRepository extends JpaRepository<Prefectures, Long> {
}

フロントエンド（クライアント）側のソースコード

スポンサーリンク

プルダウンサンプル画面（test.html）

プルダウンサンプル画面のHTMLファイルは次のとおりです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="プルダウン"></title>
    <meta charset="utf-8" />
</head>
<body>
    <div class="container">
        <h1>プルダウンサンプル</h1>
        <select>
            <option value="00"></option>
            <option
                th:each="prefectures : ${prefecturesList}"
                th:value="${prefectures.code}"
                th:text="${prefectures.name}"
                th:selected="${prefectures.code == selectedValue}">
            </option>
        </select>
    </div>
</body>
</html>

コントローラクラスで設定した「${prefecturesList}」を「th:each」に指定することで都道府県マスタのリスト分、繰り返し処理がおこなわれます。

生成されるHTMLは以下です。

<select>
<option value="00"></option>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
</select>

「th:value」に設定した値が<option>タグのvalue属性、「th:text」に設定した値が<option>タグの値に反映されます。

そして「th:selected="${prefectures.code == selectedValue}」の条件に一致した場合は、<option>タグにselectedが付与され、プルダウンの初期値として設定されます。（※selectedValueはコントローラクラスで設定した値）

helpful