【SpringBoot入門】 第6回 「Thymeleafを使ってみよう!(その2)」

こんにちは。タグボード開発チームのワシヅカです。

現場から戻ってきました。大変良いクライアント様だったのでとても名残惜しくはありましたが、
自社開発をドンドン進めていこうとのことで戻ってまいりました。自社開発をやってみたい!というSE・PGのみなさん、ぜひ一緒に開発しましょう!

今日は第5回で作成したhello.htmlに手を加えて、データベースの情報をThymeleafの機能を使って表で出力したいと思います。早速やっていきましょう!

0.前提

  • 第5回の記事を読んでhello.htmlの表示まで完了していること
  • 焦らない気持ち。

1.MainController.javaを修正する

まずは、第5回で作成したMainController.javaのgetHelloメソッドを修正して、データベースからデータを取得する処理を追加します。今回はUserテーブルの全件を取得する処理を追加します。追加する処理はこれだけです。

処理の意味としては、userRepositoryインターフェースを通して全件Userテーブルを抽出し、ListにUserクラスの型で格納します。そのListをModelAndViewクラスに、”users”という名前で追加してね。という処理になります。全体的には下のようなコーディングになります。

注意点は、コレクションクラスのListを使いたいので、

import java.util.List;

をインポートするのを忘れないようにしてください。

でも、「List<User> userEntityList = userRepository.findAll();」でエラーになりました。安心してください!そのまま、2.のステップへ!

2.UserRepository.javaの継承元を修正する

UserRepositoryクラスの継承元を変更します。

このような感じに「CrudRepository」→「JpaRepository」に変更してあげると
Listで返却可能になります。「JpaRepository」は「CrudRepository」も継承していますので、そのままのメソッドも利用可能になります。

これで「「List<User> userEntityList = userRepository.findAll();」」もエラーが消えたと思います。

UserRepositoryクラスにはfindAllメソッドは定義されていませんが、継承元のJpaRepositoryインターフェースに定義されているので利用できます。他にもfindAllをオーバロードしたメソッドやsaveメソッドなどが定義されていますので、一度覗いておくことをオススメします。

また、userRepository変数が使えるのは、このMainControllerクラスに

と定義されているからでした。SpringBootの機能で自動的にインスタンスを生成してくれます。

3.hello.htmlを修正する

さて次に、MVCのViewにあたるhello.htmlを修正を追加します。追加する内容は以下のようになります。

HTMLでテーブルを作成します。「行」にあたる部分を、データベースから取得した1レコード毎に繰り返したいので Thymeleafの「th:each」という構文を使用します。foreachによるイテレーションと同じと考えていただいてOKです。

先ほどMainControllerクラスで「users」という名前でUserテーブルから取得した全件のリストが格納されていますので、それを1件ずつ「user」という名前で変数を定義して代入していくことになります。Listに格納されているデータはUserクラスの型になっていますので、Userクラスのidやnameといったgetterメソッドを呼び出すことができます。

全体的には下のようなコーディングになります。

4.デバッグしてみましょう!

ここまでコーディングできたらデバッグしてみましょう!動かし方はもう分かりますよね?虫のアイコンをポチッとな!とします。ブレイクポイントを設定するのを忘れずに!(分からないという方は第5回をご覧ください!)

・・・っと、その前にDBの中身をざっと確認しておきましょう。今回はMysql Workbenchというツールを使って確認します。Mysqlを使っている場合は非常に強力なツールなので使ったことが無い方はお試ししてみてくださいね。下の画像のように9件のデータが入っています。

では、動かします。さあ、ブレイクしました。変数の中身を見てみましょう。しっかり9件のListとそれぞれUserクラスの型でデータが格納されていることが分かります。

見事、ブラウザに表が表示されました!

うまくいきましたでしょうか?!サンプルのデータがE-mailなのにE-mailのフォーマットになっておらず、いまいちだったかもしれませんが、データベースから取得した値が表になって表示されました。

Thymeleafは、他にもたくさんの機能を持っていますので、どんな表現の仕方ができるかざっと頭にいれておくと良いかと思います。細かいコーディングはその都度調べるというやり方がおすすめです。

●Thymeleafチートシート(※大変参考になりました!)

https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482

JPAについて更に詳しく知りたい方は、こちらの専門書がおすすめです!

Spring Data JPAプログラミング入門 単行本 – 2017/8/3
溝口賢司 (著)

5.まとめ

  • Repositoryインターフェースを使って、データを取得するメソッドを呼び出せる
  • 取得したデータはmodelAndViewで名前を付けて格納する
  • th:eachで取得したデータのList(Iterableを継承したクラス)を繰り返せる
  • th:eachではmodelAndViewで付けた名前を使って取得できる

以上で入門編は終わりです!サンプルの実装にsaveメソッドを使ったDB登録処理も入っているのでこれで、登録、一覧表示ができるようになりましたね!ここまでお付き合いいただきありがとうございました!

ゆっくりですがバージョンアップも計画していますので、タグボートを今度とも宜しくおねがいします!

【SpringBoot入門】 第5回 「Thymeleafを使ってみよう!(その1)」



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください