はじめに
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 を使って行ってみましょう。
カスタマイズを適用するアプリには、以下のフィールドがあるものとします。
フィールド名 | フィールドの種類 | フィールドコード |
---|---|---|
期限 | 日付 | LimitDay |
サンプルコードでは、アプリのレコード一覧画面を開いたとき、それぞれのレコードが期限を過ぎていた場合や期限の5日前を過ぎていた場合に、開発者ツールのコンソールに表示します。
おわりに
Luxon や Moment.js といった日付処理ライブラリを使うと、JavaScript の Date 型では面倒な日付処理を楽に扱うことができます。
cybozu developer network には、Moment.js を使って日付処理をする Tips もあります。kintone カスタマイズで日付処理をしたいときには、ぜひこちらもご参考ください。
また Moment.js から Luxon に移行する際には、公式の Moment.js との違いをご参考ください。
このTipsは、2022年10月版 kintone で確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。