JSONForms AntDesign Vueを書いている

JSON Formsというjson schemaを入れるとフォームを生成してくれるライブラリがあって、これをAnt Design Vueに対応させるレンダラー(プラグイン)を暇なタイミングでちょくちょく作ってて、多少動く様になってきた。https://t.co/6s5kHUcHRX

storybookhttps://t.co/iknuXMyBfX

— 🐾 (@shotanue) 2022年3月11日

使ってる技術は色々実験してて（個人的に）、
TypeScript + Vue3(script setup) + pnpm + StoryBook + Cypress Component Testing で作ってある

storyを Cypress Component Testingに流用していて、なんか良い感じなんでは(小並感)というところと、Vue3のリアクティブむずいなというところと…

— 🐾 (@shotanue) 2022年3月11日

「Vue3のリアクティブ難しい」はuseXXXで切り出したTSの世界とSFCの世界を行ったり来たりすると、

「あ、ここはhoge.valueで参照しないといけないんだっけ」
「あ、こっちは省略可能なのか」

みたいな点でVueの世界とTSの世界を意識しないといけずコンテキストスイッチ難しいの意

— 🐾 (@shotanue) 2022年3月11日

JSON Formsって何よ

JSON Schemaを食べさせるとフォームを作ってくれる便利なライブラリ。

jsonforms.io

アーキテクチャのページを見るとわかるが、

• core
• binding
• renderer

の3層構造になっている。

そのためReactやVueにべったりした作りにはなっておらず、JSONForms側で用意がないUIフレームワークの場合でも自前でrendererを書くことでJSONFormsが利用可能になる。

そこで、今回Ant Design VueというVue向けのUIフレームワークをJSON Formsに対応させるrendererを作っている。

このフレームワークはプロダクトでも使っていて使いやすく、個人開発にでも使うかと思い、折角なので作ってみようと思った次第となっている。

※ ちなみにAnt Designはアリババが作っているUIフレームワークでreact向けの実装もある。

作れるフォームも結構柔軟で、json schemaのoneofなどにも対応していることでスキーマ定義をするだけでタブ切り替えだったり、動的にinputのリストを増減なんかもできる。そのため、ある程度複雑なフォームにも対応が可能になっている。

この辺はexamplesを見ると結構面白い。

https://jsonforms.io/examples/combinators