kintoneの「更新日時」を整形して表示するまでの試行錯誤

はじめに

kintoneのレコード詳細画面で「更新日時」を見やすく表示したいと思い、ボタンをクリックすると日付を表示する処理を実装しました。

この記事では、最初にうまくいかなかったコードから、最終的に整形して表示できるようになるまでの流れを時系列で紹介します。

内容的にはJavaScriptの初心者向けです！

1. 最初に書いたコード

まずは、更新日時をそのまま取得して表示しようとしました。

変更前

menuButton.onclick = function() {
    const spaceField = kintone.app.record.getSpaceElement('space_time');
    const rec = kintone.app.record.get();

    const updatedAt = rec.record.更新日時.value;
    spaceField.innerText = updatedAt;
};

このコードでも一応表示はされますが、表示されるのは以下のような ISO形式の文字列 です。

2025-07-30T08:15:00Z

人間が見るには少しわかりづらい形式ですよね。

2. 日付を整形しようとしたが…

次に、年・月・日を取り出して整形しようとしました。

初歩的なミス

const updatedAt = rec.record.更新日時.value;
const year = updatedAt.getFullYear(); // ❌

原因は、updatedAt が 文字列 であるため、Date オブジェクトのメソッド（getFullYear() など）が使えなかったことです。

3. Date オブジェクトに変換して解決

そこで、new Date(...) を使って Date オブジェクトに変換することで、年・月・日を取り出せるようになりました。

変更後

const updatedAtStr = rec.record.更新日時.value;
const updatedAt = new Date(updatedAtStr);

const year = updatedAt.getFullYear();
const month = String(updatedAt.getMonth() + 1).padStart(2, '0'); // 月は0始まり
const day = String(updatedAt.getDate()).padStart(2, '0');

const formattedDate = `${year}/${month}/${day}`;
spaceField.innerText = formattedDate;

これで、以下のような 見やすい形式 で表示できるようになりました。

2025/07/30

4. 最終的なコード全体

kintone.events.on('app.record.detail.show', (event) => {
    const menuButton = document.createElement('button');
    menuButton.id = 'menu_button';
    menuButton.innerText = 'ボタン';

    menuButton.onclick = function() {
        const spaceField = kintone.app.record.getSpaceElement('space_time');
        const rec = kintone.app.record.get();

        let formattedDate = '';

        if (rec && rec.record.更新日時 && rec.record.更新日時.value) {
            const updatedAtStr = rec.record.更新日時.value;
            const updatedAt = new Date(updatedAtStr);

            const year = updatedAt.getFullYear();
            const month = String(updatedAt.getMonth() + 1).padStart(2, '0');
            const day = String(updatedAt.getDate()).padStart(2, '0');

            formattedDate = `${year}/${month}/${day}`;
        } else {
            formattedDate = '更新日時が取得できませんでした';
        }

        spaceField.innerText = formattedDate;
    };

    kintone.app.record.getHeaderMenuSpaceElement().appendChild(menuButton);
});

イベントハンドラー内で時刻を取得しない場合

レコードの保存時に時刻を取得してWebhookなどを使い他システムで時刻を持っていきたい場合もあるかと思います。
そんなときは、onclickなどのイベントハンドラーを使わない場合はget()を使わず変数に取得した日時データをそれぞれ変換して入れていけばOKです。
下のコードは追加したレコードを保存したときに、WebhookでMakeにつなぎ、Slackへ数値を渡し通知するときの例です。
参考になればうれしいです！

JS

(() => {
  'use strict';

  // レコード追加成功時にSlack通知
  kintone.events.on('app.record.create.submit.success', (event) => {
    const record = event.record;
    
    // 更新日時（yyyy/mm/dd hh:mm:ss形式）
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');

    const formattedDateTime = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;

    const title = record.タイトル.value;
    
    const payload = {
        title: title,
        createdAt: formattedDateTime
    };
    
    fetch('https://hook.us2.make.com/XXXXXXXXXXXXXXX', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json'
      }
    }).catch(error => {
      console.error('Slack通知エラー:', error);
    });
    return event;
  });
})();

※20250805追記

おわりに

kintoneの日時フィールドは文字列として取得されるため、JavaScriptで扱うには Date 型への変換が必要です。

今回のように、試行錯誤を通じて「なぜ変換が必要なのか」を理解することで、より柔軟なUIの実装が可能になります。