JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptでタイムスタンプを取得・操作する方法|Dateオブジェクト徹底解説

JavaScriptでタイムスタンプ形式を取得するには、現在時刻を読みやすい形式で保持するDate()オブジェクトを使用します。また、任意のタイムスタンプを持つ新しいDate()オブジェクトを作成したり、getTime()メソッドを使って現在のUnix時間を取得することも可能です。

日付と時刻の管理は、プログラミングにおいて欠かせない要素です。JavaScriptでは、動的な著作権表示(コピーライト)の年号、スケジュール機能、イベント一覧とその開催時刻などを作成する際に、必ずと言っていいほど日付や時刻を扱うことになります。

JavaScriptで時刻を扱うには、Dateオブジェクトとその関連メソッドを利用します。Dateオブジェクトを使えば、日付と時刻を保存し、目的に応じて自由にフォーマットすることができます。

このチュートリアルでは、Dateオブジェクトを使ってJavaScriptのタイムスタンプを作成する基本を解説します。さらに、日付やタイムスタンプのフォーマット方法、UTC時刻の取得方法についても取り上げます。

JavaScriptのDateオブジェクトとは

Dateオブジェクトは、JavaScriptで日付と時刻を保存するために使われる組み込みオブジェクトです。引数を指定せずに生成すると、現在の日付と時刻を持つオブジェクトが自動的に作成されます。以下は、現在の日付と時刻を取得するシンプルな例です。

const currentTime = new Date();

console.log(currentTime);

このコードでは、「currentTime」という変数を宣言し、そこにDateオブジェクトを代入しています。その後、変数の中身をコンソールに出力しています。実行結果は次のようになります。

Wed Feb 05 2020 11:18:21 GMT+0000 (Greenwich Mean Time)

ご覧のとおり、人間が読める形式で現在の日付と時刻が返されました。この出力結果は、次のような構成要素に分解できます。

  • 曜日: Wed(水曜日)
  • 月: Feb(2月)
  • 日: 05
  • 年: 2020
  • 時: 11
  • 分: 18
  • 秒: 21
  • タイムゾーン: GMT+0000(グリニッジ標準時)

ただし、Dateオブジェクトがこのような値を返す一方で、JavaScript内部では日付と時刻はUnix時間として管理されています。Unix時間とは、1970年1月1日の午前0時(UTC)から経過したミリ秒数を表す値で、プログラミングにおける時刻保存の世界的な標準です。

Unix形式のタイムスタンプを取得したい場合は、getTime()メソッドを次のように使います。

console.log(currentTime.getTime());

実行結果:1580901774643

この数字は先ほどの文字列ほど見栄えはしませんが、まったく同じ時刻情報を表しています。

既存のタイムスタンプから新しいDateオブジェクトを作成する

ここまでは、現在の時刻に基づいてDateオブジェクトを作成する方法を見てきました。しかし、既存のタイムスタンプをもとにDateオブジェクトを生成することもできます。

これは、すでに日付の値を持っていて、それをJSのDateオブジェクトで加工・操作したい場合に非常に便利です。たとえば、Unixタイムスタンプを、曜日や時刻、タイムゾーンなどを含む読みやすい長い形式で表示したいケースなどが挙げられます。

既存のタイムスタンプから新しいDateオブジェクトを作成する方法は、主に次の3つがあります。

  • 既存のUnixタイムスタンプを指定する:new Date(timestamp)
  • 日付文字列を指定する:new Date("date string")
  • 特定の日付と時刻を個別に指定する:new Date(year, month, day, hours, minutes, seconds, milliseconds)

それぞれの具体例を見てみましょう。

new Date(9231925020);

new Date("April 17 1970 21:25:25");

new Date(1970, 3, 17, 21, 25, 25, 0);

これら3つの例は、すべて同じ日時情報を使ってDateオブジェクトを作成しています。したがって、先ほどと同じようにgetTime()関数で時刻を出力すると、いずれも次の結果が得られます。

Fri Apr 17 1970 21:25:25 GMT+0100 (Greenwich Mean Time)

ここで注意すべき点が2つあります。まず、最後の方法(年・月・日・時・分・秒・ミリ秒を個別に指定する方法)では、省略された値はすべて0として扱われます。また、月が「3」に設定されているのは、JavaScriptのDateオブジェクトでは月が「0」から数え始めるためです。つまり「3」は4月を意味します。

日付の各部分を取得するget系メソッド

Dateオブジェクトが用意できたら、必要な日付や時刻の任意の部分を取り出すことができます。JavaScriptのget系メソッドを使うと、ローカルタイムゾーンを基準とした日付の特定の要素を取得できます。主なメソッドは以下の通りです。

  • 年: getFullYear()
  • 月: getMonth()
  • 日(月の何日目か): getDate()
  • 曜日: getDay()
  • 時: getHours()
  • 分: getMinutes()
  • 秒: getSeconds()
  • ミリ秒: getMilliseconds()

実際に、2020年1月1日のDateオブジェクトを作成して試してみましょう。

const january2020 = new Date(2020, 0, 1);

january2020.getFullYear(); // 2020
january2020.getMonth();    // 0(1月は「0」となる)
january2020.getDate();     // 1

このように、get系メソッドはタイムスタンプに対しても実行できるため、時刻の特定の部分だけを自由に取り出せます。

Dateオブジェクトで時刻を比較する

さらに、Dateオブジェクトを使えばJavaScriptで時刻の比較を行うこともできます。たとえば、現在が2020年かどうかを判定したい場合は、次のように書けます。

const currentDate = new Date();

if (currentDate.getFullYear() === 2020) {
	console.log("It's 2020!");
} else {
	console.log("It's not 2020!");
}

執筆時点が2020年であれば、このコードは「It's 2020!」を出力します。同じ要領で、年と日を組み合わせて比較するなど、より高度な条件分岐も簡単に実装できます。

UTCメソッドで協定世界時を取得する

ここまで紹介したget系メソッドの戻り値は、すべてローカルのタイムゾーン設定に基づいています。もしUTC(協定世界時)に基づいたタイムスタンプを取得したい場合は、メソッド名の「get」の直後に「UTC」を追加するだけです。

以下は、getHours()getUTCHours()を使って、ローカルの時刻とUTCの時刻をそれぞれ取得する例です。

const currentDate = new Date();

console.log(currentDate.getHours());
console.log(currentDate.getUTCHours());

実行結果:

11

11

このコードは、現在のタイムゾーンの時刻とUTCタイムゾーンの時刻を両方出力します。現在地がUTCタイムゾーン内であれば、これらの数値は同じになります(上記の例がまさにそのケースです)。

UTCは国際的に認められた標準時刻であり、複数のタイムゾーンを扱うWebサイトやアプリケーションを開発する際によく利用されます。そうした場面では、UTCメソッドの活用が特に有効です。

まとめ

時刻処理はJavaScriptの重要な要素であり、コーディングをしていれば頻繁に直面するテーマです。このチュートリアルでは、現在の時刻を保持するDateオブジェクトの作成方法をはじめ、タイムスタンプ・日付文字列・個別の日時指定によるカスタムDateオブジェクトの生成方法、そしてJavaScriptに組み込まれた日付取得メソッドについて解説しました。

これであなたも、プロフェッショナルのようにJavaScriptでタイムスタンプを取得・操作できるようになりました。ぜひ実際のコードで試してみてください。

  1. JavaScript関数の使い方を徹底解説!初心者向けステップバイステップガイド

    JavaScriptの関数とは、再利用できるカスタムコードブロックのことです。関数を活用することでコードのモジュール化が促進され、オブジェクト指向プログラミングにおいても欠かせない存在となります。関数は「宣言」または「式」のいずれかの方法で定義できます。 これからJavaScriptを学ぼうとしている方にとって、JS関数の基礎は必ず押さえておきたい重要ポイントです。プログラミング言語に触れた経験がある方なら、関数が複雑なプログラムを組み立てるための基本的な部品であることはご存じでしょう。しかし、その仕組みまで理解している方は少ないかもしれません。関数を使えば、共通の処理を一度書くだけで済

  2. JavaScript onclickイベント入門:初心者向けステップバイステップガイド

    JavaScriptのonclickイベントは、ユーザーがボタンやその他のWeb要素をクリックしたときに関数を実行するための仕組みです。HTMLドキュメント内にインラインで記述することも、JavaScriptファイル内で定義することもできます。 JavaScriptで開発をしていると、ユーザーがWebページを操作したタイミングで特定のコードを実行したい場面がよくあります。たとえば、「ボタンが押されたら何か処理をしたい」といったケースです。では、このような機能はJavaScriptでどう実装すればよいのでしょうか。 そこで役立つのが「onclick」イベントです。onclickは最もよく使われ