カテゴリー内の他の記事

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

Index

はじめに

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 で確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。