JavaScriptで日付と時刻を理解する

序章

日付と時刻は私たちの日常生活の一部であるため、コンピュータープログラミングで際立って機能します。 JavaScriptでは、予定表、列車の時刻表、または予定を設定するためのインターフェイスを備えたWebサイトを作成する必要がある場合があります。 これらのアプリケーションは、ユーザーの現在のタイムゾーンに基づいて関連する時刻を表示するか、到着時刻と出発時刻、または開始時刻と終了時刻の前後で計算を実行する必要があります。 さらに、JavaScriptを使用して、毎日特定の時間にレポートを生成したり、現在開いているレストランや施設をフィルタリングしたりする必要がある場合があります。

これらすべての目的とそれ以上の目的を達成するために、JavaScriptには組み込みのDateオブジェクトと関連するメソッドが付属しています。 このチュートリアルでは、JavaScriptで日付と時刻をフォーマットして使用する方法について説明します。

日付オブジェクト

Date object は、日付と時刻を格納するJavaScriptの組み込みオブジェクトです。 これは、そのデータをフォーマットおよび管理するための多数の組み込みメソッドを提供します。

デフォルトでは、引数が指定されていない新しいDateインスタンスは、現在の日付と時刻に対応するオブジェクトを作成します。 これは、現在のコンピューターのシステム設定に従って作成されます。

JavaScriptのDateを示すために、変数を作成して現在の日付を割り当てましょう。 この記事は10月18日水曜日にロンドン（GMT）で執筆されているため、現在の日付、時刻、およびタイムゾーンを以下に示します。

now.js

// Set variable to current date and time
const now = new Date();

// View the output
now;

OutputWed Oct 18 2017 12:41:34 GMT+0000 (UTC)

出力を見ると、次の日付文字列があります。

曜日	月	日	年	時間	分	2番	タイムゾーン
結婚した	10月	18	2017	12	41	34	GMT + 0000（UTC）

日付と時刻は、人間として理解できるように分割されて印刷されています。

ただし、JavaScriptは、 Unixtimeから派生したtimestampに基づいて日付を理解します。これは、1970年1月1日の午前0時から経過したミリ秒数で構成される値です。 getTime()メソッドを使用してタイムスタンプを取得できます。

// Get the current timestamp
now.getTime();

Output1508330494000

現在のタイムスタンプの出力に表示される大きな数値は、2017年10月18日の上記と同じ値を表しています。

Epoch time は、ゼロ時間とも呼ばれ、日付文字列01 January, 1970 00:00:00 Universal Time (UTC)と0タイムスタンプで表されます。 これをブラウザでテストするには、新しい変数を作成し、タイムスタンプ0に基づいて新しいDateインスタンスを割り当てます。

epoch.js

// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);

epochTime;

Output01 January, 1970 00:00:00 Universal Time (UTC)

エポックタイムは、プログラミングの初期の頃にコンピューターが時間を測定するための標準として選択されたものであり、JavaScriptが使用する方法です。 アプリケーションの設定と目的によっては両方が使用される可能性があるため、タイムスタンプと日付文字列の両方の概念を理解することが重要です。

これまで、現在の時刻に基づいて新しいDateインスタンスを作成する方法と、タイムスタンプに基づいてインスタンスを作成する方法を学習しました。 JavaScriptで新しいDateを作成できるフォーマットは全部で4つあります。 現在の時刻のデフォルトとタイムスタンプに加えて、日付文字列を使用したり、特定の日付と時刻を指定したりすることもできます。

日付の作成	出力
new Date()	現在の日時
new Date(timestamp)	エポック時間からのミリ秒に基づいて日付を作成します
new Date(date string)	日付文字列に基づいて日付を作成します
new Date(year, month, day, hours, minutes, seconds, milliseconds)	指定された日時に基づいて日付を作成します

特定の日付を参照するさまざまな方法を示すために、1776年7月4日午後12時30分GMTを3つの異なる方法で表す新しいDateオブジェクトを作成します。

usa.js

// Timestamp method
new Date(-6106015800000);

// Date string method
new Date("July 4 1776 12:30");

// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);

上記の3つの例はすべて、同じ情報を含む日付を作成します。

タイムスタンプメソッドの数値が負であることに気付くでしょう。 エポック時間より前の日付は、負の数として表されます。

日付と時刻の方法では、秒とミリ秒は0に設定されます。 Dateの作成で欠落している番号がある場合、デフォルトで0になります。 ただし、順番は変更できませんので、番号を省略した場合はご注意ください。 また、7月が通常の7ではなく、6で表されていることに気付くかもしれません。 これは、プログラミングでのほとんどのカウントと同様に、日付と時刻の数値が0から始まるためです。 より詳細なチャートについては、次のセクションを参照してください。

getで日付を取得する

日付を取得すると、さまざまな組み込みメソッドを使用して、日付のすべてのコンポーネントにアクセスできます。 メソッドは、ローカルタイムゾーンを基準にした日付の各部分を返します。 これらの各メソッドはgetで始まり、相対数を返します。 以下は、Dateオブジェクトのgetメソッドの詳細な表です。

日付時刻	方法	範囲	例
年	getFullYear()	YYYY	1970
月	getMonth()	0-11	0=1月
日（月の）	getDate()	1-31	1=月の1日
曜日）	getDay()	0-6	0=日曜日
時間	getHours()	0-23	0=真夜中
分	getMinutes()	0-59
2番	getSeconds()	0-59
ミリ秒	getMilliseconds()	0-999
タイムスタンプ	getTime()	エポック時間からのミリ秒

1980年7月31日に基づいて新しい日付を作成し、それを変数に割り当てましょう。

harryPotter.js

// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);

これで、すべてのメソッドを使用して、年からミリ秒までの各日付コンポーネントを取得できます。

getDateComponents.js

birthday.getFullYear();      // 1980
birthday.getMonth();         // 6
birthday.getDate();          // 31
birthday.getDay();           // 4
birthday.getHours();         // 0
birthday.getMinutes();       // 0
birthday.getSeconds();       // 0
birthday.getMilliseconds();  // 0
birthday.getTime();          // 333849600000 (for GMT)

日付の一部のみを抽出する必要がある場合があります。組み込みのgetメソッドは、これを実現するために使用するツールです。

この例として、現在の日付を10月3日の日と月に対してテストして、10月3日であるかどうかを確認できます。

oct3.js

// Get today's date
const today = new Date();

// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
  console.log("It's October 3rd.");
} else {
  console.log("It's not October 3rd.");
}

OutputIt's not October 3rd.

これを書いている時点では10月3日ではないので、コンソールはそれを反映しています。

getで始まる組み込みのDateメソッドを使用すると、インスタンス化されたオブジェクトから取得しているものに関連付けられた数値を返す日付コンポーネントにアクセスできます。

setで日付を変更する

上記で学習したすべてのgetメソッドには、対応するsetメソッドがあります。 getを使用して日付から特定のコンポーネントを取得する場合、setを使用して日付のコンポーネントを変更します。 以下は、Dateオブジェクトのsetメソッドの詳細なチャートです。

日付時刻	方法	範囲	例
年	setFullYear()	YYYY	1970
月	setMonth()	0-11	0=1月
日（月の）	setDate()	1-31	1=月の1日
曜日）	setDay()	0-6	0=日曜日
時間	setHours()	0-23	0=真夜中
分	setMinutes()	0-59
2番	setSeconds()	0-59
ミリ秒	setMilliseconds()	0-999
タイムスタンプ	setTime()	エポック時間からのミリ秒

これらのsetメソッドを使用して、日付の1つ、複数、またはすべてのコンポーネントを変更できます。 たとえば、birthday変数の年を、1980ではなく1997に変更できます。

harryPotter.js

// Change year of birthday date
birthday.setFullYear(1997);

birthday;

OutputThu Jul 31 1997 00:00:00 GMT+0000 (UTC)

上記の例では、birthday変数を呼び出すと、出力の一部として新年を受け取ることがわかります。

setで始まる組み込みメソッドを使用すると、Dateオブジェクトのさまざまな部分を変更できます。

UTCを使用した日付メソッド

上記のgetメソッドは、ユーザーのローカルタイムゾーン設定に基づいて日付コンポーネントを取得します。 日付と時刻の制御を強化するために、getUTCメソッドを使用できます。これは、 UTC（協定世界時）に基づいて時刻を計算することを除いて、getメソッドとまったく同じです。協定世界時）標準。 以下は、JavaScriptDateオブジェクトのUTCメソッドの表です。

日付時刻	方法	範囲	例
年	getUTCFullYear()	YYYY	1970
月	getUTCMonth()	0-11	0=1月
日（月の）	getUTCDate()	1-31	1=月の1日
曜日）	getUTCDay()	0-6	0=日曜日
時間	getUTCHours()	0-23	0=真夜中
分	getUTCMinutes()	0-59
2番	getUTCSeconds()	0-59
ミリ秒	getUTCMilliseconds()	0-999

ローカルメソッドとUTCgetメソッドの違いをテストするために、次のコードを実行できます。

UTC.js

// Assign current time to a variable
const now = new Date();

// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());

このコードを実行すると、現在の時刻とUTCタイムゾーンの時刻が出力されます。 現在UTCタイムゾーンにいる場合、上記のプログラムの実行から出力される数値は同じになります。

UTCは、国際的な時間標準参照を提供するという点で便利です。したがって、開発しているものに適用できる場合は、タイムゾーン全体でコードの一貫性を保つことができます。

結論

このチュートリアルでは、Dateオブジェクトのインスタンスを作成し、その組み込みメソッドを使用して特定の日付のコンポーネントにアクセスして変更する方法を学習しました。 JavaScriptでの日付と時刻のより詳細なビューについては、Mozilla DeveloperNetworkのDateリファレンスを読むことができます。

日付の操作方法を知ることは、JavaScriptの多くの一般的なタスクにとって不可欠です。これにより、繰り返しレポートの設定から正しいタイムゾーンでの日付とスケジュールの表示まで多くのことができるようになります。