spring-view-component

Spring ViewComponent は、型安全で再利用可能かつカプセル化されたサーバーサイドレンダリングUIコンポーネントを作成することを可能にします。

##### 目次

• ViewComponentとは？
• ViewComponentのレンダリング
• ViewComponentのネスト
• ローカル開発設定
• 本番環境設定
• インストール
• 技術的実装

ViewComponentとは？

ViewComponentは、テンプレートに必要なロジックを単一のクラスに統合し、 理解しやすい一貫したオブジェクトを生み出します。 （出典: ViewComponent for Rails）

Spring ViewComponentは、テンプレートのコンテキストを定義するSpring Beanです：

@ViewComponent
public class SimpleViewComponent {
  public record SimpleView(String helloWorld) implements ViewContext {
  }
  public SimpleView render() {
    return new SimpleView("Hello World");
  }
}

ViewContextインターフェースを実装するレコードを作成してコンテキストを定義します

次に、クラスに@ViewComponentアノテーションを追加し、SimpleViewレコードを返すメソッドを定義します

// SimpleViewComponent.kt
@ViewComponent
class SimpleViewComponent {
    fun render() = SimpleView("Hello World")
    data class SimpleView(val helloWorld: String) : ViewContext
}

ViewComponentには常に対応するHTMLテンプレートが必要です。 テンプレートはSimpleViewComponent.[html/jte/kte]で定義します。ViewComponentクラスと同じパッケージに置きます。

Thymeleafを使用することもできます。

```html // SimpleViewComponent.html

または JTE

または KTE

ViewComponentをレンダリングする
次に、コントローラーでrenderメソッドを呼び出してテンプレートをレンダリングできます。

    
Java

@Controller public class SimpleController {

private final SimpleViewComponent simpleViewComponent;

public TestController(SimpleViewComponent simpleViewComponent) { this.simpleViewComponent = simpleViewComponent; }

@GetMapping("/") ViewContext simple() { return simpleViewComponent.render(); } }

    
Kotlin

@GetMapping("/") fun simpleComponent() = simpleViewComponent.render() }

例
すぐに始めたい場合は、すべての可能な言語の組み合わせの例がこちらにあります：
例
ViewComponentsのネスト：
レコードのプロパティとしてViewContextを渡すことでコンポーネントをネストできます。
レンダーメソッドのパラメータとしても持っていれば、簡単にレイアウトを作成できます：

    
Java

@ViewComponent public class LayoutViewComponent {

private record LayoutView(ViewContext nestedViewComponent) implements ViewContext {

}

public ViewContext render(ViewContext nestedViewComponent) { return new LayoutView(nestedViewComponent); } }

    
Kotlin

fun render(nestedViewComponent: ViewContext) = LayoutView(nestedViewComponent)

}

Thymeleaf
Thymeleafでは、渡されたViewComponentをview:component="${viewContext}"属性でレンダリングします。

JTE / KTE
JTE/KTEでは、レイアウトビューのレコードを式内で直接呼び出すことができます：

ローカル開発構成
テンプレートのホットリロードを開発環境で有効にするには、Spring Boot DevTools を依存関係に含める必要があります。

インストール
Thymeleaf:
Maven Centralの最新バージョン

    
Gradle

}

    
Maven

JTE
Maven Centralの最新バージョン


    
Gradle

implementation("de.tschuehly:spring-view-component-jte:0.9.1")

jte{ generate() sourceDirectory.set(kotlin.io.path.Path("src/main/java")) }

    
Maven

KTE
Maven CentralのLATEST_VERSION


    
Gradle

plugins { id("gg.jte.gradle") version ("3.1.12") }

dependencies { implementation("de.tschuehly:spring-view-component-kte:0.9.1") }

jte { generate() sourceDirectory.set(kotlin.io.path.Path("src/main/kotlin")) } ```

技術的実装

Spring ViewComponentはAspectJのアスペクトを使用してSpring MVCコンテナをラップし、自動的にテンプレートを解決してViewContextをModelAndViewContainerに配置します

--- Tranlated By Open Ai Tx | Last indexed: 2026-03-26 ---