Zenn
🚀

jQueryやBootstrapをJavaのWebアプリケーションで簡単に使えるようにする

2023/10/09に公開
Bootstrap
Java
jQuery
tech

水星の魔女、見てますか？遅くなってしまいましたが、さっきやっと全話見終わりまして、見ててミオリネちゃんやスレッダちゃん、その他の登場人物に感情移入しすぎて、途中で何度も泣いてしまいました。めちゃくちゃ面白かったです。

趣旨

JavaのWebアプリケーションで簡単にjQueryやBootstrapを使えるようにすることができるってご存知でしたか？
お恥ずかしながら先ほど知ったので書いて置きます。

やりかた

やりかたは簡単で、私の場合は Maven を使うのですが、 Gradle でも同じだと思います。

依存ライブラリの設定

<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>jquery</artifactId>
	<version>3.4.1</version>
</dependency>
<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>bootstrap</artifactId>
	<version>4.3.1</version>
</dependency>
<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>webjars-locator-core</artifactId>
</dependency>

といった具合に設定しておくことで、各ページから呼び出すことができるみたいですね。
なんて便利なのでしょうか！
各ページからの呼び方はこんな感じです。

画面からの呼び出し

10～12行目のところで呼び出してます。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>画面タイトル</title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width"/>
    <base href="/"/>
    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>画面タイトル</h1>
</body>
</html>

あとがき

SpringBootでOAuthしようと思ってここを読んでいたら、全然本題と違うところで目から鱗が飛び散りまして、発作的にZennに書いて置こうと思って書いてみました。
いやいや、そんなの常識ですから、と言われたら恥ずかしいですが、ご存知ない方いらっしゃいましたら、是非共有しておこうと思いまして！

11月に新車が納車されるのが楽しみな、とめはちでした。

Discussion