本記事の概要
Spring bootを使うときにUIを良くするためのBootstrapとjQuery。
Spring bootで開発中に使用したくなった場合にはどうしたらいいかを備忘録としてまとめました。
(まだ編集中で、お試しがてらの投稿になるのでご了承ください）
そもそもBootStrapとjQueryとは何ぞや
下記の記事に記載しています。
- Bootstrap
編集中 - jQuery
編集中
Spring bootで使用したい時にどうすれば良いか
◾️手順1：pom.xmlへの定義(Mavenを使っているとき限定)
【Question】
BootstrapとjQueryのメリットは分かった。実際にSpring bootでWebアプリ開発するときに使ってみたい。
...でどうしたら使えるようになるんですか？
【Answer】
ビルドツールがMavenの場合、pom.xmlファイルのdependenciesタグの中で以下の依存関係を追加する。
こうすることでMavenが必要なファイルを入手してきてくれるのだ。
<dependencies>
<!-- ①Bootstrapを使いたい！！ Maven君必要なファイル取ってきて！！ -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.3.1</version>
</dependency>
<!-- ②jQueryを使いたい!! Maven君必要なファイル取ってきて!! -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.7.0</version>
</dependency>
<!-- ③実際にBootstrapとjQueryを使用するときに、HTMLにバージョン番号を書かなくて済むようにしたい!! -->
<!-- Maven君!!そのためのファイル取ってきて!! -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</dependency>
</dependencies>
<補足1:なぜこの方法でやったのか>
上記のようにMavenに依存関係を追加する以外のやり方もあるが、なぜこの方法でやったかと言うと、
以下の2つの理由から。
- とりあえず簡単にできるから
- Mavenに必要なファイルを入手してもらったあとは、ネットが繋がってない状況でも使用できるから
<補足2:バージョンについて>
Mavenリポジトリで色んなバージョンが使用できる。今回は執筆時点での最新版を
<verison>タグ内に記入した。
*Bootstrap
https://mvnrepository.com/artifact/org.webjars/bootstrap
*jQuery
https://mvnrepository.com/artifact/org.webjars/jquery
なぜweb-jars-locator-coreにはversionを書かなかったのかというと、書くと
「バージョンが重複しているよ！」と警告が出てしまったから(詳細がまだ分かってない)
◾️手順2：htmlへの定義(Thymeleafを使用している前提)
【Question】
Mavenが必要な依存関係を解消してくれたのは分かった。
...でどうしたらそれぞれのHTMLで使えるようになるんですか？
【Answer】
htmlファイルの<head>タグ内に、以下のようにBootstrapを使用する宣言を記述すればよい。
...省略
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<!-- ここでBootstrap(css)を使用することを宣言している -->
<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<!-- ここでBootstrap(javascript)を使用することを宣言している -->
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}" defer></script>
<!-- ここでjQueryを使用することを宣言している -->
<script th:src="@{/webjars/jquery/jquery.min.js}" defer></script>
<title>ウェルカムページ</title>
</head>
...省略
<補足1:deferとは?>
HTMLとjavascriptの読み込みを並列に実施するように指示するオプションで、
これをつけるとjavascript読み込みの際に画面表示が高速化される。
◾️手順３：実際にBootstrapとjQueryを使用してみる
編集中