輝昌2017/8/182019/5/14こんにちは!Webコーダー・プログラマーの貝原(@touhicomu)です。WEBサイトにおいて、日付というのは重要な情報の1つですよね。そんな情報の処理について、みなさんどれくらいご存知ですか?どうやったら日付が表示できるのかわからない...いろいろ調べたけど、できることがいっぱいあってよくわからない...なんて方もいるかもしれませんね。今回はそんな方必見!JavaScriptの日付操作でよく使用されるDateオブジェクトについて解説していきます。下記の流れで、日付処理の全てをご紹介しましょう。項目がちょっと多いですが、具体的なサンプルコードと共に詳しく解説していきます。読んで、理解を深めていってください。時間」を操作することができます。JavaScriptから特定の日付を算出できるのはもちろんですが、ある一定期間の経過時間を求めることも簡単です。Dateオブジェクトには用途に応じて便利に使えるメソッドがたくさん用意されているからです。本記事では、これらのメソッドの使い方や応用的な実践例も合わせて解説していきますので、ぜひ参考にしてみてください!Dateオブジェクトの使い方ここからは、実際にDateオブジェクトを活用したプログラミング手法を見ていきましょう!基本的な使い方から日付の設定、加算・減算などの演算処理についても詳しく見ていきます。時間」を操作するには、まず最初に「new」を使ってインスタンスを作成する必要があります。Date()」と記述することでDateオブジェクトのインスタンスを作成しています。そのインスタンスを変数「today」へ代入していますよね?この時点で「today」には現在の「日時」が格納されており、実行結果にしっかりと出力されているのが分かります。Date()」と記述したように「引数なし」でそのまま利用しました。引数を指定することでさらに3種類の取得方法があり全部で4通りの日付を求める方法があることになります。そこで、それぞれの日付を求める方法について見てみましょう。(JST)実行結果を見ると分かりますが、先ほど学んだ「引数なし」の1では現在の日時が出力され、「引数を指定した」2から4では3通りすべての方法で同じ日時を出力している点に注目してください!1の引数なしで日時を求める方法はこれまで学んできた内容。2の日時を「文字列」から求める方法は、「2017/11/27」や「2017-11-27」のように一般的な日時の文字列をそのまま代入するだけ。3の「年月日時分」で求める方法は、数値を順番に「カンマ区切り」で指定していけばOK!(「月」は1引いた数になる点に注意)ちょっと分かりにくいのが4の「経過ミリ秒」で日時を求める方法。00:00:00」からミリ秒単位で経過時間を計測できる機能があるのです。この機能を活用したメソッドも幾つか用意されており、上手に利用することでミリ秒から日時を求められるというわけです。「Date()」を使うケースで多いのが「加算・減算」などの計算処理です。日付や時間などを計算することに特化したメソッドというのはDateオブジェクトに用意されていません。Date()」で今日の日付を取得していますね。今日の日付に対して「setDate()」を記述することで日時を再設定できるようになります。50」と記述すれば良いわけです。実行結果を見ると、最初の日付から50日後の日付がしっかりと表示されていますね!月の終わりが「30日」か「31日」なのかを悩む必要がなく、すべて自動的に計算してくれるので便利ですね。この考え方を理解できれば、まったく同じ方法で「減算」も可能ですね。(JST)この例では、今日の日付から「3ヶ月」を引いた結果を求めていますね。「月」の場合は、「setMonth()」で再設定できます。2019年4月10日Dateのフォーマットここからは、Dateオブジェクトを使って取得した日付データを任意のフォーマット(形式)に調整する手法について学んでいきます。データを個別に取得できるメソッドがあります。59)これらのメソッドを使うことで、日付の個別データを取得できるわけです。これらのデータを応用すれば自分の好きな日付の形式にいくらでも変換することが可能になります。11」であるという点です!つまり、実際の日付を得るには取得した数値に「+1」する必要があるわけです。この点は間違いやすいポイントなので、忘れないようにしておきましょう!日付のフォーマットを設定する方法それでは、先ほどのメソッドを活用して日付のフォーマットを設定してみましょう!今回は、取得したDateオブジェクトを「○年○日○日」の形式に変換してみます。'日');実行結果2018年2月1日この例では、まず最初に今日の日付を取得してそこから「年・月・日」をそれぞれ個別に取得しているのが分かります。取得した個別の日付データは、最後に文字列と組み合わせて実行結果のように出力しています。このように、日付データを分解して個別に取得することで、自分の好きなように日付データのフォーマット(形式)を変えられるわけです。実は、Dateオブジェクトには任意のフォーマットへ変換するメソッドがありません。そのため、一般的には自分で独自の関数を作成することになります。】のような形式で任意の日付フォーマットに変換する関数を作るわけです。);実行結果2018年2月1日この例では、sampleDate()を作ってコンソールログへ指定したフォーマットで日付を出力するようにしています。仕組みは簡単で、フォーマットの「YYYY」という部分を「replace()」メソッドを使って「年」に置換しているだけです。「月・日」も同様に置換すれば、フォーマットで指定した形式の日付が取得できるというわけです。PM」の付与なども簡単にできますね。Dateオブジェクトのフォーマットについてのさらに詳しい解説は以下の記事にまとめているので参考にしてみてください。2019年4月23日Dateオブジェクトの主要メソッドDateオブジェクトには多数のメソッドが用意されているわけですが、特に日付に関するプログラミングでよく使われるものをご紹介します!now()で現在の日付を求める方法now()メソッドは、現在の日時データを「経過ミリ秒」で取得することができます。】のようにDate型にそのままnow()メソッドを実行すればOKです。);実行結果1517557599943この例では、now()メソッドを実行して現在の日時を経過ミリ秒で取得しています。「getTime()」メソッドは、任意の日付が持っている「経過ミリ秒」を取得することができます。】のようにDate型へ直接getTime()を実行します。);実行結果1596207600000この例では、「2020年8月1日」という日付データを持つDateオブジェクトに対してgetTime()を実行しています。実行結果を見ると、指定の日付データが持つ経過ミリ秒を取得できているのが分かりますね。「parse()」メソッドは、文字列の日付データをDateオブジェクトの形式に変換することができます。変換された結果は「経過ミリ秒」になるという点に注意が必要です。】のように引数へ文字列で記述された日付を指定します。);実行結果1596207600000この例では、「2020年8月1日」の日付データが持つ経過ミリ秒をparse()で取得しています。実行結果を見ると、経過ミリ秒が取得できているのが分かりますね。parse()メソッドはブラウザによって解釈が少し異なるため結果が微妙に異なるケースがあります。そのため、現在では先ほどご紹介した「getTime()」を使ったミリ秒を取得する方が良いでしょう。「toString()」メソッドは、Dateオブジェクトで作られた日付データを文字列に変換してくれるメソッドになります。】のように変換したい日付に対してtoString()を実行するだけです。(JST)この例では、現在の日付を取得したあとにtoString()を実行しているのが分かりますね。コンソールには文字列として変換された日付データが出力されていることに注目してください。注意点としては、出力される日付は必ず英語になるので必要に応じて日本語に変換する処理を行いましょう!toStringの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。2019年5月17日Dateオブジェクトの比較Dateオブジェクトの日付は、簡単な記述で比較を行うことが可能です。複数の日付を比較する方法や、経過ミリ秒による比較手法を詳しく見ていきましょう!日付を比較する方法Dateオブジェクトは、比較演算子の「<」「>」によって日付同士を比較することができます。JavaScriptでは、古い日時が小さい値になり新しい日時が大きい値になるように設計されています。trueこの例では、2つの日付を比較演算子を使って比べているのが分かります。「date1」には8月の日付が格納されており、「date2」は9月の日付データが格納されています。date1の日付よりもdate2の日付の方が大きい値ということになりますね。falseが出力できているのが分かります。今度は、経過ミリ秒を使って日付同士を比較してみましょう!「経過ミリ秒」はNumber型の数値であるため、比較演算子の「<」「>」に加えて「===」の利用も可能です。経過ミリ秒の取得は一般的に「getTime()」メソッドを利用するのが簡単です。日付は同じですこの例では、まったく同じ日付同士の経過ミリ秒を使って比較しているのが分かります。経過ミリ秒が同じなので、当然ですが結果はtrueとなりまったく同じであることが実行結果からも分かりますね。このように、日付データは四則演算で計算するだけでなく、比較も簡単に行えるという点を覚えておきましょう!タイムゾーンを世界標準時(UTC)で取得する方法Dateオブジェクトでは、世界標準時(UTC)のタイムゾーンの日時を取得できます。UTCフォーマットの文字列を取得するには「toUTCString()」メソッドを使用するのが一般的です。ちなみに、拡張表記のISO形式にも対応しており「toISOString()」メソッドを使用します。実際にサンプルコードを見ていきましょう。GMT2017-08-18T05:15:06.278Z実行結果を見ると、UTC・ISOフォーマットの文字列を取得していますね。UTCの出力にGMTとあるのは、以前はUTCがGMTと呼ばれていたからです。UIのライブラリにある機能です。初心者でも簡単に実装できるのが特徴で、独自フォーマットなども標準でサポートされています。使い方も簡単で、まずはカレンダーを表示させたい箇所に次のようなHTMLを記述します。id="datepicker">ポイントは「id属性」を指定するという点です。名称は何でも構いませんが、次のようにjQueryから設定する必要があります!$('#datepicker').datepicker();先ほど指定したid属性に対して、「datepicker()」を実行すればカレンダーが表示されます。カレンダーから日付を選択してフォームへ入力することもできるわけです。2019年4月24日まとめ今回は、JavaScriptで日付データを扱う「Dateオブジェクト」を学習しました!最後に、学習のポイントを振り返ってみましょう!Dateオブジェクトを利用すると任意の日付データを取得できるDateオブジェクトは簡単な記述で加算・減算ができる日付を任意のフォーマットに変換できるメソッドが用意されている日付データは簡単な記述で比較を行うことができるDateオブジェクトは世界標準時の取得にも対応しているDatepickerを使えばカレンダーから日付を操作できる以上の内容を再確認し、ぜひ自分のプログラムに生かして学習を進めてください!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。輝昌こんにちは!貝原(@touhicomu)と申します。現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。現住所は、日本の西海岸、長崎県は波佐見町です。ボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。以下の活動も行っています。