Luxon を使って kintone の日付や日時フィールドのフォーマットをカスタマイズする – cybozu developer network

Index

はじめに
Luxon とは
kintone カスタマイズでの導入方法
Luxon の使い方
- 基本編
- kintone カスタマイズでの実用例
おわりに

はじめに

Luxon は、同じく日付を処理できる Moment.js の後継的なライブラリにあたります。

この記事では、kintone カスタマイズにおける Luxon の導入方法や、よくある日付処理を Luxon で扱う方法を紹介します。

Luxon とは

Luxon は日付データのフォーマット、バリデーション、計算、表示を行うための JavaScript ライブラリです。
ソースコードは GitHub にあり、公式ドキュメントも公開されています。

Moment.js との違い

メリット1：Luxon 単体でタイムゾーンを扱える

Moment.js でタイムゾーンに関する操作を扱う場合、Moment Timezone というライブラリの追加が必要でした。
参考：Moment Timezone を使って簡単時差管理

Luxon は単体でタイムゾーンに対する操作ができます。

メリット2：Luxon で生成するオブジェクトはイミュータブルなオブジェクト

イミュータブルなオブジェクトとは、作成した後に状態が変わらないオブジェクトのことです。
Moment.js のオブジェクトは、ミュータブルなため（イミュータブルではないため）、日付の加算などの操作を行うと、操作を行った元のオブジェクトも変更されます。

Moment.js で元のオブジェクトに影響させたくない場合、オブジェクトを複製し、複製したオブジェクトに対して操作する必要がありました。

Luxon はイミュータブルなオブジェクトのため、日付の加算などを行っても、元のオブジェクトが変更されることはありません。

注意点：ブラウザによっては利用できない機能がある

Luxon は主要ブラウザのメジャーバージョンの2世代前までを公式にサポートしています。
詳細は Official support を参照してください。

kintone カスタマイズでの導入方法

次の URL を kintone の「JavaScript / CSSでカスタマイズ」画面で指定し、その後にカスタマイズファイルを指定します。

https://js.cybozu.com/luxon/3.0.4/luxon.min.js

上記 URL は、2022年10月3日時点での Cybozu CDN で配信されている最新バージョンの URL です。
Luxon を導入する際は、Cybozu CDN のページで配信されているバージョンを確認し、必要に応じて変更してください。

Luxon の使い方

基本編

CDN を読み込むと、グローバルオブジェクトとして luxon が追加されています。
これを使って、Luxon オブジェクトを生成してみましょう。

色々な書式の文字列を取得してみましょう。その他の書式については、Luxon - Formatting をご参考ください。

x 日後や月初などの日付を操作してみましょう。その他の操作については、Luxon - Math をご参考ください。

kintone カスタマイズでの実用例

cybozu developer network で紹介されている Tips で行っている日付計算を、Luxon を使って実装してみましょう。

年齢や経過年数を計算する

経過年数を表示する Tips では、生年月日フィールドから年齢の計算や、入社年月日フィールドから入社してからの経過年月を計算しています。
これらの計算を Luxon を使って行ってみましょう。

カスタマイズを適用するアプリには、以下のフィールドがあるものとします。

フィールド名	フィールドの種類	フィールドコード
生年月日	日付	BirthDay
入社年月日	日付	JoiningDay

サンプルコードでは、アプリのレコードの詳細画面を開いたときに、年齢や入社してからの経過年月を開発者ツールのコンソールに表示します。

期限を過ぎているかを計算する

ログインユーザーが担当しているレコードに背景色をつける Tips では、期限フィールドの値を使って、「期限が過ぎているか」や「期限の x 日前を過ぎているか」を計算しています。
これらの計算を Luxon を使って行ってみましょう。