2021/3/4に，kintone UI Component v1.0.0がリリースされました． 今回は，v1を触ってみた感想を綴っていきたいと思います．
サンプル
自動採番プラグインのプラグイン設定画面のソースコードを，kintone UI Component v1で書き換えてみました． 変更ログはこちらで公開しています．
感想
変更ログの通り，HTMLとCSSの記述を大量に削除できました． JavaScriptは要素作成のためのコードが増えていますが，それ以外の箇所はjQuery主体のコードとも親和してくれました．
v0でなくv1を使ったからこそ良かった部分を綴りたいと思います． v0とv1の違いについてはこちらにまとまっています． 本記事では，特に気に入った部分だけピックアップします．
Alert と Label コンポーネントのプロパティ化
ラベルとバリデーション付きのフィールドを作る例で見てみます．
-
v0
varspace=kintone.app.record.getSpaceElement(‘space’);varlabel=newkintoneUIComponent.Label({text:‘正の整数’});vartext=newkintoneUIComponent.Text();varalert=newkintoneUIComponent.Alert({type:‘error’,text:‘正の整数のみ入力できます’,isVisible:false});space.appendChild(label.render());space.appendChild(text.render());space.appendChild(alert.render());text.on(‘change’,function(e){if(/^([1-9]\d*|0)$/.test(e.target.value)){alert.hide();}else{alert.show();}});
-
v1
varspace=kintone.app.record.getSpaceElement(‘space’);vartext=newKuc.Text({label:‘正の整数’});space.appendChild(text);text.addEventListener(‘change’,function(e){if(/^([1-9]\d*|0)$/.test(e.detail.value)){text.error=‘’;}else{text.error=‘正の整数のみ入力できます’;}});
インスタンス数が減ってスッキリしました．
プロパティを利用して値の更新が可能に
上述した，jQuery主体のコードと親和という部分に関わっていますね． kintone UI Component特有のgetValue()などが必要なくなるので，既存システムのリファクタリングも容易に行えそうです． また，メソッドを覚えなくて良いので，学習コストも低下していますね．
render() メソッドが不要に
リンクのソースコードを見て分かる通り，純粋に記述が減って良いですね．
まとめ
v0と比べて，とても使いやすくなっています． Tableなども追加予定ということで，期待大ですね．