kintone REST API Client でレコード1件操作する方法

今回はkintone REST API Clientを用いて、

レコード1件について

• 取得（getRecord）
• 追加（addRecord）
• 更新（updateRecord）
• 追加または更新（upsertRecord）
• 削除（deleteRecords）

の5種類の操作をしてみたいと思います。

アプリの準備

名簿アプリと名簿レコードを操作するアプリの2種類作成します。

名簿アプリ

フィールド種類	フィールドコード	備考
文字列(1行)	社員コード	重複禁止
文字列(1行)	氏名
文字列(1行)	住所

名簿操作用アプリ

フィールド種類	フィールドコード	備考
スペース	sp	テキストボックスやボタン設置する用のスペース
文字列(1行)	社員コード	テーブル内フィールド
文字列(1行)	氏名	テーブル内フィールド
文字列(1行)	住所	テーブル内フィールド

完成図

JavaScript / CSSでカスタマイズ

kintone REST API Clientとkintone UI Component を使います。
CDNをJavaScript / CSSでカスタマイズに設定しておきましょう。

kintone REST API Client

CDN:
https://unpkg.com/@kintone/rest-api-client@latest/umd/KintoneRestAPIClient.js

kintone UI Component

CDN:
https://unpkg.com/kintone-ui-component/umd/kuc.min.js

JavaScript

kintone UI Componentでテキストボックスやボタンを設置して、ボタンクリックでkintone REST API を叩きます。
try-catchや処理成功or失敗後のメッセージ表示などは適宜追加してくださいね。

テキストボックスの設置

// スペースフィールドに設置
const sp = kintone.app.record.getSpaceElement("sp");
const text = new Kuc.Text({
  placeholder: "指定レコードID",
  id: "recordId",
});
sp.appendChild(text);

getRecord（レコード1件取得）

テキストボックスに入力したIDのレコードをgetRecordで1件取得します。

// getRecordボタン設置
const btn_getRecord = new Kuc.Button({
  text: "getRecord",
  type: "submit",
});
sp.appendChild(btn_getRecord);

// getRecordボタンクリック
btn_getRecord.addEventListener("click", async (event) => {
  const client = new KintoneRestAPIClient();
  const res = await client.record.getRecord({ app: "名簿アプリのアプリID", id: text.value });
  const obj = kintone.app.record.get();
  const tblRecord = [
    {
      id: null,
      value: {
        住所: { type: "SINGLE_LINE_TEXT", value: res.record.住所.value },
        氏名: { type: "SINGLE_LINE_TEXT", value: res.record.氏名.value },
        社員コード: {
          type: "SINGLE_LINE_TEXT",
          value: res.record.社員コード.value,
        },
      },
    },
  ];
  obj.record.テーブル.value = tblRecord;
  kintone.app.record.set(obj);
});

addRecord（レコード1件追加）

テーブルに入力した内容のレコードを追加します。

// ボタン設置
const btn_addRecord = new Kuc.Button({
  text: "addRecord",
  type: "submit",
});
sp.appendChild(btn_addRecord);

// ボタンクリック
btn_addRecord.addEventListener("click", async (event) => {
  const client = new KintoneRestAPIClient();
  const obj = kintone.app.record.get();
  const rec = {
    社員コード: {
      value: obj.record.テーブル.value[0].value.社員コード.value,
    },
    氏名: { value: obj.record.テーブル.value[0].value.氏名.value },
    住所: { value: obj.record.テーブル.value[0].value.住所.value },
  };
  const res = await client.record.addRecord({ app: "名簿アプリのアプリID", record: rec });
});

updateRecord（レコード1件更新）

入力したレコードIDのレコードをテーブルの内容で更新します。

const btn_updateRecord = new Kuc.Button({
  text: "updateRecord",
  type: "submit",
});
sp.appendChild(btn_updateRecord);

btn_updateRecord.addEventListener("click", async (event) => {
  const client = new KintoneRestAPIClient();
  const obj = kintone.app.record.get();

  const rec = {
    社員コード: {
      value: obj.record.テーブル.value[0].value.社員コード.value,
    },
    氏名: { value: obj.record.テーブル.value[0].value.氏名.value },
    住所: { value: obj.record.テーブル.value[0].value.住所.value },
  };
  const res = await client.record.updateRecord({
    app: "名簿アプリのアプリID",
    id: text.value,
    record: rec,
  });
});

upsertRecord（1件追加または更新）

テーブル内と同じレコードがあれば更新、なければ追加します。

const btn_upsertRecord = new Kuc.Button({
  text: "upsertRecord",
  type: "submit",
});
sp.appendChild(btn_upsertRecord);

btn_upsertRecord.addEventListener("click", async (event) => {
  const client = new KintoneRestAPIClient();
  const obj = kintone.app.record.get();

  const rec = {
    氏名: { value: obj.record.テーブル.value[0].value.氏名.value },
    住所: { value: obj.record.テーブル.value[0].value.住所.value },
  };
  const res = await client.record.upsertRecord({
    app: "名簿アプリのアプリID",
    updateKey: {
      field: "社員コード",
      value: obj.record.テーブル.value[0].value.社員コード.value,
    },
    record: rec,
  });
});

deleteRecords（レコードを削除）

レコードを削除します。一括削除できるAPIですが、レコードIDを1件だけ指定することで1件削除します。

const btn_deleteRecords = new Kuc.Button({
  text: "deleteRecords",
  type: "submit",
});
sp.appendChild(btn_deleteRecords);

btn_deleteRecords.addEventListener("click", async (event) => {
  const client = new KintoneRestAPIClient();
  const res = await client.record.deleteRecords({
    app: "名簿アプリのアプリID",
    ids: [text.value],
  });
  const obj = kintone.app.record.get();
  obj.record.テーブル.value = [];
  kintone.app.record.set(obj);
});

まとめ

1件のレコード操作では通常のAPIとあまり変わらないのでそんなに役に立つ感を感じないかも知れないですが、URIを書かずにメソッド呼び出すだけでお手軽に使えるのは便利だなぁと思いました。
こんなノリで次回以降は複数件まとめてのレコード操作やってみたいと思います。