kintoneで複数フィールドのchange系イベントハンドラを美しく書く

ほぼ自分用メモの、コードスニペットです。

やりたいこと

• last_nameとfirst_nameを連結してfull_nameを作成
• submitではなくshow changeの際に連結処理を走らせる
• krewSheetとkintone標準UIのどちらでも動くように
• なるべく美しく書く

こんなロジックだけなら標準機能の計算式でやりますが、
まぁそこはサンプル用ということで・・・

普通に書くと、イベントハンドラをこんな感じで膨大に列挙することになります。
これが気持ち悪いので、なんとか美しく書きたいという話がメインでーす。

kintone.events.on(
  [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.index.edit.show',
    'app.record.create.change.first_name',
    'app.record.create.change.last_name',
    'app.record.create.change.full_name',
    'app.record.edit.change.first_name',
    'app.record.edit.change.last_name',
    'app.record.edit.change.full_name',
    'app.record.index.edit.change.first_name',
    'app.record.index.edit.change.last_name',
    'app.record.index.edit.change.full_name',
  ],
  event => {
    // ...
  }
)

結果

こうです！
僕は美しいと思うのですが、どうでしょうか？

const FIELDS = ['first_name', 'last_name', 'full_name']
// reduce使うことで美しく書ける！
const EVENTS = FIELDS.reduce(
  (events, field) => [
    ...events,
    `app.record.create.change.${field}`,
    `app.record.edit.change.${field}`,
    `app.record.index.edit.change.${field}`,
  ],
  ['app.record.create.show', 'app.record.edit.show', 'app.record.index.edit.show']
)

// kintone JS APIとkrewSheet JS API両方で使えるように、コールバックは変数にしておく
const callback = event => {
  const { record } = event

  // krewではdisabled制約は未対応だけど、エラーは出ないので気にしないw
  // full_nameに入力しても、その瞬間にchangeハンドラが走って再度リセットされる
  record.full_name.disabled = true

  // 苗字と名前を連結
  const firstName = record.first_name.value || ''
  const lastName = record.last_name.value || ''
  record.full_name.value = `${lastName} ${firstName}`

  return event
}

// kintone JS API向け
kintone.events.on(EVENTS, callback)

// krewSheet JS API向け
kintone.events.on('app.record.index.show', event => {
  // EVENTSにはkrew未対応のイベントも入ってるけど、エラーは出ないので気にしないw
  krewsheet.events.on(EVENTS, callback)
})

ではまた〜。