プロジェクト作成

プロジェクトを Spring Initializr にて作成します。各設定項目は以下のように設定します。

Project: Gradle Project
Language: Kotlin
Spring Boot: 2.7.3
Project Metadata: デフォルト値
Dependencies: Spring Web, Thymeleaf

Web ページを作成するため、Dependencies に Spring Web と Thymeleaf を設定しています。

まず、Spring Web はバックエンドのルーティングなどの機能を提供するライブラリです。そして、Thymeleaf はバックエンドで Web ページをレンダリングするテンプレートエンジンです。

以上で、プロジェクトの作成は完了です。

Web ページを作成する

プロジェクトの作成が完了したら、実際に Web ページの作成に入ります。

まず、バックエンドのルーティングを実装します。プロジェクトの src/main/kotlin ディレクトリの com.example.demo パッケージ配下に GreetingController.kt を追加し、以下のように実装します。

@Controller
class GreetingController {

    @GetMapping("/greeting")
    fun greeting(
        @RequestParam(
            name = "name", required = false, defaultValue = "world"
        ) name: String,
        model: Model
    ): String {
        model.addAttribute("name", name)
        return "index"
    }
}

ルーティングをコントロールするため、追加したクラスに @Controller を付与します。このコントローラクラスには、HTTP リクエストごとにメソッドを追加します。

今回、/greeting の HTTP GET リクエストをコントロールするために、@GetMapping("/greeting") を付与したメソッドを追加します。

このメソッドの引数には、URL クエリパラメータを受け取る name とテンプレートの HTML に値を渡すための model を追加します。URL クエリパラメータは、その名前を "name" とし、省略された場合のデフォルト値は "world" とします。

/greeting の HTTP GET リクエストを受け取ったときには、name の設定値を HTML に渡します（model.addAttribute("name", name)）。

最後に、/greeting で表示する HTML のファイル名 "index" を返します。

次に HTML ファイルを実装します。プロジェクトの src/main/resources/templates 配下に、index.html を追加し、以下のように実装します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>
  </head>
  <body>
    <p data-th-text="'Hello, ' + ${name} + '!'"></p>
  </body>
</html>

HTML では p タグの data-th-text 属性を評価して、その結果を表示します。${name} にはバックエンドのコントローラで設定された値が付与されます。

プロジェクトを実行して、http://localhost:8080/greeting にアクセスすると、ブラウザに Hello, world! と表示されます。また、例えば http://localhost:8080/greeting?name=tatsuro と URL クエリパラメータを渡すと、ブラウザに Hello, tatsuro! と表示されます。