Spring Tool Suite (STS)と Spring Boot で始める Web アプリケーション開発（３）

こんにちは。梶原です。
これは TECHSCORE Advent Calendar 2016 の3日目の記事です。

「Spring Tool Suite (STS)と Spring Boot で始める Web アプリケーション開発」の第3回です。
3回に分けて掲載しています。

第1回：STSのインストールと Spring Legacy プロジェクトを動かす
第2回：Spring Starter プロジェクトを動かし画面に Hello World を表示する
第3回：画面に入力した内容を画面に表示する

Spring Boot につていは TECHSCORE BLOG の記事「Spring Boot 入門」もご覧ください。

前回の記事では Spring Tool Suite (STS) でSpring Starter プロジェクトを作成してコントローラ内で設定したテキスト Hello World を画面に表示させました。
今回は次のステップとして画面のフォームに入力した内容を送信して画面に表示させます。

この記事のゴール

前回の記事で作成した Spring Starter プロジェクトを利用してフォーム画面を作成します。
テンプレートエンジンには Thymeleaf を利用します。
画面のテキストボックスに入力した内容を送信して画面に表示させます。

環境

Windows 10
Java 8
Spring Tool Suite (STS) 3.8.1

Spring Boot は JSP を推奨しない

前回の記事では REST コントローラを作成し、テキストをブラウザ画面に表示させました。
しかし、実際の Web アプリケーションではテンプレートエンジンを利用して独自ルールやプログラム言語で記述されたコードから HTML 画面を作成し、ブラウザ画面に表示させています。
Java で Web アプリケーション開発の経験がある方は JSP を利用する機会が多かったのではないでしょうか。

ところが、Spring Boot 1.4.1 のリファレンスを確認すると利用できるテンプレートエンジンの種類についての記述がありますが

JSPs should be avoided if possible, there are several known limitations when using them with embedded servlet containers.

「JSP は可能な場合は利用は避けるべき」とあります(´・ω・`)
そこで、今回はテンプレートエンジンには Thymeleaf を利用して画面を作成することにします。

pom.xml の編集

利用するライブラリ Thymeleaf を追加します。
DemoSpringBootApp プロジェクトの直下にある「pom.xml」を右クリックし、Open With > Text Editor をクリック。

テキストエディタで pom.xml が編集できるようになったので、コメントで「&lt!-- 追加: ここから -->」「&lt!-- 追加: ここまで -->」と書かれた範囲を追加しました。

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

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

        <!-- 追加: ここから -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- 追加: ここまで -->
    </dependencies>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

</dependencies>

コントローラを修正

前回の記事で作成したHelloController.java を編集します。

package com.techscore.springboot;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class HelloController {
    
    @RequestMapping(value="/", method=RequestMethod.GET)
    public ModelAndView index(ModelAndView mav) {
        mav.setViewName("index");
        mav.addObject("msg", "input your name :");    // 表示メッセージ
        return mav;
    }

    @RequestMapping(value="/", method=RequestMethod.POST)
    public ModelAndView send(@RequestParam("name")String name, 
            ModelAndView mav) {
        mav.setViewName("index");
        mav.addObject("msg", "Hello " + name + " !");    // 表示メッセージ
        mav.addObject("value", name);                    // 入力テキストに入力値を表示
        return mav;
    }
}

package com.techscore.springboot;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.servlet.ModelAndView;

@Controller

public class HelloController {

@RequestMapping(value="/", method=RequestMethod.GET)

public ModelAndView index(ModelAndView mav) {

mav.setViewName("index");

mav.addObject("msg", "input your name :"); // 表示メッセージ

return mav;

}

@RequestMapping(value="/", method=RequestMethod.POST)

public ModelAndView send(@RequestParam("name")String name,

ModelAndView mav) {

mav.setViewName("index");

mav.addObject("msg", "Hello " + name + " !"); // 表示メッセージ

mav.addObject("value", name); // 入力テキストに入力値を表示

return mav;

}

クラス定義の前のアノテーションは前回の記事では @RestController でしたが、今回は @Controller を利用します。@RestController はアクセスした側にテキストを返すだけの動作でしたが、@Controller はテンプレート機能を利用して HTML ページを表示します。
ModelAndView はテンプレートで利用するデータ類と、テンプレート名などビューに関する情報をまとめて管理するクラスです。

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

パッケージエクスプローラで「src/main/resources」配下にある「templates」フォルダを選択して右クリックし、New > Other… をクリック。

設定画面が起動します。
「Web」内の「HTML File」を選択して Next ボタンをクリック。

保存場所は「templates」フォルダを選択。ファイル名は「index.html」を入力して Next ボタンをクリック。

HTML Template は「New HTML File (5)」を選択。

Finish ボタンをクリックすると、index.html の作成が完了します。

index.html を編集して、入力テキスト欄に値を入力してボタンをクリックすると送信されるフォームを作成します。
入力テキスト欄の上にはコントローラから受け取った値をメッセージとしてテキスト表示しています。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello Page</title>
</head>
<body>
    <p th:text="${msg}">please wait...</p>
    <form method="post" action="/">
        <input type="text" name="name" th:value="${value}" />
        <input type="submit" value="Click" />
    </form>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello Page</title>

</head>

<body>

<p th:text="${msg}">please wait...</p>

</form>

</body>

</html>

コーディングは以上です。
それではプロジェクトを実行してみましょう。

プロジェクトを実行して画面にアクセス

プロジェクト「DemoSpringBootApp」を右クリックし、Run As > Spring Boot App をクリックします。
しばらくすると以下のようなログが出力され、末尾に「Started DemoSpringBootAppApplication」とあります。プロジェクトが実行できました。

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.4.1.RELEASE)

. ____ _ __ _ _

/\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \

( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \

\\/ ___)| |_)| | | | | || (_| | ) ) ) )

' |____| .__|_| |_|_| |_\__, | / / / /

=========|_|==============|___/=/_/_/_/

:: Spring Boot :: (v1.4.1.RELEASE)

画面にアクセスします。
http://localhost:8080/
入力テキスト欄とボタンのフォーム画面が表示されました。

入力テキスト欄に入力してボタンをクリックすると、コントローラで追加したテキストとあわせて「Hello ”入力値” !」が表示されました。

まとめ

次のレベルへのステップとしては、画面の入力項目内容をチェックしてエラーメッセージを表示したり、データベースに登録して検索できるようにしたりするのも良いと思います。

Spring Boot を利用した Web アプリケーションはコーディングして実際に画面が動くまでが短時間であることが体感できました。設定ファイルに煩わされることなくコーディングに集中できそうな点がとても好印象でした。