JSON Formsでフォーム作りを楽したい

みなさん、こんにちは。
業務の中で内部向けのツールや管理画面を作ることがあるのですが、その度にフォーム画面とかもうちょっと簡単に作れないものかと思うことがありました。
データのやり取りはjsonですしある程度型は決まっている。そこまで凝ったUIはいらないので数値、文字列、カレンダー、選択項目くらいをjsonの型から自動的に作ってくれる何かが欲しいと思っていたらありました、、、それがJSON Formsです。
今回はこのJSON Formsを使ってどれくらい簡単にフォームが作れるのか試してみたいと思います。

JSON Forms

JSON FormsはフォームベースのUIを構築するためのフレームワークです。
JSON Schemaを用意することで簡単にJSON データに対応したフォーム画面を作ることができます。
React, Angular, Vueの各UIフレームワークにも対応しておりMaterial UIなどの表示にも対応してます。コアライブラリが分離されてるので自前のレンダラーも作ることができるようです。

What is JSON Forms? - JSON Forms

下準備

JSON Formsを試すためにまずはSPA＋APIサーバーを想定してサーバー側の準備をします。
今回はサーバー側をJavaで実装します。
以下のようなデータを想定してフォームを作ってみます。

public class MyEntity {
    public String id;
    public int age;
    public LocalDate birthDay;
    public String name;
    public MyEnum type;
    public String email; 
    public boolean flag;

}

JSON Schema

JSON FormsにはJSON Schemaが必要なのでスキーマを提供するAPIを用意してみます。

import com.fasterxml.jackson.databind.JsonNode;
import com.github.victools.jsonschema.generator.OptionPreset;
import com.github.victools.jsonschema.generator.SchemaGenerator;
import com.github.victools.jsonschema.generator.SchemaGeneratorConfig;
import com.github.victools.jsonschema.generator.SchemaGeneratorConfigBuilder;
import com.github.victools.jsonschema.generator.SchemaVersion;
import jakarta.ws.rs.GET;
import jakarta.ws.rs.Path;
import jakarta.ws.rs.core.Response;

@Path("/meta")
public class MetaResource {
    static {
        SchemaGeneratorConfigBuilder configBuilder = new SchemaGeneratorConfigBuilder(SchemaVersion.DRAFT_2020_12,OptionPreset.PLAIN_JSON);
        SchemaGeneratorConfig config = configBuilder.build();
        generator = new SchemaGenerator(config);
    }
    private static SchemaGenerator generator;

    @Path("entity_a")
    @GET
    public Response getEntityAMetaInfo() {
        //jsonschema 生成
        JsonNode jsonShcema = generator.generateSchema(MyEntity.class);
        return Response.ok(jsonShcema.toPrettyString()).build();
    }
}

JSON Shcema生成ライブラリも言語ごとにいろいろあるみたいなので簡単に生成できます。
これでサーバー側の準備は終わりです。

クライアントコード

最後にこれらを利用して実際にフォームを生成するクライアントのコードを用意します。今回はReactで試してみます。

import React, { useEffect, useState } from 'react';
import {JsonForms} from '@jsonforms/react'
import './App.css';
import { materialRenderers } from '@jsonforms/material-renderers';

function App() {
  const [data, setData] = useState({});
  const [schema,setSchema] = useState({});
  useEffect(() => {
     fetch("http://localhost:8080/meta/entity_a")
     .then((res) => res.json())
     .then((data) => {
      console.log(data)
      setSchema(data)})
  },[])
 
  return (
    <div className="App">
    <div>
      <JsonForms
        schema={schema}
        data={data}
        renderers={materialRenderers}
        onChange={(e) => {
          setData(e.data)
        }}
      />
    </div>
    </div>
  );
}

サーバー側で準備したスキーマをAPI経由で取得しJsonFormsにいれるだけです。

動かしてみる

上記のコードを実際に動かしてみます。
シンプルですが以下のような表示になります。LocalDateの型の項目はDatePickerになっていたり、enum型の項目はプルダウンで自前のenumが選択できるようになっています。
クライアント側にほとんど詳細を記載せずに型に合わせた入力ができるようになっています。

外観

終わりに

今回はJSON Formsを利用して簡単にフォームが作れるかどうか試してみました。
スキーマ生成さえ出来てしまえばかなり簡単にフォームが作れるなという感触です。ちょっと踏み込んだことをしようとすると大変になりそうな匂いはしますが、とりあえず入力する機構が欲しい時とかに便利かもしれません。
（今だとAIでゴリゴリ書いちゃった方が楽だったりするかな。。。）

参考

API Reference

What is JSON Forms? - JSON Forms

JSON Schema - Specification [#section]