【今更ながらSpring BootでWEB開発 #2】データの表示(Thymeleaf)

Web

ページにデータを表示するには?

前回はプロジェクトの作成方法と、ページの表示方法までを紹介しました。今回の記事では前回作成したIndexControllerとindex.htmlを使いますので、こちらの記事から見ていただければと思います。

【今更ながらSpring BootでWEB開発 #1】プロジェクトの作成
JavaでWebアプリケーションを開発するために、これからSpring Bootというフレームワークについて学んでいきます。今回はSTSのインストール、プロジェクトの作成、簡単なページの表示までを行っていきます。

データの受け渡し

サーバーサイドからページにデータを受け渡すには、モデル(Model)を使用します。下手な説明よりもまずはソースを変更していきます。

@GetMapping
public String index(Model model) {
  model.addAttribute("title", "This is My App!!");
  return "index";
}

モデルはコントローラーで定義されるメソッドの引数になります。上記のように「model.addAttribute()」を用いることで、ページで使用するデータを設定することができます。第一引数がデータを参照する際の名前、第二引数がデータの値になります。

モデルに関する詳しい説明はまた別の記事でやりたいと思います。ここでは「model.addAttribute()」でページにデータを受け渡しできるものと理解しておいてください。

データの表示

サーバーサイドから受け渡されたデータを使用するために、Thymeleafというテンプレートエンジンを使用します。

Thymeleafはプロジェクト作成時に追加していますので、特別な設定は必要ありません。少し脇道に逸れますが、プロジェクトの中にある「build.gradle」を開いてみてください。

plugins {
  id 'org.springframework.boot' version '2.2.2.RELEASE'
  id 'io.spring.dependency-management' version '1.0.8.RELEASE'
  id 'java'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

configurations {
  developmentOnly
  runtimeClasspath {
    extendsFrom developmentOnly
  }
}

repositories {
  mavenCentral()
}

dependencies {
  implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' //Thymeleafが読み込まれている
  implementation 'org.springframework.boot:spring-boot-starter-web'
  developmentOnly 'org.springframework.boot:spring-boot-devtools'
  testImplementation('org.springframework.boot:spring-boot-starter-test') {
    exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
  }
}

test {
  useJUnitPlatform()
}

「dependencies」の一番上にある記述によって、Thymeleafがプラグインとして使用できるようになっています。プロジェクト作成時に追加した「Spring Boot DevTools」と「Spring Web」もここに記述されています。

今後必要なプラグインがある場合は、ここにプラグインの情報を記述することで利用可能になります。

では、Thymeleafを使って「index.html」のtitleタグとh1タグに受け渡されたデータを表示してみましょう。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="${title}">Insert title here</title>
</head>
<body>
  <h1 th:text="${title}"></h1>
</body>
</html>

Thymeleafを使用するためには、まずhtmlタグに「xmlns:th=”http://www.thymeleaf.org”」を設定します。

titleタグやh1タグの内容を変更したい場合は、「th:text=”${データ名}”」を設定します。今回はデータ名に「title」と設定しているので「title」を指定します。

それでは実際にページアクセスしてみましょう。設定したデータがタイトルとページに表示されたでしょうか。

Thymeleafの基本

ではThymeleafについて、もう少し詳しく見ていきます。Thymeleafのドキュメントは以下になりますので、気になる方はこちらをご覧ください。

Tutorial: Using Thymeleaf (ja)

テキストの埋め込み

h1タグやpタグなどの文字の表示に関するインライン要素に対してデータを表示する場合は、先程も使用した「th:text」を使用します。この際、タグ内に指定された文字は上書きされます。

<h1 th:text="${title}"></h1>
<p th:text="${title}">p タグです</p>

テキストの表示にはもう1つ方法があり、次のように「[[ ]]」で囲うことで、テキストを埋め込むことができます。

<p>[[${title}]]</p>

フォームの初期値設定

次のようなフォームがあったとします。これにサーバーサイドから受け取ったデータを初期値として設定することを考えていきます。

<form>
  <label for="input">INPUT:</label>
  <input type="text" id="input" name="input"> <br />
  <div id="check-group">
    <span>CHECK: </span>
    <label for="checkbox1">1.</label>
    <input type="checkbox" id="checkbox1" name="checkbox1">
    <label for="checkbox2">2.</label>
    <input type="checkbox" id="checkbox2" name="checkbox2">
  </div>
  <div id="radio-group">
    <span>RADIO: </span>
    <label for="radio1">1.</label>
    <input type="radio" id="radio1" name="radio" value="1">
    <label for="radio2">2.</label>
    <input type="radio" id="radio2" name="radio" value="2">
    <label for="radio3">3.</label>
    <input type="radio" id="radio3" name="radio" value="3">
  </div>
  <label for="select">SELECT:</label>
  <select id="select" name="select">
    <option value="0">Value is 0</option>
    <option value="1">Value is 1</option>
    <option value="2">Value is 2</option>
    <option value="3">Value is 3</option>
    <option value="4">Value is 4</option>
  </select>
</form>

最終的には次のように値が設定されることを目標とします。

フォームデータの作成

次のようにフォームに合わせたクラスを作成します。Setter/Getterは省略してあります。

package com.example.demo.app.index;

public class SampleForm {

  private String input;
  private boolean checkbox1;
  private boolean checkbox2;
  private int radio;
  private int select;

  public SampleForm() {}
}

コントローラーでフォームクラスのオブジェクトを作成し、モデルに設定します。

@GetMapping
public String index(Model model) {
    
  SampleForm sampleForm = new SampleForm();
  sampleForm.setInput("This is input value");
  sampleForm.setCheckbox1(true);
  sampleForm.setCheckbox2(false);
  sampleForm.setRadio(2);
  sampleForm.setSelect(1);
  
  model.addAttribute("sampleForm", sampleForm);
  return "index";
}

inputへの設定

inputタグに値を設定するには次のように、「th:value」にsampleFormオブジェクトのinputを設定します。

<input type="text" id="input" name="input" th:value="${sampleForm.input}">

inputタグにはもともとvalue属性があります。それを「th:value」とすることで、value属性をThymeleafによって設定するという宣言になります。

これ以降のタグについても、各々がもつ属性をThymeleafによって設定していきます。

checkboxへの設定

checkboxタグにチェックをつける場合は、checked属性を付与する必要があります。逆にない場合はチェックがついていない状態になります。これをThymeleafによって設定するには次のようにします。

<input type="checkbox" id="checkbox1" name="checkbox1" th:checked="${sampleForm.checkbox1}">

設定したsampleForm.checkbox1がTrueであればchecked属性が付与され、Falseであれば付与されません。

radioへの設定

radioもcheckboxと同様にchekcedプロパティによってどの要素にチェックが入っているかを設定できます。これをThymeleafによって設定するには次のようにします。

<label for="radio1">1.</label>
<input type="radio" id="radio1" name="radio" value="1" th:checked="${sampleForm.radio == 1}">
<label for="radio2">2.</label>
<input type="radio" id="radio2" name="radio" value="2" th:checked="${sampleForm.radio == 2}">
<label for="radio3">3.</label>
<input type="radio" id="radio3" name="radio" value="3" th:checked="${sampleForm.radio == 3}">

${ }はデータそのものの参照だけではなく、データを使った式を使用することができます。checkboxと同様にTrueの要素に対してchecked属性が付与され、選択状態になります。

selectへの設定

selectの要素を選択状態にするには、optionタグにselected属性を付与します。これもradioの場合と同様に条件式を用いて次のようにします。

<select id="select" name="select">
  <option value="0" th:selected="${sampleForm.select == 0}">Value is 0</option>
  <option value="1" th:selected="${sampleForm.select == 1}">Value is 1</option>
  <option value="2" th:selected="${sampleForm.select == 2}">Value is 2</option>
  <option value="3" th:selected="${sampleForm.select == 3}">Value is 3</option>
  <option value="4" th:selected="${sampleForm.select == 4}">Value is 4</option>
</select>

これで画面を表示したときに、目的の状態になっているはずです。

オブジェクト参照の省略

先ほどのフォームのformタグについて次の変更を加えます。

<form th:object="${sampleForm}">
  <!--省略 -->
</form>

こうすることで、formタグの子要素ではオブジェクト名を省略できます。具体的に、例えばinputは次のように書き換えることができます。

<input type="text" id="input" name="input" th:value="*{input}">

オブジェクト名を省略する場合は「*{ }」でフィールドを指定します。

繰り返し

先ほどのselectの生成を、IndexControllerから渡したselectValuesという配列で設定してみます。

@GetMappint
public String index(Model model) {
  //・・・

  int[] selectValues = {0, 1, 2, 3, 4};
  model.addAttribute("selectValues", selectValues);

  return "index";
}

このデータを使ってselectを設定するには次のようにします。

<select id="select" name="select">
  <option th:each="value : ${selectValues}" th:value="${value}" th:selected="${value == sampleForm.select}">[['Value is ' + ${value}]]</option>
</select>

「th:each」はJavaでいう拡張for分のようなもので、今回の場合selectValuesの値を順にvalueに設定しています。あとはそのvalueの値を用いて、value属性、selected属性、テキストの埋め込みを行っています。

繰り返しステータス

ここでは省略されていますが、「th:each」は繰り返しに関するステータスを持っています。ステータスを参照する場合には次のようにします。

<option th:each="value,status = ${selectValues}">

繰り返しステータスについては割愛しますが、こちらに記載がありますので参考にしてください。

Tutorial: Using Thymeleaf (ja)

要素の表示制御

例えば表示時点でcheckboxがTrueの場合にのみメッセージを表示したいとします。このような場合には「th:if」を使用して次のようにします。

<p th:if="${sampleForm.checkbox1}">Checkbox1 Checked!!</p>
<p th:if="${sampleForm.checkbox2}">Checkbox2 Checked!!</p>

この場合、「Checkbox1 Checked!!」のみが表示されます。

あとがき

ここで紹介したThymeleafの機能についてはほんの一部です。ほかにもいろいろと機能があるのでドキュメントをぜひ参考にしてみてください。

 

- Spring Bootのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました