Spring Tool Suite (STS)と Spring Boot で始める Web アプリケーション開発(3)

こんにちは。梶原です。
これは TECHSCORE Advent Calendar 2016 の3日目の記事です。

「Spring Tool Suite (STS)と Spring Boot で始める Web アプリケーション開発」の第3回です。
3回に分けて掲載しています。

Spring Boot につていは TECHSCORE BLOG の記事「Spring Boot 入門」もご覧ください。

前回の記事では Spring Tool Suite (STS) でSpring Starter プロジェクトを作成してコントローラ内で設定したテキスト Hello World を画面に表示させました。
今回は次のステップとして画面のフォームに入力した内容を送信して画面に表示させます。

この記事のゴール

前回の記事で作成した Spring Starter プロジェクトを利用してフォーム画面を作成します。
テンプレートエンジンには Thymeleaf を利用します。
画面のテキストボックスに入力した内容を送信して画面に表示させます。

環境

  • Windows 10
  • Java 8
  • Spring Tool Suite (STS) 3.8.1

Spring Boot は JSP を推奨しない

前回の記事では REST コントローラを作成し、テキストをブラウザ画面に表示させました。
しかし、実際の Web アプリケーションではテンプレートエンジンを利用して独自ルールやプログラム言語で記述されたコードから HTML 画面を作成し、ブラウザ画面に表示させています。
Java で Web アプリケーション開発の経験がある方は JSP を利用する機会が多かったのではないでしょうか。

ところが、Spring Boot 1.4.1 のリファレンスを確認すると利用できるテンプレートエンジンの種類についての記述がありますが

JSPs should be avoided if possible, there are several known limitations when using them with embedded servlet containers.

「JSP は可能な場合は利用は避けるべき」とあります(´・ω・`)
そこで、今回はテンプレートエンジンには Thymeleaf を利用して画面を作成することにします。

pom.xml の編集

利用するライブラリ Thymeleaf を追加します。
DemoSpringBootApp プロジェクトの直下にある「pom.xml」を右クリックし、Open With > Text Editor をクリック。
pom.xmlをTextEditorで開く

テキストエディタで pom.xml が編集できるようになったので、コメントで「<!-- 追加: ここから -->」「<!-- 追加: ここまで -->」と書かれた範囲を追加しました。

コントローラを修正

前回の記事で作成したHelloController.java を編集します。
コントローラクラスの作成完了

クラス定義の前のアノテーション は 前回の記事では @RestController でしたが、今回は @Controller を利用します。@RestController はアクセスした側にテキストを返すだけの動作でしたが、@Controller はテンプレート機能を利用して HTML ページを表示します。
ModelAndView はテンプレートで利用するデータ類と、テンプレート名などビューに関する情報をまとめて管理するクラスです。

テンプレートファイルを作成

パッケージエクスプローラで「src/main/resources」配下にある「templates」フォルダを選択して右クリックし、New > Other… をクリック。
テンプレートファイルを作成

設定画面が起動します。
「Web」内の「HTML File」を選択して Next ボタンをクリック。
HTML Fileを選択

保存場所は「templates」フォルダを選択。ファイル名は「index.html」を入力して Next ボタンをクリック。
保存場所を選択しファイル名を入力

HTML Template は「New HTML File (5)」を選択。
HTML Templateを選択

Finish ボタンをクリックすると、index.html の作成が完了します。
index.htmlの作成完了

index.html を編集して、入力テキスト欄に値を入力してボタンをクリックすると送信されるフォームを作成します。
入力テキスト欄の上にはコントローラから受け取った値をメッセージとしてテキスト表示しています。

コーディングは以上です。
それではプロジェクトを実行してみましょう。

プロジェクトを実行して画面にアクセス

プロジェクト「DemoSpringBootApp」を右クリックし、Run As > Spring Boot App をクリックします。
しばらくすると以下のようなログが出力され、末尾に「Started DemoSpringBootAppApplication」とあります。プロジェクトが実行できました。

画面にアクセスします。
http://localhost:8080/
入力テキスト欄とボタンのフォーム画面が表示されました。
入力画面を表示

入力テキスト欄に入力してボタンをクリックすると、コントローラで追加したテキストとあわせて「Hello ”入力値” !」が表示されました。
入力した値が表示された

まとめ

次のレベルへのステップとしては、画面の入力項目内容をチェックしてエラーメッセージを表示したり、データベースに登録して検索できるようにしたりするのも良いと思います。

Spring Boot を利用した Web アプリケーションはコーディングして実際に画面が動くまでが短時間であることが体感できました。設定ファイルに煩わされることなくコーディングに集中できそうな点がとても好印象でした。

Comments are closed, but you can leave a trackback: Trackback URL.

Comments

  • yuyoungmin  On 2017年1月28日 at 14:36

    ありがとうございました

  • playmaker  On 2018年5月7日 at 11:55

    プロジェクトを実行して画面にアクセス
    という項目にて同じコードをかいたのですが、HelloWorldしか表示されませんでした。

    誤字脱字を確認しても間違いは見つかりませんでした。

    どうすればよろしいでしょうか