TOC

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

前書き

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

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

日付オブジェクト

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

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

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

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)

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

Day of the Week Month Day Year Hour Minute Second Timezone

Wed

Oct

18

2017

12

41

34

GMT+0000 (UTC)

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

ただし、JavaScriptはhttps://en.wikipedia.org/wiki/Unix_time#History[Unix time]から派生した* timestamp *に基づいて日付を理解します。これは、真夜中から経過したミリ秒数で構成される値です。 1970年1月1日。 `+ getTime（）+`メソッドでタイムスタンプを取得できます。

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

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

*エポック時間*はゼロ時間とも呼ばれ、日付文字列「01 1970年1月1日00:00:00世界時（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つの形式があります。 現在の時刻のデフォルトとタイムスタンプに加えて、日付文字列を使用したり、特定の日付と時刻を指定したりすることもできます。

Date Creation Output

new Date()

Current date and time

new Date(timestamp)

Creates date based on milliseconds since Epoch time

new Date(date string)

Creates date based on date string

new Date(year, month, day, hours, minutes, seconds, milliseconds)

Creates date based on specified date and time

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

usa.js

// Timestamp method
new Date(-6106015800000);

// Date string method
new Date("January 31 1980 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`メソッドの詳細な表です。

Date/Time Method Range Example

Year

getFullYear()

YYYY

1970

Month

getMonth()

0-11

0 = January

Day (of the month)

getDate()

1-31

1 = 1st of the month

Day (of the week)

getDay()

0-6

0 = Sunday

Hour

getHours()

0-23

0 = midnight

Minute

getMinutes()

0-59

Second

getSeconds()

0-59

Millisecond

getMilliseconds()

0-999

Timestamp

getTime()

Milliseconds since Epoch time

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 of`メソッドの詳細なチャートです。

Date/Time Method Range Example

Year

setFullYear()

YYYY

1970

Month

setMonth()

0-11

0 = January

Day (of the month)

setDate()

1-31

1 = 1st of the month

Day (of the week)

setDay()

0-6

0 = Sunday

Hour

setHours()

0-23

0 = midnight

Minute

setMinutes()

0-59

Second

setSeconds()

0-59

Millisecond

setMilliseconds()

0-999

Timestamp

setTime()

Milliseconds since Epoch time

これらの `+ 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 `メソッドを使用できます。これは、https：//en.wikipedia.org/に基づいて時刻を計算することを除いて、 ` get `メソッドとまったく同じです。 wiki / Coordinated_Universal_Time [UTC（協定世界時）]標準。 以下は、JavaScriptの ` Date`オブジェクトのUTCメソッドの表です。

Date/Time Method Range Example

Year

getUTCFullYear()

YYYY

1970

Month

getUTCMonth()

0-11

0 = January

Day (of the month)

getUTCDate()

1-31

1 = 1st of the month

Day (of the week)

getUTCDay()

0-6

0 = Sunday

Hour

getUTCHours()

0-23

0 = midnight

Minute

getUTCMinutes()

0-59

Second

getUTCSeconds()

0-59

Millisecond

getUTCMilliseconds()

0-999

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

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 Developerのhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date[Date referenceを参照してください。通信網]。

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

Related