1. HOME
  2. ブログ
  3. IT技術
  4. 【第1回】Spring bootで運動記録をDBに記録してみた(準備編)
【第1回】Spring bootで運動記録をDBに記録してみた(準備編)

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

Springbootを使って、DBとの連携システムを考える

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

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

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

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

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

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

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

作成する画面

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

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

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

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」ボタンを押します。

New Spring Starter Project画面

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

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

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

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

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

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

Spring Starter Project Dependencies画面

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

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

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

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

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

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

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

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

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

ディレクトリ構成

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

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

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

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」として以下のように記述します。

現時点ではただ表示するだけの画面となっています。

ここまで出来た状態で、実際に起動して画面表示出来るかを試します。

Spring boot アプリケーションの起動

Project から右クリックでメニューを呼び出し、「Run As」→「Spring boot App」をクリックすると

Spring bootアプリケーションが起動します。

Spring boot アプリケーションの起動

起動後、コンソールにログがたくさん流れていきます。

「Started (アプリケーション名) in ~」のログでコンソールが止まっていれば正常に起動されているかと思うので、

「http://localhost:8080/list」のURLをたたいてみてください。

そうすると準備したhtmlの画面が表示されるかと思います。

画面表示

ここまでで、画面表示までの準備が出来ました。

この画面の状態からデータベースでの取得が出来るように肉付けしていきたいと思います。

データベースについては次回まとめていきたいと思います。

書いた人はこんな人

秋山 (社員)
元ファストフード店長代理のJava系ITエンジニア。
Webサイト系の開発や運用をいくらか経験し、
現在はAndroidアプリ開発を主に担当したり。
休みの日はゲームとか風景写真撮りに行ったりとかマラソンしたりとか。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア