レコード値の取得と設定

2026年2月24日にメンテナンス済み

kintone のイベントコールバック内では event.record を通じてレコードデータにアクセスできますが、ボタンクリックなどイベントコールバックの外からレコードデータを操作したいケースもあります。

そのような場合に使用するのが kintone.app.record.get() と kintone.app.record.set() です。

この記事では、これらの API の基本的な使い方から、実践的な活用パターンまで解説します。

基本的な使い方

kintone.app.record.get()

現在画面に表示されているレコードのデータを取得します。

get-record-basic.js

// レコードデータを取得
const body = kintone.app.record.get();
const record = body.record;

// フィールドの値を参照
console.log(record['案件名'].value);    // => "サンプル案件"
console.log(record['金額'].value);      // => "50000"
console.log(record['担当者'].value);    // => [{ code: "user1", name: "田中太郎" }]

kintone.app.record.set()

画面に表示されているレコードのデータを更新します。

set-record-basic.js

// レコードデータを取得
const body = kintone.app.record.get();
const record = body.record;

// フィールドの値を変更
record['ステータス'].value = '完了';
record['完了日'].value = '2026-02-24';

// 変更をレコードに反映
kintone.app.record.set(body);

get/set が使える画面

kintone.app.record.get() と kintone.app.record.set() は、レコードの作成画面、編集画面、詳細画面でのみ使用可能です。一覧画面やポータルでは null が返ります。

イベントコールバック内での注意点

kintone.app.record.get() / kintone.app.record.set() はイベントコールバックの外で使用するための API です。イベントコールバック内では event.record を使用してください。

callback-inside-outside.js

(() => {
  'use strict';

  kintone.events.on(['app.record.edit.show'], (event) => {
    const record = event.record;

    // ✅ イベントコールバック内では event.record を使う
    record['メモ'].value = '編集画面が表示されました';

    // ❌ イベントコールバック内で get/set は使わない
    // const body = kintone.app.record.get();

    // ボタンのクリックハンドラなど、コールバックの外の処理
    const button = document.createElement('button');
    button.textContent = '値を設定';
    button.addEventListener('click', () => {
      // ✅ コールバックの外では get/set を使う
      const body = kintone.app.record.get();
      body.record['メモ'].value = 'ボタンがクリックされました';
      kintone.app.record.set(body);
    });

    kintone.app.record.getSpaceElement('ボタンスペース').appendChild(button);

    return event;
  });
})();

チェック

イベントコールバック内で kintone.app.record.set() を使用するとエラーが発生します。イベントコールバック内では必ず event.record を変更し、return event で返してください。

実践パターン

パターン 1: ボタンクリックで値をコピー

指定したフィールドの値を別のフィールドにコピーするボタンを設置する例です。

copy-value.js

(() => {
  'use strict';

  kintone.events.on(['app.record.edit.show'], (event) => {
    const spaceElement = kintone.app.record.getSpaceElement('アクションスペース');
    if (!spaceElement) return event;

    // 重複防止
    if (spaceElement.childElementCount > 0) return event;

    const button = document.createElement('button');
    button.textContent = '請求先を納品先にコピー';
    button.style.cssText = 'padding: 8px 16px; cursor: pointer;';

    button.addEventListener('click', () => {
      const body = kintone.app.record.get();
      const record = body.record;

      // 請求先の情報を納品先にコピー
      record['納品先会社名'].value = record['請求先会社名'].value;
      record['納品先住所'].value = record['請求先住所'].value;
      record['納品先担当者'].value = record['請求先担当者'].value;
      record['納品先電話番号'].value = record['請求先電話番号'].value;

      kintone.app.record.set(body);
    });

    spaceElement.appendChild(button);

    return event;
  });
})();

スペースフィールドの活用

kintone のスペースフィールドを活用して、ボタン、ステータス表示、入力フォーム、グラフなどのカスタム要素を画面内に配置する方法を解説します。kintone.app.record.getSpaceElement の基本的な使い方から実践

パターン 2: サブテーブルの合計を動的に計算

ボタンクリックでサブテーブルの合計金額を計算し、フィールドに反映する例です。

calc-subtable.js

(() => {
  'use strict';

  kintone.events.on(['app.record.edit.show', 'app.record.create.show'], (event) => {
    const spaceElement = kintone.app.record.getSpaceElement('計算スペース');
    if (!spaceElement || spaceElement.childElementCount > 0) return event;

    const button = document.createElement('button');
    button.textContent = '合計を再計算';
    button.style.cssText = 'padding: 8px 16px; cursor: pointer;';

    button.addEventListener('click', () => {
      const body = kintone.app.record.get();
      const record = body.record;
      const table = record['明細テーブル'].value;

      // サブテーブルの金額を合計
      const total = table.reduce((sum, row) => {
        const quantity = Number(row.value['数量'].value) || 0;
        const unitPrice = Number(row.value['単価'].value) || 0;
        return sum + quantity * unitPrice;
      }, 0);

      record['合計金額'].value = String(total);

      // 消費税を計算
      const tax = Math.floor(total * 0.1);
      record['消費税'].value = String(tax);
      record['税込合計'].value = String(total + tax);

      kintone.app.record.set(body);
    });

    spaceElement.appendChild(button);

    return event;
  });
})();

テーブル操作の基本

kintoneのテーブル(サブテーブル)フィールドをJavaScriptカスタマイズで操作する方法を詳しく解説します。テーブルのデータ構造から、行の追加、更新、削除まで、実践的なサンプルコードと共に紹介します。

パターン 3: フィールドの入力制限を動的に切り替え

disabled プロパティを get/set で操作することで、ボタンクリックに応じたフィールドの入力制限を切り替えられます。

toggle-disabled.js

(() => {
  'use strict';

  kintone.events.on(['app.record.edit.show'], (event) => {
    const spaceElement = kintone.app.record.getSpaceElement('ロックスペース');
    if (!spaceElement || spaceElement.childElementCount > 0) return event;

    const lockButton = document.createElement('button');
    lockButton.textContent = '🔒 フィールドをロック';
    lockButton.style.cssText = 'padding: 8px 16px; cursor: pointer; margin-right: 8px;';

    const unlockButton = document.createElement('button');
    unlockButton.textContent = '🔓 フィールドのロックを解除';
    unlockButton.style.cssText = 'padding: 8px 16px; cursor: pointer;';

    const targetFields = ['金額', '数量', '単価'];

    lockButton.addEventListener('click', () => {
      const body = kintone.app.record.get();
      targetFields.forEach((field) => {
        body.record[field].disabled = true;
      });
      kintone.app.record.set(body);
    });

    unlockButton.addEventListener('click', () => {
      const body = kintone.app.record.get();
      targetFields.forEach((field) => {
        body.record[field].disabled = false;
      });
      kintone.app.record.set(body);
    });

    spaceElement.appendChild(lockButton);
    spaceElement.appendChild(unlockButton);

    return event;
  });
})();

フィールドの入力制限・可否の変更

アプリの各フィールドの入力可否を操作する方法を解説します。ルックアップと関連付けたフィールドは入力不可になりますが、今回紹介する方法で手入力可能にできます。再度ルックアップを取得したタイミングや、データの取り込みを行ったタイミングで手入力部

パターン 4: 現在の値に基づく条件分岐

詳細画面でフィールドの値に応じてカスタム要素を表示する例です。

conditional-display.js

(() => {
  'use strict';

  kintone.events.on(['app.record.detail.show'], (event) => {
    const spaceElement = kintone.app.record.getSpaceElement('ステータス表示');
    if (!spaceElement || spaceElement.childElementCount > 0) return event;

    const record = event.record;
    const status = record['進捗'].value;
    const deadline = record['期限'].value;

    // 期限切れの判定
    const isOverdue = deadline && new Date(deadline) < new Date() && status !== '完了';

    if (isOverdue) {
      const badge = document.createElement('span');
      badge.textContent = '⚠️ 期限切れ';
      badge.style.cssText =
        'background: #ff4444; color: white; padding: 4px 12px; border-radius: 4px; font-weight: bold;';
      spaceElement.appendChild(badge);
    }

    return event;
  });
})();

モバイル対応

モバイル版 kintone では、kintone.mobile.app.record.get() と kintone.mobile.app.record.set() を使用します。

mobile-get-set.js

(() => {
  'use strict';

  /**
   * PC / モバイルを自動判定してレコードを取得する
   * @returns { { record: Object } }
   */
  const getRecord = () => {
    return kintone.mobile?.app?.record?.get?.() ?? kintone.app.record.get();
  };

  /**
   * PC / モバイルを自動判定してレコードを設定する
   * @param { Object } body - レコードデータ
   */
  const setRecord = (body) => {
    if (kintone.mobile?.app?.record?.set) {
      kintone.mobile.app.record.set(body);
    } else {
      kintone.app.record.set(body);
    }
  };
})();

kintone.appとkintone.mobile.app

kintone.appとkintone.mobile.appの使い分け、面倒じゃありませんか？PC版とモバイル版を意識せずリソースを共有するために、デバイスを自動的に判定して使い分ける必要をなくす方法を紹介します。

まとめ

kintone.app.record.get() で画面上のレコード値を取得、kintone.app.record.set() で値を反映できる
これらの API はイベントコールバックの外で使用する（ボタンクリック時など）
イベントコールバック内では event.record を変更して return event する
disabled プロパティを操作することでフィールドの入力制限を動的に切り替えられる
モバイルでは kintone.mobile.app.record.get/set を使用する

練習問題

#kintone #JavaScript #TypeScript

現在表示しているレコードのレコードIDを取得する

kintone.proxyを使って外部APIを呼び出す方法