Spring Bootを学習中、Webjarsという便利なライブラリに触れたので、
使い方を忘れないようにアウトプットする🖋
前提条件
♦︎Spring-boot-suite：4-4.13.1
WebJarsとは
Javascriptやcssのライブラリを、Mavenで利用できるようにするライブラリのこと。
早速実装!
実装するもの
①jQuery 3.5.1
②Bootstrap 4.5.3
③WebJars-Locator
WebJars-Locatorとは？？
WebJars-Locatorを使用すると、WebJarsで使用するライブラリのバージョンを意識せずコードを書けるようになる優れもの。具体的にどういうことかは後述。
①pom.xmlのdependenciesタグ内に下記を追記し、Maven インストールを実行
<!-- jQuery -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.5.1</version>
</dependency>
<!-- bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.5.3</version>
</dependency>
<!-- webjars-locator -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.40</version>
</dependency>
インストールが完了後すると、Maven依存関係内にjQuery3.5.1のjarファイルが入る。
②htmlファイルにパスを追加して実装完了！！
<head>
<!-- CSS読み込み -->
<link rel="stylesheet"
th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<!-- JS読み込み -->
<script th:src="@{/webjars/jquery/jquery.min.js}" defer></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}" defer></script>
</head>
♦︎パスの指定にはthymeleafを使用
ここでWebJars-Locatorの出番✨
本来はMavan依存関係のフォルダ構成と同じ、3.5.1も記載しないといけないので、下記のようなパスになる。
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" defer>
しかしWebJars-Locatorを入れておけば、バージョン番号の分を省略する事ができ、WebJarsで使用するライブラリのバージョンを変えても、パスのコードを変更する手間が省ける。✨
※補足 deferについて
deferはHTMLの属性の一つ。
defer属性をつけると、HTMLの読み込みと Javascriptの読み込みを並行して実施してくれるので、画面表示の性能が改善される！
参考文献
♦︎WebJars 使い方メモ
https://qiita.com/opengl-8080/items/c8c5f787613c230a9827
♦︎ライブラリとは
https://wa3.i-3-i.info/word1473.html
♦︎Spring boot spring 解体新書