date-fns
date-fnsは日付変換を行うJavaScriptライブラリです。
ぼくはkintoneのカスタマイズでよく使っています。
いつもの方法は、NPM経由でインストールして、モジュールでimportするのですが、お仕事でどうしてもトランスパイル禁止されてしまって、CDNから使うことになりました。
やりかた
公式のドキュメントによるとJSDelivrにて提供されているようです。
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script>
dateFns.addDays(new Date(2014, 1, 11), 10);
//=> Tue Feb 21 2014 00:00:00
</script>
3.6.0の部分はバージョンを入れればよろしい。
dateFnsがグローバルプロパティに登録されるようです。
date-fns@kintone
せっかくなので、kintoneでの利用法を書いておきます。
//てきとうな日付文字列 から Date
dateFns.parse('2024年11月11日','yyyy年MM月dd日', new Date())
//=> "2024-11-10T15:00:00.000Z"
//Date から DATETIME型@kintone
new Date().toISOString()
//ライブラリなしでできる。
//DATETIME型@kintone から Date
new Date(record.日時.value)
//ライブラリなしでできる。
//Date から TIME型@kintone
dateFns.format(new Date(), 'HH:mm')
//kintoneは秒がない。HHに注意（hhにすると12時間表記)
//Date から DATE型@kitnone
dateFns.format(new Date(), 'yyyy-MM-dd')
//MMに注意。mmにすると分のことになる。
CDNによる利用の注意点
date-fnsはDateを取り扱うためか、他のフレームワークと一緒に使う場合は、CDNの読み込み順序を先にしないとエラーになります。
ぼくの場合はすでに導入されていたjQueryと一緒に使った場合でエラーを起こしていました。
importで導入する分には起こらないので、CDN特有の問題だと思います。
ほかのライブラリと比較して
luxonやmomentといったライブラリがありますよね。ぼくはdate-fnsを利用することが多いです。
luxonはDateを拡張した型を使ってしまうし、momentは終了したプロジェクトですので、ぼくが選択する場合はdateFnsになります。
ただ、dayjsと比較すると、CDNを利用する場合はdayjsのほうが軽量ですので軍配が上がるかもしれません。ただし、dayjsはタイムゾーンの概念がないので注意が必要で...とまあ、いろいろ考えることが多いです。
date-fnsは個別で関数をimportしたときの軽量さがうりのライブラリだと思っているので、CDNでまるごと入れる是非は問われそうです。
他にも楽しいライブラリがあるかもしれません。あったら教えてください！
この記事の内容は以上です。ありがとうございます。
kintoneのプラグイン開発や研修などを行っています。
お仕事のお話はこちらまで。