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

2022/07/17Java Thymeleaf

当サイトはアフィリエイト広告を利用しています。

実行環境
Thymeleafで外部のJavaScriptファイルを読み込む方法
外部のJavaScriptファイルを読み込む
- JavaScriptファイルを /src/main/resources/static/ に配置する
- テンプレートファイルでJavaScriptファイルを読み込む
外部のJavaScriptファイルを読み込むプログラムを実装する
お疲れさまでした

効率的なJava学習サービスの探し方をご存知ですか？

Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか？
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください！

Javaを入門レベルから勉強できるおすすめ学習サービス7選

実行環境

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

開発および実行環境がない人は、以下の記事を参考に構築してください。

Spring BootとThymeleafを導入してHello worldを表示する方法

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

今回は、Thymeleafで外部のJavaScriptファイルを読み込む方法をご紹介します。

また、サンプルとして以下のようなプログラムを作成します。ぜひ参考にしてください。

テンプレートファイルに外部のJavaScriptファイルを読み込む
テンプレートファイルで設定した値をJavaScriptに渡す
[色を変える] ボタン押下時に「みかん」の文字色をオレンジ色に変更する

外部のJavaScriptファイルを読み込む

Thymeleafで外部のJavaScriptファイルを読み込む方法は以下のとおりです。

JavaScriptファイルを /src/main/resources/static/ に配置する
テンプレートファイルでJavaScriptファイルを読み込む

JavaScriptファイルを /src/main/resources/static/ に配置する

はじめに、JavaScriptファイルを「/src/main/resources/static/」に配置します。
上記のディレクトリ以外にファイルを配置してもコードは適応されないので注意してください。

テンプレートファイルでJavaScriptファイルを読み込む

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を埋め込む（インライン）方法については、以下の記事を参考にしてください。

ThymeleafでJavaScriptを埋め込む（インライン）方法

外部のJavaScriptファイルを読み込むプログラムを実装する

外部のJavaScriptファイルを読み込むプログラムを実装する手順は以下のとおりです。

実装手順は以下のとおりです。

JavaScriptファイルを作成する
Controllerクラスを作成する
テンプレートファイルを作成する
動作を確認する

また、フォルダ構成は以下のとおりです。

src/main/java/com.example.controller
 ├─ JsController.java
src/main/resources/static/js
 ├─ common.js
src/main/resources/templates
 └─ js.html

JavaScriptファイルを作成する

はじめに、JavaScriptファイルを作成します。
今回は「common.js」という名前で作成します。

引数 elemId で受け取った要素の文字色をオレンジ色に変更しています。

function changeTextColor(elemId) {
	document.getElementById(elemId).style.color = 'orange';
}

Controllerクラスを作成する

次に、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とSpringを一度に学びたくありませんか？

以下の書籍は、Thymeleafを書籍で学びたい人やThymeleafと併せてSpring Frameworkを学習したい人におすすめしている書籍です。
Springについての書籍ですが、Thymeleafの基礎や基本構文から他システムとの連携等30ページほど取り上げられており、ThymeleafとSpringを一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。