システムエンジニアになりたいし、なってほしいし

~ 若いエンジニア中心の小さなシステム会社データライズのブログ ~

Spring bootを使ってみます ~先ずはデータベースは使わずに~

 こんにちは、データライズのエンジニアのNootsです。

 この前に見たブログで「凡人は模倣し、天才は盗む」という言葉を紹介していまして、いい言葉だなと思いました。コピペプログラムはあくまで理解の一手順であって、そこで完結させてはいけませんよね。

 今回はThymeLeafを少しでも理解するために、簡単なプログラムを作成してみます。

 例のごとく、私はまだ新米エンジニアでして多少誤りがあるかと……。

 コメントでご指摘いただけたら幸いです。

 前回の内容はこちら!

datalyze.hatenablog.com

データベースを使わないプログラムで、Thymeleafの挙動を確認

 いきなり難しいプログラムを作れるはずもないので、先ずは極々簡単なプログラミングから。

 本当に簡単ですよ。何しろ2ファイルしか作りませんから。

目次

index.html

 先ずは「\src\main\resources\templates\index.html」を作成します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>トップページ</title>
</head>

<body>

<p> <span th:text="${day}">テスト</span>を表示します</p>

</body>
</html>

 ポイントは下の書き方。

<span th:text="${day}">テスト</span>

 これをそのままhtmlで表示すると……。

f:id:noots_datalyze:20170801113618p:plain

 こうなりますね。

DayController.java

 今度は「\src\main\java\com\val\noots\DayController.java」を作成。

package com.val.noots;

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

@Controller
public class DayController {

@RequestMapping("/day")
public String index(Model model) {
model.addAttribute("day", "曜日");
return "index";
}
}

 「@Controller」によって、このファイルをコントローラですと教えています。

 「@RequestMapping」はリクエストを処理するためのメソッドと宣言している……のですかね? 詳しくは自信がないです。

 その後ろの「(“/day”)」はポイントです。

 「http://ドメイン名/~」の「~」を指定しています。

 例えばローカルホストで実行するなら、この場合は「http://localhost:8080/day」というアドレスにアクセスする必要があります。(EclipseでTomcat使うときなどはアドレスを間違えないように注意してくださいね)

 戻り値は見ての通り「"index"」です。表示したいviewを指定します。

 今回は先ほど作成した「\src\main\resources\templates\index.html」を探して表示してくれます。

実行!

 早速、作ったプログラムを実行してみます。

f:id:noots_datalyze:20170801113410p:plain

 あれ。さっきとちょっと変わりましたね。

 「DayController.java」の

model.addAttribute("day", "曜日");

が、「index.html」の

<span th:text="${day}">テスト</span>

を書き換えたわけですね。

 このように、htmlに書かれた変数にコントローラが値を代入してあげることが出来ます。

 コントローラから値を受け取っていない場合でも、先程のように代わりの値を表示出来るため「見た目とプログラミングを弄る人を分けることが出来る」のが、Thymeleafの長所の一つなんだとか。(聞きかじり)

配列を使ってみる

 流石に上の内容だけだと寂しすぎるので、配列も使ってみます。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>トップページ</title>
</head>

<body>
    <p> <span th:text="${day}">テスト</span>を表示します</p>

    <table>
        <tr th:each="days : ${daysList}">
            <td th:text="${days}"></td>
        </tr>
    </table>

</body>
</html>
package com.val.noots;

import java.util.ArrayList;
import java.util.List;

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

@Controller
public class DayController {

    @RequestMapping("/day")
    public String index(Model model) {
        // しれっと変数に
        String day = "曜日";

        // リスト作るよ
        List<String> daysList = new ArrayList<String>();
        daysList.add("日");
        daysList.add("月");
        daysList.add("火");
        daysList.add("水");
        daysList.add("木");
        daysList.add("金");
        daysList.add("土");

        model.addAttribute("day", day);
        model.addAttribute("daysList", daysList);

        return "index";
    }
}

f:id:noots_datalyze:20170801223521p:plain

 Javaの拡張for文みたいですね。簡単!(でも、画像見にくいな……)

 まあ、参考サイトさんの丸パクリなんだけどね!

参考サイト

Spring Bootで簡単なWebアプリケーションを書いてみる - ももいろテクノロジー

Spring MVCのコントローラでの戻り値いろいろ - Qiita

Spring Boot解説第18回(基本編:Controllerとは) - Qiita

Spring WebMVCをやってみる (13) - @ValidとBindingResult -

Spring MVCの流れ - たこにありがちなこと。

【Spring MVC】@RequestMapping の基本 - 山崎屋の技術メモ

ThymeleafでListを繰り返して表示してみる。 - プログラマーの調べ物