Thymeleaf Web 画面の作成

このガイドでは、Spring を使用して "Hello, World" Web サイトを作成する手順を説明します。

構築するもの

静的なホームページを持ち、HTTP GET リクエストを受け入れるアプリケーションを作成します: http://localhost:8080/greeting。

HTML を表示する Web ページで応答します。HTML の本文には、"Hello, World!" という挨拶が含まれます。

クエリ文字列のオプションの name パラメーターを使用して、グリーティングをカスタマイズできます。その場合、URL は http://localhost:8080/greeting?name=User になります。

name パラメーター値は、World のデフォルト値をオーバーライドし、"Hello, User!" に変更されるコンテンツによるレスポンスに反映されます

必要なもの

約 15 分
Eclipse STS や IntelliJ IDEA のような任意の IDE または VSCode のようなテキストエディター
Java 17 以降
Gradle 7.5+ (英語) または Maven 3.5+ [Apache] (英語)
コードを直接 IDE にインポートすることもできます。

本ガイドの完成までの流れ

ほとんどの Spring 入門ガイドと同様に、最初から始めて各ステップを完了するか、すでに慣れている場合は基本的なセットアップステップをバイパスできます。いずれにしても、最終的に動作するコードになります。

最初から始めるには、Spring Initializr から開始に進みます。

基本をスキップするには、次の手順を実行します。

このガイドのソースリポジトリをダウンロードして解凍するか、Git を使用してクローンを作成してください: git clone https://github.com/spring-guides/gs-serving-web-content.git
gs-serving-web-content/initial に cd
Web コントローラーを作成するにジャンプしてください。

完了したときは、gs-serving-web-content/complete のコードに対して結果を確認できます。

Spring Initializr から開始

IDE を使用する場合はプロジェクト作成ウィザードを使用します。IDE を使用せずにコマンドラインなどで開発する場合は、この事前に初期化されたプロジェクトからプロジェクトを ZIP ファイルとしてダウンロードできます。このプロジェクトは、このチュートリアルの例に合うように構成されています。

プロジェクトを手動で初期化するには:

IDE のメニューまたはブラウザーから Spring Initializr を開きます。アプリケーションに必要なすべての依存関係を取り込み、ほとんどのセットアップを行います。
Gradle または Maven のいずれかと、使用する言語を選択してください。
依存関係をクリックし、Spring Web、Thymeleaf、Spring Boot DevTools を選択します。
生成をクリックします。
結果の ZIP ファイルをダウンロードします。これは、選択して構成された Web アプリケーションのアーカイブです。

Eclipse や IntelliJ のような IDE は新規プロジェクト作成ウィザードから Spring Initializr の機能が使用できるため、手動での ZIP ファイルのダウンロードやインポートは不要です。

プロジェクトを GitHub からフォークして、IDE または他のエディターで開くこともできます。

Web コントローラーを作成する

Spring の Web サイト構築手法では、HTTP リクエストはコントローラーによって処理されます。コントローラーは @Controller (Javadoc) アノテーションで簡単に識別できます。次の例では、GreetingController が /greeting への GET リクエストを処理し、View (Javadoc) （この場合は greeting）の名前を返します。View は HTML コンテンツのレンダリングを担当します。コントローラーの一覧を以下に示します。

Java

package com.example.servingwebcontent;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class GreetingController {

	@GetMapping("/greeting")
	public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
		model.addAttribute("name", name);
		return "greeting";
	}

}

Kotlin

package com.example.servingwebcontent

import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.ui.set
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RequestParam

@Controller
class GreetingController {

    @GetMapping("/greeting")
    fun greeting(
        @RequestParam(name = "name", required = false, defaultValue = "World") name: String,
        model: Model
    ): String {
        model["name"] = name
        return "greeting"
    }
}

このコントローラーは簡潔でシンプルですが、多くのことを示しています。段階的に分解していきましょう。

@GetMapping アノテーションは、/greeting への HTTP GET リクエストが greeting() メソッドにマップされることを保証します。

@RequestParam (Javadoc) は、クエリ文字列パラメーター name の値を greeting() メソッドの name パラメーターにバインドします。このクエリ文字列パラメーターは required ではありません。リクエストにない場合、World の defaultValue が使用されます。name パラメーターの値が Model (Javadoc) オブジェクトに追加され、最終的にビューテンプレートからアクセスできるようになります。

メソッド本体の実装は、ビューテクノロジー（この場合は Thymeleaf (英語) ）に依存して、HTML のサーバー側レンダリングを実行します。Thymeleaf は、greeting.html テンプレートを解析し、th:text 式を評価して、コントローラーに設定された ${name} パラメーターの値をレンダリングします。次のリスト（src/main/resources/templates/greeting.html から）は、greeting.html テンプレートを示しています。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head> 
    <title>Getting Started: Serving Web Content</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="|Hello, ${name}!|" />
</body>
</html>

クラスパスに Thymeleaf が含まれていることを確認してください（アーティファクト座標: org.springframework.boot:spring-boot-starter-thymeleaf）。GitHub の "initial"、"complete"、"initial-kotlin"、"complete-kotlin" サンプルにはすでに含まれています。

Spring Boot Devtools

Web アプリケーション開発でよくあるのは、コードを変更し、アプリケーションを再起動し、ブラウザーをリフレッシュして変更を確認するという作業です。この一連のプロセスには多くの時間がかかります。このリフレッシュサイクルを高速化するために、Spring Boot は spring-boot-devtools という便利なモジュールを提供しています。Spring Boot Devtools:

ホットスワップを有効にします。
テンプレートエンジンを切り替えて、キャッシュを無効にします。
LiveReload がブラウザーを自動的にリフレッシュできるようにします。
本番ではなく開発に基づいたその他の合理的なデフォルト。

アプリケーションの実行

Spring Initializr はアプリケーションクラスを自動的に作成します。この場合、Spring Initializr によって提供されるクラスをさらに変更する必要はありません。以下にアプリケーションクラスを示します。

Java

package com.example.servingwebcontent;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ServingWebContentApplication {

    public static void main(String[] args) {
        SpringApplication.run(ServingWebContentApplication.class, args);
    }

}

Kotlin

package com.example.servingwebcontent

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

@SpringBootApplication
class ServingWebContentApplication

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

@SpringBootApplication は、次のすべてを追加する便利なアノテーションです。

@Configuration: アプリケーションコンテキストの Bean 定義のソースとしてクラスにタグを付けます。
@EnableAutoConfiguration: クラスパス設定、他の Bean、さまざまなプロパティ設定に基づいて Bean の追加を開始するよう Spring Boot に指示します。例: spring-webmvc がクラスパスにある場合、このアノテーションはアプリケーションに Web アプリケーションとしてフラグを立て、DispatcherServlet のセットアップなどの主要な動作をアクティブにします。
@ComponentScan: Spring に、com/example パッケージ内の他のコンポーネント、構成、サービスを探して、コントローラーを検出させるように指示します。

main() メソッドは、Spring Boot の SpringApplication.run() メソッドを使用してアプリケーションを起動します。XML が 1 行もないことに気付きましたか？ web.xml ファイルもありません。この Web アプリケーションは 100% 純粋な Java であり、接続機能やインフラストラクチャの構成に対処する必要はありませんでした。

実行可能 JAR を構築する

コマンドラインから Gradle または Maven を使用してアプリケーションを実行できます。必要なすべての依存関係、クラス、リソースを含む単一の実行可能 JAR ファイルを構築して実行することもできます。実行可能な jar を構築すると、開発ライフサイクル全体、さまざまな環境などで、アプリケーションとしてサービスを簡単に提供、バージョン管理、デプロイできます。

Gradle を使用する場合、./gradlew bootRun を使用してアプリケーションを実行できます。または、次のように、./gradlew build を使用して JAR ファイルをビルドしてから、JAR ファイルを実行できます。

java -jar build/libs/gs-serving-web-content-0.0.1-SNAPSHOT.jar

Maven を使用する場合、./mvnw spring-boot:run を使用してアプリケーションを実行できます。または、次のように、./mvnw clean package で JAR ファイルをビルドしてから、JAR ファイルを実行できます。

java -jar target/gs-serving-web-content-0.0.1-SNAPSHOT.jar

ロギング出力が表示されます。アプリケーションは数秒以内に稼働します。

アプリケーションをテストする

Web サイトが稼働したら、http://localhost:8080/greeting にアクセスしてください。"Hello, World!" と表示されるはずです。

http://localhost:8080/greeting?name=User にアクセスして、name クエリ文字列パラメーターを提供します。メッセージが "Hello, World!" から "Hello, User!" に変化することに注目してください。

この変更により、コントローラー内の @RequestParam (Javadoc) 構成が期待どおりに動作していることが確認できます。name パラメーターにはデフォルト値として World が設定されていますが、クエリ文字列によって明示的に上書きすることも可能です。

ホームページを追加する

HTML、JavaScript、CSS などの静的リソースは、ソースコード内の適切な場所にドロップすることで、Spring Boot アプリケーションから提供できます。デフォルトでは、Spring Boot は /static (または /public) のクラスパス内のリソースから静的コンテンツを提供します。index.html リソースは特別です。存在する場合、「ウェルカムページ」として使用され、ルートリソース (つまり http://localhost:8080/) として提供されることを意味します。その結果、次のファイルを作成する必要があります ( src/main/resources/static/index.html にあります)。

<!DOCTYPE HTML>
<html>
<head> 
    <title>Getting Started: Serving Web Content</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p>Get your greeting <a href="/greeting">here</a></p>
</body>
</html>

アプリケーションを再起動すると、http://localhost:8080/ に HTML が表示されます。

要約

おめでとう！ Spring を使用して Web ページを開発しました。

コードを入手する

リポジトリに移動

Thymeleaf Web 画面の作成

構築するもの

必要なもの

本ガイドの完成までの流れ

Spring Initializr から開始

Web コントローラーを作成する

Spring Boot Devtools

アプリケーションの実行

実行可能 JAR を構築する

アプリケーションをテストする

ホームページを追加する

要約

関連事項

コードを入手する