【第1回】Spring bootで運動記録をDBに記録してみた（準備編）

あっきー（エンジニア）

【第1回】Spring bootで運動記録をDBに記録してみた（準備編）

あっきー（エンジニア）

2021.11.16

IT技術

Spring

【第1回】Springbootを使って、DBとの連携システムを考える

SpringbootとDBの連携をどういうふうに設定したらできるか、ということを

具体的なデータをもとにして、１から構成を考えて対応してみました。

今回具体的なデータとしては、「運動の実績記録」を日別で記録して一覧で見る、という形にしました。

日付	種目	実績	セット数
2021/09/10	腹筋	30回	3セット
2021/09/10	背筋	30回	3セット
2021/09/09	ランニング	1500m	ー

こういった一覧が見れるようにして、

都度データを追加や修正ができるようにしていきたいと思います。

実装する前に、まずは画面やDBの構成をざっくりと考える

作成する画面

まずは表示させる画面を考えます。

一覧を表示する画面はもちろん、データを入力する画面、修正する画面も必要になるかと思います。

必要な項目とかはあとで考えるとして、まずはこの３画面を作ることにします。

DBの構成

次に一覧に出したい項目をもとにDBの構成を考えます。

どの種目をどれだけやったか、といった記録が必要になるので、

まずは以下のイメージで作成します。

・種目テーブル

名称	型	例
種目ID	数字型	1
種目名	文字列型	腹筋
単位	文字列型	回
セット有無	判定型	true
更新日時	日付型	2021/09/01

・実績テーブル

名称	型	例
実績ID	数字型	5
プログラムID	数字型	1
実行数値	数字型	30
実行セット	数字型	3
実行年月日	日付型	2021/09/10
更新日時	日付型	2021/09/11 10:20:25

種目テーブルから種目を選んで回数や実行日を入力して実績テーブルに登録し、

実績テーブルをもとに一覧を表示する、といったイメージとなります。

このイメージをもとに実際に実装していきたいと思います。

Spring Tool Suite 4で表示する画面の作成をする

Spring Tool Suite 4 のダウンロード

では実際に画面の作成からしていきたいと思います。

今回開発に使うツールは Spring Tool Suite 4(STS) となります。

まずはこちらのダウンロードサイトへ行き、 Spring Tools 4 for Eclipse をダウンロードします。

https://spring.io/tools

プロジェクトの作成

STSがダウンロード出来たら、まずはSTSを起動します。

起動したら、メニューから「File」→「New」→「Project」を選択します。

名前の付いたディレクトリの一覧が表示されるので、

その中から「Spring Boot」→「Spring Starter Projet」を選択して、「Next」ボタンを押します。

「New Spring Starter Project」という画面に切り替わります。

この画面の「Name」にProject名を設定して、他は初期値で「Next」ボタンを押します。

「Spring Starter Project Dependencies」という画面に切り替わります。

Projectで使用するライブラリが選択出来るので必要に応じてチェックを入れていきます。

なお、ここで選ばなくてもあとで追加できるので、分からない時はひとまずそのままで良いです。

今回はDBに「h2 database」、ビューのテンプレートに「Thymeleaf」を利用します。

「Finish」ボタンを押せばProjectが出来上がります。

このProjectに作り込みながら説明していこうと思います。

表示するための処理クラスと画面ファイルを準備する

まずは起動して画面を表示するまでを作成していきます。

形式としては Spring MVC で作成しますので、Controllerから準備します。

Projectの「src/main/java」の「com.example.demo」の下に「controller」のディレクトリを作成し、

この中に処理を実行するControllerクラスを作成します。

ここでは「ProgramController」とします。

合わせて、「src/main/resouces」の「templates」の中に表示する画面ファイルを作成します。

ここでは「list.html」とします。

ディレクトリ構成は以下の画像のようになります。

処理クラスの中身を作成する

次に表示をさせるための処理を書いていきます。

まずProgramControllerの中身は以下のように記述します。

1@Controller
2public class ProgramController {
3    @RequestMapping("list")
4    public String list() {
5        return "list";
6    }
7}

Spring MVCではControllerクラスに「@Controller」または「@RestController」のアノテーションを指定します。

「@Controller」は主に戻り値にview（html）を返す時に使用します。

Webページのやりとりはこちらがメインになるかと思います。

対して、「@RestController」は主に戻り値にJsonやXMLを返す時に使用します。

APIのサーバや文字列返却などに使用したい時はこちらの指定になるかと思います。

今回はWebページで表現したいので、「@Controller」を利用します。

次に処理したいメソッドに対して「@RequestMapping」でURLのパスを指定します。

今回は「（”list”）」としているので、アプリケーションを起動した時に

「http://localhost:8080/list」のURLで「list()」メソッドが実行されるようになります。

「8080」はポート番号です。

初期設定で進めていればこの番号となりますが、変更している場合は適宜置き換えてください。

画面ファイルの中身を作成する

次に、表示する画面ファイルを準備します。

「list.html」として以下のように記述します。

1<!DOCTYPE HTML>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4    <title>List</title>
5    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6</head>
7<body>
8    <h1>実績一覧</h1>
9    <table border="1">
10        <tr>
11            <th>日付</th>
12            <th>種目</th>
13            <th>実績</th>
14            <th>セット数</th>
15        </tr>
16        <tr>
17            <td>2021/09/10</td>
18            <td>腹筋</td>
19            <td>3０回</td>
20            <td>３セット</td>
21        </tr>
22    </table>
23</body>
24</html>