1概要

Spring WebフレームワークはMVC(Model-View-Controller)パターンを中心に構築されているため、アプリケーション内の問題を切り分けやすくなります。

これにより、確立されたJSPテクノロジからさまざまなテンプレートエンジンまで、さまざまなビューテクノロジを使用することができます。

この記事では、Springで使用できる主なテンプレートエンジン、それらの構成、および使用例を見ていきます。


2 Spring Viewテクノロジ

Spring MVCアプリケーションにおける懸念がビューテクノロジ間の切り替えが明確に分離されていることを考えると、主に設定の問題です。

各ビュータイプをレンダリングするには、各テクノロジに対応する

ViewResolver

Beanを定義する必要があります。つまり、通常JSPファイルを返すのと同じ方法で、

@ Controller

マッピングメソッドからビュー名を返すことができます。

次のセクションでは、

Java Server Pages

などのより伝統的なテクノロジと、Springで使用できる主なテンプレートエンジンについて説明します。

これらのそれぞれについて、標準のSpringアプリケーションと

Spring Boot

を使用して構築されたアプリケーションの両方に必要な設定について説明します。


3

Javaサーバページ


JSPは、Javaアプリケーションで最も一般的なビューテクノロジの1つであり、Springですぐにサポートされています。 JSPファイルをレンダリングするために一般的に使用される

ViewResolver

Beanのタイプは

InternalResourceViewResolver

です。

@EnableWebMvc
@Configuration
public class ApplicationConfiguration implements WebMvcConfigurer {
    @Bean
    public ViewResolver jspViewResolver() {
        InternalResourceViewResolver bean = new InternalResourceViewResolver();
        bean.setPrefix("/WEB-INF/views/");
        bean.setSuffix(".jsp");
        return bean;
    }
}

次に、

/WEB-INF/views

の場所にJSPファイルを作成します。

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
    <head>
        <meta http-equiv="Content-Type"
          content="text/html; charset=ISO-8859-1">
        <title>User Registration</title>
    </head>
    <body>
        <form:form method="POST" modelAttribute="user">
            <form:label path="email">Email: </form:label>
            <form:input path="email" type="text"/>
            <form:label path="password">Password: </form:label>
            <form:input path="password" type="password"/>
            <input type="submit" value="Submit"/>
        </form:form>
    </body>
</html>

ファイルを

Spring Boot

アプリケーションに追加する場合は、

ApplicationConfiguration

クラスではなく、

application.properties

ファイルに次のプロパティを定義できます。

spring.mvc.view.prefix:/WEB-INF/views/spring.mvc.view.suffix: .jsp

これらのプロパティに基づいて、

Spring Boot

は必要な

ViewResolver

を自動設定します。


4

Thymeleaf




Thymeleaf

は、HTML、XML、テキスト、JavaScript、またはCSSファイルを処理できるJavaテンプレートエンジンです。他のテンプレートエンジンとは異なり、

Thymeleaf__ではテンプレートをプロトタイプとして使用できます。つまり、テンプレートを静的ファイルと見なすことができます。


4.1. Mavenの依存関係


Thymeleaf

をSpringと統合するには、https://search.maven.org/classic/#search%7Cga%7C1%7Ca%3A%22thymeleaf%22%20AND%20g%3A%22org.thymeleaf%22[依存関係:

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.7.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.7.RELEASE</version>
</dependency>

もしSpring 3プロジェクトがあるのなら、

thymeleaf-spring3

を追加する必要があります。


4.2. スプリング構成

次に、

SpringTemplateEngine

Beanと、ビューファイルの場所と種類を指定する

TemplateResolver

Beanを必要とする設定を追加する必要があります。


SpringResourceTemplateResolver

は、Springのリソース解決メカニズムと統合されています。

@Configuration
@EnableWebMvc
public class ThymeleafConfiguration {

    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(thymeleafTemplateResolver());
        return templateEngine;
    }

    @Bean
    public SpringResourceTemplateResolver thymeleafTemplateResolver() {
        SpringResourceTemplateResolver templateResolver
          = new SpringResourceTemplateResolver();
        templateResolver.setPrefix("/WEB-INF/views/");
        templateResolver.setSuffix(".html");
        templateResolver.setTemplateMode("HTML5");
        return templateResolver;
    }
}

また、

ThymeleafViewResolver

型の

ViewResolver

Beanも必要です。

@Bean
public ThymeleafViewResolver thymeleafViewResolver() {
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(templateEngine());
    return viewResolver;
}


4.3.

Thymeleaf

テンプレート

これで、

WEB-INF/views

の場所にHTMLファイルを追加できます。

<html>
    <head>
        <meta charset="ISO-8859-1"/>
        <title>User Registration</title>
    </head>
    <body>
        <form action="#" th:action="@{/register}"
          th:object="${user}" method="post">
            Email:<input type="text" th:field="** {email}"/>
            Password:<input type="password" th:field="** {password}"/>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>


Thymeleaf

テンプレートは、HTMLテンプレートと構文が非常に似ています。

Springアプリケーションで

Thymeleaf

を使用するときに利用できる機能のいくつかは以下の通りです。

  • フォームの振る舞いを定義するためのサポート

  • フォーム入力をデータモデルにバインドする

  • フォーム入力の検証

  • メッセージソースからの値を表示する

  • レンダリングテンプレートの断片


Thymeleaf

テンプレートの使用方法についての詳細は、記事のリンク:/thymeleaf-in-spring-mvc[Thymeleaf in Spring MVC]を参照してください。

** 4.4.

春のブーツ



Thymeleaf


Spring Boot

はhttps://search.maven.org/classic/#search%7Cga%7C1%7Ca%3A%22spring-boot-starter-thymeleaf%22[

spring-boot-starterを追加することによって

Thymeleaf

の自動設定を提供します。 -thymeleaf

]依存関係:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>1.5.6.RELEASE</version>
</dependency>

明示的な設定は必要ありません。デフォルトでは、HTMLファイルは

resources/templates

の場所に配置する必要があります。


5

FreeMarker




FreeMarker


は、

Apache Software Foundation

によって構築されたJavaベースのテンプレートエンジンです。 Webページだけでなく、ソースコード、XMLファイル、設定ファイル、電子メール、その他のテキストベースの形式の生成にも使用できます。

生成は

FreeMarkerテンプレート言語

を使用して書かれたテンプレートファイルに基づいて行われます。


5.1. Mavenの依存関係

私たちのプロジェクトでテンプレートを使い始めるためには、https://search.maven.org/classic/#search%7Cga%7C1%7Ca%3A%22freemarker%22%20AND%20%%A%22org.freemarker%22が必要です。[

freemarker

]依存関係:

<dependency>
    <groupId>org.freemarker</groupId>
    <artifactId>freemarker</artifactId>
    <version>2.3.23</version>
</dependency>

Springとの統合のためには、https://search.maven.org/classic/#search%7Cga%7C1%7Ca%3A%22spring-context-support%22[

spring-context-support

]依存関係も必要です。

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context-support</artifactId>
    <version>4.3.10.RELEASE</version>
</dependency>


5.2. スプリング構成


FreeMarker

をSpring MVCと統合するには、テンプレートファイルの場所を指定する

FreemarkerConfigurer

beanを定義する必要があります。

@Configuration
@EnableWebMvc
public class FreemarkerConfiguration {

    @Bean
    public FreeMarkerConfigurer freemarkerConfig() {
        FreeMarkerConfigurer freeMarkerConfigurer = new FreeMarkerConfigurer();
        freeMarkerConfigurer.setTemplateLoaderPath("/WEB-INF/views/");
        return freeMarkerConfigurer;
    }
}

次に、

FreeMarkerViewResolver

型の適切な

ViewResolver

Beanを定義する必要があります。

@Bean
public FreeMarkerViewResolver freemarkerViewResolver() {
    FreeMarkerViewResolver resolver = new FreeMarkerViewResolver();
    resolver.setCache(true);
    resolver.setPrefix("");
    resolver.setSuffix(".ftl");
    return resolver;
}


5.3.

無料マーカー

テンプレート


WEB-INF/views

の場所にある

FreeMarker

を使用してHTMLテンプレートを作成できます。

<#import "/spring.ftl" as spring/>
<html>
    <head>
        <meta charset="ISO-8859-1"/>
        <title>User Registration</title>
    </head>
    <body>
        <form action="register" method="post">
            <@spring.bind path="user"/>
            Email: <@spring.formInput "user.email"/>
            Password: <@spring.formPasswordInput "user.password"/>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

上記の例では、フォーム入力をデータモデルにバインドするなど、

FreeMarker

のフォームを操作するためにSpringによって定義された一連のマクロをインポートしました。

また、

FreeMarkerテンプレート言語

には、コレクション、フロー制御構造、論理演算子、文字列のフォーマットと解析、数値、その他多数の機能を扱うためのタグ、ディレクティブ、および式が多数含まれています。


5.4.

Spring Boot




FreeMarker


Spring Boot

アプリケーションでは、https://search.maven.org/classic/#search%7Cga%7C1%7Ca%3A%22spring-boot-starter-freemarker%22[

spring-を使用して必要な設定を単純化できます。 boot-starter-freemarker

]依存関係:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
    <version>1.5.6.RELEASE</version>
</dependency>

このスターターは必要な自動設定を追加します。テンプレートファイルを

resources/templates

フォルダに配置し始めるだけです。


6.

Groovy


Spring MVCビューはhttp://groovy-lang.org/templating.html#

the

markuptemplateengine[Groovy Markup Template Engine]を使用して生成することもできます。このエンジンはビルダー構文に基づいており、あらゆるテキストフォーマットの生成に使用できます。


6.1. Mavenの依存関係



groovy-templates


依存関係を

pom.xml

に追加する必要があります。

<dependency>
    <groupId>org.codehaus.groovy</groupId>
    <artifactId>groovy-templates</artifactId>
    <version>2.4.12</version>
</dependency>


6.2. スプリング構成


Markup Template Engine

とSpring MVCを統合するには、

GroovyMarkupConfigurer

Beanと

GroovyMarkupViewResolver

タイプの

ViewResolver

を定義する必要があります。

@Configuration
@EnableWebMvc
public class GroovyConfiguration {

    @Bean
    public GroovyMarkupConfigurer groovyMarkupConfigurer() {
        GroovyMarkupConfigurer configurer = new GroovyMarkupConfigurer();
        configurer.setResourceLoaderPath("/WEB-INF/views/");
        return configurer;
    }

    @Bean
    public GroovyMarkupViewResolver thymeleafViewResolver() {
        GroovyMarkupViewResolver viewResolver = new GroovyMarkupViewResolver();
        viewResolver.setSuffix(".tpl");
        return viewResolver;
    }
}


6.3.

グルーヴィーマークアップ

テンプレート

テンプレートはGroovy言語で書かれており、いくつかの特徴があります。

  • バイトコードにコンパイルされています

  • それらはフラグメントとレイアウトのサポートを含みます

  • 国際化のサポートを提供します

  • レンダリングが速い

データバインディングを含む「ユーザー登録」フォーム用のGroovyテンプレートを作成しましょう。

yieldUnescaped '<!DOCTYPE html>'
html(lang:'en') {
    head {
        meta('http-equiv':'"Content-Type" ' +
          'content="text/html; charset=utf-8"')
        title('User Registration')
    }
    body {
        form (id:'userForm', action:'register', method:'post') {
            label (for:'email', 'Email')
            input (name:'email', type:'text', value:user.email?:'')
            label (for:'password', 'Password')
            input (name:'password', type:'password', value:user.password?:'')
            div (class:'form-actions') {
                input (type:'submit', value:'Submit')
            }
        }
    }
}


6.4.

Groovyテンプレートエンジン


スプリングブート



Spring Boot

には

Groovyテンプレートエンジン

の自動設定が含まれています。 %22[spring-boot-starter-groovy-templates]__依存関係:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-groovy-templates</artifactId>
    <version>1.5.6.RELEASE</version>
</dependency>

テンプレートのデフォルトの場所は

/resources/templates

です。


7.

Jade4j



Jade4j

は、JavaScript用のhttps://pugjs.org/[

Pug

]テンプレートエンジン(元々

Jade

として知られている)のJava実装です。 HTMLファイルの生成には

Jade4j

テンプレートを使用できます。


7.1. Mavenの依存関係

Springとの統合には、https://search.maven.org/classic/#search%7Cga%7C1%7Ca%3A%22spring-jade4j%22[spring-jade4j]依存関係が必要です。

<dependency>
    <groupId>de.neuland-bfi</groupId>
    <artifactId>spring-jade4j</artifactId>
    <version>1.2.5</version>
</dependency>


7.2. スプリング構成

Springで

Jade4j

を使用するには、テンプレートの場所を設定する

SpringTemplateLoader

Beanと

JadeConfiguration

Beanを定義する必要があります。

@Configuration
@EnableWebMvc
public class JadeTemplateConfiguration {

    @Bean
    public SpringTemplateLoader templateLoader() {
        SpringTemplateLoader templateLoader
          = new SpringTemplateLoader();
        templateLoader.setBasePath("/WEB-INF/views/");
        templateLoader.setSuffix(".jade");
        return templateLoader;
    }

    @Bean
    public JadeConfiguration jadeConfiguration() {
        JadeConfiguration configuration
          = new JadeConfiguration();
        configuration.setCaching(false);
        configuration.setTemplateLoader(templateLoader());
        return configuration;
    }
}

次に、通常の

ViewResolver

Bean、この場合は

JadeViewResolver

型が必要です。

@Bean
public ViewResolver viewResolver() {
    JadeViewResolver viewResolver = new JadeViewResolver();
    viewResolver.setConfiguration(jadeConfiguration());
    return viewResolver;
}


7.3.

Jade4j

テンプレート


Jade4j

テンプレートは、使いやすい空白に敏感な構文によって特徴付けられます。

doctype html
html
  head
    title User Registration
  body
    form(action="register" method="post" )
      label(for="email") Email:
      input(type="text" name="email")
      label(for="password") Password:
      input(type="password" name="password")
      input(type="submit" value="Submit")

このプロジェクトには、非常に便利なhttp://naltatis.github.io/jade-syntax-docs/[対話型ドキュメント]も用意されています。ここでは、作成したテンプレートの出力を表示できます。


Spring Boot



Jade4j

スターターを提供しないので、

Boot

プロジェクトでは、上で定義したのと同じSpring構成を追加する必要があります。


8その他のテンプレートエンジン

これまでに説明したテンプレートエンジンの他に、使用可能なものがまだいくつかあります。

簡単に見てみましょう。



Velocity


は古いテンプレートエンジンです。これは非常に複雑ですが、Springがバージョン4.3以降その使用を非推奨にしたという欠点があります。



JMustache


は、

spring-boot-starter-moustache

依存関係を使用してSpring Bootアプリケーションに簡単に統合できるテンプレートエンジンです。



Pebble


は、そのライブラリ内でSpringと

Spring Boot

をサポートしています。



http://のような


JSR-223

スクリプトエンジンの上で実行される


http://handlebarsjs.com/





https://facebook.github.io/react/


のような他のテンプレートライブラリ/openjdk.java.net/projects/nashorn/[Nashorn],

も使用できます。


9結論

この記事では、Spring Webアプリケーション用の最も人気のあるテンプレート・エンジンをいくつか紹介しました。

そしていつものように、例の完全なソースコードはhttps://github.com/eugenp/tutorials/tree/master/spring-mvc-simple[GitHubに載っています]。