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の多くの一般的なタスクにとって不可欠です。これにより、繰り返しレポートの設定から正しいタイムゾーンでの日付とスケジュールの表示まで多くのことができるようになります。