Spring BootとJavaScriptをThymeleafのinlineで連携する方法｜新人エンジニア向けにやさしく解説 | IT企業向け新人研修おすすめ資料　無料公開中

今回は、Spring BootとJavaScriptを連携する方法を、新人エンジニア向けに解説します。

特に、Thymeleafのth:inline="javascript"を使って、Controllerから渡した値をJavaScriptで使う方法を扱います。

Spring Bootを学び始めると、最初はController、Model、ThymeleafでHTML画面を作りますよね。

そのあと、JavaScriptを使って画面に動きを付けたくなります。

Controllerから渡した商品価格をJavaScriptで計算したい
検索結果の件数をJavaScriptで表示したい
DTOのリストをJavaScriptの配列として使いたい
ボタンを押したときに、Spring Bootから渡した値をもとに画面を変えたい

ログイン中のユーザー名をJavaScriptで使いたい

このような場面で使えるのが、ThymeleafのJavaScript inlineです。

Thymeleaf公式ドキュメントでも、JavaScript inliningはHTMLテンプレート内のscriptブロックとJavaScriptをよりよく統合するための仕組みであり、th:inline="javascript"を明示的に指定して使うと説明されています。

まず結論：inlineは「初期表示時にJavaScriptへ値を渡す仕組み」

最初に、inlineの役割をはっきりさせましょう。

Thymeleafのinlineは、Spring BootのControllerからModelに入れた値を、HTML内のJavaScriptへ埋め込む仕組みです。

Controller
        ↓
Modelに値を入れる
        ↓
ThymeleafがHTMLを作る
        ↓
th:inline="javascript"でJavaScript内に値を埋め込む
        ↓
ブラウザでJavaScriptが使う

たとえるなら、Controllerはお弁当を作る人です。

Modelはお弁当箱です。

Thymeleafはお弁当をきれいに盛り付ける人です。

JavaScript inlineは、そのお弁当の中身を「ブラウザ側のJavaScriptにも分けて渡す小皿」のようなものです。

つまり、inlineは「あとからAPIで取りに行く」のではなく、「画面を作るタイミングでJavaScriptに値を埋め込む」方法です。

Spring BootとJavaScriptの連携方法は大きく2種類ある

Spring BootとJavaScriptを連携するとき、よく使う方法は大きく2つあります。

方法	使うもの	向いている場面
Thymeleaf inline	th:inline="javascript"	画面表示時に必要な初期値をJavaScriptへ渡す
API通信	fetch()、@RestController	画面表示後にデータを取得・登録・更新する

今回のテーマは、前者のThymeleaf inlineです。

ただし、inlineとAPI通信は競合するものではありません。

初期表示ではinlineを使い、ボタン押下後の最新データ取得ではfetch()を使う、という組み合わせもよくあります。

新人エンジニアは、まず次のように覚えてください。

画面を表示する時点で値が決まっている
        ↓
inlineが向いている

画面を表示したあとに追加で通信したい
        ↓
fetch()とAPIが向いている

今回作るサンプル

今回は、ユーザー詳細画面を例にします。

Spring BootのControllerからUserDtoをModelへ入れます。

ThymeleafのHTMLでユーザー名を表示します。

さらに、th:inline="javascript"を使って、JavaScriptでもユーザーID、名前、メールアドレスを使えるようにします。

ControllerでUserDtoを作る
        ↓
model.addAttribute("user", user)
        ↓
ThymeleafでHTML表示
        ↓
th:inline="javascript"でJS変数へ代入
        ↓
ボタンを押すとJavaScriptでユーザー情報を表示

この流れが理解できると、Spring BootとJavaScriptのつながりがかなり見えやすくなります。

Spring Bootのテンプレート配置場所

Spring BootでThymeleafを使う場合、通常テンプレートHTMLはsrc/main/resources/templatesに配置します。Spring Boot公式ドキュメントでも、テンプレートエンジンをデフォルト設定で使う場合、テンプレートはsrc/main/resources/templatesから自動的に見つけられると説明されています。

今回のファイル構成は、次のようにします。

src/main/java
    com.example.demo
        controller
            UserController.java
        model
            UserDto.java

src/main/resources
    templates
        users
            detail.html

外部JavaScriptファイルを使う場合は、src/main/resources/static/jsに配置します。

Spring Bootはデフォルトで、classpath上の/static、/public、/resources、/META-INF/resourcesなどから静的コンテンツを提供します。

ただし、ここで重要な注意があります。

th:inline="javascript"は、Thymeleafで処理されるHTMLテンプレート内のscriptで使います。

src/main/resources/static/jsのような静的JavaScriptファイルは、通常Thymeleafで処理されません。

つまり、外部JSファイルに次のように書いても、基本的にはThymeleafの式として処理されません。

const userName = [[${user.name}]];

inlineを使うなら、まずHTML内のscriptタグで値を受け取る、と覚えてください。

UserDtoを作る

まず、Controllerから画面へ渡すUserDtoを作ります。

package com.example.demo.model;

public class UserDto {

    private long userId;
    private String name;
    private String email;

    public UserDto(long userId, String name, String email) {
        this.userId = userId;
        this.name = name;
        this.email = email;
    }

    public long getUserId() {
        return userId;
    }

    public String getName() {
        return name;
    }

    public String getEmail() {
        return email;
    }
}

DTOとは、Data Transfer Objectの略です。

データを運ぶためのクラスです。

今回のUserDtoは、ユーザーID、名前、メールアドレスを画面へ渡すための箱です。

Spring BootとThymeleafでは、getterが重要です。

たとえば、Thymeleafで${user.name}と書くと、Java側ではgetName()を使って値を取り出します。

Thymeleaf	Javaのgetter
${user.userId}	getUserId()
${user.name}	getName()
${user.email}	getEmail()

ControllerでModelに値を入れる

次に、Controllerを作ります。

package com.example.demo.controller;

import com.example.demo.model.UserDto;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    @GetMapping("/users/detail")
    public String detail(Model model) {

        UserDto user = new UserDto(
                1,
                "山田太郎",
                "yamada@example.com"
        );

        model.addAttribute("user", user);

        return "users/detail";
    }
}

このControllerは、/users/detailへアクセスされたときに動きます。

Modelにuserという名前でUserDtoを入れています。

model.addAttribute("user", user);

このuserという名前が、Thymeleaf側で使う${user}に対応します。

Controller	Thymeleaf
model.addAttribute("user", user)	${user}
user.getName()	${user.name}

ControllerからHTMLへ値を渡す基本は、Modelです。

JavaScript inlineも、まずModelに値が入っていることが前提です。

HTMLで普通に値を表示する

まず、JavaScriptの前に、Thymeleafで普通に値を表示してみましょう。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ユーザー詳細</title>
</head>
<body>

<h1>ユーザー詳細</h1>

<p>
    ユーザーID：
    <span th:text="${user.userId}"></span>
</p>

<p>
    名前：
    <span th:text="${user.name}"></span>
</p>

<p>
    メールアドレス：
    <span th:text="${user.email}"></span>
</p>

</body>
</html>

この時点では、JavaScriptは使っていません。

ControllerからModelへ渡したUserDtoを、ThymeleafがHTMLへ埋め込んでいます。

ここが動かない状態でJavaScript inlineへ進むと、混乱します。

まずはth:textで値が表示されることを確認してください。

th:inline="javascript"を使う

次に、JavaScriptでuserの値を使えるようにします。

<script th:inline="javascript">
    const userId = [[${user.userId}]];
    const userName = [[${user.name}]];
    const userEmail = [[${user.email}]];

    console.log(userId);
    console.log(userName);
    console.log(userEmail);
</script>

ポイントは、scriptタグにth:inline="javascript"を付けることです。

<script th:inline="javascript">

この指定により、scriptタグの中でThymeleafのインライン式が使えるようになります。

Thymeleaf公式ドキュメントでは、JavaScript inlineを有効にするにはth:inline="javascript"を明示的に指定すると説明されています。また、[[...]]で出力すると、文字列は引用符で囲まれ、JavaScript向けにエスケープされ、正しいJavaScriptリテラルとして出力されます。

Thymeleaf処理後のJavaScriptはどうなるのか

テンプレート側では、次のように書きます。

<script th:inline="javascript">
    const userId = [[${user.userId}]];
    const userName = [[${user.name}]];
    const userEmail = [[${user.email}]];
</script>

ブラウザへ届くときには、次のようなJavaScriptになります。

<script>
    const userId = 1;
    const userName = "山田太郎";
    const userEmail = "yamada@example.com";
</script>

つまり、Thymeleafがサーバー側でJavaScriptの中に値を埋め込んでから、ブラウザへHTMLを返しています。

ここが重要です。

JavaScriptがSpring Bootへ直接アクセスして値を取りに行っているわけではありません。

画面を作る段階で、Spring Bootが値を埋め込んでいるのです。

完成版のHTML

ボタンを押すと、Controllerから渡されたユーザー情報をJavaScriptで画面に表示する完成例です。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ユーザー詳細</title>
</head>
<body>

<h1>ユーザー詳細</h1>

<p>
    ユーザーID：
    <span th:text="${user.userId}"></span>
</p>

<p>
    名前：
    <span th:text="${user.name}"></span>
</p>

<p>
    メールアドレス：
    <span th:text="${user.email}"></span>
</p>

<button type="button" onclick="showUserInfo()">
    JavaScriptでユーザー情報を表示
</button>

<p id="messageArea"></p>

<script th:inline="javascript">
    const userId = [[${user.userId}]];
    const userName = [[${user.name}]];
    const userEmail = [[${user.email}]];

    function showUserInfo() {
        const message =
            "ユーザーID: " + userId
            + " / 名前: " + userName
            + " / メール: " + userEmail;

        document.getElementById("messageArea").textContent = message;
    }
</script>

</body>
</html>

このコードでは、Spring Bootから渡されたUserDtoを、HTML表示にもJavaScriptにも使っています。

HTML表示ではth:textを使います。

JavaScriptではth:inline="javascript"と[[...]]を使います。

使う場所	書き方	役割
HTML本文	th:text="${user.name}"	画面に文字として表示する
JavaScript	[[${user.name}]]	JavaScript変数へ値を渡す

コメント形式で書く自然なテンプレート

ThymeleafのJavaScript inlineでは、次のようなコメント形式もよく使われます。

<script th:inline="javascript">
    const userName = /*[[${user.name}]]*/ "サンプルユーザー";
</script>

Thymeleafで処理されると、次のようになります。

<script>
    const userName = "山田太郎";
</script>

この書き方の良いところは、HTMLファイルを静的に開いてもJavaScriptとして成立しやすい点です。

Thymeleaf公式ドキュメントでも、JavaScript inlineの式をコメントで包むと、Thymeleaf処理前でも有効なJavaScriptとして動かせる「JavaScript natural templates」として使えると説明されています。

新人エンジニア向けには、まず次のように覚えるとよいです。

書き方	特徴
const userName = [[${user.name}]];	シンプルで分かりやすい
const userName = /[[${user.name}]]/ "サンプル";	静的HTMLとして開いたときも見やすい

研修では、最初はシンプルな[[...]]から入り、慣れてきたらコメント形式を学ぶと理解しやすいです。

DTOまるごとをJavaScriptオブジェクトにする

Thymeleaf inlineでは、文字列や数値だけでなく、JavaのオブジェクトもJavaScriptのオブジェクトとして出力できます。

Thymeleaf公式ドキュメントでは、JavaScript inlineの評価は文字列だけに限定されず、数値、真偽値、配列、コレクション、Map、getter/setterを持つBeanなどをJavaScript構文へ正しく書き出せると説明されています。

たとえば、次のように書けます。

<script th:inline="javascript">
    const user = /*[[${user}]]*/ null;

    console.log(user.userId);
    console.log(user.name);
    console.log(user.email);
</script>

ブラウザへ届くJavaScriptのイメージです。

<script>
    const user = {
        "userId": 1,
        "name": "山田太郎",
        "email": "yamada@example.com"
    };

    console.log(user.userId);
    console.log(user.name);
    console.log(user.email);
</script>

この書き方を使うと、JavaScript側でuser.nameやuser.emailのように扱えます。

ただし、DTOをまるごとJavaScriptに渡すときは注意してください。

DTOに外へ出してはいけない情報が含まれていると、ブラウザ側に見えてしまいます。

JavaScriptへ渡してよい情報、渡してはいけない情報

inlineでJavaScriptへ渡した値は、ブラウザのDevToolsで確認できます。

つまり、ユーザーに見えていると考えてください。

渡してよい例	理由
画面表示に使う名前	もともと画面に表示する情報だから
商品名	公開表示する情報だから
検索条件	ユーザーが入力した条件だから
画面制御用の表示フラグ	見えても問題ない範囲なら使える

渡してはいけない例	理由
パスワード	絶対に外へ出してはいけない
passwordHash	ハッシュでも外へ出さない
APIキー	不正利用される可能性がある
管理者だけが知る内部メモ	情報漏えいになる
本当の権限制御情報	ブラウザ側で改ざんされる可能性がある
割引率や価格計算の秘密ロジック	業務上の情報漏えいになる可能性がある

ここは強く意識してください。

JavaScriptへ渡した情報は、ユーザーが見られる情報です。

画面に表示していなくても、HTMLソースやDevToolsを見れば確認できます。

「JavaScriptの変数に入れただけだから安全」という考え方は危険です。

リストをJavaScriptへ渡す

次に、Controllerからユーザー一覧を渡し、JavaScriptで配列として扱う例を見てみましょう。

Controllerです。

package com.example.demo.controller;

import com.example.demo.model.UserDto;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserListController {

    @GetMapping("/users")
    public String list(Model model) {

        List<UserDto> userList = List.of(
                new UserDto(1, "山田太郎", "yamada@example.com"),
                new UserDto(2, "鈴木花子", "suzuki@example.com"),
                new UserDto(3, "佐藤一郎", "sato@example.com")
        );

        model.addAttribute("userList", userList);

        return "users/list";
    }
}

Thymeleafです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ユーザー一覧</title>
</head>
<body>

<h1>ユーザー一覧</h1>

<button type="button" onclick="showUserCount()">
    ユーザー件数を表示
</button>

<p id="countArea"></p>

<ul id="userListArea"></ul>

<script th:inline="javascript">
    const userList = /*[[${userList}]]*/ [];

    function showUserCount() {
        document.getElementById("countArea").textContent =
            "ユーザー件数: " + userList.length + "件";

        const userListArea = document.getElementById("userListArea");
        userListArea.innerHTML = "";

        userList.forEach(function (user) {
            const li = document.createElement("li");
            li.textContent = user.userId + ": " + user.name + " / " + user.email;
            userListArea.appendChild(li);
        });
    }
</script>

</body>
</html>

この例では、JavaのList<UserDto>がJavaScriptの配列のように扱えます。

userList.length

userList.forEach(function (user) {
    ...
});

JavaのListとJavaScriptの配列がつながると、画面上での動的表示がしやすくなります。

Java側	JavaScript側
List<UserDto>	配列
UserDto	オブジェクト
getName()	user.name

inlineで渡した値を外部JavaScriptで使いたい場合

実務では、JavaScriptをHTML内に長く書くより、外部ファイルに分けたいことがあります。

たとえば、次のような構成です。

src/main/resources/templates/users/detail.html
src/main/resources/static/js/user-detail.js

ただし、外部JSファイルは通常Thymeleafで処理されません。

そのため、外部JSファイルに直接[[${user.name}]]を書いてはいけません。

よくない例です。

const userName = [[${user.name}]];

このコードをstatic/js/user-detail.jsに書いても、Thymeleafの式として処理されません。

ではどうするのかというと、HTML内のinline scriptでグローバル変数へ渡し、外部JSがその変数を読む方法があります。

detail.htmlです。

<script th:inline="javascript">
    window.userDetail = /*[[${user}]]*/ null;
</script>

<script th:src="@{/js/user-detail.js}"></script>

user-detail.jsです。

function showUserInfo() {
    const user = window.userDetail;

    if (!user) {
        console.log("ユーザー情報がありません。");
        return;
    }

    document.getElementById("messageArea").textContent =
        user.userId + ": " + user.name + " / " + user.email;
}

このとき、HTML側のinline scriptを先に読み込み、その後で外部JSを読み込む順番が大切です。

window.userDetailを作る
        ↓
外部JSを読み込む
        ↓
外部JSがwindow.userDetailを使う

順番が逆になると、外部JSがwindow.userDetailを読もうとした時点で、まだ値が存在しない可能性があります。

data属性を使う方法

もう1つの方法として、HTMLのdata属性に値を埋め込み、JavaScriptで読む方法もあります。

<div id="userData"
     th:data-user-id="${user.userId}"
     th:data-user-name="${user.name}"
     th:data-user-email="${user.email}">
</div>

JavaScript側です。

const userData = document.getElementById("userData");

const userId = userData.dataset.userId;
const userName = userData.dataset.userName;
const userEmail = userData.dataset.userEmail;

console.log(userId);
console.log(userName);
console.log(userEmail);

data属性は、HTML要素に追加情報を持たせるための属性です。

少量の値をJavaScriptへ渡す場合に向いています。

方法	向いている場面
th:inline="javascript"	オブジェクトやリストをJavaScript変数にしたい
data属性	少量の値をHTML要素に持たせたい
fetch()	画面表示後に最新データをAPIから取得したい

inlineとfetch()の使い分け

ここで、inlineとfetch()の使い分けを整理します。

比較	inline	fetch()
通信タイミング	画面表示時	JavaScript実行時
Spring Boot側	@Controller + Model	@RestController
戻り値	HTMLテンプレート	JSONなど
向いている用途	初期表示データ	あとから取得・登録・更新するデータ
例	ログインユーザー名、初期検索条件	一覧の再取得、登録、削除、検索

inlineは、画面を開いた時点で分かっている値をJavaScriptへ渡す方法です。

fetch()は、画面を開いたあとに、JavaScriptからSpring Boot APIへ通信する方法です。

たとえるなら、inlineは「出発前に地図を印刷して持っていく」方法です。

fetch()は「移動中にスマホで最新情報を取りに行く」方法です。

どちらも便利ですが、使う場面が違います。

inlineを使うべき場面

場面	理由
初期表示のユーザー情報	画面表示時にすでに分かっているから
検索条件の初期値	JavaScriptで入力欄や表示を調整しやすいから
画面表示用のDTO	HTML表示とJavaScript操作の両方で使えるから
一覧データの初期描画	画面読み込み直後に使えるから
画面制御用のフラグ	ボタン表示やメッセージ切り替えに使えるから

fetch()を使うべき場面

場面	理由
ボタン押下後に検索する	画面表示後に条件が決まるから
登録処理を非同期で行う	画面遷移せずに結果を表示したいから
最新の一覧を再取得する	初期表示時点の情報では古くなる可能性があるから
削除処理を行う	ユーザー操作後にサーバーへ依頼するから
外部APIと連携する	必要なタイミングで通信するから

新人エンジニアは、inlineだけで何でもやろうとしないでください。

初期値はinline。

あとから変わるデータはfetch()。

この分け方が大切です。

よくあるミス

scriptタグにth:inlineを付け忘れる

悪い例です。

<script>
    const userName = [[${user.name}]];
</script>

良い例です。

<script th:inline="javascript">
    const userName = [[${user.name}]];
</script>

th:inline="javascript"を付け忘れると、JavaScript内のThymeleaf式が期待どおり処理されません。

外部JSファイルにThymeleaf式を書く

悪い例です。

src/main/resources/static/js/user.js

const userName = [[${user.name}]];

外部JSファイルは通常Thymeleafで処理されないため、この書き方は避けてください。

HTML内でwindow.userDetailに渡し、外部JSから読む形にしましょう。

文字列をクォーテーションで囲んでしまう

次のように書きたくなるかもしれません。

const userName = "[[${user.name}]]";

この書き方が常に間違いとは限りませんが、th:inline="javascript"では[[...]]がJavaScriptリテラルとして適切に出力してくれます。

まずは次の形を基本にしてください。

const userName = [[${user.name}]];

Thymeleafは文字列をJavaScript向けに引用符付きで出力します。

秘密情報を渡してしまう

悪い例です。

<script th:inline="javascript">
    const loginUser = /*[[${loginUser}]]*/ null;
</script>

loginUserの中にpasswordHashやroleの内部情報が入っていると危険です。

JavaScriptへ渡す専用DTOを作り、必要な項目だけに絞りましょう。

public class LoginUserViewDto {

    private long userId;
    private String name;

    public LoginUserViewDto(long userId, String name) {
        this.userId = userId;
        this.name = name;
    }

    public long getUserId() {
        return userId;
    }

    public String getName() {
        return name;
    }
}

DevToolsで確認する

inlineが正しく動いているかは、ブラウザのDevToolsで確認できます。

1. ブラウザで画面を開く
2. 右クリックして「検証」を開く
3. Elementsでscriptの中身を見る
4. Consoleで変数を確認する
5. エラーがあればConsoleを見る

たとえば、Consoleで次のように入力します。

userName

山田太郎のように表示されれば、JavaScript変数として使えています。

もし[[${user.name}]]のような文字がそのまま残っていたら、Thymeleafで処理されていない可能性があります。

その場合は、次を確認してください。

確認項目	内容
HTMLの場所	templates配下にあるか
Controllerの戻り値	テンプレート名を返しているか
Model名	model.addAttributeの名前と一致しているか
th:inline	scriptタグに付いているか
外部JSではないか	static/jsにThymeleaf式を書いていないか

新人エンジニア向けの完成サンプル

最後に、Controller、DTO、HTMLをまとめた完成例を示します。

UserDtoです。

package com.example.demo.model;

public class UserDto {

    private long userId;
    private String name;
    private String email;

    public UserDto(long userId, String name, String email) {
        this.userId = userId;
        this.name = name;
        this.email = email;
    }

    public long getUserId() {
        return userId;
    }

    public String getName() {
        return name;
    }

    public String getEmail() {
        return email;
    }
}

Controllerです。

package com.example.demo.controller;

import com.example.demo.model.UserDto;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    @GetMapping("/users/detail")
    public String detail(Model model) {

        UserDto user = new UserDto(
                1,
                "山田太郎",
                "yamada@example.com"
        );

        model.addAttribute("user", user);

        return "users/detail";
    }
}

detail.htmlです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring BootとJavaScript inline連携</title>
</head>
<body>

<h1>Spring BootとJavaScript inline連携</h1>

<h2>HTMLとして表示</h2>

<p>
    名前：
    <span th:text="${user.name}"></span>
</p>

<p>
    メール：
    <span th:text="${user.email}"></span>
</p>

<h2>JavaScriptで表示</h2>

<button type="button" onclick="showUser()">
    JavaScriptで表示する
</button>

<p id="jsMessageArea"></p>

<script th:inline="javascript">
    const user = /*[[${user}]]*/ null;

    function showUser() {
        if (!user) {
            document.getElementById("jsMessageArea").textContent =
                "ユーザー情報がありません。";
            return;
        }

        document.getElementById("jsMessageArea").textContent =
            "JavaScriptで受け取ったユーザー: "
            + user.userId + " / "
            + user.name + " / "
            + user.email;
    }
</script>

</body>
</html>

このサンプルを動かすと、同じUserDtoをHTML表示にもJavaScriptにも使えます。

ここまで理解できれば、Spring BootとJavaScriptのinline連携の基本はかなり身につきます。

まとめ

Spring BootとJavaScriptを連携するとき、Thymeleafのth:inline="javascript"を使うと、ControllerからModelに入れた値をJavaScriptの変数として使えます。

用語	意味
Model	ControllerからThymeleafへ値を渡す箱
Thymeleaf	HTMLをサーバー側で生成するテンプレートエンジン
th:inline="javascript"	JavaScript内でThymeleaf式を使うための指定
[[...]]	値をJavaScript向けに安全に出力する書き方
/[[...]]/	JavaScript natural templateとして使いやすい書き方
fetch()	画面表示後にAPI通信するためのJavaScript機能

一言でまとめるなら、inlineは「Spring Bootが画面を作るタイミングで、JavaScriptへ初期データを渡す仕組み」です。

新人エンジニアは、まず次の流れを覚えてください。

ControllerでModelに値を入れる
        ↓
Thymeleafテンプレートを返す
        ↓
scriptタグにth:inline="javascript"を付ける
        ↓
[[${...}]]でJavaScript変数に入れる
        ↓
ブラウザ上のJavaScriptで使う

そして、次の使い分けも大切です。

初期表示に必要な値
        ↓
inline

画面表示後に取得・登録・更新したい値
        ↓
fetch() + API

今後の学習では、th:text、Model、DTO、th:inline="javascript"、[[...]]、JavaScriptのオブジェクト、DevTools、fetch()、@RestControllerの順番で学ぶとよいです。まずは小さなUserDtoをControllerから渡し、HTML表示とJavaScript表示の両方で使ってみましょう！

Webアプリケーション制作のための小ネタ集　目次に戻る

最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる