JavaScriptで文字列を日付オブジェクトに変換する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで文字列を日付オブジェクトに変換する方法について現役エンジニアが解説しています。日付オブジェクトはJavaScriptのDateクラスのことで日付や日時を扱うことができるでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで文字列を日付オブジェクトに変換する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptで文字列を日付オブジェクトに変換する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

日付オブジェクトとは

JavaScriptに標準で入っている日付を表す組み込みオブジェクトのことです。

日時を日付オブジェクトにすることで、年や曜日などを取得するような日付の処理をするメソッドが利用できます。

また、日付オブジェクト同士の比較も容易にできるようになるでしょう。

 

文字列を日付オブジェクトに変換する方法

現在の日時で日付オブジェクトを作るには下記のように記述します。

new Date();

日時を表す文字列から、日付オブジェクトを作ることで特定の日時の日付オブジェクトを作ることも可能です。

 

例えば、2020/01/01を日付オブジェクトにする場合は、下記のように記述しましょう。

new Date('2020/01/01')

日時を表す文字列は、RFCやISOで定められたフォーマットに沿ったものです。

RFCやISOは標準の仕様を決めるグループのようなものになります。

 

定められたフォーマットはそれぞれ公開されたドキュメントで確認できるでしょう。

年と月と日は-(ハイフン)や/(スラッシュ)もしくは半角スペースで区切ります。

時、分、秒は:(コロン)で区切ります。

下記のような感じです。

2020/01/01 16:12:20

また、「2020年1月1日」のような全角文字を含んだものは使えないことに注意が必要です。

 

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

変換する時の注意点

日付を表す文字列は、まだ標準化されていないためブラウザごとに動作が異なる可能性があります。

そのためMDNのリファレンスでも、非推奨とまではなっていないものの、日付を表す文字列から日付オブジェクトを作らないことを勧めています。

使用する場合は、対象のブラウザで動作を確認するようにしてみましょう。

日付文字列の動作が異なるケースとして、Chromeで下記のJavaScriptを動作させてみてください。

console.log(new Date('2020/01/01'));  //Wed Jan 01 2020 00:00:00 GMT+0900 (日本標準時)
console.log(new Date('2020-01-01'));  //Wed Jan 01 2020 09:00:00 GMT+0900 (日本標準時)

日付の区切りをスラッシュにすると、省略した時刻は00:00となるものの、ハイフンにすると09:00となります。

 

ハイフンの場合だけUTC(世界標準時)と解釈され、今回実行しているパソコンが日本時刻になっているので時差の9時間が足されているという形です。

指定した日時の日付オブジェクトをつくる他の方法を2つ紹介します。

日付文字列で動作がうまくいかない際は、こちらの方法を試してみましょう。

 

1、下記のように第1引数に年、第2引数に月のインデックス、第3引数に日・・・というように個別の数字で指定する

new Date(2020, 1, 1)

2、日付を扱うライブラリ(部品)を使う

有名なところでMoment.jsというライブラリがあります。

このライブラリでは、動作の異なる部分などを吸収してくれるだけではなく○月○日のような全角文字のフォーマット指定も可能です。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptで文字列を日付オブジェクトに変換する方法がよく分かったので良かったです!

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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