JavaScriptの基本：日付と時刻の扱い方

Pranay Kapgate2021-12-16 · 3 min read

はじめに

日付と時刻は、日常生活の重要な要素であるだけでなく、コンピュータプログラミングの一部でもあります。予約を入れたりカレンダーを表示したりするために必要な場合など、日付と時刻が必要となる理由は数多くあります。日付と時刻の機能の用途は幅広く、非常に多才です。その多才さは、ユーザーに基づいて日時を設定できるという事実に由来します。異なる地理的場所にいるすべてのユーザーが、それぞれのタイムゾーンに基づいて異なる結果を受け取ります。これらの機能は、予約インターフェースやレストランなどの予約システムを備えたウェブサイトで使用されます。

プログラマーは、ウェブサイトに日付と時刻の機能を追加するためにJavaScriptをよく使用します。これは、JavaScriptにすでに組み込み機能が備わっているためです。このチュートリアルでは、will explore the Dateオブジェクトについてさらに詳しく見ていきます。ウェブサイトの日付と時刻に最適な設定を行うために使用できるメソッドについて説明します。また、フォーマットを変更する方法などについても説明します。

Dateオブジェクトとは？

先ほど述べたように、JavaScriptには日付と時刻のための組み込み機能があります。それは Dateオブジェクトと呼ばれます。このオブジェクトを使用すると、日付と時刻に関連付けられたデータを変更および管理できます。 Dateのインスタンスを作成すると、新しいオブジェクトが作成されます。このオブジェクトは、その時点のコンピュータの日付と時刻の設定に対応します。

このオブジェクトの仕組みをよりよく理解するために、例を考えてみましょう。まず変数を作成します。次に、それに特定の日付を割り当てます。ロンドン（GMT）タイムゾーンの10月18日水曜日であると仮定しましょう。この設定を見てみてください。

// 変数を現在の日付と時刻に設定する
const now = new Date();
// 出力を表示する
Now;

// 変数を現在の日付と時刻に設定する

const now = new Date();

// 出力を表示する

Now;

出力

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

出力

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

出力には日付文字列が表示されています。これは以下のデータで構成されています。

曜日	月	日	年	時	分	秒	タイムゾーン
Wed	Oct	18	2017	12	41	34	GMT+0000 (UTC)

JavaScriptはタイムスタンプを介してデータを受け取ります。このタイムスタンプはUnix時間から取得されます。これは、1970年1月1日の深夜から経過したミリ秒数を示す値です。ユーザーには、日付が理解しやすい形式で表示されます。このタイムスタンプを取得したい場合は、次のように getTime()メソッドを使用します。

// 現在のタイムスタンプを取得する

now.getTime();

// 現在のタイムスタンプを取得する

now.getTime();

出力

1508330494000

出力

1508330494000

この値は一見紛らわしく見えますが、日付文字列と同じものを表しています。単純に2017年10月18日のことです。

エポック時間とは？

次に学ぶ概念はエポック時間（エポックタイム）です。これはゼロ時間とも呼ばれます。データ文字列 01 January, 1970 00:00:00 Universal Time (UTC) と 0 タイムスタンプとして理解するとわかりやすいでしょう。テストするには、新しい変数を作成します。そして、それを新しい Date インスタンスに割り当てます。その際、タイムスタンプは 0 とします：

// タイムスタンプ0を新しい変数に代入する

const epochTime = new Date(0);

epochTime;

// タイムスタンプ0を新しい変数に代入する

const epochTime = new Date(0);

epochTime;

出力

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

出力

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

エポック時間は、かつてプログラマーの標準でした。これは、JavaScriptが時間を測定するために使用するメソッドでもあります。

JavaScriptにおける日付作成のフォーマット

文字列とタイムスタンプを使用して新しい Date インスタンスを作成する方法がわかったので、さまざまなフォーマットについて説明します。詳細な4つのフォーマットは以下の通りです：

Javascript Date and Time Formats for date creation

これは、必要に応じて特定の特定の日付と時刻を指定できることを意味します。また、前述のように、単にデータ文字列やタイムスタンプを使用することもできます。理解を深めるために、3つの異なる方法で新しい Date オブジェクトを作成する方法を見てみましょう。日付と時刻が1776年7月4日午後12時30分（GMT）であると仮定します：

// タイムスタンプメソッド
new Date(-6106015800000);

// 日付文字列メソッド
new Date("July 4 1776 12:30");

// 日付と時刻メソッド
new Date(1776, 6, 4, 12, 30, 0, 0);

// タイムスタンプメソッド

new Date(-6106015800000);

// 日付文字列メソッド

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

// 日付と時刻メソッド

new Date(1776, 6, 4, 12, 30, 0, 0);

ご覧の通り、3つのメソッドはすべて出力として同じ日付を返します。1つの違いは、エポック時間より前の時間を使用している場合、タイムスタンプが負の数で表示されることです。さらに、日付と時刻メソッドでは、秒とミリ秒はデフォルトで0になります。数値を入力し忘れた場合も、デフォルトで0に設定されます。

もう1つの紛らわしい点は、7月が7ではなく6で表されることです。これは、ナンバリングが0から始まるためです。インスタンスを作成する際は、これらの点に注意してください。

日付を取得するための get コマンドの使用

日付が設定されたので、そのコンポーネントにアクセスする方法を見てみましょう。1つの方法は、 get コマンドを使用することです。この表は、 get メソッドの一覧を Date オブジェクトに対して示しています：

Javascript Date and Time Retrieve date using get

この例では、新しい変数に新しい日付（1980年7月31日）を代入します：

// 新しい誕生日のインスタンスを初期化する
const birthday = new Date(1980, 6, 31);

1 2	// 新しい誕生日のインスタンスを初期化する const birthday = new Date(1980, 6, 31);

このメソッドを使用して、すべての個々の日付コンポーネントを取得すると、次のようになります：

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 (GMT基準)

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 (GMT基準)

状況によっては、日付の特定の特定の部分だけが必要な場合があります。これらのメソッドを使用してそれを行うことができます。10月3日であるかどうかを確認するためのテスト方法は次のとおりです：

// 今日の日付を取得する
const today = new Date();
// 今日と10月3日を比較する
if (today.getDate() === 3 && today.getMonth() === 9) {
console.log("It's October 3rd.");
} else {
console.log("It's not October 3rd.");
}

// 今日の日付を取得する

const today = new Date();

// 今日と10月3日を比較する

if (today.getDate() === 3 && today.getMonth() === 9) {

console.log("It's October 3rd.");

} else {

console.log("It's not October 3rd.");

}

出力

It's not October 3rd.

出力

It's not October 3rd.

日付が10月3日ではなく、それに対してテストを行った場合、このような出力が得られます。

日付を変更するための set コマンドの使用

Similar to the get コマンドと同様に、対応する set コマンドがあります。このコマンドを使用すると、日付コンポーネントを変更できます。次の表は、すべてのメソッドを示しています：

Javascript Date and Time Modify the date using set

変数 birthday の値を変更したいとします。変更前： 1997 変更後： 1980:

// 誕生日の日付の年を変更する
birthday.setFullYear(1997);
birthday;

// 誕生日の日付の年を変更する

birthday.setFullYear(1997);

birthday;

出力

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

出力

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

これで、出力に新しい年が表示されます。同様に、日付の他のコンポーネントも変更できます。

JavaScriptにおけるUTC日付メソッド

If you extract the date components using the get メソッドを使用して日付コンポーネントを抽出すると、ユーザーのタイムゾーンのローカルシステム設定に基づいて取得されます。あるいは、UTC基準に基づいて時間を計算するように設定することもできます。UTCは協定世界時（Coordinated Universal Time）の略です。これを行うには、 getUTC メソッドを使用します。この表は、JavaScriptの Date オブジェクトに対するすべてのUTCメソッドを示しています：

UTC methods

ご覧の通り、すべてのメソッドは get コマンドに似ています。ただし、出力は異なります。次のコードでその違いをテストできます：

// 現在時刻を変数に代入する
const now = new Date();

// ローカルとUTCのタイムゾーンを出力する
console.log(now.getHours());
console.log(now.getUTCHours());

// 現在の時刻を変数に代入する

const now = new Date();

// ローカルとUTCのタイムゾーンを出力する

console.log(now.getHours());

console.log(now.getUTCHours());

このコードは、現在の時刻（時間）とUTCタイムゾーンの時刻（時間）を表示します。すでにUTCタイムゾーンにいる場合、数値は同じになります。UTCを使用する理由は、国際的な地域や領域をまたいで一貫性を保つことができるためです。

まとめ

このチュートリアルでは、 Date オブジェクトのさまざまなメソッドについて説明しました。これには、 get を使用して日付の要素を取得する方法や、 set を使用してそれらを変更する方法が含まれます。また、UTCタイムゾーンと、JavaScriptでのその使用方法についても説明しました。

結局のところ、JavaScriptには日付と時間に関する組み込み機能が数多く用意されています。これにより、複雑なウェブサイトのプログラミングが非常に簡単になります。JavaScriptの日付と時間の機能についての詳細は、Mozilla Developer Networkで詳しく読むことができます。しかし、このチュートリアルは基礎に関する基本事項をカバーするのに役立つはずです。

以下は、当ブログの、JavaScriptでのプログラミングをより簡単にするためのリソースです：

ハッピーコンピューティング！

Pranay Kapgate

著者 · CloudSigma

Preslav DobrevはCloudSigmaのクリエイティブデザイナーであり、従来型および革新的なマーケティングチャネルを活用した一貫性のあるビジネスアイデンティティに注力しています。彼は芸術的なビジョンと戦略的マーケティングを融合させ、インパクトのあるブランドナラティブを生み出すことに長けています。