Java

Spring BootでBootstrapとjQueryを利用する

uhablog

こんにちは、大学時代にプログラミングの勉強を始め現在はエンジニアをしているuhablogです。
当ブログでは現役エンジニアがプログラミング初学者の方向けにプログラミングの学習法を発信しています。

今回の記事はSpring BootでBootstrapとjQueryを使う方法が知りたい人のために書かれています。

環境

  • JDK 11
  • Spring Boot 2.6.2
  • Bootstrap 5.1.3
  • jQuery 3.3.1

build.gradle

まずはgradleで導入する場合はbuild.gradleに以下のような記述をします。

dependencies {
	implementation group: 'org.webjars', name: 'bootstrap', version: '5.1.3'
	implementation group: 'org.webjars', name: 'jquery', version: '3.3.1'
　　　　　　　省略 ...
}

Thymeleaf

thymeleafのheadタグ内に以下を追加します。

<head>
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet"/>
    <title>トップページ</title>
</head>

bodyタグの最後にjQueryを利用する記述を追加します。

<body>
　　　... 省略
　　　<!-- webjar -->
    <script th:href="@{/webjars/jquery/3.3.1/js/jquery.min.js}"></script>
    <script th:href="@{/webjars/bootstrap/5.1.3/js/bootstrap.min.js}"></script>
</body>

＼＼今ならセール開催中！／／

UdemyでSpring Bootを学ぶ！！

返金保証付き

プログラミング学習はUdemyがおすすめ

私はプログラミングの学習はUdemyで行うのが一番おすすめです。
Udemyでは動画講座でプログラミングなどのスキルを身につけることができます。
現役エンジニアがUdemyをオススメする理由は
・動画で好きなときに学べる
・一流の講師に学ぶことができる
・講師の方に質問ができる
・返金保証もある
・セールを頻繁に開催している
といったたくさんの理由があります。

現在Udemyではセールを開催しています！
通常時1万円から2万円前後の価格で講座が販売されていますが、セール時には1500円前後(ランチ代くらい)で一つの講座を購入することができます。
UdemyにはSpring BootでWebアプリの開発を学べる講座iconもあるので、Javaの基礎を動画で学んでみたい！という方はチェックしてみてください。

独学が不安な人へ

独学で学んでいく意志がある方にはUdemyなどで学習するのがおすすめですが、プログラミングを独学するにはそれなりにハードルがあります。

  • プログラミングで一度挫折した経験がある
  • 一人で学習する自信がないので、サポートが欲しい

という方にはプログラミングスクールを検討してみるのがおすすめです。

-Java