• トップ
  • ブログ一覧
  • 【第1回】Spring bootで運動記録をDBに記録してみた(準備編)
  • 【第1回】Spring bootで運動記録をDBに記録してみた(準備編)

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

    【第1回】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の中身は以下のように記述します。

    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>30回</td>
    20            <td>3セット</td>
    21        </tr>
    22    </table>
    23</body>
    24</html>

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

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

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

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

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

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

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

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

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

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

    画面表示

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

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

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

    記事を書いた人

    \ 3度のメシより技術が好き /
    (株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
    WEB・アプリ開発依頼、お見積もりはこちらまでお願いします。
    また、WEB・スマホ系エンジニアを積極採用中です!
    ※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    あっきー(エンジニア)
    あっきー(エンジニア)
    Show more...

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background