Thymeleafで外部のJavaScriptファイルを読み込む方法

Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか?
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください!
OS | macOS Catalina 10.15.1 |
Eclipse | Photon 2018-09 |
Java | 8 |
Spring Tool Suit | 3.9.6 |
Spring Boot | 2.1.13 |
Thymeleaf | 2.1.2 |
開発および実行環境がない人は、以下の記事を参考に構築してください。
今回は、Thymeleafで外部のJavaScriptファイルを読み込む方法をご紹介します。
また、サンプルとして以下のようなプログラムを作成します。ぜひ参考にしてください。
Thymeleafで外部のJavaScriptファイルを読み込む方法は以下のとおりです。
はじめに、JavaScriptファイルを「/src/main/resources/static/」に配置します。
上記のディレクトリ以外にファイルを配置してもコードは適応されないので注意してください。
Javascriptファイルが配置できたら、テンプレートファイルでJavaScriptファイルを読み込みます。
テンプレートファイルの <head>
タグ内の <script>
タグに th:src
で記述します。
パスには「/src/main/resources/static/」から見た場所を指定します。
<head>
<!-- src/main/resources/static/js/common.js を読み込む -->
<script th:src="@{/js/common.js}"></script>
</head>
JavaScriptを埋め込む(インライン)方法については、以下の記事を参考にしてください。
外部のJavaScriptファイルを読み込むプログラムを実装する手順は以下のとおりです。
実装手順は以下のとおりです。
また、フォルダ構成は以下のとおりです。
src/main/java/com.example.controller
├─ JsController.java
src/main/resources/static/js
├─ common.js
src/main/resources/templates
└─ js.html
はじめに、JavaScriptファイルを作成します。
今回は「common.js」という名前で作成します。
引数 elemId
で受け取った要素の文字色をオレンジ色に変更しています。
function changeTextColor(elemId) {
document.getElementById(elemId).style.color = 'orange';
}
次に、Controllerクラスを作成します。
今回は「JsController」という名前で作成します。
テンプレート変数の elemId
にみかんのidを設定し、URLは「/js」、テンプレートファイル名は「js」を指定します。
package com.example.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class JsController {
@RequestMapping("/js")
public String sample(Model model) {
model.addAttribute("elemId", "orange");
return "js";
}
}
Controllerクラスの作成が完了したら、テンプレートファイルを作成します。
今回は「js」という名前で作成します。
th:onclick="changeTextColor(/*[[${elemId}]]*/);"
でボタン押下時に「common.js」の changeTextColor(elemId)
を呼び出し、changeTextColor(elemId)
の処理内で「みかん」の文字色をオレンジ色に変更しています。
また、テンプレートファイルからJavaScriptへの値渡しは /*[[${elemId}]]*/
で行なっています。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleafで外部のJavaScriptファイルを読み込む方法</title>
<style>
body {
background-color: whitesmoke;
color: #333;
}
div {
margin: 45px 0 0 45px;
}
ul {
list-style: none;
padding: 0;
}
</style>
<script th:src="@{/js/common.js}"></script>
</head>
<body>
<div>
<ul>
<li id="apple">りんご</li>
<li id="lemon">レモン</li>
<li id="kiwi">キウイ</li>
<li id="orange">みかん</li>
</ul>
<button th:onclick="changeTextColor(/*[[${elemId}]]*/);">色を変える</button>
</div>
</body>
</html>
最後に、ブラウザで「http://localhost:8080/js」にアクセスして動作を確認します。
[色を変える] ボタン押下時に「みかん」の文字色がオレンジ色に変更されたら、動作の確認は完了です。
Thymeleafで外部のJavaScriptファイルを読み込む方法をご紹介しました。
少しでも参考になれば幸いです。
以下の書籍は、Thymeleafを書籍で学びたい人やThymeleafと併せてSpring Frameworkを学習したい人におすすめしている書籍です。
Springについての書籍ですが、Thymeleafの基礎や基本構文から他システムとの連携等30ページほど取り上げられており、ThymeleafとSpringを一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。
現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください!