7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SpringBootのGradleでWebjarsを利用しBootstrapを使う方法

Last updated at Posted at 2021-10-20

#はじめに
今回は、SpringBootのGradleプロジェクトでWebjarsを利用してBootstrapを使用する方法を書いていきます。

MavenでのWebjarsを用いてBootstrapのバージョン管理をする記事が多くあったので、Gradleを使用している人の参考になればいいかなと思います。

#build.gradle

dependencies {
    implementation('org.webjars:jquery:3.5.1')
	implementation('org.webjars:bootstrap:4.5.3')
	implementation('org.webjars:webjars-locator:0.40')
}

dependenciesタグに上記3つをimplementationしてあげるだけです。

あとは、Bootstrapを使いたいHTMLファイルで必要な記述をするだけです。

##html

<head>
  <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
  <script th:src="@{/webjars/jquery/jquery.min.js}" defer></script>
  <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}" defer></script>
</head>

これだけでBootstrapを使用することが可能になります。
webjarsを用いればwebjarsにバージョン管理を一任することができるのでコーディングのみに集中できます。

余談ではありますが、scriptタグdefer属性を知らないという方は以下、参考にしてみてください。

スクリプト: async, defer

##依存関係フォルダ
ちゃんとバージョン管理されているか・ダウンロードされているかはプロジェクトと外部の依存関係というフォルダを見るとわかります。

izon.png

上記のようになっていたらwebjarsでの呼び出し・ダウンロード・バージョン管理がなされているとわかるかと思います。

#参考文献

後悔しないためのSpring Boot 入門書:Spring 解体新書(第2版)

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?