こんにちは。 エキサイト株式会社の三浦です。
Spring BootでWebページ等を作るとき、ちょっとしたJavaScriptのライブラリを入れたいときがあると思います。
ですが、「ちょっとしたライブラリのためだけに npm install 等をできるようにするのは面倒…」と思う方も多いのではないでしょうか。
今回はそういった方に朗報な、WebJarsを使ったJavaScriptライブラリのインストール方法を紹介します。
WebJarsとは
WebJarsは、 build.gradle 等のJavaのパッケージ管理の仕組みからJavaScriptやCSSライブラリをインストールできるよう管理してくれているサービスです。
WebJars are client-side web libraries (e.g. jQuery & Bootstrap) packaged into JAR (Java Archive) files.
仕組みとしては、build.gradle 等のパッケージ管理システムがWebJars経由でライブラリをダウンロードしてくれ、それをHTML上で使用できる、というものになっています。
実際に使ってみましょう。
WebJarsを使用してAlpine.jsを使ってみる
今回は、Alpine.jsというJavaScriptライブラリを使ってみます。
WebJarsの検索画面から、使いたいライブラリを検索
まずはWebJarsの検索画面から、使いたいライブラリを検索します。
build.gradleに追加
使っているパッケージ管理システムに、検索結果を貼り付けます。
なお、WebJarsの画面上では
compile 'org.webjars.npm:alpinejs:3.12.0'
となっていますが、Gradleでは compile は現在非推奨となっているため、 implementation を使用します。
implementation 'org.webjars.npm:alpinejs:3.12.0'
HTML上で使用する
最後に、HTML上で使用します。
今回はThymeleafを使っているので、以下のような記述になります。
<head> <meta charset="UTF-8"> <title>Sample Page</title> <script th:src="@{/webjars/alpinejs/3.12.0/dist/cdn.min.js}" defer></script> </head>
なお、今回 /webjars/alpinejs/3.12.0/dist/cdn.min.js をパスとして使用していますが、これは公式サイトでのCDN経由でのダウンロード方法を確認したり、実際にダウンロードされた結果を見たりすることで導き出すことができます。
公式サイトで言及されているCDN経由のダウンロード方法
<html> <head> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> <body> <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1> </body> </html>
WebJars経由でダウンロードされたファイル一覧
これで、 build.gradle だけでAlpine.jsが使えるようになりました！
最後に
JavaScript側の規模が大きくなってくるのであれば、最終的には npm 等のJavaScript側のパッケージ管理システムを使ったほうがいい場合もあるでしょうが、あくまでHTMLにちょっとライブラリを追加したい、くらいの規模感であれば、今回の様にWebJarsを使ってJava側のパッケージ管理システムのみで完結できるのは非常に有用と言えます。
多くのライブラリがWebJarsに登録されているので、ユースケースにマッチしているのであればぜひ使ってみてください！
