app.record.detail.process.proceedのイベントハンドラーのベストプラクティス

はじめに

みなさん、app.record.detail.process.proceed使ってますか？
その名も「プロセス管理でアクションを実行するときのイベント」です。

このイベント、詳細画面ながらフィールドの書き換えにも対応していてかつPromise対応もしている結構便利なイベントなので重宝している方もいらっしゃるのではないでしょうか。

私も最近よくこのイベントを使うのですが、一つのイベントに対して紐づけたい関数が複数になることが多いイベントなんですよね。
というのも、プロセスが申請中になったらXXX、プロセスが完了になったらYYYのようにプロセスの状態に応じて関数を使い分けることが多いからなんです。

今回はこの複数の関数の紐付けのベストプラクティスを考えてみました。

ド定番

やはりパッと思いつくのはイベントオブジェクトのにあるevent.actionやevent.statusを用いてIF文で分岐する方法でしょうか。

  const showConsolle = () => {
    console.log('申請中に移行します');
  };

  const showAlert = () => {
    alert('完了します');
  };

  kintone.events.on('app.record.detail.process.proceed', (event) => {
    if (event.nextStatus.value === '申請中') {
      showConsolle();
    }

    if (event.nextStatus.value === '完了') {
      showAlert();
    }

    return event;
  });

まあこの形でも十分なんですが、紐づける関数が多くなってくるとやや冗長な気がしてきます。

ベストプラクティスを目指して

というわけでこのkintone.events.on以降のコードを最適化していきたいと思います。
手をつけられそうなのはこのIF文です。

if (event.nextStatus.value === '申請中')

event.nextStatus.valueが特定の値だったら、特定の関数を実行すればいいわけです。
今回のケースであれば申請中だったらshowConsole、完了だったらshowAlertですね。
このAとB、CとDのような紐付けはJSをやっている人ならパッと浮かぶでしょう。
そう、オブジェクトですね。オブジェクトには関数を入れ込むこともできました。

const nextStatus = {
    申請中: showConsole,
    完了: showAlert,
};

この時点で()をつけてしまうと即時関数になってしまうので注意が必要です。

さて、ここまできたらnextStatusのキーがevent.nextStatus.valueと一致したバリューを取り出せば良いので…

nextStatus[event.nextStatus.value]

// event.nextStatus.value　が 申請中 の場合は nextStatus['申請中']と置き換わり showConsole が取り出せる

このように表現できますね。
あとはこの値がFalsyでなければ関数を実行するようにしてあげればいいわけです。

const nextStatusFunc = actions[event.action.value];
if (nextStatusFunc) {
    await actionFunc(event);
}

これで紐付けたい関数が増えてもnextStatusに足していくだけですね。

まとめ

kintoneカスタマイズをしていると、何も考えずいつものやり方で…となってしまうことも少なくありません。
たまにはこうしてより良い書き方を考えていけると良いですね。