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

当サイトはアフィリエイト広告を利用しています。

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

CodeCamp

実行環境

OS	macOS Catalina 10.15.1
Eclipse	Photon 2018-09
Java	8
Spring Tool Suit	3.9.6
Spring Boot	2.1.13
Thymeleaf	2.1.2

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

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

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

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

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

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

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

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

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

ワードパースペクティブ

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

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

Springのプロジェクトを作成

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

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

開発ツール > Spring Boot DevTools
開発ツール > Lombok
テンプレート・エンジン > Thymeleaf
Web > Spring Web

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

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

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

demo/src/main/resources/templates の上で右クリック
「新規」をクリック
「その他」をクリック
「Web > HTMLファイル」を選択して [次へ] ボタンを押下
ファイル名に「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」というファイル名で作成します。

demo/src/main/java/com/example/demo の上で右クリック
「新規」をクリック
「クラス」をクリック
クラス名に「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";
  }
}

動作を確認する

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

お疲れさまでした

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

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

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

目次

実行環境

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

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

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

Springのプロジェクトを作成

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

Controllerクラスを作成する

動作を確認する

お疲れさまでした

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