【Java開発】SpringでWebアプリを作成しよう!(Thymeleafの活用)

アプリ開発_SpringJava入門
スポンサーリンク

こんにちは!しーま(@s59shima)です。

いつもブログをご覧いただきありがとうございます。

今回は、こんな悩みや疑問のある方に向けて記事を書きました。

読者
読者

Thymeleafを使うためには、どうすればいいの!?

Thymeleafの設定方法や実際にHTMLに定義する場合について知りたい方はおすすめの記事です。

  • OS:Windows 10
  • JDK:OpenJDK 8
  • IDE:Spring Tools 4
  • Spring Boot:2.3

SpringでのWebアプリの作成手順

Webアプリの作成手順
  • STEP1

    無料で使用できる SpringTools4 について紹介します。ダウンロードから始まり各種設定(日本語化)までを詳しく解説します。

  • STEP2

    Springプロジェクトを作成し、Webアプリを実行するまでの手順を詳しく解説します。難しい設定などは特にありませんので、簡単に始められます。

  • STEP3
    Thymeleafの活用(本記事はココ!)

    Thymeleafというテンプレートを使用してhtmlファイルを作成します。Thymeleafを使用するための設定なども詳しく解説します。

  • STEP4

    Springで用意されている入力チェックを使用します。アノテーションを使用することで簡単に実装ができます。

  • STEP5

    DI(依存性の注入)の有・無パターン2つを比較しながら詳しく解説します。

Thymeleafとは

Thymeleafとは、Javaテンプレートエンジンの一つです。

このテンプレートエンジンを使用することで、HTMLの属性に変数が定義できます。

属性に変数を追加しているだけなので、画面が大きく崩れない特徴があります。

Thymeleafがあれば【th:xxxx】という書き方ができます。

デザイナーの方と協業して進めることができるのは強みですよね。

それでは、一緒にThymeleafの使い方を学んで行きましょう!

Thymeleafを使用するには(pom.xmlを変更)

まず初めに、Thymeleafを使用するための準備を行います。

Springプロジェクトの中にpom.xmlというファイルがあります。

pom.xmlThymeleafの定義を行います。

pom.xmlの中にdependenciesタグに追加します!

既に幾つかのdependencyタグがある場合、下記のように一番下に追加します!

下記は、実際にpom.xmlに追加したコードになります。

<dependency>
 <groupId>org.thymeleaf</groupId>
 <artifactId>thymeleaf-spring5</artifactId>
 <scope>compile</scope>
</dependency>

念のため、追加したらプロジェクトの更新を行います。

手順:【pom.xmlを右クリック】→【Maven】→【プロジェクトの更新】

Maven依存関係の確認

pom.xmlにコード追加・プロジェクトの更新が完了したらMaven依存関係を確認してみましょう。

以下の2つが追加されていればOKです!

  • thymeleaf-spring5-3.0.11.RELEASE-sources.jar
  • thymeleaf-3.0.11.RELEASE-sources.jar

これで準備は完了です。

\登録無料!60秒で登録できる!/

首都圏の求人に特化!
正社員並みの保障は魅力です!

Thymeleafの活用

それでは、Thymeleafを使用してhtmlを作成してみましょう。

今回は以下の2ファイルを作成します。

  • index.html
  • output.html

この2ファイルを作成し、顧客情報の入力・確認画面を作成します。

まずは、index.htmlです。顧客情報の入力画面を作成します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
 <head>
  <meta charset="UTF-8">
  <title>顧客の入力</title>
 </head>
 <body>
  <h1>顧客の入力</h1>
   <form method="POST" action="output.html" th:action="@{output}">
    <p>顧客番号</p><input type="text" name="number">
    <br>
    <p>顧客名</p><input type="text" name="name">
    <br>
    <input type="submit" name="登録">
   </form>
 </body>
</html>

formタグに「th:action」属性を追加しています。

th:action」は、フォームのPOST先を指定できます。

  • @{…} はリンクURL式
  • ${…} は変数式

次に、output.htmlです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <title>顧客の確認</title>
  </head>
  <body>
    <h1>顧客の確認</h1>
    <p>顧客番号<span th:text="${number}"> 100</span></p>
    <p>顧客名<span th:text="${name}"> テスト</span></p>
    <a href="index.html" th:href="@{input}"> 顧客の入力に戻る</a>
  </body>
</html>

spanタグに「th:text」属性を追加、aタグに「th:href」属性を追加しています。

Controllerの追加

ClientControllerクラスを「com.example.demo」パッケージに作成します。

package com.example.demo;

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

@Controller
public class ClientController {

  @RequestMapping("/input")
    public String index() {
      return "index.html";
    }

  @RequestMapping("/output")
  public String result(@RequestParam("number") String number, @RequestParam("name") String name, Model model) {
    model.addAttribute("number", number);
    model.addAttribute("name", name);
    return "output.html";
  }
}

アノテーションの解説

ClientControllerクラスに「@Controller」や「@RequestMapping」という記述があります。

「@」はアノテーションと言って、プログラムの補足情報を書くことが出来ます。

@Controller」は、コントローラであることを示します。

@RequestMapping」は、HTTPリクエストを示します。

しーま
しーま

例えば「@RequestMapping(“/input”)」を記述した場合、http://localhost:8080/input でアクセス可能になります!

HTTPリクエストの受け取りは以下の3つ。

  • @RequestMapping ⇒ HTTPリクエストを受け付ける。
  • @PostMapping ⇒ HTTPのPOSTリクエストを受け付ける。
  • @GetMapping ⇒ HTTPのGETリクエストを受け付ける。

PostMappingGetMappingアノテーションは、以下と同じ意味です。

// POSTの場合
@RequestMapping(path = "/input", method = RequestMethod.POST)
@PostMapping("/input") // Spring 4.3 から使用可能
// GETの場合
@RequestMapping(path = "/input", method = RequestMethod.GET)
@GetMapping("/input") // Spring 4.3 から使用可能
しーま
しーま

Spring 4.3以降「RequestMapping」から「PostMappingGetMapping」に置き換え可能になっていますね!

【return】で【htmlファイル】の呼び出し

各メソッドの戻り値は文字列(return “index.html” や return “output.html”)としています。

そうすることで、templatesフォルダにあるindex.htmloutput.htmlファイルを呼び出すことができます。

Webアプリの実行

ここまで完了したらSpringプロジェクトを実行してみましょう。

手順:【対象プロジェクトを右クリック】→【実行】→【Spring Boot アプリケーション】

コンソールタグが下記のように表示されました!?

このように表示されれば、ブラウザでWebアプリを確認してみましょう!

URLに「localhost:8080/input」を入力し、実行!

顧客入力画面が表示されましたね。

顧客番号・顧客名を入力して「送信」ボタンをクリックしてみます。

顧客確認画面が表示されました!

まとめ

今回は、Thymeleafの活用方法について解説しました。

最後まで読んでいただきありがとうございます(*^-^*)

本記事をまとめると以下の通りです。

Thymeleaf】とは、SpringBootで標準的に使われるHTMLのテンプレートエンジン。

Thymeleafを使用する場合、dependencyタグを追記することで可能。

HTMLの中に【th:~~~】と書き、変数を定義できる。

関連記事

しーま
しーま

プログラミングスクールの【Raise Tech】では、Spring Frameworkを使った実践コースが受講できます。今すぐスキルを身に付けたい方は必見ですね!

Javaスキルで悩んでいる方必見!本気で学習できる環境を探してみよう!
詳細はこちら
Javaスキルで悩んでいる方必見!本気で学習できる環境を探してみよう!
詳細はこちら
タイトルとURLをコピーしました