Groovyで簡単Webアプリ作成

Groovyで簡単にWebアプリが作成できるみたいなので、SpringBoot勉強の寄り道がてら、やってみます！

# 環境
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/15b6286f-979d-4f09-8b08-a1e1fc3904ba.png)

# 前準備
Spring Boot CLIというソフトを使うので、[Springのリポジトリサイト](https://repo.spring.io/webapp/#/search/archive/)で「spring-boot-cli-2.0」と検索し、「Artifact」から任意のバージョンをダウンロードする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/7906d22b-d303-f422-5e29-62df33be1c3f.png)
ダウンロードしたzipファイルを任意の場所で解凍し、解凍されたフォルダ内にあるbinフォルダのパスを環境変数に追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/dff6133f-bed7-24c9-e21e-9592ed682da5.png)

~~~bash:ターミナル
export PATH=$PATH:「binフォルダのパス」
~~~

# Helloする
任意の場所に以下のソースファイルを作成し、springコマンドで実行。

~~~groovy:demo.groovy
@RestController
class Demo {
	@RequestMapping("/")
	def home() {
		"Hello"
	}
}
~~~

~~~bash:ターミナル
spring run demo.groovy
~~~

実行後、「http\://localhost:8080/」にアクセス。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/a624cade-7096-ff65-38e4-6f58e701f65f.png)

# htmlを返す
以下のソースコードに書き換えて実行。

~~~groovy:demo.groovy
@RestController
class Demo {
	@RequestMapping("/")
	def home() {
		def header = "<html><body>"
		def footer = "</body></html>"
		def content = "<h1>Hello!</h1><p>this is html</p>"
		header + footer + content
	}
}

~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/bee0ff0d-a6f6-5c37-875b-7eb13e678f84.png)

# Thymeleafを使ってhtmlファイルを返す
demo.htmlを返すようにする。
## 静的なhtml
まずは静的なhtmlファイルを返してみる。

~~~html:demo.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h1 style="color:red">Hello!</h1>
<p>this is thymeleaf</p>
</body>
</html>
~~~

demo.groovyを以下のソースコードに書き換える。

~~~groovy:demo.groovy
@Grab("thymeleaf-spring5")

@Controller
class Demo {
	@RequestMapping("/")
	@ResponseBody
	def home(ModelAndView mav) {
		mav.setViewName("demo")
		mav
	}
}
~~~

demo.groovyと同じ階層にtemplatesフォルダを作成し、そこにdemo.htmlを格納する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/17d57acc-b577-e386-f669-54139a770347.png)

実行後、「http\://localhost:8080/」にアクセス。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/8a0b005e-16f8-3d82-2b1f-e67858a130df.png)

ちなみにtemplatesフォルダに入れないと、以下のようなエラーで表示できない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/2a30bf84-57eb-ee57-07d8-ed900612f76e.png)

## 動的なhtml
次に動的なhtmlファイルを返す。
先程の静的なhtmlファイルにThymleaf独自の属性「th:text」を追加し、変数msgの値が表示されるようにする。

~~~html:demo.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
<h1 style="color:red">Hello!</h1>
<p th:text="${msg}">this is thymeleaf</p>
</body>
</html>
~~~

demo.groovyを以下のソースコードに書き換える。
変数msgに「Thymeleaf Message!!」という文字列を格納するコードを追加。

~~~groovy:demo.groovy
@Grab("thymeleaf-spring5")

@Controller
class Demo {
	@RequestMapping("/")
	@ResponseBody
	def home(ModelAndView mav) {
		mav.setViewName("demo")
		mav.addObject("msg","Thymeleaf Message!!")
		mav
	}
}
~~~

実行後、「http\://localhost:8080/」にアクセス。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/b419c77b-c2e2-af5f-b4de-c0a01673a46b.png)

# Tymeleafを使ってフォームを送信する
最後にフォームを扱えるようにする。
demo.htmlに以下のようにフォームを追加。

~~~html:demo.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
  <h1 style="color:red">Hello!</h1>
  <p th:text="${msg}"></p>
  <form method="post" action="/send">
    <input type="text" name="text1" th:value="${value}" />
    <input type="submit" value="Click" />
  </form>
</body>
</html>
~~~

demo.groovyを以下のソースコードに書き換える。
postメソッドを追加。

~~~groovy:demo.groovy
@Grab("thymeleaf-spring5")

@Controller
class Demo {

	@RequestMapping(value="/", method=RequestMethod.GET)
	@ResponseBody
	def home(ModelAndView mav) {
		mav.setViewName("demo")
		mav.addObject("msg","please write your name...")
		mav
	}

	@RequestMapping(value="/send", method=RequestMethod.POST)
	@ResponseBody
	def send(@RequestParam("text1")String str, ModelAndView mav) {
		mav.setViewName("demo")
		mav.addObject("msg","Hello, " + str + "!!")
		mav.addObject("value",str)
		mav
	}
}
~~~

実行後、「http\://localhost:8080/」にアクセス。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/4e1becf2-934f-9f03-f4e1-6614ff276fe6.png)
名前を入力して「Click」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/5ae9de8c-883a-82d1-7958-9fe51099a496.png)
「write your name...」が入力した名前に書き換えられる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558865/d804f089-05ec-4b1d-9198-2211bea8253e.png)

# 終わりに
本家のSpringBoot＆Javaと比べて、Groovyはとても環境構築が楽でした。文法はSpringBoot＆Javaと同じなので、手軽にSpringBootを体験するのに非常に便利でしたね！！
次回はJavaでSpringBootを本格的に学びます！

# 参考書籍
SpringBoot2 プログラミング入門　著者：掌田 津耶乃