kintoneでレコード全件について関連レコードの項目を集計して更新する機能を泥臭くカスタマイズする【その2】

前回は、一覧画面から1件更新するボタンを作りました。

https://qiita.com/juri_don/private/01800dc8f1e44732f49c

今回は、3件分のレコードについて、1件ずつ集計して更新してみたいと思います。


**見出しの記号の説明**
🙄：考えるところ
🛠️：手を動かすところ

# 🙄3件集計して更新する

3件というわけで、とりあえず今回はレコード番号20,19,18のレコードを集計するようにしましょう
（一覧にレコード番号を追加するとわかりやすいですね）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/17842110-fffe-aed9-8147-6358d2a2b13c.png)

# 🛠️3件分ベタ書きで書いてみよう

前回、ボタンクリックで1件更新するコードは下記のようになりました。

```js
// ボタンクリックした時のコード
// 関連レコード集計用リクエストパラメータ準備
const clientRecordId = 19;
const relatedAppId = kintone.app.getRelatedRecordsTargetAppId("案件一覧");
const query =
  '顧客管理レコード番号_関連レコード紐付け用="' +
  clientRecordId +
  '" and 提案プラン in ("Aプラン")';
const outputFields = ["合計費用"];
const params = {
  app: relatedAppId,
  query: query,
  fields: outputFields,
};
console.log(params);

// 集計値を取得する
const client = new KintoneRestAPIClient();
const res = await client.record.getRecords(params);
console.log(res);

// 合計金額集計
const amount = res.records.reduce(
  (preV, p) => preV + parseFloat(p.合計費用.value),
  0
);

// レコードを更新する
const rec = {
  Aプラン小計: {
    value: amount,
  },
};
const res2 = await client.record.updateRecord({
  app: kintone.app.getId(),
  id: 19,
  record: rec,
});
location.reload();
```

これを、レコード番号20,19,18の3件分に増やします。
同じ変数名は使わないようにテキトウに変数名かぶらないようにしながら3件分書くと、
↓こんな感じになります。※clientは一番上に出しておきましょう。

```js
// ボタンクリックした時のコード
const client = new KintoneRestAPIClient();

// 関連レコード集計用リクエストパラメータ準備
const relatedAppId = kintone.app.getRelatedRecordsTargetAppId("案件一覧");

// レコード番号20
const query =
  '顧客管理レコード番号_関連レコード紐付け用="' +
  20 +
  '" and 提案プラン in ("Aプラン")';
const outputFields = ["合計費用"];
const params = {
  app: relatedAppId,
  query: query,
  fields: outputFields,
};

// 集計値を取得する
const res = await client.record.getRecords(params);
// 合計金額集計
const amount = res.records.reduce(
  (preV, p) => preV + parseFloat(p.合計費用.value),
  0
);

// レコードを更新する
const rec = {
  Aプラン小計: {
    value: amount,
  },
};
const res2 = await client.record.updateRecord({
  app: kintone.app.getId(),
  id: 20,
  record: rec,
});

// レコード番号19
const query2 =
  '顧客管理レコード番号_関連レコード紐付け用="' +
  19 +
  '" and 提案プラン in ("Aプラン")';
const params2 = {
  app: relatedAppId,
  query: query2,
  fields: outputFields,
};

// 集計値を取得する
const res3 = await client.record.getRecords(params2);
// 合計金額集計
const amount2 = res3.records.reduce(
  (preV, p) => preV + parseFloat(p.合計費用.value),
  0
);
// レコードを更新する
const rec2 = {
  Aプラン小計: {
    value: amount2,
  },
};
const res4 = await client.record.updateRecord({
  app: kintone.app.getId(),
  id: 19,
  record: rec2,
});

// レコード番号18
const query3 =
  '顧客管理レコード番号_関連レコード紐付け用="' +
  18 +
  '" and 提案プラン in ("Aプラン")';
const param3 = {
  app: relatedAppId,
  query: query3,
  fields: outputFields,
};

// 集計値を取得する
const res5 = await client.record.getRecords(param3);
// 合計金額集計
const amount3 = res5.records.reduce(
  (preV, p) => preV + parseFloat(p.合計費用.value),
  0
);
// レコードを更新する
const rec3 = {
  Aプラン小計: {
    value: amount3,
  },
};
const res6 = await client.record.updateRecord({
  app: kintone.app.getId(),
  id: 18,
  record: rec3,
});
location.reload();
```

コレを動かしてみると・・・・👀
※レコード番号を一覧に表示しておくとわかりやすいかな。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/2536317d-3967-ce98-fbec-d326acdc44b9.png)

レコード番号20,19,18のAプラン小計が更新されます✨✨こんなふうになればOK!

# 🙄ベタ書き、全部書くわけにも行かないよね！

3件だったのでベタ書きでもなんとかコードを書けましたが、コレ、ベタ書きにせずに書く方法ないかな？
というわけで、キレイにまとめる方法を考えてみたいと思います。

## 🙄ベタ書きしたコードの中の共通点を見つける

共通点か～。まてよ？
レコード番号が20,19,18ということ以外は共通なはずだ！
ということは、レコード番号をXXXってしてみると、
レコード番号XXXだったらこんな感じに書き換えられるよね👀✨✨

```js
// レコード番号をXXXとすると～？？
const query =
  '顧客管理レコード番号_関連レコード紐付け用="' +
  XXX +
  '" and 提案プラン in ("Aプラン")';
const outputFields = ["合計費用"];
const params = {
  app: relatedAppId,
  query: query,
  fields: outputFields,
};

// 集計値を取得する
const res = await client.record.getRecords(params);
// 合計金額集計
const amount = res.records.reduce(
  (preV, p) => preV + parseFloat(p.合計費用.value),
  0
);

// レコードを更新する
const rec = {
  Aプラン小計: {
    value: amount,
  },
};
const res2 = await client.record.updateRecord({
  app: kintone.app.getId(),
  id: XXX,
  record: rec,
});
```

そして、思います。
レコード番号が複数あるので、XXXは配列にしてみたらいいのではないか？？

## 🛠️レコード番号を配列にして、ループしてみよう。

先程のコードのXXXを
`const XXX = [20,19,18];`
という配列にして、forループで動かしてみましょう👀

また、
`const outputFields = ["合計費用"]`

と、合計金額集計の
`(preV, p) => preV + parseFloat(p.合計費用.value),`
の**合計費用**は繰り返し出てきているので、合計金額集計の方は
↓こうしておきましょう👀
`(preV, p) => preV + parseFloat(p[outputFields[0]].value),`

```js

// レコード番号XXX
const XXX = [20, 19, 18];
for (let i = 0; i < XXX.length; i++) {
  const query =
    '顧客管理レコード番号_関連レコード紐付け用="' +
    XXX[i] +
    '" and 提案プラン in ("Aプラン")';
  const outputFields = ["合計費用"];
  const params = {
    app: relatedAppId,
    query: query,
    fields: outputFields,
  };

  // 集計値を取得する
  const res = await client.record.getRecords(params);
  // 合計金額集計
  const amount = res.records.reduce(
    (preV, p) => preV + parseFloat(p[outputFields[0]].value),
    0
  );

  // レコードを更新する
  const rec = {
    Aプラン小計: {
      value: amount,
    },
  };
  const res2 = await client.record.updateRecord({
    app: kintone.app.getId(),
    id: XXX[i],
    record: rec,
  });
}
```

コレでうまく3件分の更新ができたはずです👀
（ちゃんと集計できたかな👀？）
紐づく案件のプランを変更してみたりして、値を変えてボタンを押してみるとちゃんと計算できているかどうか分かるね！

うまくコードを繋げられない（＞＜）という方は、
ここまでを何度も読んだり書いてみたり、試行錯誤してみてね👀！
※どこに書けばいいのかなどは、あえて書いていなかったりします。試行錯誤頑張ってくださいっ！

というわけで今回の内容はおしまい。
次回は1件ずつを繰り返す方法を覆すのでお楽しみに。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/b4075a37-52fa-264b-c9aa-fb5c11e1ea99.png)