More than 5 years have passed since last update.

TIS株式会社

Kotlin + Spring Boot + Thymeleaf で学んだことの整理

Last updated at 2019-10-09Posted at 2019-10-09

はじめに

9月くらいからちまちま触っていたアプリケーションについて、学んだことを整理するためにここに簡単に残します。

勉強になったことやこれから学びたいことがたくさんあるので、この記事の続編がじゃんじゃん追加になるイメージで書き進めていこうと思います。

…あくまで自分の備忘録！

Thymeleafの紹介

この記事における達成目標

Webアプリケーションとしての最低限のサンプルとして成り立つこと
Kotlin、Spring Boot、Thymeleafの雰囲気を知る
データの保持はなし
- GetのURLパラメータから取得した値をブラウザ上に表示できる

環境

$ gradle -version

Gradle        5.6.2
Kotlin:       1.3.41
Groovy:       2.5.4
Ant:          Apache Ant(TM) version 1.9.14 compiled on March 12 2019
JVM:          1.8.0_222 (AdoptOpenJDK 25.222-b10)
OS:           Mac OS X 10.14.1 x86_64

IntelliJ IDEA 2019.2.2

※なお、IntelliJ IDEAのバージョンが古い場合、Gradleのバージョンの違いでうまく動かないことがあります。躓いてかなり時間を費やしてしまったので備忘です
Android Gradle 5.0 Update:Cause: org.jetbrains.plugins.gradle.tooling.util

For others who have the same problem in IntelliJ:
upgrading to the latest IDE version should resolve the issue.
In my case going from 2018.1 -> 2018.3.3

作るもの

index.html
DemoController.kt
main.css

STEP1 大枠のデモ用アプリを作成

Spring Initializr から、何の言語を使うかなどを設定し、デモ用にアプリを作成します。

自分で1から作成する必要がない！なんて楽なんだ…。
細かい部分はあとでカスタマイズしましょう。

以下の設定を選択し、「Generate the projexts」を押下するとzipでダウンロードできます。

設定項目	選択
Project	Gradle Project
Language	Kotlin
Spring Boot	2.1.8(あとで `2.1.7` にカスタマイズします)
Project Metadata	変更なし
Dependencies	SpringBootDevTools, Lombok, Spring Configuration Processor, Spring Web, Thymeleaf

STEP2 IDEA でOpen

ダウンロードした demo.zip を任意の場所に展開
IntelliJ(IDEはお好みで)を起動し、「Open」→ 展開したプロジェクト demo を選択
開くと勝手にプロジェクト用にGradleのinstallが始まります　demo/.gradle 配下ですね。

STEP3 まずは、中身見てみます

上記を見る限り、resources配下には何もないのでHTMLやCSS、JSは作成する必要があります。

デフォルトで作成されているのは、 DemoApplication.kt ですね。

中身を見ると、どうやら起動するmainメソッドのよう（日本語正しいかな）

DemoApplication.kt

package com.example.demo

import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.runApplication

@SpringBootApplication
class DemoApplication

fun main(args: Array<String>) {
	runApplication<DemoApplication>(*args)
}

STEP4 SpringBootのバージョンを変更します

作成した時点（2019/9/6）では、 Spring Initializr からは 2.1.7 が選択できなかったため、 build.gradle.kt を直接修正します。
(勉強したいバージョンが 2.1.7 なので…)

※なお、現在の最新は、 2.1.9 のようです。（2019／10／9）

簡単です！ 8 を 7 に変えるだけ。

修正前

build.gradle.kt

import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins {
	id("org.springframework.boot") version "2.1.8.RELEASE"
	id("io.spring.dependency-management") version "1.0.8.RELEASE"
	kotlin("jvm") version "1.2.71"
	kotlin("plugin.spring") version "1.2.71"
}

~省略~

修正後

build.gradle.kt

import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins {
	id("org.springframework.boot") version "2.1.7.RELEASE"
	id("io.spring.dependency-management") version "1.0.8.RELEASE"
	kotlin("jvm") version "1.2.71"
	kotlin("plugin.spring") version "1.2.71"
}

~省略~

「Close Project」で一度プロジェクトを閉じて、再度開きます
すると以下のように表示されるので、「Apply dependencies」

他に良いやり方を知っているよって方はぜひ教えてください…！

STEP5 画面作成

ようやく本題です。
Thymeleafを使って初期画面を作成していきます。

今回はサンプルなので、ごく簡単に作りました。

UserController.kt

package com.example.demo.controller

import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.web.bind.annotation.*

@Controller
@RequestMapping("user")
class UserController {

    @GetMapping
    fun index(@RequestParam(name = "inputName") inputName: String, model: Model): String {
        model.addAttribute("yourName", inputName)
        return "index"
    }
}

Spring MVCについては、図解で学ぶ Spring MVC がとてもわかりやすい
@Controller, @RestControllerの違いは、ここがわかりやすかった

index.html

<!DOCTYPE html>
<html lang="en" xmlnxs="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/css/main.css" th:href="@{/css/main.css}" />
  <title>Title</title>
</head>
<body>
  <table>
      <tr>
          <td>
              <span th:text="あなたの名前" />
          </td>
          <td>
              <span th:text="${yourName}" />
          </td>
      </tr>
  </table>
</body>
</html>

linkタグでのパスの指定は、 static 配下から指定
th:text , ${yourName} については、 Thymeleaf公式(スタンダード式構文)

main.css

@charset "utf-8";
/* ---- テーブル ---- */
table, td, th {
  border: 1px solid black;
  margin: auto;
}
table td {
  padding: 10px;
}

STEP6 起動＆動作確認

demo > Tasks > build > build
demo > Tasks > application > bootRun

http://localhost:8080/user?inputName=takkii1010 にアクセス

参考サイト

Thymeleaf公式ドキュメント
 Spring Initializr

最後に

…Bootstrapでかっこよくしたいところですね。
Bootstrapも「今後やりたいこと」に追加します。

今後やりたいこと

機能

入力フォームがあり、簡単なデータの保持ができる（DBなしでメモリ上に保持でOK）
登録済みデータの更新ができる
DBに接続してデータの保持ができる
サーバ間でのREST通信
ローカル環境からAWSへの移行（無料の範囲で遊ぶ予定）

あとは思い付いた機能を随時追加

テスト関連

JUnit
Selenide

UI改善

BootstrapでおしゃれなUIにする

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up