[JavaScript]date-fnsを使って日付をバリデーションする話

概要

JavaScriptでユーザーが送信した日付が、正しい日付かどうか確認したい時がありました。
今回はその方法と注意点を共有します。

この記事で伝えたいこと

JavaScriptで日付のバリデーションをする際は、date-fnsのparseメソッドを使用することを推奨します。

date-fnsで日付のバリデーションを行ってみる

実行環境

項目	環境
OS	Mac
editor	Visual Studio Code
npm	5.6.0
node.js	8.9.4
date-fns	npm install date-fnsでインストール済み

試してみましょう

let parse = require('date-fns/parse')
const result = parse('2022-02-31', 'yyyy-MM-dd', new Date()) // 不適切な日付
console.log(result)
// Invalid Date

let parse = require('date-fns/parse')
const result = parse('2022-02-20', 'yyyy-MM-dd', new Date()) // 適切な日付
console.log(result)
// 2022-02-19T15:00:00.000Z 日本はUTC+9時間なので-9時間されている

date-fnsのparseメソッドに不正な値を入力するとInvalid Dateを返してくれます。
また、正常な値では問題なく(yyyy-MM-dd)型の日付を返してくれます。

補足

date-fnsのparseメソッドはうるう年にも対応しています

let parse = require('date-fns/parse')
const result = parse('2023-02-29', 'yyyy-MM-dd', new Date()) // 不適切な日付
console.log(result)
// Invalid Date

let parse = require('date-fns/parse')
const result = parse('2024-02-29', 'yyyy-MM-dd', new Date()) // 適切な日付
console.log(result)
// 2024-02-28T15:00:00.000Z // 

留意点

date-fnsにはvalid_date?というメソッドが用意されていますが、2023-02-31などの不適切な日付も許容してしまうため、parseメソッドを使用することを推奨します。

また、JavaScriptにはDate.parseというメソッドが用意されていますが、

ブラウザーごとに動作が異なり一貫性がないため、 Date.parse で文字列を解釈しないことを強く推奨します。

とMDNに書いてあるようにDate.parseをバリデーションとして使うことは非推奨です。

まとめ

JavaScriptで日付のバリデーションを行う場合はdate-fnsのparseメソッドを使用することを推奨します。

参考記事

mdn date docs(MDN公式サイト Dateクラス)
date-fns-parse(date-fns公式サイト)