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

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

目次

• はじめに
• 日付オブジェクトとは
• 文字列を日付オブジェクトに変換する方法
• 変換する時の注意点
• 日付オブジェクトで使える便利なメソッド
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

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

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

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

お願いします！

はじめに

今回は、日付形式の文字列（2020/12/01など）を、JavaScriptで日付のオブジェクトとして扱えるように変換する方法について学びます。

日付オブジェクトに変換することで様々な利点がありますので、ぜひこの機会に変換の方法と日付オブジェクトの主要な機能について学びましょう。

日付オブジェクトとは

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

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

[PR] コーディングで副業する方法とは

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

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

new Date();

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

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

new Date('2020/01/01')

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

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

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

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

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

下記のような感じです。

2020/01/01 16:12:20

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

変換する時の注意点

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

そのため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というライブラリがあります。

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

日付オブジェクトで使える便利なメソッド

日付オブジェクトに変換した後は、日付オブジェクトに用意されている便利なメソッドを使うことができます。

以下、主要なメソッドを説明します。

年、月など特定の値を取得するメソッド

getFullYear()やgetMonth()などを使うと、年や月を取得できます。

let dateObject = new Date('2025/04/01');
console.log(dateObject.getFullYear());  //console ⇒2025
console.log(dateObject.getMonth());  //console ⇒3

getMonth()は1月の場合は0、2月の場合は1です。

日付オブジェクトの月から-1された数値が返却される点に注意しましょう。

年、月など特定の値を設定するメソッド

setFullYear()やsetMonth()などを使います。

let dateObject = new Date('2020/04/01');
dateObject.setFullYear(2030);
console.log(dateObject);  //console⇒ Mon Apr 01 2030 00:00:00

setMonth()のみ3月の場合は2、4月の場合は3と、getMonth()同様、設定したい月から-1した数値を設定する点に注意しましょう。

まとめ

今回は日付オブジェクトへの変換と用意されている主要なメソッドについて学びました。

日付に関する判定を行う際には、一度日付オブジェクトに変換して比較などを行うことができます。

また、曜日取得など便利なメソッドも多数用意されていますので、ぜひ使い方をマスターしましょう。

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

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

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

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！