開発チーム(s.w)こんにちは。タグボード開発チームのワシヅカです。現場から戻ってきました。自社開発をドンドン進めていこうとのことで戻ってまいりました。自社開発をやってみたい!というSE・PGのみなさん、ぜひ一緒に開発しましょう!今日は第5回で作成したhello.htmlに手を加えて、データベースの情報をThymeleafの機能を使って表で出力したいと思います。第5回の記事を読んでhello.htmlの表示まで完了していること焦らない気持ち。1.MainController.javaを修正するまずは、第5回で作成したMainController.javaのgetHelloメソッドを修正して、データベースからデータを取得する処理を追加します。今回はUserテーブルの全件を取得する処理を追加します。追加する処理はこれだけです。userRepository.findAll();mav.addObject("users",userEntityList);処理の意味としては、userRepositoryインターフェースを通して全件Userテーブルを抽出し、ListにUserクラスの型で格納します。そのListをModelAndViewクラスに、”users”という名前で追加してね。全体的には下のようなコーディングになります。java.util.List;をインポートするのを忘れないようにしてください。userRepository.findAll();」でエラーになりました。安心してください!そのまま、2.のステップへ!2.UserRepository.javaの継承元を修正するUserRepositoryクラスの継承元を変更します。このような感じに「CrudRepository」→「JpaRepository」に変更してあげるとListで返却可能になります。「JpaRepository」は「CrudRepository」も継承していますので、そのままのメソッドも利用可能になります。userRepository.findAll();」」もエラーが消えたと思います。UserRepositoryクラスにはfindAllメソッドは定義されていませんが、継承元のJpaRepositoryインターフェースに定義されているので利用できます。他にもfindAllをオーバロードしたメソッドやsaveメソッドなどが定義されていますので、一度覗いておくことをオススメします。userRepository;と定義されているからでした。SpringBootの機能で自動的にインスタンスを生成してくれます。3.hello.htmlを修正するさて次に、MVCのViewにあたるhello.htmlを修正を追加します。追加する内容は以下のようになります。th:text="${user.email}"></td></tr></table>HTMLでテーブルを作成します。Thymeleafの「th:each」という構文を使用します。foreachによるイテレーションと同じと考えていただいてOKです。先ほどMainControllerクラスで「users」という名前でUserテーブルから取得した全件のリストが格納されていますので、それを1件ずつ「user」という名前で変数を定義して代入していくことになります。Listに格納されているデータはUserクラスの型になっていますので、Userクラスのidやnameといったgetterメソッドを呼び出すことができます。全体的には下のようなコーディングになります。4.デバッグしてみましょう!ここまでコーディングできたらデバッグしてみましょう!動かし方はもう分かりますよね?虫のアイコンをポチッとな!とします。ブレイクポイントを設定するのを忘れずに!(分からないという方は第5回をご覧ください!)・・・っと、その前にDBの中身をざっと確認しておきましょう。Workbenchというツールを使って確認します。Mysqlを使っている場合は非常に強力なツールなので使ったことが無い方はお試ししてみてくださいね。下の画像のように9件のデータが入っています。さあ、ブレイクしました。変数の中身を見てみましょう。9件のListとそれぞれUserクラスの型でデータが格納されていることが分かります。見事、ブラウザに表が表示されました!うまくいきましたでしょうか?!サンプルのデータがE-mailなのにE-mailのフォーマットになっておらず、いまいちだったかもしれませんが、データベースから取得した値が表になって表示されました。Thymeleafは、他にもたくさんの機能を持っていますので、どんな表現の仕方ができるかざっと頭にいれておくと良いかと思います。細かいコーディングはその都度調べるというやり方がおすすめです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。