ThymeleafでJavaScript埋め込みの基本と書き方
新人
「先輩、ThymeleafでJavaScriptを埋め込む方法ってどうやるんですか？ちょっと難しそうで…」
先輩
「確かに最初は戸惑うかもしれないけど、基本をおさえれば大丈夫だよ。pleiades環境でのプロジェクトでも、Thymeleafの書き方は同じだから安心して。」
新人
「コントローラは@Controllerで作るんですよね？JavaScriptって外部ファイルじゃなくて、Thymeleafテンプレート内に書いてもいいんですか？」
先輩
「もちろんだよ！テンプレート内にJavaScriptを直接書く場合でも、Thymeleafの値をうまく埋め込む方法を覚えれば簡単にできるよ。じゃあ、基礎から一緒に見ていこう！」
1. ThymeleafとJavaScriptの関係とは？
Thymeleafは、JavaのWebアプリケーションで使われるテンプレートエンジンです。サーバーサイドでHTMLを生成するときに便利な機能が豊富で、Spring BootやSpring MVCで特によく使われます。pleiades環境にプロジェクトを作成するときも、Thymeleafの依存関係を簡単に追加できるのが特長です。
JavaScriptは、ブラウザ上で動的な動きをつけるためのスクリプト言語です。Thymeleafのテンプレート内にJavaScriptを埋め込むことで、サーバーサイドで生成したデータをブラウザ側で活用できます。これにより、ユーザーの操作に応じた動的な画面を作ることができます。
2. JavaScriptを埋め込む基本的な方法
JavaScriptをThymeleafのテンプレート内に埋め込む場合、基本的には<script>タグを使って記述します。Thymeleafの変数や式は、JavaScriptのコード内に直接埋め込むことができますが、正しい書き方を覚えておかないと、正しく値が表示されなかったりエラーが出ることがあります。
Thymeleafの変数は\${}の中に書いて、サーバー側から渡された値をJavaScript内に埋め込めます。基本的には、th:inline="javascript"を使うことで、Thymeleafの変数をJavaScript内で展開できるようになります。
例えば、JavaScriptの中でThymeleafの変数を使う場合は下記のようになります。
<script th:inline="javascript">
var username = [[${user.name}]];
console.log(username);
</script>
この例では、Thymeleafのuser.nameをJavaScriptの変数usernameに代入しています。[[ ]]の中に\${}と同じ式を書けるので、テンプレート内の値をJavaScriptに簡単に渡すことができます。
3. 簡単なJavaScript埋め込み例
実際にpleiades環境でGradleプロジェクトを作り、ThymeleafのテンプレートにJavaScriptを埋め込む基本的な例を確認してみましょう。
まず、コントローラを@Controllerで作成し、モデルに値を渡す例です。
@Controller
public class SampleController {
@GetMapping("/sample")
public String sample(Model model) {
model.addAttribute("message", "ThymeleafとJavaScriptの連携成功！");
return "sample";
}
}
次に、Thymeleafのテンプレートsample.htmlにJavaScriptを埋め込む方法です。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ThymeleafとJavaScriptの基本</title>
</head>
<body>
<h1>ThymeleafとJavaScriptの基本</h1>
<p th:text="${message}"></p>
<script th:inline="javascript">
var serverMessage = [[${message}]];
console.log(serverMessage);
alert("サーバーからのメッセージ：" + serverMessage);
</script>
</body>
</html>
この例では、サーバー側でmessageという値を準備し、JavaScript内でserverMessageという変数に代入しています。画面を開くと、ブラウザのコンソールにメッセージが表示され、アラートも表示されます。これで、Thymeleafの値をJavaScriptに簡単に渡せることが分かりますね。
このように、基本をおさえておけば、もっと複雑な動きも作れるようになります。今後は、さらに実践的な例や注意点も学んでいきましょう！
4. JavaScriptで変数にThymeleafの値を埋め込む方法
JavaScript内でサーバーサイドの値を使いたいときは、Thymeleafの「th:inline="javascript"」機能が便利です。これを使うと、サーバーから渡された値をJavaScriptの変数に正しく埋め込めます。たとえば、ユーザー名や設定値、表示制御用のフラグなどをJavaScript側で扱いたい場合に役立ちます。
具体的には、scriptタグに「th:inline="javascript"」を指定し、[[ ]]構文を使って変数を埋め込みます。これにより、数値や文字列を安全にJavaScriptに注入でき、HTMLエスケープによる問題も回避できます。
<script th:inline="javascript">
var username = "[[${user.name}]]";
var userId = [[${user.id}]];
console.log("ユーザー名：" + username + "、ID：" + userId);
</script>
このようにすれば、JavaScriptからユーザー情報を参照できます。サーバーサイド変数を正しく埋め込むことで、動的な処理が可能になります。
5. 実際に動かすサンプルと注意点
ここでは、pleiades＋Gradle環境で実際に動くサンプルを紹介します。コントローラ側でメッセージや数値を用意し、JavaScriptで処理する流れを確認します。
@Controller
public class DemoController {
@GetMapping("/demo")
public String demo(Model model) {
model.addAttribute("count", 5);
model.addAttribute("message", "デモ用メッセージ");
return "demo";
}
}
テンプレートは以下のようになります。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Demo</title></head>
<body>
<h2>JavaScript埋め込みサンプル</h2>
<script th:inline="javascript">
var count = [[${count}]];
var message = "[[${message}]]";
for(var i=0; i<count; i++){
console.log("処理回数：" + i + " メッセージ：" + message);
}
</script>
</body>
</html>
注意点としては、文字列は必ず引用符で囲むこと、数値はそのまま埋め込むことです。引用符の付け忘れはJavaScriptエラーになる原因になりますので注意しましょう。
6. ありがちなエラー例と解決方法
JavaScriptにThymeleafの値を埋め込む際、初心者がよく遭遇するエラーとその対処方法を紹介します。
文字列の引用符不足
引用符を付けずに文字列を埋め込むと、予期せぬJavaScriptエラーになります。以下は誤り例です。
<script th:inline="javascript">
var msg = [[${message}]]; // 引用符なし → エラー
</script>
正しくは、以下のように引用符で囲む必要があります。
<script th:inline="javascript">
var msg = "[[${message}]]";
</script>
数値と文字列の混同
数値を文字列として扱いたい場合も誤った扱いをして変換エラーになることがあります。必要に応じてNumber()関数やparseInt()で型変換しましょう。
<script th:inline="javascript">
var count = "[[${count}]]"; // 文字列として取得
count = parseInt(count);
console.log(typeof count, count);
</script>
テンプレート構文とJavaScript構文の衝突
Thymeleafの構文[[ ]]とJavaScriptの構文が混ざっていると、思わぬエラーになります。必ずscriptタグに「th:inline="javascript"」を付け、構文が正しく解釈されるように確認しましょう。
また、テンプレート全体の整形やインデントを整えることで、ミスを防ぎやすくなります。
これらの注意点を実践すれば、ThymeleafとJavaScriptの連携がスムーズにできるようになります。
7. JavaScript埋め込みのパフォーマンス面での注意
ThymeleafのテンプレートにJavaScriptを埋め込む際、パフォーマンスへの影響にも注意が必要です。特に、複雑な条件分岐や大きなデータをJavaScriptに直接渡すと、ブラウザ側での処理が重くなることがあります。例えば、一覧画面で大量のデータをすべてJavaScriptで扱おうとすると、表示が遅くなる原因になります。
こうしたパフォーマンスの問題を避けるには、サーバーサイドでできるだけ処理を完結させ、必要な情報だけをJavaScriptに渡す工夫が必要です。不要なデータを渡さないようにコントローラ側で条件を整理し、画面表示に必要な最小限のデータをモデルに詰め込むことが大切です。
さらに、JavaScriptを外部ファイル化しておくと、ブラウザのキャッシュが有効に働き、パフォーマンスが向上します。テンプレート内に埋め込む場合でも、処理が複雑になりすぎないように心がけましょう。
8. JavaScript埋め込みとセキュリティのポイント
ThymeleafのテンプレートにJavaScriptを埋め込む際には、セキュリティ面でも注意が必要です。サーバーサイドの値をそのままJavaScriptに渡すと、場合によってはクロスサイトスクリプティング（XSS）攻撃のリスクが生じます。特に、ユーザー入力が直接テンプレートに埋め込まれるケースでは、意図しないスクリプトが実行される危険があります。
このようなリスクを避けるために、Thymeleafのth:inline="javascript"機能は自動的にエスケープを行ってくれます。[[ ]]構文内で渡す値は、JavaScriptに最適な形でサニタイズされるので、安全に使えます。しかし、テンプレート外で文字列をJavaScriptに代入する場合など、エスケープが行われないケースでは、特に注意しましょう。
コントローラ側でのバリデーションやサニタイズ処理を徹底することも大切です。サーバー側で想定外の文字列が渡されないようにし、テンプレート側では信頼できる値だけを使うようにしましょう。
9. 実践的なアドバイスとまとめ
これまで、ThymeleafのテンプレートにJavaScriptを埋め込む基本から注意点まで見てきました。最後に、実践的なアドバイスをまとめておきます。
小さな改善を積み重ねよう
初心者のうちは、すぐに完璧を目指すよりも、少しずつ改善する気持ちで取り組むのがおすすめです。例えば、まずは引用符の扱いに慣れ、次に条件分岐を減らす練習をしてみましょう。
ログやブラウザ開発ツールを活用しよう
実際に表示がどうなるか、ブラウザの開発ツールやJavaScriptのコンソールログを活用して確認するクセをつけましょう。Thymeleafの値が想定通りに渡されているか、変数がどう動いているかを目視で確認できます。
テストケースを準備しよう
複雑なテンプレートになる前に、小さなサンプルページで動作確認をしておくのも重要です。特に、ユーザーが入力した値をJavaScriptに渡す場合などは、サンプルで安全性をテストしておくと良いでしょう。
pleiades＋Gradle環境を活かそう
pleiades環境で開発しているなら、Gradleのビルド機能やデバッグ機能を活用して、不要な処理を早めに見つけるとスムーズです。ビルドログやブラウザのネットワークタブを見ながら、JavaScriptの動きをしっかり確認しましょう。
今回学んだように、Thymeleafのth:inline="javascript"は、サーバーサイドのデータを安全にJavaScriptに埋め込むための強力な仕組みです。コントローラでの処理とテンプレート側のシンプルな記述を心がけて、パフォーマンスとセキュリティを両立させる設計を目指してください。
これで、ThymeleafとJavaScriptの連携について、基本から応用までのポイントをつかめたはずです。あとは実際に手を動かして、自分のプロジェクトで試してみることが大切です。ぜひ積極的に活用してみてください！
この記事を読んだ人からの質問
