JSON Formsというjson schemaを入れるとフォームを生成してくれるライブラリがあって、これをAnt Design Vueに対応させるレンダラー(プラグイン)を暇なタイミングでちょくちょく作ってて、多少動く様になってきた。https://t.co/6s5kHUcHRX
— 🐾 (@shotanue) 2022年3月11日
storybookhttps://t.co/iknuXMyBfX
使ってる技術は色々実験してて（個人的に）、
— 🐾 (@shotanue) 2022年3月11日
TypeScript + Vue3(script setup) + pnpm + StoryBook + Cypress Component Testing で作ってある
storyを Cypress Component Testingに流用していて、なんか良い感じなんでは(小並感)というところと、Vue3のリアクティブむずいなというところと…
「Vue3のリアクティブ難しい」はuseXXXで切り出したTSの世界とSFCの世界を行ったり来たりすると、
— 🐾 (@shotanue) 2022年3月11日
「あ、ここはhoge.valueで参照しないといけないんだっけ」
「あ、こっちは省略可能なのか」
みたいな点でVueの世界とTSの世界を意識しないといけずコンテキストスイッチ難しいの意
JSON Formsって何よ
JSON Schemaを食べさせるとフォームを作ってくれる便利なライブラリ。
アーキテクチャのページを見るとわかるが、
- 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を見ると結構面白い。