JavaScriptで日時を取得、操作するにはDateクラスのオブジェクトを使用します。
今回はDateクラスのオブジェクトの作成方法や、Dateクラスのオブジェクトの各種日時取得メソッドについての使い方を、実際のコードをまじえて解説します。
Dateクラスとは
単なる数値や文字列とは異なり、日付の管理は単純なようでいて難しく、考慮すべき事項が多く存在します。うるう年や、ひと月ごとの日数、曜日などの管理は、単なる数字のみで自分で正確に算出するとなると、多くの工数がかかってしまうものです。
この日付という概念をプログラミング上で簡単かつ正確に扱えるよう用意されているのが、Dateクラスです。
Dateクラスの概要
Dateクラスは大半のプログラミング言語に用意されています。日付はアプリケーション開発の際に度々表示や操作が必要となる要素であるため、Dateクラスはどういったプログラミング言語であっても、欠かせない存在なのです。
プログラマーの開発の現場においても、日付に関わる実装は頻繁に求められるため、Dateクラスに習熟することは活躍できるプログラマ・エンジニアになるために必須と言えるでしょう。
JavaScriptのDateクラス
JavaScriptのDateクラスには次の特徴があります。
- Dateをコンストラクタとして呼び出すことでのみDateクラスのインスタンスを作成できる。
- 基本的にデバイスの時刻を基準にDateクラスのインスタンスが作成される
- dateFormat()系メソッドが用意されていない
1.の【コンストラクタとして呼び出す】とは【new Date()】といった記法でDateを作成する、という意味です。
JavaScriptにおいて、Dateクラスのインスタンスは必ずこの記法で作成します。
2.の【ブラウザの時刻を基準に】とは、つまりは【サーバの時刻ではない】ということです。これは【ユーザの環境に応じて時刻にブレが出る】ということを示します。
3.の【dateFormat()系メソッド】とは、いくつかのプログラミング言語で用意されている【日付の整形用メソッド】のことを示します。
JavaScriptにはそういった日付整形メソッドは存在していないため、もし日付の整形処理のメソッドが必要な場合、自前で用意する必要があります。
JavaScriptで現在の日時を求める方法
JavaScriptで現在の年や月、日付や曜日を取得するには【Dateクラスのインスタンス】、つまり【Dateオブジェクト】を作成し、利用する必要があります。
実際にどのようなコードで日時を算出するのか、ここから実際のプログラムと一緒に解説していきます。
new Date() で現在日時のDateオブジェクトを作成する
まず【Dateオブジェクト】の作成方法です。JavaScreiptのDateオブジェクトは、Dateをコンストラクタとして呼び出すことでのみ作成可能です。
これは以下のように書きます。
var currentDate = new Date()
これで、変数currentDateは【現在の日時】を示す【Dateオブジェクト】になりました。
さらに、作成した現在の日時のDateオブジェクトが、【実際にどういった数値として管理されているか】について知りたければ、【getTime()】メソッドを使用することで、取得ができます。
var currentDate = new Date()
var time = currentDate.getTime()
console.log(time) /* 1970年1月1日0時0分0秒から経過したミリ秒が出力される */
ログに出力された変数timeの中身には【1970年1月1日0時0分0秒から経過したミリ秒】が入っています。このミリ秒の値によって、Dateオブジェクトの日時が管理されています。
実際に現在日時のDateオブジェクトから【何年】や【何月】といった数値を取得するには、作成したDateオブジェクト自身が持つ各種メソッドを使用する必要があります。
getFullYear() で年を取得する
まず、年を取得するコードを紹介します。
年を取得するにはDateオブジェクトのメソッド【getFullYear()】を使用します。
var currentDate = new Date()
var year = currentDate.getFullYear()
console.log(year) /* 今が2019年なら【2019】が出力される*/
JavaScriptにはこの他に【getYear()】という年取得用メソッドが用意されていますが、ここで紹介した【getFullYear()】メソッドを使用することが現在では推奨されています。
getMonth() で月を取得する
月を取得するには以下のコードを用います。
var currentDate = new Date()
var month = currentDate.getMonth()
console.log(month) /* 今が2月なら【1】が出力される（※【2】ではない） */
注意が必要なのは、【getMonth()】メソッドは【1月】なら【0】、【2月】なら【1】、【3月】なら【2】を返すということです。JavaScriptにおいて、【月はゼロ始まり】なのです。
getDate() で日付を取得する
日付は以下のコードで取得できます。
var currentDate = new Date()
var date = currentDate.getDate()
console.log(date) /* 今日が20日なら【20】が出力される */
月と異なり、日付は素直にそのままの日付が数値として出力されます。ゼロ始まりである【月】と混合しないよう気を付けてください。
getDay() で曜日を取得する
曜日は以下のコードで取得できます。
var currentDate = new Date()
var day = currentDate.getDay()
console.log(day) /* 今日が火曜日なら【2】が出力される */
曜日は【日曜日】なら【0】、【月曜日】なら【1】、【火曜日】なら【2】を返します。日曜日からのゼロ始まりであることに気を付けてください。
getHours() で時を取得する
時は以下のコードで取得できます。
var currentDate = new Date()
var hours = currentDate.getHours()
console.log(hours) /* 今が23時なら【23】を出力する*/
このように【getHours()】メソッドは日付同様に、今の時刻そのものの数字を取得します。
getMinutes() で分を取得する
分は以下のコードで取得できます。
var currentDate = new Date()
var min = currentDate.getMinutes()
console.log(min) /* 今が30分なら【30】を出力する*/
【getHours()】メソッドと同様に、分そのものの数値を返却します。【60分】は存在せず、【0分から59分】に該当する【0から59の整数】を【getHours()】メソッドは返却するようになっています。
getSeconds() で秒を取得する
var currentDate = new Date()
var sec = currentDate.getSeconds()
console.log(sec) /* 今が10秒なら【10】を出力する*/
分を取得する【getMinutes()】メソッドと同様に、【getSeconds()】メソッドも【0秒から59秒】に該当する【1から59の整数】を返却します。60秒は存在せず【0秒】として返却されることに気を付けてください。
JavaScriptのDateクラスを活用する場面
JavaScriptのDateクラスは、以下のような場面で活用することができます。
**シナリオ１：**ユーザーが特定の日付（例えば、2024年5月18日）から7日後の日付を知りたいとします。
// まず、特定の日付を表すDateオブジェクトを作成します。
let specificDate = new Date(2024, 4, 18); // 月は0から始まるため、5月は4となります。
// 次に、その日付から7日後の日付を求めます。
specificDate.setDate(specificDate.getDate() + 7);
// 結果を表示します。
console.log(specificDate);
このコードは、DateオブジェクトのgetDateメソッドとsetDateメソッドを使用しています。
getDateメソッドは、Dateオブジェクトが表す月の日付（1～31）を返します。
setDateメソッドは、Dateオブジェクトが表す月の日付を設定します。このメソッドに新しい日付を設定すると、Dateオブジェクトは自動的に更新されます。
このように、Dateクラスのメソッドを組み合わせることで、様々な日付操作を行うことができます。
**シナリオ２：**ユーザーが特定の日付（例えば、2024年5月18日）がその年の何日目であるかを知りたいとします。
// まず、特定の日付を表すDateオブジェクトを作成します。
let specificDate = new Date(2024, 4, 18); // 月は0から始まるため、5月は4となります。
// 次に、その年の初めからの経過日数を求めます。
let startOfYear = new Date(specificDate.getFullYear(), 0, 1);
let dayOfYear = Math.floor((specificDate - startOfYear) / (1000 * 60 * 60 * 24)) + 1;
// 結果を表示します。
console.log(dayOfYear);
このコードは、前述したDateオブジェクトのgetFullYearメソッドを使用しています。
getFullYearメソッドは、Dateオブジェクトが表す年（4桁の数値）を返します。
また、日付の差を求めるために、Dateオブジェクトをミリ秒単位の数値に変換しています。これは、Dateオブジェクトを数値に変換すると、1970年1月1日00:00:00 UTCからの経過ミリ秒が得られるためです。
日付は状況によってさまざまな表示や操作を求められます。
実務や学習の中でできるだけ多くのシナリオに触れて、柔軟に対応できるようにしましょう。
JavaScriptのDateクラスで発生するエラー
JavaScriptのDateクラスではエラーが発生する可能性があるため、その対応も記述しておくことをお勧めします。
一例としてユーザーが無効な日付（例えば、2024年2月30日）を作成しようとした場合を仮定します。
try {
// 無効な日付を表すDateオブジェクトを作成します。
let invalidDate = new Date(2024, 1, 30); // 月は0から始まるため、2月は1となります。
// Dateオブジェクトが有効かどうかを確認します。
if (isNaN(invalidDate.getTime())) {
throw new Error('Invalid date');
}
// 結果を表示します。
console.log(invalidDate);
} catch (error) {
console.error(error.message);
}
このコードは、DateオブジェクトのgetTimeメソッドを使用しています。
getTimeメソッドは、Dateオブジェクトが表す日付の経過ミリ秒を返します。しかし、Dateオブジェクトが無効な日付を表す場合、getTimeメソッドはNaN（Not a Number）を返します。そのため、isNaN関数を使用してDateオブジェクトが有効かどうかを確認できます。
このように、エラーハンドリングを適切に行うことで、プログラムが予期しない動作をするのを防ぐことができるため、できるだけ考慮しておくようにしましょう。
JavaScriptで日付を扱う際に便利なライブラリ
JavaScriptの組み込みDateクラスは、日付と時間を操作するための基本的な機能を提供します。しかし、複雑な日付操作や日付のフォーマット変換を行うには、コードが複雑になりがちです。
JavaScriptのDateクラスの扱いにはストレスを感じるプログラマーも多くいるようです。
JavaScriptには他にも日付や時間を操作するためのライブラリがありますので、必要に応じて活用してみてください。
Moment.js： Moment.jsは、日付と時間を操作するための豊富な機能を提供するライブラリです。
日付の解析、検証、操作、表示といった機能があります。しかし、このライブラリは比較的大きいため、パフォーマンスが重要な場合には注意が必要です。
Moment.js
let moment = require('moment');
let date = moment();
console.log(date.format('YYYY-MM-DD')); // Moment.jsのformatメソッドを使用
Day.js： Day.jsは、Moment.jsと同じような機能を提供しながらも、パッケージサイズを大幅に削減したライブラリです。そのため、パフォーマンスが重要な場合や、ブラウザでの使用を考慮している場合には、Day.jsが適しています。
Day.js
let dayjs = require('dayjs');
let date = dayjs();
console.log(date.format('YYYY-MM-DD')); // Day.jsのformatメソッドを使用
これらのライブラリは、それぞれ異なる特性と利点を持っています。そのため、どのライブラリを使用するかはプロジェクトの要件や目的によります。
また、ライブラリのバージョンによっては使用方法が異なる場合があるため、注意が必要です。
前述したライブラリのサイトをご確認ください。
まとめ
ここまで紹介してきたコードを書くことで、JavaScriptで現在の年月日や時刻の取得が可能となります。Dateオブジェクトが保有する各種メソッドをうまく使って、日付の操作を自在に行っていきましょう。
この記事のキーワードに関する勉強会・イベントを探す
TECH PLAYでは、ITエンジニア向けの勉強会・イベント情報を提供しています。興味のある方はぜひご参加ください。
