Spring BootプロジェクトでBootstrapを使ってUIをきれいにする【Spring Boot ハンズオン第3回】

ウハブログ

こんにちは、大学時代にプログラミングを始め、現在はエンジニアをしている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をブラウザで表示するとボタンが表示されます。
ただ何のデザインもしていないので、とてもではありませんが、このままシステムに組み込むことはできません。

簡単な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適応後のボタン

ウハブログ

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を使うことで、このように簡単に見た目をきれいに整えることができます！

今回の記事は以上になります。

次は新規登録画面を作成して、画面からデータベースにデータを登録する機能を開発していきます。

: Spring Bootで新規登録画面を開発する【Spring Boot ハンズオン第4回】
ウハブログこんにちは、大学時代にプログラミングを始め、現在はエンジニアをしているuhablog(ウハブログ)です。 uhablogではSpring Bootで簡単なWebアプリを開発する方法を発信し ...