【第1回】Spring bootで運動記録をDBに記録してみた（準備編）
2022.03.31
【第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 をダウンロードします。
プロジェクトの作成
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 2 3 4 5 6 7 | @Controller public class ProgramController { @RequestMapping("list") public String list() { return "list"; } } |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>List</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1>実績一覧</h1> <table border="1"> <tr> <th>日付</th> <th>種目</th> <th>実績</th> <th>セット数</th> </tr> <tr> <td>2021/09/10</td> <td>腹筋</td> <td>3０回</td> <td>３セット</td> </tr> </table> </body> </html> |
現時点ではただ表示するだけの画面となっています。
ここまで出来た状態で、実際に起動して画面表示出来るかを試します。
Spring boot アプリケーションの起動
Project から右クリックでメニューを呼び出し、「Run As」→「Spring boot App」をクリックすると
Spring bootアプリケーションが起動します。
起動後、コンソールにログがたくさん流れていきます。
「Started （アプリケーション名） in ~」のログでコンソールが止まっていれば正常に起動されているかと思うので、
「http://localhost:8080/list」のURLをたたいてみてください。
そうすると準備したhtmlの画面が表示されるかと思います。
ここまでで、画面表示までの準備が出来ました。
この画面の状態からデータベースでの取得が出来るように肉付けしていきたいと思います。
データベースについては次回まとめていきたいと思います。
記事を書いた人
WEB・アプリ開発依頼、お見積もりはこちらまでお願いします。
また、WEB・スマホ系エンジニアを積極採用中です！
書いた人はこんな人
- 元ファストフード店長代理のJava系ITエンジニア。
Webサイト系の開発や運用をいくらか経験し、
現在はAndroidアプリ開発を主に担当したり。
休みの日はゲームとか風景写真撮りに行ったりとかマラソンしたりとか。
IT技術11月 17, 2023システム移行時のログメッセージ引き継ぎで経験したこと- IT技術12月 22, 2021【第2回】Spring bootで運動記録をDBに記録してみた（DB作成編）
- IT技術11月 16, 2021【第1回】Spring bootで運動記録をDBに記録してみた（準備編）
- IT技術6月 18, 2019Android 9（Pie）の電源周りとアラームについて
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
