アロー関数の便利な使い方

kintone 開発相談
1

先日投稿したアロー関数の解説に引き続き、この投稿では具体的な利用例を紹介します。

アロー関数では、引数が単一な場合は arg => {/* statement */} のように引数の括弧を省略できます。

また、

var sum = function(a, b) {
  return a + b;
};

のように単一の式を評価して返却する関数の場合は

var sum = (a, b) => a + b;

のように書けます。

例

以下のようなレコードを他のアプリにコピーするクラスを考えます。

class RecordCopyClass {
  constructor(appId) {
    this.appId = appId;
    this.postCopyFuncs = [];
  }

  pushPostCopyFuncs(...funcs) {
    this.postCopyFuncs.push(...funcs.filter(f => f instanceof Function));
  }

  deleteMetaData(record) {
    let rec = Object.assign({}, record);
    /*
    * メタデータの削除処理
    */
    return rec;
  }

  copyRecords(...records) {
    let copiedRecords = records.map(this.deleteMetaData);
    return [this.getExecCopyFunc(records), ...this.postCopyFuncs]
            .reduce((pre, cur) => pre.then(cur)
                    , kintone.Promise.resolve()
            );
  }

  getExecCopyFunc(records){
    return () => kintone.api(kintone.api.url("/k/v1/records", true), "POST", {app: this.appId, records: records});
  }
}

このクラスを使用するときの流れとしては、

  1. let instance = new RecordCopyClass(appId)でインスタンスを作成
  2. instance.pushPostCopyFuncs(...)でコピー後に実行する関数の登録
  3. instace.copyRecords(...records)を実行しコピー処理を実行する

という形で、copyRecords関数では

  1. deleteMetaDataでメタデータの削除
  2. getExecCopyFunc(records)を実行して実際にAPIを実行する関数を作成
  3. APIを実行する関数とpostCopyFuncsにあるコピー実行後の処理とを直列で実行する

というような処理になっています。

getExecCopyFuncでアロー関数を使わない場合を考えます。

この関数が返却する関数の実行時におけるthisはcopyRecordsで定義している配列になってしまうため、this.appIdが取得できなくなってしまいます。
これを避けるためには

getExecCopyFunc(records){
    let appId = this.appId;
    return function(){ return kintone.api(kintone.api.url("/k/v1/records", true), "POST", {app: appId, records: records}) };
  }

のように一時変数を用意する(あるいは返す関数に対してFunction.prototype.bindを実行する)必要があります。
このような場合アロー関数でthisを明確にすることで完結に記述できて便利ですね。

この他にもアロー関数を用いることでクラス内の関数におけるthisの扱いが楽になる例はたくさんあります。
コードを書く際に意識して使ってみてください。