ホーム>技術

Spring BootとThymeleafを導入してHello worldを表示する方法

目次

おすすめ

Thymeleafを本で学びたい！という方におすすめしたい本です。
Springについての本なのですが、Thymeleafの基本構文、他システムとの連携等30ページほど取り上げられています。
ThymeleafとSpringは親和性の高い技術なので、これを機にSpringを学んでみるというのもおすすめです。
ぜひ一度手に取ってみてください。

Spring徹底入門 Spring FrameworkによるJavaアプリケーション開発
翔泳社
¥1,980 （2022/07/18 00:00時点 | Amazon調べ）
Amazonで見る
Kindleで見る

当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか？
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく！

CodeCamp

実行環境

OSmacOS Catalina 10.15.1
EclipsePhoton 2018-09
Java8
Spring Tool Suit3.9.6
Spring Boot2.1.13
Thymeleaf2.1.2

開発および実行環境がない方は、以下の記事を参考に構築してください。

Javaの開発環境をEclipse(Pleiades)で構築する方法

Spring BootとThymeleafを導入してHello worldを表示する方法

Spring BootとThymeleafを導入してHello worldを表示する手順は以下のとおりです。

  1. Springのプロジェクトを作成する
  2. テンプレートファイルを作成する
  3. Controllerクラスを作成する
  4. 動作を確認する

Springのプロジェクトを作成する

はじめに、「demo」というプロジェクト名のSpringのプロジェクトを作成します。
今回は、Pleiadesに同梱されているSpring Tool Suite(STS)とThymeleafを使用する為「Photon 2018-09」のEclipseを使用します。

Springのパースペクティブを開く

  1. 右上にある＋のついた表のようなアイコンをクリック
  2. 「Spring」のパースペクティブを選択して [開く] ボタンを押下
  3. 「Spring スターター・プロジェクト」をクリック
  4. [次へ] ボタンを押下
ワードパースペクティブ

開発に使用する言語に応じて変化する画面のレイアウトのようなもの

以下のように表示されていたらパースペクティブの追加完了です。

Eclipseのキャプチャ1

Springのプロジェクトを作成

  1. 左ペインにあるパッケージ・エディタの上で右クリック
  2. 「新規」をクリック
  3. 「Spring スターター・プロジェクト」をクリック
  4. [次へ] ボタンを押下
Eclipseのキャプチャ2

以下の依存関係を選択して [完了] ボタンを押下します。

  • 開発ツール > Spring Boot DevTools
  • 開発ツール > Lombok
  • テンプレート・エンジン > Thymeleaf
  • Web > Spring Web
Eclipseのキャプチャ3

以下のように表示されていたらプロジェクトの作成完了です。

Eclipseのキャプチャ4

テンプレートファイルを作成する

Springプロジェクトの作成が完了したら、テンプレートファイルを作成します。
今回は「demo.html」というファイル名で作成します。

  1. demo/src/main/resources/templates の上で右クリック
  2. 「新規」をクリック
  3. 「その他」をクリック
  4. 「Web > HTMLファイル」を選択して [次へ] ボタンを押下
  5. ファイル名に「demo.html」を入力して [完了] ボタンを押下

作成したテンプレートファイルを以下のように編集して保存します。

<!DOCTYPE html>
<!-- Thymeleafで使用するthタグを認識するための記述 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Hello world</title>
</head>
<body>
  <!-- "message"という変数の値を表示する -->
  <h1 th:text="${message}"></h1>
</body>
</html>

Controllerクラスを作成する

次に、テンプレートファイルを呼び出すためのControllerクラスを作成します。
今回は「DemoController.java」というファイル名で作成します。

  1. demo/src/main/java/com/example/demo の上で右クリック
  2. 「新規」をクリック
  3. 「クラス」をクリック
  4. クラス名に「DemoController」を入力して [完了] ボタンを押下

作成したControllerクラスを以下のように編集して保存します。

package com.example.demo;

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

@Controller
public class DemoController {

  // アクセスする際に使用するURLを設定
  @RequestMapping("/demo")
  public String demo(Model model) {
    // "message"という変数に「Hello world」という文字列を設定
    model.addAttribute("message", "Hello world");
    // 返却するテンプレートファイル名を指定
    return "demo";
  }
}

動作を確認する

  1. 作成したSpringプロジェクト「demo」の上で右クリック
  2. 「実行」をクリック
  3. 「Spring Boot アプリケーション」をクリック
  4. ブラウザで http:localhost:8080/demo にアクセス
ブラウザのキャプチャ

お疲れさまでした

今回は、Spring BootとThymeleafを導入してHello worldを表示する方法をご紹介しました。
少しでも参考になれば幸いです。

どんな記事が読みたいですか？

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください！