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!" に変更されるコンテンツによるレスポンスに反映されます

必要なもの

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

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

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

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

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

Spring Initializr から開始

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

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

  1. IDE のメニューまたはブラウザーから Spring Initializr を開きます。アプリケーションに必要なすべての依存関係を取り込み、ほとんどのセットアップを行います。

  2. Gradle または Maven のいずれかと、使用する言語を選択します。このガイドは、Java を選択したことを前提としています。

  3. 依存関係をクリックし、Spring WebThymeleafSpring Boot DevTools を選択します。

  4. 生成をクリックします。

  5. 結果の ZIP ファイルをダウンロードします。これは、選択して構成された Web アプリケーションのアーカイブです。

EclipseIntelliJ のような IDE は新規プロジェクト作成ウィザードから Spring Initializr の機能が使用できるため、手動での ZIP ファイルのダウンロードやインポートは不要です。
プロジェクトを Github からフォークして、IDE または他のエディターで開くこともできます。

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

Web サイトを構築する Spring のアプローチでは、HTTP リクエストはコントローラーによって処理されます。@Controller (Javadoc) アノテーションによってコントローラーを簡単に識別できます。次の例では、GreetingController は View (Javadoc) (この場合は greeting)の名前を返すことにより、/greeting の GET リクエストを処理します。View は、HTML コンテンツのレンダリングを担当します。次のリスト(src/main/java/com/example/servingwebcontent/GreetingController.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";
	}

}

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

@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 の「初期」および「完全」サンプルにはすでに存在しています。

Spring Boot Devtools

Web アプリケーション開発の一般的な機能は、変更のコーディング、アプリケーションの再起動、変更を表示するためのブラウザーのリフレッシュです。このプロセス全体が多くの時間を消費する可能性があります。このリフレッシュサイクルを高速化するために、Spring Boot は spring-boot-devtools と呼ばれる便利なモジュールを提供しています。Spring Boot Devtools:

  • ホットスワップを有効にします。

  • テンプレートエンジンを切り替えて、キャッシュを無効にします。

  • LiveReload がブラウザーを自動的にリフレッシュできるようにします。

  • 本番ではなく開発に基づいたその他の合理的なデフォルト。

アプリケーションの実行

Spring Initializr は、アプリケーションクラスを作成します。この場合、Spring Initializr によって提供されるクラスをさらに変更する必要はありません。次のリスト(src/main/java/com/example/servingwebcontent/ServingWebContentApplication.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);
    }

}

@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.1.0.jar

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

java -jar target/gs-serving-web-content-0.1.0.jar
ここで説明する手順は、実行可能な JAR を作成します。クラシック WAR ファイルを作成することもできます。

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

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

Web サイトが実行されたため、http://localhost:8080/greeting にアクセスすると、"Hello, World!" が表示されます。

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

この変更は、GreetingController の @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 ページを開発しました。

関連事項

コードを入手する