まだ勉強したことがない言語、JAVAを使うことになった件③

ついに画面表示！Thymeleafで商品一覧を表示してみた
👀 今回の目標
✅ Step 1：Controllerを作る（Javaのコード）
1. ✅ このコードのポイント
✅ Step 2：HTMLテンプレートを作る（Thymeleaf）
1. ✅ このHTMLのポイント
✅ Step 3：動かしてみよう！
💥 もし表示されなかったら？
💬 実際にやってみた感想

ついに画面表示！Thymeleafで商品一覧を表示してみた

前回までで、Javaの開発環境を整えて、

「http://localhost:8080/」でサーバーが起動するところまで進みました！

今回はいよいよ、画面に「データを表示する」というWebアプリの醍醐味に挑戦します✨

👀 今回の目標

Java + Spring Boot + Thymeleaf を使って、

「りんご・みかん・バナナ」などの商品一覧を、

画面上にズラッと表示してみることがゴールです！

✅ Step 1：Controllerを作る（Javaのコード）

まずは、「このURLにアクセスしたら、こんなデータを渡しますよ〜」というコントローラーを用意します。

src/main/java/〜/DemoApplication.java と同じ場所に以下を作成：

🔸ProductController.java

package com.example.demo;

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

import java.util.List;

@Controller
public class ProductController {

    @GetMapping("/products")
    public String showProducts(Model model) {
        List<String> products = List.of("りんご", "みかん", "バナナ");
        model.addAttribute("products", products);
        return "products";
    }
}

✅ このコードのポイント

行数	内容
@Controller	画面表示のためのコントローラーです！
@GetMapping(“/products”)	/productsにアクセスしたときに動きます
List.of(…)	商品名のリストを作っています
model.addAttribute(…)	画面側にデータを渡すコード
return “products”	products.html というテンプレートを表示します

✅ Step 2：HTMLテンプレートを作る（Thymeleaf）

次に、HTMLファイルを作って、商品一覧を表示させます。

メモ帳ではなくIntelliJで作成します。

src/main/resources/templates/ フォルダの中に、

🔸products.html というファイルを作成して、以下を記述：

<!DOCTYPE html>
<html lang="ja"
      xmlns:th="<http://www.thymeleaf.org>">
<head>
  <meta charset="UTF-8">
  <title>商品一覧</title>
</head>
<body>
<h1>商品一覧</h1>
<ul>
  <th:block th:each="item : ${products}">
    <li th:text="${item}">商品名</li>
  </th:block>
</ul>
</body>
</html>

パスの知識がある方はわかると思いますが

✅ このHTMLのポイント

タグ	内容
xmlns:th	Thymeleafの属性を使うための宣言
th:each	Javaのリストをループ表示
th:text	値を表示（この中の item が1つずつ入る）