山崎屋の技術メモ

IT業界で働く中で、気になること、メモしておきたいことを書いていきます。

Spring boot + Thymeleaf 超入門

過去の記事で Spring boot を使用した、簡単な Web アプリケーションを作りました。

Eclipse + Spring boot で簡単な WEB アプリの作成 - 山崎屋の技術メモwww.shookuro.com


このときは JSP やテンプレートエンジンなどを使用せず、 "Hello! Spring Boot!!" という文字列をテキストとして返すアプリケーションでした。

今回はテンプレートエンジン Thymeleaf を使用した最小限の Web アプリケーションを作りたいと思います。

Spring boot の入門としてお読みいただければうれしいです。

Thymeleaf とは

Thymeleaf とは HTML の中に Thymeleaf のタグを埋め込むことにより Web ページ( view )を作成するテンプレートエンジンです。

アプリケーションサーバに組み込んで動的な画面として表示するだけでなく、単体の HTML としてブラウザに表示もできます。( Tymeleaf のルールに従って作った HTML テンプレート は HTML の構文としても正しいです。)

なので都度ブラウザで確認しながら画面をデザインすることができます。

厳密ではないですが、簡単で作りやすい JSP くらいに考えていいのではないでしょうか。

開発環境には STS ( Spring Tool Suite ) を使用しています。

Spring Tool Suite ( STS )インストール - 山崎屋の技術メモ

プロジェクトの作成


Package Explorer の何もない部分を選択し、右クリック → New → Spring Stater Project を選択します。
f:id:yyama1556:20171118131821p:plain

New Spring Starter Project のダイアログが開くので、適当に入力して Next をクリックします。
f:id:yyama1556:20171118131949p:plain


依存関係を指定する画面に遷移します。Template Engines に Thymeleaf を選択。また、Web に Web を選択します。文字で説明するとわけ分かりませんが、下の赤枠のように選択すればOKです。そして Finish をクリックします。
f:id:yyama1556:20171118132656p:plain

少し待つと demo プロジェクトが作成されます。ファイル構成は次のとおりです。
f:id:yyama1556:20171118133026p:plain

コントローラとThymeleaf テンプレートの追加


まず、コントローラを追加します。org.yyama パッケージ配下に以下のクラス(DemoController)を作りました。

package org.yyama;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class DemoController {

	@RequestMapping("/")
	public String index(Model model) {
		model.addAttribute("msg", "Hello! Thymleaf!!");
		return "index";
	}
	
}


そして、resources の templates に以下のような index.html を格納します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
</head>
<body>
<p th:text="${msg}">ここの文字列は、実行時に ${msg} で置換されます。</p>
</body>
</html>

これで完成です。簡単ですね!

実行

Package Explorer でプロジェクトを 右クリック → Run As → Spring Boot App を選択すると、Tomcat が起動されます。
f:id:yyama1556:20171118141513p:plain

ブラウザから 「http://localhost:8080/」にアクセスすると、期待通り "Hello! Thymleaf!!" の文字列が表示されました。
f:id:yyama1556:20171118141821p:plain

まとめ

最終的なファイル構成を載せておきます。
f:id:yyama1556:20171118142458p:plain



テンプレートを使用した Web アプリケーションも 10分も掛からずに作成できました。Spring boot の相変わらずなブラックボックスぶりが気持ち悪いですが、べんりな世の中になりましたね。

それでは!

Spring Framework 記事へのリンク集です。初心者向けの記事になっています。分かりにくかったり間違いなどあればコメントいただけるとうれしいです。

Spring 関連記事へのリンク集 - 山崎屋の技術メモ


Spring Boot プログラミング入門

Spring Boot プログラミング入門