JavaScriptで日付チェックする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで日付チェックする方法について現役エンジニアが解説しています。JavaScriptで日付の妥当性をチェックするには日付の文字列をオブジェクトにします。また、moment.jsやdate-fns.jsなどのライブラリで検証することも出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで日付チェックする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで日付チェックする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptで日付チェック(妥当性判定)する方法

JavaScriptで日付の妥当性をチェックするためには

  1. 日付にするための文字列
  2. 1をDateオブジェクトにしたもの

を使用します。

 

var strDate = "2019/6/20"

var dateObj = new Date(strDate) // strDateをDateオブジェクトに変換

var objStr = dateObj.getFullYear() + "/" + dateObj.getMonth()-1 + "/" dateObj.getDate()

if (strDate == objStr) {

console.log("有効な日付です。")

else

console.log("無効な日付です。")

end

 

日付チェックに利用できるメソッド、ライブラリ

JavaScript単体で日付チェックを行おうとすると、どうしてもコーダーによって判断材料や、前提条件が異なってくるので全体の統一化が難しいです。そこで、JavaScriptのライブラリを使用することで、コードのばらつきやチェック漏れなどを防ぐことが出来ます。

日付チェックに役立ついくつかのライブラリをご紹介します。

1.moment.js

Date関数をラッピングしてくれるライブラリです。isValid()という関数を使用することで、設定した日付が妥当であるかを判断してくれます。

2.date-fns

moment.jsと同じようにDate関数を補助そてくれるライブラリです。こちらのライブラリにもvalidメソッドがあり、妥当性を検証してくれます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

1. moment.js

moment([2019, 6, 2], 'YYYY-MM-DD’).isValid();

// true

moment([2019, 6, 31], 'YYYY-MM-DD’).isValid();
// false

 

2.date-fns

var result = isValid(new Date(2019, 6, 2))

console.log(result) // true

var result = isValid(new Date(""))

console.log(result) // false

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。