Spring Boot + Thymeleafで画面のあるWebアプリケーションを開発する

MVCの基礎

MVC アーキテクチャとは

Thymeleafとは

ThymeleafはSpringと連携機能が提供されているテンプレートエンジンである。
HTML文法に則ったテンプレートを作成でき、作成したテンプレートファイルはそのままブラウザで開く*ことができる。
テンプレートのHTMLタグ内にThymeleafのタグを埋め込むことで動的要素を構成することができる。

<html>
 <body>
  <h1 th:text="${fullName}">電子たろう</h1>
 </body>
</html>

*直接ブラウザで開いた際にはTypmeleafの属性は無視される

PJへThymeleafを追加する

pom.xmlの修正

新規PJの場合は、Spring InitializrでDepedencyにThymeleafを追加するだけで使用可能になる。

既存PJの場合は、Mavenを使っている場合にはpom.xmlのdependenciesに以下の記述を追加する。

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

また開発時に便利な機能を提供してくれる以下の設定も入れておくと良い。
これを入れておくと、ソースコード修正時に自動的にAPサーバーが再起動され、修正した内容がすくに反映されるといった機能が利用できるようになる。

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
　　　　　　  <version>3.5.0</version>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>

Thymeleafを動かす

Controllerクラスの作成

Viewを伴うCotrollerクラスの場合は、＠Controllerアノテーションを付与して宣言する。
リクエスに対応する処理はメソッドで記述する。メソッドの戻り値はView名にする。
引数のmodelに対して属性を追加することで、Viewに値を渡すことができる。

@Controller
public class SampleController {

    @GetMapping("/greeting")
    public String greeting(Model model){
        model.addAttribute("fullName", "Hello 電子じろう!!");
        return "greeting";
    }
}

Viewの作成

Viewはテンプレートファイルとして作成する。テンプレートファイルはsrc/main/resources配下の「templates」フォルダに配置する。
Controllerの戻り値の文字列とファイル名を一致させておく。

<html>
 <body>
  <h1 th:text="${fullName}">電子たろう</h1>
 </body>
</html>

実行して確認

サーバサイドで設定した値が表示されることを確認できた。

Spring Boot + Spring Data JPA+ ThymeleeafでDBアクセスを実装

DBにアクセスを伴うWebアプリケーションの開発

Spring Initializrで雛形を作成する

Dependenciesは以下のようにする。利用するRDBMSが違う場合は対応するDriverに変更すること。

application.propertiesにDB接続情報を記述する

以下はH2 DBに接続するための接続情報である。SQL Serverや他の異なるRDBMSを利用する場合は適宜変更すること。

spring.datasource.url=jdbc:h2:mem:testdb;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSE
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.sql.init.encoding=UTF-8
spring.sql.init.data-locations=classpath:data.sql
spring.datasource.initialize=true

パッケージの作成

src/main/java/<アプリケーションのパス>の配下に「entity」、「service」、「controller」、「repository」のパッケージを作成する。

Entityクラスの作成

今回は歌手(グループ)を表すクラスを作成し、DBで管理を行うアプリをサンプルとして作成する。
そのために、EntityクラスとしてArtistクラスを作成する。

@Entity
@Table(name = "artists")
@Data
public class Artist {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer artistId;

    private String artistName;

    private String artistHiraganaName;

    private String artistArtUrl;
}

Repositoryインタフェースの作成

Artistのレコードをやり取りするためのRepositoryインタフェースを作成する。

@Repository
public interface ArtistRepository extends CrudRepository<Artist, Integer> {

    public List<Artist> findAll();
}

Serviceクラスの作成

@Service
public class ArtistService {

    private final ArtistRepository artistRepository;

    @Autowired
    public ArtistService(ArtistRepository artistRepository) {
        this.artistRepository = artistRepository;
    }

    /**
     * 全件検索
     * @return テーブル内にある全レコード
     */
    public List<Artist> findAll() {
        return artistRepository.findAll();
    }
}

Controllerクラスの作成

Controllerクラスではリクエストパスの設定と、遷移先のHTMLファイル名を指定する。
値をサーバーサイドから受け取って、Viewに渡す処理もここで行う。

@Controller
public class ArtistController {

    private final ArtistService artistService;

    @Autowired
    public ArtistController(ArtistService artistService) {
        this.artistService = artistService;
    }

    @GetMapping("/artists")
    public String findAll(Model model) {
        var artists = artistService.findAll();

        model.addAttribute("artists", artists);
        return "artists";
    }

Viewの作成

全アーティスの情報を表示するためのartists.htmlファイルを作成する。
Thymleafで繰り返し処理を行うには、th:eachタグを利用する。
構文は th:each="要素変数 : ${リスト}"となっており、拡張for文に似ている。
要素変数の値には「要素変数.(ドット)」でアクセスできる*。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>アーティスト一覧</title>
</head>
<body>
<table border="1">
  <tr>
    <th>アーティスト名</th>
    <th>アーティスト名(読み)</th>
    <th>公式HP</th>
  </tr>
  <tr th:each="artist: ${artists}">
    <td th:text="${artist.artistName}"></td>
    <td th:text="${artist.artistHiraganaName}"></td>
    <td th:text="${artist.artistArtUrl}"></td>
  </tr>
</table>
</body>
</html>

*メソッドも実行できる。

動作確認

Spring Bootを実行し、Webブラウザでアクセスすれば動作が確認できる。

まめログ

Javaプログラマの歩み

Spring Boot + Thymeleafで画面のあるWebアプリケーションを開発する