🍇

Hilla 1.3 による Spring Boot と React のタイプセーフな通信

2022/12/17に公開

Java

はじめに

Hilla framework が v1.3 にて React に対応しました。誰かが触れている気配がないので記事にしてみました。
以下は公式のブログ記事です。

Hilla framework とは

以前、Hilla framework について以下の記事を書きました。

Hilla の最大の特徴は、TypeScript クライアントのコード自動生成により、BFF(Java)とフロントエンド(TypeScript)でタイプセーフな通信を実現している点です。
そして Vaadin 製の UI コンポーネントが提供されています。

v1.3 で React に対応

これまで Hilla のフロントエンドは、Lit という Web Components 用のフレームワークを利用していました。これが v1.3 で React 用の UI コンポーネントが提供され、React をベースとした開発ができるようになりました。Spring Boot を BFF にした SPA の場合、SSR とか不要になるので Lit でも良いかと思いますが、React の方がエンジニアを集めやすいですよね。。

ちょうどメルカリさんでも Web Components をやめて React にという記事が出ていました。

これはデジュリスタンダードがデファクトスタンダードに勝てない構図でしょうか。。

タイプセーフな通信

最大の特徴であるタイプセーフな通信については、Lit でも React でも変わらないと思います。
以下のツイートの動画を最大化して見て頂きたいです。BFF(Spring Boot) の型情報の修正が、フロントエンド(React)にリアルタイムで連携されている事が分かると思います。

次に簡単にですがコードの例を掲載します。

BFF(Spring Boot)

ContactsEndpoint.java

// Endpoint アノテーションを付けることにより public method が TypeScript から呼び出せるようになります。
@Endpoint
@AnonymousAllowed
class ContactsEndpoint {
 private ContactRepository repo;

 ContactsEndpoint(ContactRepository repo) {
   this.repo = repo;
 }

 public List<Contact> findAll() {
   return repo.findAll();
 }
}

フロントエンド(React)

ContactsList.tsx

import { useEffect, useState } from 'react';
// Hill によって自動生成された TypeScript の型とメソッドです。開発中の修正も同期されます。
import { ContactsEndpoint } from 'Frontend/generated/endpoints';
import Contact from 'Frontend/generated/com/example/application/data/entity/Contact';

export default function ContactsList() {
 const [contacts, setContacts] = useState<Contact[]>([]);

 useEffect(() => {
   // 自動生成されたコードを利用し、BFF から情報を取得しています
   ContactsEndpoint.findAll().then(setContacts);
 }, []);

 return (
   <div className="contact-list">
     <h2>Contacts:</h2>
     <ul>
       {contacts.map((contact) => (
         <li key={contact.id}>
           {contact.firstName} {contact.lastName}
         </li>
       ))}
     </ul>
   </div>
 );
}

おわりに

興味を持った方は、Quick start, Basics tutorial を実行してみて頂ければと思います。

ギョーミーなシステムなどは社内資産の利用のため Java, Spring Boot で開発するところは多いのでないでしょうか。そういう場面で Hilla は有効かと思います。開発体験は良いと思います。
残念な点は、ビルドが maven のみで Gradle に対応していない点です。Spring Initializr もデフォルトが Gradle になったところなので Gradle に対応して頂きたいところです。

以上、みんな使ってみて！