目次
はじめに
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はコントローラクラスで設定した値)