【kintone】JavaScriptの書き方（フィールド値操作）【カスタマイズ基礎編】

前回の記事ではkintoneのフィールドの編集不可・非表示の書き方について解説しました。

続いて、kintoneにおけるJavaScriptカスタマイズでは「フィールドの値の操作」を定義できます。

この記事ではレコード内のフィールドの値操作について解説します。

あわせて読みたい

【kintone】JavaScriptの書き方（フィールド編集不可・非表示）【カスタマイズ基礎編】 前回の記事ではkintoneのイベント別に処理を行う書き方について解説しました。 続いて、kintoneにおけるJavaScriptカスタマイズでは「フィールドの編集可／不可の切替」…

kintoneのフィールド操作とは

kintoneのJavaScriptカスタマイズにおいて、最も使うものがフィールド操作です。

フィールドの値を変更することは度々あります。

商品区分（ドロップダウン）が「松」の場合は料金（数値）を「10000」にする

注文日を入力したら、引渡日は3日後の日付にする

なんていったことが可能です。

フィールドに値を設定する場合は以下のように記述します。

event.record.フィールドコード.value = 値;

※毎回「event.record」と記述すると冗長になるため、「record」などの変数に格納すると良いでしょう。

※毎回「event.record」と記述すると冗長になるため、「record」などの変数に格納すると良いでしょう。

前回の記事で解説した編集不可・非表示の状態であっても、JavaScriptでは値の変更が可能です。
※フィールドのアクセス権（編集権限）が無い場合を除きます。

実装例

商品区分（ドロップダウン）が「松」の場合は料金（数値）を「10000」にする

(() => {
  
  'use strict';
  
  kintone.events.on(['app.record.create.change.商品区分', 'app.record.edit.change.商品区分'], event => {
    
    const record = event.record;
    
    if (record.商品区分.value == '松') {
      record.料金.value = 10000;
    }
    
    return event;
    
  });
  
})();

if文で条件判定し、商品区分が「松」の場合は、料金のvalueを「10000」にしています。

注文日を入力したら、引渡日は3日後の日付にする

(() => {

	'use strict';

	kintone.events.on(['app.record.create.change.注文日', 'app.record.edit.change.注文日'], event => {

		const record = event.record;

		// 注文日が入力されている場合
		if (record.注文日.value) {
			const date = new Date(record.注文日.value);
			date.setDate(date.getDate() + 3);  // 注文日の3日後
			record.引渡日.value = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();

			// 月と日を0埋めするなら以下
			record.引渡日.value = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2);
		}

		return event;

	});

})();

if文で条件判定し、注文日が入力されている場合は、引渡日のvalueを注文日の3日後にしています。

コードについて補足します。

1. 値の入力有無の判定（if文）

「if (record.フィールドコード.value)」 の形で値の入力有無を判定できます。

値が入力されている場合はtrueになり、if文内の処理が実行されます。

値が入力されていない場合はfalseになり、if文内の処理は実行されません。

反対に、値が入力されていない場合にif文内の処理を実行したい場合は、「if (!record.フィールドコード.value)」のように「!」（論理否定演算子）を付けます。

2. 日付の計算（Dateオブジェクト）

日付はDateオブジェクトを使い、3日後の日付を計算しています。

「date.getFullYear() + ‘-‘ + (date.getMonth() + 1) + ‘-‘ + date.getDate()」でも問題はないのですが、月や日が一桁の場合は0が付かない状態になります。

見た目上、十の位を0埋めしたい場合は、コメントに記載した書き方にします。

DateオブジェクトはJavaScriptの標準で使えるものですが、より便利に日付計算する場合は「Luxon」ライブラリを使うことをおすすめします。

Cybozu CDNではライブラリのリンクが提供されていますので、そちらを適用しましょう。

フィールドの値を初期化（未入力に）する場合はvalueに「undefined」を指定します。

ユーザー選択や組織選択の場合はvalueが配列ですので、[] （空配列）を指定します。

計算フィールドによる日付計算

少々脱線しますが、上記の日付計算はJavaScriptを使わなくてもできます。

計算フィールドを使えば日付計算ができるのです。

日付フィールドに+1すると1秒加えたことになるため、「60（秒）*60（分）*24（時間）」とすれば1日後になります。

注文日に「60*60*24*3」とすれば3日後の日付になります。

標準機能でできることは標準機能で対応しましょう。

対応イベント（早見表）

ここまでフィールドの値操作を見てきましたが、特定のイベント内でのみ実行できます。

以下がイベント別の値操作の可否です（2022年6月現在）。

追加画面表示後（app.record.create.show）や編集画面表示後（app.record.edit.show）は対応していますが

一覧画面のインライン編集開始（app.record.index.edit.show）には対応していません。

また、値操作できないフィールドもあります。

• レコード番号
• 作成者
• 作成日時
• 更新者
• 更新日時
• ステータス（プロセス管理）
• 作業者（プロセス管理）
• 計算
• 自動計算にした文字列1行

加えて、「kintone.events.on」に指定したイベントの範囲外では「=」で値を設定しても反映されません。

たとえば、自作したボタンを押したときや、自作したドロップダウンを選択したときです。

ボタン押下やドロップダウン変更は、clickやchangeといった別のイベントが発生します。

このような場面では「kintone.app.record.get()」でレコードの情報を取得し、「kintone.app.record.set()」で情報を上書きします。

これについては別の記事で改めて解説します。

値の変更は必ずと言ってよいほど発生するので、使えるイベントを覚えておきましょう。

kintoneのアップデートにより、イベントの仕様は変わる可能性がありますので、毎月のアップデート情報も確認しましょう。

次回の記事ではサブテーブルの操作について解説します。

あわせて読みたい

【kintone】JavaScriptの書き方（サブテーブル操作）【カスタマイズ基礎編】 前回の記事ではkintoneのフィールドの値操作について解説しました。 続いて、kintoneにおけるJavaScriptカスタマイズでは「サブテーブル操作」を定義できます。 この記…