kintoneカスタマイズに利用できそうなES2017-2018の機能

kintoneカスタマイズに利用できそうな、ES2017-2018の機能を調べてみました。

スプレッド構文 Objectリテラル [ES2018]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals
ES2015で追加されたスプレッド構文ですが、ES2018からはObjectリテラルにも対応しました。 これにより、Objectのshallow copyが簡単に実装できるようになりました。

サンプル

サブテーブルの行をコピーし、「rowId」のみ書き換えます。

・スプレッド構文 Objectリテラル利用なし

(() => {
  "use strict";
  kintone.events.on([
    'app.record.create.change.Table',
  ], event => {
    const table = event.record.Table.value;
    const lastRow = table.length - 1;
    if(lastRow === 0) return;
    if(!table[lastRow-1].value.rowId.value) return;
    //ここから
    table[lastRow].value = Object.keys(event.record.Table.value[0].value).reduce((row, fieldCode) => {
      row[fieldCode] = Object.assign({}, event.record.Table.value[lastRow-1].value[fieldCode]);
      return row;
    }, {});
    table[lastRow].value.rowId.value++;
    //ここまで
    return event;
  });
})();

・スプレッド構文 Objectリテラル利用

(() => {
  "use strict";
  kintone.events.on([
    'app.record.create.change.Table',
  ], event => {
    const table = event.record.Table.value;
    const lastRow = table.length - 1;
    if(lastRow === 0) return;
    if(!table[lastRow-1].value.rowId.value) return;
    //ここから
    table[lastRow].value = {
      ...event.record.Table.value[lastRow-1].value,
      rowId: {
        ...event.record.Table.value[lastRow-1].value.rowId,
        value: Number(event.record.Table.value[lastRow-1].value.rowId.value) + 1
      }
    };
    //ここまで
    return event;
  });
})();

ループを記述せずに実装できるので、簡単ですね。

Object.values() [ES2017]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values
連想配列のvalueを配列として受け取れます。 kintone.event.onのevent.recordの中身をループ処理したい場合、fields.jsonによって取得したフォームの設定値をループ処理したい場合などに便利です。

サンプル

https://developer.cybozu.io/hc/ja/community/posts/360043632352
のsample.jsの54~67行目に適用します。

・Object.values()利用なし

~~~
return Object.keys(appFields.properties).reduce(function(edges, fieldCode){
  ['referenceTable', 'lookup'].forEach(function(type){
    if(appFields.properties[fieldCode][type]){
      edges.push({
        id: apps[index].appId + '-' + fieldCode,
        source: apps[index].appId,
        target: appFields.properties[fieldCode][type].relatedApp.app,
        type: 'arrow',
        color: '#0f0'
      });
    }
  });
  return edges;
}, edges);
~~~

・Object.values()利用

~~~
return Object.values(appFields.properties).reduce(function(edges, property){
  ['referenceTable', 'lookup'].forEach(function(type){
    if(property[type]){
      edges.push({
        id: apps[index].appId + '-' + fieldCode,
        source: apps[index].appId,
        target: property[type].relatedApp.app,
        type: 'arrow',
        color: '#0f0'
      });
    }
  });
  return edges;
}, edges);
~~~

連想配列のkeyとvalueの両方を使う場合は、Object.entries()が便利です。

async/await [ES2017]

Promiseより簡単に非同期処理を書くことができます。 記事にしようと思いましたが、Tipsに詳しく書かれているので、リンクだけ貼っておきます。
https://developer.cybozu.io/hc/ja/articles/360023047852#column1-async-await-