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

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

 

明日から12月です。今年もあっという間で特に頑張ったという記憶もなく…。残り1ヶ月を有意義に過ごして「終わりよければすべてよし」に持っていきたいです。明日から本気出す、です。

 

今日は、今まで使ってきたサンプルプロジェクトにもう少し手を加えて、Thymeleafというテンプレートエンジンを使ってHTMLにデータを出力したいと思います。早速やっていきましょう!

 

 

0.前提

 

1.pom.xmlを修正する

まずは、pom.xmlを修正して、Thymeleafのライブラリをインポートしましょう。

下の画像を参考に、<dependencies>~</dependencies>の間と、<properties>~</properties>に設定を追加しましょう。

<java.version>1.8</java.version>

はもともと定義されていると思いますので、消さないように注意しながら修正を加えてください。

 

修正後のイメージは下の画像のようになります。

pom.xmlに修正を加えて、ctrl+sキーで上書き保存すると、上で付け加えたライブラリがダンロードされ、再ビルドが実行されます。ダウンロードでエラーが出る、社内ネットワークなどで、proxy経由でインターネット接続されているような方は「Maven proxy」のようなキーワードでググってみると良いかもしれません

 

Mavenがリモートリポジトリからライブラリのダウンロードを完了すると、STSの「Maven依存関係」のリストに先ほどpom.xmlに追加したThymeleaf関連のライブラリが表示されますので、サクッと確認してください。

 

 

2.フォルダを追加する

Thymeleafはデフォルトで「resources」配下の「templates」というパスを参照するようになっていますので、そのパスを作ってあげます。パッケージ・エクスプローラーから「src/main/resources」を右クリックし、[新規]→[その他]を選択します。

 

 

ウィザードが表示されたら、下の画像の様に「フォルダ」と検索すると「一般>フォルダー」が表示されますので選択して「次へ」ボタンをクリックします。

 

下の画面が表示されたら、フォルダの作成パスが合っていることを確認し、フォルダ名に「templates」と入力して「完了」ボタンをクリックしてください。

 

次に作成した「templates」フォルダの中にHTMLを作成します。

先ほど同じようにパッケージエクスプローラーから「templates」フォルダを右クリックし[新規]→[その他]を選択します。ウィザードが表示されたら「html」と入力して、表示された「HTMLファイル」を選択し、「次へ」ボタンをクリックします。

HTMLのファイル名を入力する画面が表示されるので、今回は「hello.html」と名前を付けておきます。

 

 

3.hello.htmlを編集する

hello.htmlは、すでに基本的なHTMLが記述された状態で生成されますので、下の画面を参考に1行追加してください。追加する内容は、

です。ポイントは「th:text=”${message}”」です。<p>は、ご存知、HTMLの<p>タグです。

 

また、今回は使いませんが、「resources」フォルダの下に「static」フォルダを作成し、更にその下に「js」、「css」、「images」フォルダを作っておくと良いかと思います。Javascriptファイルなどの格納場所として利用します。

フォルダ名 用途
js JavaScript
css スタイルシート
images 画像ファイル

 

 

 

4.MainController.javaを編集する

次に「MainController.java」を編集します。

 

処理を簡単に解説しますと…

まず、@GetMappingアノテーションで”/”のパスにマッピングします。

パラメータにModelAndView を渡すことで自動的にインスタンスが生成されるので、そのmavインスタンスにaddObjectメソッドで”message”というキー文字列でmessageStringを格納しています。

また、View名は先程作った”hello.html”に設定します。

そして、最後にreturnでmavを返却しています。

 

 

 

5.デバッグモードで実行する

さて、デバッグモードで実行して、ブラウザでアクセスしてみましょう。

URLはhttp://localhost:8080/demo/

となります。

※なぜ/demo/が付くのかは第3回目の「5.URLとのマッピングを確認する」をご覧頂けると理解が早いかと思いますが、クラス自体にマッピングが行われているためです。

 

ブラウザで上記のURLへアクセスすると、事前に仕掛けておいたブレイクポイントで止まりました。mavインスタンスのmodelにKeyとValueで値が格納されたことが分かります。またviewにもしっかり”hello.html”が格納されていますね。F8キーを押して処理を続行しましょう。

6.HTMLの出力結果を確認する

見事にHTMLが出力されました(^^)

表示されたソースを確認すると

の部分が置き換わっていることがわかります。

modelに格納された”message”とhello.htmlで記述した${message}が一致し、変換処理が行われていることが分かります。

 

うまくいきましたでしょうか?!

いよいよHTMLを出力できるところまでやってきました。次回は今までの技術を駆使してDBのデータをHTMLで出力してみましょう!

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

 


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

  • 始めまして

    springの学習で1回から5回までをやってみましたが
    判りやすくて良い感じです。

    5回以降のリンクが無いのですが未だ作成されて無いのでしょうか?
    作成されて無いとなると続きの予定はあるのですか?
    続きを予定しているなら、いつごろアップされるのでしょうか?

    是非とも6回以降をやりたいので、宜しくお願いします。

    • 仲里さん

      はじめまして、開発チームのワシヅカです。
      当サイトの初コメントありがとうございます!
      分かりやすいとは大変うれしいです(*´ω`*)

      現在、現場に出ておりまして、なかなか記事を書けません…。
      5月以降に時間が取れそうですので、その時に更新したいと思います!

      お楽しみに…!

      また、分かりにくい点などあればコメント頂けるとうれしいです(´ε` )

仲里いさむ にコメントする コメントをキャンセル

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

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