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のプラグイン開発や研修などを行っています。
お仕事のお話はこちらまで。