
こんにちは、大学時代にプログラミングを始め、現在はエンジニアをしているuhablog(ウハブログ)です。
uhablogではSpring Bootで簡単なWebアプリを開発する方法を発信しています。
前回の記事で、SpringBootからPostgreSQLに接続してデータを取得しました。
Sprin Boot超入門
・Spring BootでWebアプリを開発する
・Spring BootでPostgreSQLに接続してデータを取得する••••••前回の記事
・GitHubに全コード上がっています!
今回の記事ではSpring BootにBootStrapを適応して、画面の見た目を整えていきます。
前回までの記事ではただ単にデータベースに登録してあるデータを表示しているだけで、見た目には気を遣っていませんでした。

Bootstrapを使うことで簡単に画面をきれいにすることができます。

Bootstrapとは

そもそもBootstrapってなに?
BootstrapとはWebページの画面を作成するのを手助けしてくれる、CSSのフレームワークです。
超訳するとhtmlのタグに決められたクラス名を付けるだけで、いい感じのデザインにするためのものです。
このBootstrapは超便利な上に誰でも簡単に無料で使うことができるため、多くの開発現場でも使われています。
Bootstrapの公式サイトはこちらです。
>>https://getbootstrap.jp/
超簡単にBootstrapの使い方を解説
超簡単に説明するためにボタンを使って説明してみます。
次のようなhtmlを準備します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Document</title>
</head>
<body>
<button type="button">ボタン</button>
</body>
</html>
このhtmlをブラウザで表示するとボタンが表示されます。
ただ何のデザインもしていないので、とてもではありませんが、このままシステムに組み込むことはできません。

Bootstrapを使うことで簡単にデザインを整えることができます。
ここでは簡単にBootstrapを使うためにheadタグに次の1行を追加します。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
そしてbuttonタグに2つのクラスを追加します。
<button type="button" class="btn btn-primary">ボタン</button>
最終的にはこのようなhtmlになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<button type="button" class="btn btn-primary">ボタン</button>
</body>
</html>
これをブラウザで表示すると、ボタンにデザインが追加されて、きれいになっています。


Bootstrapを使うことで、簡単にWebアプリの見た目を整えることができます。
pom.xmlに依存関係を追加する

ここからはBootstrapをSpring Bootで使う方法を解説していきます。
SpringbootプロジェクトでBootstrapを使うためにはpom.xmlを編集して依存関係を追加する必要があります。
pom.xmlの<dependencies>タグと</dependencies>タグの間にさまざまな依存関係が追加されているはずです。
この間にさらに次のような記述を追加することで、SpringBootプロジェクトでBootstrapを使うことが可能になります。
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.2.2</version>
</dependency>
共通ヘッダーのhtmlを作成する
ではBootstrapを使って画面をきれいにしていきます。
まずは全ての画面で共通利用するヘッダーを作成します。
Spring Bootプロジェクトの「src/main/resources/templates」フォルダの中に、share.htmlを作成し、内容を次のように編集してください。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<nav class="navbar navbar-expand-lg navbar-dark bg-info mb-4" th:fragment="header">
<div class="container-fluid">
<a class="navbar-brand" href="/book-lst">読書管理アプリ</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="/index">Home</a>
<a class="nav-link" href="/book-list">書籍一覧</a>
</div>
</div>
</div>
</nav>
</html>

ポイントを順番に解説していきます。
navbarの使用
Bootstrapの次のページで、使いたいヘッダーのデザインを選んで、コードをコピーすることで、自分のサイトに簡単にヘッダーを作ることができます。
>>https://getbootstrap.jp/docs/5.0/components/navbar/
コピーした後はaタグのhref属性を編集して、自由なリンクに遷移させることができます。
ヘッダー部分は共通化して、全画面で使用
ヘッダー部分は全画面で共通のものを使用したいです。
共通化して他のhtmlから呼び出すことができるようにしましょう。
具体的な手順としては共通化したい部分に「th:fragment="自由な名前"」とすると、呼び出す側で"自由な名前"で設定した値を指定して呼び出すことができます。
今回はheader全体を共通化するために、navタグの最後に「th:fragment="header"」を設定しています。
<nav class="navbar navbar-expand-lg navbar-dark bg-info mb-4" th:fragment="header">

header部分を別で作成して、全画面で共通で使用します。
一覧画面のhtmlを編集する
次に前回の記事で作成したbookList.htmlを次のように編集します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本の一覧表示</title>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/5.2.2/css/bootstrap.min.css}"/>
</head>
<body>
<div th:replace="share::header"></div>
<div class="container">
<div class="row">
<div th:each="book : ${bookList}" th:object="${book}" class="card col-4 me-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title" th:text="*{title}"></h5>
<p class="card-text" th:text="*{price} + 円"></p>
</div>
</div>
</div>
</div>
</body>
</html>

ポイントを解説していきます。
Bootstrapの使用
次のような記述をheadタグ内に入れることで、Bootstrapを使うことができます。
<link rel="stylesheet" th:href="@{/webjars/bootstrap/5.2.2/css/bootstrap.min.css}"/>
共通ヘッダーの利用
共通化したhtmlを使うためには「th:replace="ファイル名::[th:fragment]で指定した名前"」とすることで、他のファイルのhtmlを使うことができます。
今回はshare.htmlのheaderを使いたいため、次のような記述をします。
<div th:replace="share::header"></div>
Bootstrapのカードを使用
一覧の表示はBootstrapのカードを使用します。
カードのレイアウトはこちらから確認できます。
>>https://getbootstrap.jp/docs/5.0/components/card/
データベースから取得したbookListを一件ずつ回して、画面に表示します。
<div th:each="book : ${bookList}" th:object="${book}" class="card col-4 me-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title" th:text="*{title}"></h5>
<p class="card-text" th:text="*{price} + 円"></p>
</div>
</div>
動作確認
ここまでできたらサーバーを立ち上げてhttp://localhost:8080/book-listにアクセスしてみましょう。
するとBootstrapが適応されて、見た目がきれいになっています。


Bootstrapを使うことで、このように簡単に見た目をきれいに整えることができます!
今回の記事は以上になります。
次は新規登録画面を作成して、画面からデータベースにデータを登録する機能を開発していきます。
独学が辛いあなたへ
プログラミング学習にはエラーやわからないところというのはつきものです。
人に聞けば5分でわかることも、自分一人で悩んでいると1日数日時間を費やしてしまうこともあります。
そんな時にプログラミングスクールであれば、質問できる環境を手に入れることができます。
Freeksはいつでもどこでも豊富なカリキュラムを学ぶことができる月額制のプログラミングスクールです。
Freeksでは無料体験を行なっているので、質問できる環境を手に入れて、プログラミング学習を挫折することなく続けていきたいという方は無料体験に参加してみてください。
【関連記事】Freeks評判、口コミ
他のプログラミングスクール
月額10,780円のサブスク型プログラミングスクール!
>>Freeks公式サイト
20代におすすめ!無料で未経験からプログラマー就職まで実現できる!
>>ProgrammerCollege公式サイト
パーソナルメンターがつく充実したサポート
>>DMM WEBCAMP公式サイト
おすすめのプログラミングスクールについて詳しく知りたいという方はこちらの記事も参考にしてみてください。