新規投稿
フォローする

kintone UI Component v1を使ってみた

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
var space = kintone.app.record.getSpaceElement('space');
var label = new kintoneUIComponent.Label({
  text: '正の整数'
});
var text = new kintoneUIComponent.Text();
var alert = new kintoneUIComponent.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
var space = kintone.app.record.getSpaceElement('space');
var text = new Kuc.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なども追加予定ということで,期待大ですね.

1

0件のコメント

サインインしてコメントを残してください。