JavaScriptで文字列を日付オブジェクトに変換する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで文字列を日付オブジェクトに変換する方法について現役エンジニアが解説しています。日付オブジェクトはJavaScriptのDateクラスのことで日付や日時を扱うことができるでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
永井浩平
バックエンド、フロント、クラウドなど幅広く業務を行う。
テックアカデミーでは、フロントエンドコース / Javaコースのメンター。
JavaScriptで文字列を日付オブジェクトに変換する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptで文字列を日付オブジェクトに変換する方法について詳しく説明していくね！
お願いします！
はじめに
今回は、日付形式の文字列（2020/12/01など）を、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日」のような全角文字を含んだものは使えないことに注意が必要です。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
変換する時の注意点
日付を表す文字列はまだ標準化されていないため、ブラウザごとに動作が異なる可能性があります。
そのため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 ⇒3getMonth()は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:00setMonth()のみ3月の場合は2、4月の場合は3と、getMonth()同様、設定したい月から-1した数値を設定する点に注意しましょう。
まとめ
今回は日付オブジェクトへの変換と用意されている主要なメソッドについて学びました。
日付に関する判定を行う際には、一度日付オブジェクトに変換して比較などを行うことができます。
また、曜日取得など便利なメソッドも多数用意されていますので、ぜひ使い方をマスターしましょう。
JavaScriptで文字列を日付オブジェクトに変換する方法がよく分かったので良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
