kintoneのカスタマイズのJavaScriptをgusuku Customineでのカスタマイズに置き換えする時に、元のJavaScriptをどう読み解けばいいか(基本編)

kintone.events.on('app.record.create.show', (event) => {
  // 初期値をセット
});

kintone.events.on('app.record.edit.submit', (event) => {
  // 保存前にチェック
});

kintone.events.on([
  'app.record.create.change.name',
  'app.record.edit.change.name'
], (event) => {
  // 氏名(name)フィールドが変更されたときに発火
  console.log('氏名が変更されました:', event.record.name.value);
  return event;
});

const rec = event.record;
// price（単価）と qty（数量）の値をそのまま使って合計を入れる例
rec.total.value = rec.price.value * rec.qty.value;
return event; // 保存前の補正なのでeventを返す

kintone.app.record.setFieldShown('detail', false);

const btn = document.createElement('button');
btn.textContent = '今日の日付を入れる';

kintone.events.on('app.record.index.show', () => {
  if (document.getElementById('btn-index-menu')) return; // 二重追加防止

  const space = kintone.app.getHeaderMenuSpaceElement(); // 一覧画面のメニュー位置
  const btn = document.createElement('button');
  btn.id = 'btn-index-menu';
  btn.textContent = '一括処理';

  btn.addEventListener('click', () => {
    // ここで処理を記述
  });

  space.appendChild(btn);
});

kintone.events.on('app.record.detail.show', () => {
  if (document.getElementById('btn-detail-menu')) return; // 二重追加防止

  const space = kintone.app.record.getHeaderMenuSpaceElement(); // やることは 「ボタンをメニュー位置に配置する」
  const btn = document.createElement('button');
  btn.id = 'btn-detail-menu';
  btn.textContent = '今日の日付を入れる';

  btn.addEventListener('click', () => {
    // ボタンクリック時に日付フィールドへ今日の日付を入れる
    const rec = kintone.app.record.get();
    rec.record.date.value = new Date().toISOString().split('T')[0];
    kintone.app.record.set(rec);
  });

  space.appendChild(btn);
});

kintone.events.on(['app.record.create.show', 'app.record.edit.show'], () => {
  const spaceEl = kintone.app.record.getSpaceElement('actionSpace');
  if (!spaceEl || document.getElementById('btn-in-space')) return; // 二重追加防止

  const btn = document.createElement('button');
  btn.id = 'btn-in-space';
  btn.textContent = '計算する';

  btn.addEventListener('click', () => {
    // ボタンクリック時に合計を再計算してセット
    const r = kintone.app.record.get();
    r.record.total.value = r.record.price.value * r.record.qty.value;
    kintone.app.record.set(r);
  });

  spaceEl.appendChild(btn);
});

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(event.record.email.value)) {
  event.record.email.error = 'メールアドレス形式が正しくありません';
  return event;
}

// 条件：詳細画面を表示したとき
kintone.events.on('app.record.detail.show', () => {
  if (document.getElementById('fill-today')) return; // 二重追加防止

  // やること：「ボタンをメニュー位置に配置する」
  const space = kintone.app.record.getHeaderMenuSpaceElement();
  const btn = document.createElement('button');
  btn.id = 'fill-today';
  btn.textContent = '今日の日付を入れる';

  // やること：フィールドに値をセットする。条件: 「ボタンを押した時」
  btn.addEventListener('click', () => {
    const rec = kintone.app.record.get();
    rec.record.date.value = new Date().toISOString().split('T')[0];
    kintone.app.record.set(rec);
  });

  space.appendChild(btn);
});

// 条件：「フィールドの値を編集して値が変わった時」
kintone.events.on(['app.record.create.change.name', 'app.record.edit.change.name'], (event) => {
  const rec = event.record;

  // やること：「大文字を小文字に変換する」
  rec.nameKana.value = (rec.name.value ?? '').toLowerCase();

  return event; // 保存前の処理なのでeventを返す
});