今回はES6(ECMAScript 6th edition)を利用したコーディング例を紹介します。
ES6は2015年に標準化されており、現在の対応状況はこちらのようになっております。
ここでは、以前Tipsに投稿された「一覧画面で条件に応じたレコード件数を取得するテクニック」のコードをES6に則って書き換えたいと思います。
利用したES6の特徴
- クラス構文
- テンプレート文字列
- letとconst
- アロー関数
- Promiseオブジェクト(サンプルではkintone.api コールバック関数省略版を用いることで、コードをより簡潔にしています。)
作成したコード
(() => {
"use strict";
// 一覧ページ
kintone.events.on('app.record.index.show', event => {
// 現在の検索条件&処理中のレコード取得
(new KintoneRecordManager).getProcessingRecords().then(response => {
kintone.app.getHeaderMenuSpaceElement().innerHTML = `処理中のレコード件数： ${response.records.length}`;
});
});
})();
/**
* kintone record manager
*/
class KintoneRecordManager {
constructor(){
this.records = [];
this.appId = null;
this.query = '';
this.limit = 100;
this.offset = 0;
}
// 現在の検索条件&処理中のレコード取得
getProcessingRecords(){
return new Promise(resolve => {
this.appId = kintone.app.getId();
this.query = `${kintone.app.getQueryCondition()} ${kintone.app.getQueryCondition() ? ' and ' : ''} ステータス = "処理中"`;
this.getRecords().then(() => {
resolve(this);
});
});
}
// レコード取得
getRecords(){
return kintone.api('/k/v1/records', 'GET', {
app: this.appId,
query: `${this.query} limit ${this.limit} offset ${this.offset}`
}).then(response => {
let len;
Array.prototype.push.apply(this.records, response.records);
len = response.records.length;
this.offset += len;
if (len < this.limit) {
this.ready = true;
} else {
return this.getRecords();
}
});
}
}