このガイドでは、Spring を使用して Web フォームを作成および送信するプロセスを順を追って説明します。

構築するもの

このガイドでは、次の URL からアクセスできる Web フォームを作成します。 http://localhost:8080/greeting

このページをブラウザーで表示すると、フォームが表示されます。id および content フォームフィールドに入力して、挨拶を送信できます。フォームが送信されると、結果ページが表示されます。

必要なもの

このガイドを完了する方法

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

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

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

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

Spring Initializr から開始

すべての Spring アプリケーションは、Spring Initializr (英語) (Eclipse の場合は Spring スタータープロジェクト) から始める必要があります。Initializr は、アプリケーションに必要なすべての依存関係をすばやく取り込む方法を提供し、多くの設定を行います。この例では、Spring、Web および Thymeleaf の依存関係が必要です。

必要な依存関係を含む Maven ビルドファイルを Spring Initializr (英語) から直接取得できます。次のリストは、Maven を選択したときに作成される pom.xml ファイルを示しています。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.4.2</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>handling-form-submission</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>handling-form-submission</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

必要な依存関係を含む Gradle ビルドファイルを Spring Initializr (英語) から直接取得できます。次のリストは、Gradle を選択したときに作成される build.gradle ファイルを示しています。

plugins {
	id 'org.springframework.boot' version '2.4.2'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

test {
	useJUnitPlatform()
}

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

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

package com.example.handlingformsubmission;

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

@Controller
public class GreetingController {

  @GetMapping("/greeting")
  public String greetingForm(Model model) {
    model.addAttribute("greeting", new Greeting());
    return "greeting";
  }

  @PostMapping("/greeting")
  public String greetingSubmit(@ModelAttribute Greeting greeting, Model model) {
    model.addAttribute("greeting", greeting);
    return "result";
  }

}

このコントローラーは簡潔でシンプルですが、多くのことが行われています。このセクションの残りの部分では、ステップごとに分析します。

マッピングアノテーションを使用すると、HTTP リクエストを特定のコントローラーメソッドにマッピングできます。このコントローラーの 2 つのメソッドは、両方とも /greeting にマップされます。@RequestMapping を使用できます(デフォルトでは、GETPOST などのすべての HTTP 操作をマップします)。ただし、この場合、greetingForm() メソッドは @GetMapping を使用して GET に特別にマップされ、greetingSubmit() は @PostMapping を使用して POST にマップされます。このマッピングにより、コントローラーは /greeting エンドポイントへのリクエストを区別できます。

greetingForm() メソッドは、Model (Javadoc) オブジェクトを使用して、新しい Greeting をビューテンプレートに公開します。(src/main/java/com/example/handlingformsubmission/Greeting.java からの)次のコードの Greeting オブジェクトには、greeting ビューのフォームフィールドに対応し、フォームから情報をキャプチャーするために使用される id や content などのフィールドが含まれています。

package com.example.handlingformsubmission;

public class Greeting {

  private long id;
  private String content;

  public long getId() {
    return id;
  }

  public void setId(long id) {
    this.id = id;
  }

  public String getContent() {
    return content;
  }

  public void setContent(String content) {
    this.content = content;
  }

}

メソッド本体の実装は、ビュー名(greeting)をレンダリングするテンプレートに変換することにより、HTML のサーバー側レンダリングを実行するビュー技術に依存しています。この場合、Thymeleaf (英語) を使用します。これは、greeting.html テンプレートを解析し、さまざまなテンプレート式を評価してフォームをレンダリングします。次のリスト(src/main/resources/templates/greeting.html から)は、greeting テンプレートを示しています。

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head> 
    <title>Getting Started: Handling Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<h1>Form</h1>
    <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
    	<p>Id: <input type="text" th:field="*{id}" /></p>
        <p>Message: <input type="text" th:field="*{content}" /></p>
        <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
    </form>
</body>
</html>

th:action="@{/greeting}" 式は /greeting エンドポイントに POST するようにフォームに指示し、th:object="${greeting}" 式はフォームデータの収集に使用するモデルオブジェクトを宣言します。th:field="{id}" および th:field="{content}" で表される 2 つのフォームフィールドは、Greeting オブジェクトのフィールドに対応します。

これは、フォームを表示するためのコントローラー、モデル、ビューをカバーしています。これで、フォームを送信するプロセスを確認できます。前述のように、フォームは POST 呼び出しを使用して /greeting エンドポイントに送信します。greetingSubmit() メソッドは、フォームによって入力された Greeting オブジェクトを受け取ります。Greeting は @ModelAttribute であるため、受信フォームのコンテンツにバインドされます。また、送信されたデータは、名前(デフォルトではメソッドパラメーターの名前、この場合は greeting)で参照することにより、result ビューでレンダリングできます。id は <p th:text="'id: ' + ${greeting.id}" /> 式でレンダリングされます。同様に、content は <p th:text="'content: ' + ${greeting.content}" /> 式でレンダリングされます。次のリスト(src/main/resources/templates/result.html から)は、結果テンプレートを示しています。

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head> 
    <title>Getting Started: Handling Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<h1>Result</h1>
    <p th:text="'id: ' + ${greeting.id}" />
    <p th:text="'content: ' + ${greeting.content}" />
    <a href="/greeting">Submit another message</a>
</body>
</html>

わかりやすくするために、この例では、フォームのレンダリングと送信されたデータの表示に 2 つの個別のビューテンプレートを使用しています。ただし、両方の目的に単一のビューを使用できます。

アプリケーションを実行可能にする

このサービスは、デプロイ用の従来の WAR ファイルとして外部アプリケーションサーバーにパッケージ化できますが、より簡単なアプローチは、スタンドアロンアプリケーションを作成することです。古き良き Java main() メソッドによって駆動される単一の実行可能な JAR ファイルにすべてをパッケージ化します。その過程で、外部インスタンスにデプロイする代わりに、Tomcat サーブレットコンテナーを HTTP ランタイムとして埋め込むための Spring のサポートを使用します。次のリスト(src/main/java/com/example/handlingformsubmission/HandlingFormSubmissionApplication.java から)は、アプリケーションクラスを示しています。

package com.example.handlingformsubmission;

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

@SpringBootApplication
public class HandlingFormSubmissionApplication {

  public static void main(String[] args) {
    SpringApplication.run(HandlingFormSubmissionApplication.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-handling-form-submission-0.1.0.jar

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

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

ロギング出力が表示されます。サービスは数秒以内に起動して実行されるはずです。

サービスをテストする

Web サイトが実行されたため、http://localhost:8080/greeting にアクセスすると、次のフォームが表示されます。

Form

ID とメッセージを送信して結果を確認します。

Result

要約

おめでとう! Spring を使用して、フォームを作成して送信しました。

関連事項

次のガイドも役立ちます。

新しいガイドを作成したり、既存のガイドに貢献したいですか? 投稿ガイドラインを参照してください: GitHub (英語)

すべてのガイドは、コード用の ASLv2 ライセンス、およびドキュメント用の Attribution、NoDerivatives クリエイティブコモンズライセンス (英語) でリリースされています。