1. 概要

Spring Webフレームワークは、MVC(Model-View-Controller)パターンを中心に構築されているため、アプリケーション内の懸念事項を簡単に分離できます。 これにより、定評のあるJSPテクノロジからさまざまなテンプレートエンジンまで、さまざまなビューテクノロジを使用できるようになります。

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

2. スプリングビューテクノロジー

Spring MVCアプリケーションの懸念が明確に分離されていることを考えると、あるビューテクノロジーから別のビューテクノロジーへの切り替えは、主に構成の問題です。

各ビュータイプをレンダリングするには、各テクノロジーに対応するViewResolverBeanを定義する必要があります。 これは、通常のJSPファイルを返すのと同じ方法で、@Controllerマッピングメソッドからビュー名を返すことができることを意味します。

次のセクションでは、 Javaサーバーページなどの従来のテクノロジーと、Springで使用できるメインのテンプレートエンジンについて説明します。 Thymeleaf Groovy FreeMarker、Jade。

これらのそれぞれについて、標準のSpringアプリケーションと SpringBootを使用して構築されたアプリケーションの両方で必要な構成について説明します。

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

これらのプロパティに基づいて、 SpringBootは必要なViewResolverを自動構成します。

4. Thymeleaf

Thymeleaf は、HTML、XML、テキスト、JavaScript、またはCSSファイルを処理できるJavaテンプレートエンジンです。 他のテンプレートエンジンとは異なり、 Thymeleaf では、テンプレートをプロトタイプとして使用できます。つまり、静的ファイルとして表示できます。

4.1. Mavenの依存関係

Thymeleaf をSpringと統合するには、thymeleafおよびthymeleaf-spring4の依存関係を追加する必要があります。

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

Spring 4プロジェクトがある場合は、thymeleaf-spring4を追加する必要があります。

4.2. スプリング構成

次に、 SpringTemplateEngine Beanと、ビューファイルの場所とタイプを指定する TemplateResolverBeanを必要とする構成を追加する必要があります。

Spring ResourceTemplateResolver は、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;
    }
}

また、タイプThymeleafViewResolverViewResolverBeanが必要です。

@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 テンプレートの使用について詳しくは、SpringMVCの記事Thymeleafを参照してください。

4.4. Thymeleaf in Spring Boot

Spring Boot は、 spring-boot-starter-thymeleaf 依存関係を追加することにより、Thymeleafの自動構成を提供します。

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

明示的な構成は必要ありません。 デフォルトでは、HTMLファイルは resources /templatesの場所に配置する必要があります。

5. FreeMarker

FreeMarker は、 Apache SoftwareFoundationによって構築されたJavaベースのテンプレートエンジンです。 Webページの生成に使用できますが、ソースコード、XMLファイル、構成ファイル、電子メール、およびその他のテキストベースの形式も生成できます。

生成は、FreeMarkerテンプレート言語を使用して記述されたテンプレートファイルに基づいて行われます。

5.1. Mavenの依存関係

プロジェクトでテンプレートの使用を開始するには、freemarker依存関係が必要です。

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

Spring統合の場合、spring-context-support依存関係も必要です。

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

5.2. スプリング構成

FreeMarkerをSpringMVCと統合するには、テンプレートファイルの場所を指定するFreemarkerConfigurerBeanを定義する必要があります。

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

次に、タイプFreeMarkerViewResolverの適切なViewResolverBeanを定義する必要があります。

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

5.3. FreeMarkerテンプレート

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. FreeMarker in Spring Boot

Spring Boot アプリケーションでは、 spring-boot-starter-freemarker 依存関係を使用して、必要な構成を簡素化できます。

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

このスターターは、必要な自動構成を追加します。 テンプレートファイルをresources/templatesフォルダーに配置し始めるだけです。

6. Groovy

Spring MVCビューは、 Groovy Markup TemplateEngineを使用して生成することもできます。 このエンジンはビルダー構文に基づいており、任意のテキスト形式の生成に使用できます。

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をSpringMVCと統合するには、GroovyMarkupConfigurerBeanとタイプGroovyMarkupViewResolverViewResolverを定義する必要があります。

@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言語で書かれており、いくつかの特徴があります。

    • それらはバイトコードにコンパイルされます
    • フラグメントとレイアウトのサポートが含まれています
    • 彼らは国際化のサポートを提供します
    • レンダリングは高速です

「ユーザー登録」フォーム用の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

Spring Boot には、 Groovy Template Engine の自動構成が含まれています。これは、spring-boot-starter-groovy-templates依存関係を含めることで追加されます。

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

テンプレートのデフォルトの場所は/resources /templatesです。

7. Jade4j

Jade4j は、Javascript用の Pug テンプレートエンジン(元々は Jade と呼ばれていました)のJava実装です。 Jade4j テンプレートは、HTMLファイルの生成に使用できます。

7.1. Mavenの依存関係

Spring統合には、spring-jade4j依存関係が必要です。

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

7.2. スプリング構成

SpringでJade4jを使用するには、テンプレートの場所を構成する SpringTemplateLoader Beanと、 JadeConfigurationBeanを定義する必要があります。

@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")

このプロジェクトは、非常に便利なインタラクティブドキュメントも提供します。このドキュメントでは、テンプレートを作成しながら出力を表示できます。

SpringBootJade4jスターターを提供しないため、 Boot プロジェクトでは、上記で定義したものと同じSpring構成を追加する必要があります。

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

これまでに説明したテンプレートエンジンの他に、使用できるテンプレートエンジンがかなりあります。

それらのいくつかを簡単に確認しましょう。

Velocity は古いテンプレートエンジンであり、非常に複雑ですが、Springがバージョン4.3以降の使用を廃止し、Spring5.0.1で完全に削除されているという欠点があります。

JMustache は、 spring-boot-starter-mustache 依存関係を使用して、SpringBootアプリケーションに簡単に統合できるテンプレートエンジンです。

Pebble には、ライブラリ内のSpringおよび SpringBootのサポートが含まれています。

[X13X] Nashorn、などの JSR-223 スクリプトエンジン上で実行される、HandlebarsReactなどの他のテンプレートライブラリも使用できます。使用済み。

9. 結論

この記事では、SpringWebアプリケーションで最も人気のあるテンプレートエンジンのいくつかについて説明しました。

そして、いつものように、例の完全なソースコードはGitHubにあります。