Kintoneでの値変更をJavaScriptでどう検知すべきか調査した結果を示した。

編集後の値で処理を施す場合

以下の change.js の作りで、console.log している箇所で newValue を使って処理すれば良い。

(function() {
	'use strict';

	// レコードの変更イベント
	kintone.events.on(['app.record.create.change.建物名', 'app.record.edit.change.建物名', 'mobile.app.record.create.change.建物名', 'mobile.app.record.edit.change.建物名'], function(event) {
		// 変更後の値を取得
		const newValue = event.changes.field.value;

		// 変更前と変更後の値を比較
		console.log('値が変更されました:', '変更後:', newValue);
		
		return event;
	});
})();

※『建物名』列の変更を検知したい場合の例。任意のフィールドコード名に書き換えること。

変更前の値を使いたい場合

変更前の値を使いたい場合は工夫が要る。

オンライン検索すると『event.changes.field.value』で比較が出来るという情報もあったが、嘘だった。『event.changes.field.value』には変更後の値しか入らないので注意して欲しい。

２０２５年３月９日現在では change のイベントで変更前の値は取得出来ない。ではどうするか。2種類の方式が考えられる。

１．変更前の値を保存しておき変更時に比較

レコードの作成／編集画面を表示した時に変更前の値を oldValue 変数に取得しておき、変更時に利用する方法。

(function() {
	'use strict';
	
	// グローバル変数で変更前の値を保存
	let oldValue = null;

	// レコード作成・編集画面を開いたときに変更前の値を記録
	kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'mobile.app.record.create.show', 'mobile.app.record.edit.show'], function(event) {
		oldValue = event.record.建物名.value;
		console.log('変更前:', oldValue);
		return event;
	});

	// レコードの変更イベント
	kintone.events.on(['app.record.create.change.建物名', 'app.record.edit.change.建物名', 'mobile.app.record.create.change.建物名', 'mobile.app.record.edit.change.建物名'], function(event) {
		// 変更後の値を取得
		const newValue = event.changes.field.value;

		// 変更前と変更後の値を比較
		console.log('値が変更されました:', '変更前：', oldValue, '変更後：', newValue);
		
		return event;
	});
})();

これは無駄な列を追加しない分データ構造を美しく保てるメリットがあるものの、別画面での情報を使うことになるのがコードの独立性上美しくない。

２．変更前の値保存用の列を用意し比較

ユーザーが変更出来ない列『建物名変更前』を設けておき、編集時に値を退避しておく方法。

(function() {
	'use strict';

	// レコードの変更イベント
	kintone.events.on(['app.record.create.change.建物名', 'app.record.edit.change.建物名', 'mobile.app.record.create.change.建物名', 'mobile.app.record.edit.change.建物名'], function(event) {
		// 変更前の値を取得
		const oldValue = event.record.建物名変更前.value;

		// 変更後の値を取得
		const newValue = event.changes.field.value;
		
		// 変更後の値で変更前の値を上書き
		event.record.建物名変更前.value = newValue;

		// 変更前と変更後の値を比較
		console.log('値が変更されました:', '変更前：', oldValue, '変更後：', newValue);
		
		return event;
	});
})();

これは「１」の方法とは対照的で、無駄な列を追加するためデータ構造は汚くなるデメリットがあるが、処理は編集画面のみで完結するためコードの独立性上美しい。

所感

方法「１」も「２」も甲乙つけがたいメリデメがあるが、Kintoneがユーザー部門向けのサービスであることを考えると、分かりやすく御しやすい「２」の方式をオススメする。

ただ、使う側にとって嬉しいのはBefore-Afterの変更前・変更後情報両方を event 変数が持ちイベントの性質上求められ易い措置がとれるKintoneの仕様変更な気がする。処理速度に響きそうなため現実的でないかな。