簡易書籍一覧表示アプリケーション作成（JPA版）
6.3 簡易書籍一覧表示アプリケーション作成（JPA版）
6.3.1 アプリケーション概要
書籍管理システムをもとに、JPAを利用した簡単なデータベースアクセス方法を学習していきます。
2 簡易書籍一覧表示アプリケーション（JPA版）プロジェクト構成(完成状態)
6.3.2 プロジェクトの準備
図 6.3 1：新規プロジェクト作成画面1
画面に「新規 Spring スターター・プロジェクト」というダイアログウィンドウが現れます。ここで、作成するプロジェクトの設定を入力していきます。以下を参考に入力してください。
図 6.3 2：新規プロジェクト作成画面２
「Dependencies」の設定を行う画面では、「Spring Web」「Thymeleaf」「Spring Data JPA」「MySQL Driver」という項目を選択しておきましょう。（「Spring Boot DevTools」「Lombok」のチェックはデフォルトで付くためそのままにしておきます。）
図 6.3 3：新規プロジェクト作成画面３
そのまま「完了」ボタンで終了してください。
図 6.3 4：新規プロジェクト作成画面４
図 6.3 5：新規プロジェクト作成画面５
2 パッケージの作成
「src/main/java」フォルダ内に下記のパッケージを作成する
① jp.co.f1.spring.bms.controller
② jp.co.f1.spring.bms.entity
③ jp.co.f1.spring.bms.repository
3 DB接続設定
「src/main/resources」フォルダ内の「application.properties」に以下に示すソースコードを記述する
【ファイル名：application.properties】
spring.datasource.driverClassName=org.mariadb.jdbc.Driver spring.datasource.url=jdbc:mariadb://localhost:3306/mybookdb spring.datasource.username=root spring.datasource.password=root123
また、プロジェクトフォルダ直下の「pom.xml」のdependencyタグのgroupIdがcom.mysqlになっている項目について、以下の内容に修正する。
【ファイル名：pom.xml】
6.3.3 エンティティクラスの作成
作成した「Book」クラスファイルに以下に示すソースコードを記述する。
■ソースコード
【ファイル名：Book.java】
package jp.co.f1.spring.bms.entity;
import jakarta.persistence.Entity;
import jakarta.persistence.Table;
import jakarta.persistence.Id;
import jakarta.persistence.Column;
@Entity
@Table(name = "bookinfo")
public class Book {
//ISBN
@Id
@Column(length = 20)
private String isbn;
public String getIsbn() {
return isbn;
}
public void setIsbn(String isbn) {
this.isbn = isbn;
}
//タイトル
@Column(length = 100, nullable = true)
private String title;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
//価格
@Column(length = 11, nullable = true)
private String price;
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
}
図 6.3 6：Book.javaソースコード記述結果
6.3.4 リポジトリクラスの作成
③ 「BookRepository.java」クラスファイル（インターフェース）の作成
図 6.3 7：クラスファイルの作成画面1
図 6.3 8：クラスファイルの作成画面2
図 6.3 9：クラスファイルの作成画面3
作成した「BookRepository」クラスファイルに以下に示すソースコードを記述（追記）する。
■ソースコード
【ファイル名：BookRepository.java】
package jp.co.f1.spring.bms.repository;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import jp.co.f1.spring.bms.entity.Book;
@Repository
public interface BookRepository extends JpaRepository<Book, String> {
}
図 6.3 10：BookRepository.javaソースコード記述結果
6.3.5 コントローラークラスの作成
作成した「BmsController」クラスファイルに以下に示すソースコードを記述する。
■ソースコード
【ファイル名：BmsController.java】
package jp.co.f1.spring.bms.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.beans.factory.annotation.Autowired;
import jp.co.f1.spring.bms.repository.BookRepository;
import jp.co.f1.spring.bms.entity.Book;
@Controller
public class BmsController {
// Repositoryインターフェースを自動インスタンス化
@Autowired
private BookRepository bookinfo;
/*
* 「/list」へアクセスがあった場合
*/
@GetMapping("/list")
public ModelAndView list(ModelAndView mav) {
// bookinfoテーブルから全件取得
Iterable<Book> book_list = bookinfo.findAll();
// Viewに渡す変数をModelに格納
mav.addObject("book_list", book_list);
// 画面に出力するViewを指定
mav.setViewName("list");
// ModelとView情報を返す
return mav;
}
}
図 6.3 11：プロジェクト準備完了
6.3.6 CSSファイルの配置
2 1で作成した「css」フォルダ内に下記からダウンロードした「style.css」を配置
6.3.7 テンプレートファイルの作成
2 1で作成した「list.html」ファイルに以下に示すソースコードを記述する。
■ソースコード
【ファイル名：list.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>書籍一覧</title>
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<!-- ブラウザ全体 -->
<div id="wrap">
<!--ヘッダー部分 -->
<header>
<div class="container">
<h1>書籍管理システムSpring版 Ver.0.5</h1>
</div>
</header>
<!-- メニュー部分 -->
<div id="menu">
<div class="container">
<!-- ナビゲーション -->
<div id="nav">
<ul>
<li><a href="#">[メニュー]</a></li>
<li><a href="/insert">[書籍登録]</a></li>
</ul>
</div>
<!-- ページタイトル -->
<div id="page_title">
<h2>書籍一覧</h2>
</div>
</div>
</div>
<!-- 書籍一覧のコンテンツ部分 -->
<div id="main" class="container">
<!-- 検索フォーム -->
<form class="inline-block" action="/search" >
ISBN <input type="text" name="isbn">
TITLE <input type="text" name="title">
価格 <input type="text" name="price">
<input type="submit" value="検索">
</form>
<form class="inline-block" action="/list" >
<input type="submit" value="全件表示">
</form>
<!-- 書籍情報リスト -->
<table class="list-table">
<thead>
<tr>
<th>ISBN</th>
<th>TITLE</th>
<th>価格</th>
<th>変更 / 削除</th>
</tr>
</thead>
<tbody th:if="${book_list.size() >= 1}">
<tr th:each="book : ${book_list}">
<td><a href="#" th:text="${book.isbn}"></a></td>
<td th:text="${book.title}"></td>
<td th:text="${book.price}"></td>
<td>
<a href="#">変更</a>
<a href="#">削除</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- フッター部分 -->
<footer>
<div class="container">
<h4>Copyright© 2025 All Right Reserved.</h4>
</div>
</footer>
</div>
</body>
</html>
6.3.8 アプリケーションの実行
2 アプリケーションの実行
3 アプリケーションにアクセス（書籍一覧画面）
以下のアドレスから簡易書籍一覧表示アプリケーションにアクセスします。
URL：http://localhost:8080/list
図 6.3 12：アプリケーションアクセス画面（書籍一覧画面）