JavaScriptで現在の日付を取得するコード！様々なフォーマットで表示する

JavaScriptを使って日付を取得し表示する方法には、単に現在の年月日を得るだけでなく、「フォーマットを変える」「UTCとの時差を扱う」「ローカル言語で表現する」などのバリエーションがあります。本記事では日付取得の基本から応用まで、具体的なコード例とともに解説します。初心者から中級者まで、どのような状況でも「JavaScript 日付 取得」に強くなる内容です。

JavaScript 日付 取得 の基本とDateオブジェクトの理解

JavaScriptで日付を取得するときの基盤となるのがDateオブジェクトであり、日付情報を扱うあらゆる処理はこのオブジェクトを使って行われます。ここではDateの生成方法、現在の日付取得、そしてDateの内部構造について詳しく定義します。最新の仕様に則った正確な情報を基に説明します。

Dateオブジェクトの生成方法

空の引数でDateを生成すると現在日時が取得されます。例えば new Date() を使うことで現地の現在の年月日・時分秒が含まれたDateオブジェクトが得られます。それ以外にも、タイムスタンプ、日付文字列、年・月・日などを指定して生成することが可能です。ISO 8601形式や数字指定形式があり、それぞれ挙動に違いがあります。

現在日時取得の代表的なメソッド

現在時刻を取得するには主に Date.now() や new Date().getTime() を使います。これらは1970年1月1日00:00:00 UTCからのミリ秒を返します。一方、年・月・日などの構成要素を取得するには getFullYear(), getMonth(), getDate(), getHours() 等が使用されます。月は0から11で表される点に注意が必要です。

ローカル時間とUTCの差について

Dateオブジェクトは内部ではUTC（協定世界時）を基準としていますが、表示や取得時にはローカル時間が使われます。UTCで取得するためのメソッド、例えば getUTCFullYear(), getUTCMonth(), getUTCHours() などがあります。さらに getTimezoneOffset() はローカル時間とUTCとの差（分単位）を返します。夏時間の変動などを考慮する場合、この差を理解しておくことが重要です。

JavaScript 日付 取得 をフォーマットする多様な方法

取得した日付をそのまま使うのではなく、ユーザーや用途に応じてフォーマットを変えることが多いです。このセクションでは数字フォーマット、文字列としての表現、ロケール対応、ラベル付けや曜日の表示といった幅広いフォーマット方法を具体的に解説します。

数字だけで年月日を表示するフォーマット

典型的なフォーマットに「YYYY-MM-DD」「MM/DD/YYYY」「DD.MM.YYYY」などがあります。JavaScriptでは getFullYear(), getMonth() + 1, getDate() によって年・月・日を取得し、それらをゼロパディングして結合することで実現できます。例えば String(date.getDate()).padStart(2, '0') を使う方法などがあります。

文字列形式でのフォーマットと曜日表示

年月日だけでなく「2025年12月31日（火）」のように日本語で表現する場合、曜日の取得に getDay() を使います。0が日曜日、6が土曜日です。月や曜日を配列で用意して、日本語や他の言語で名前を対応させる方法が一般的です。月名・曜日名の配列と組み合わせて文字列を生成します。

Intl API やロケール対応でのフォーマット

Intl.DateTimeFormat や toLocaleDateString(), toLocaleString() を用いることで簡単にロケールごとのフォーマットができます。例えば日本語ロケールでは「2025年12月31日」、英語（米国）では「12/31/2025」のように自動でフォーマットが異なります。オプションで時間を含めたり、省略形・長形式を指定することも可能です。

ISO形式およびUTCタイムスタンプの活用

他システムとのデータ共有やAPI連携の際に ISO 8601 形式（例：YYYY-MM-DDTHH:mm:ss.sssZ）を使うことが多いです。Dateオブジェクトの toISOString() がこれを返します。また Date.parse() でその形式の文字列から Date を生成でき、 Date.UTC() で UTCベースの日時を数値表現で扱うこともできます。

コード例で学ぶ JavaScript 日付 取得 の具体的な実装方法

実際にコーディングするときに役立つ、現場でよく使われるサンプルコードをいくつか紹介します。用途に応じて使い分けられるよう、基本形から応用形まで取り揃えています。

現在日付を YYYY-MM-DD フォーマットで表示する

以下は現在日付を「年-月-日」の形式で取得・表示する簡単な例です。月と日にはゼロ埋め処理を施しています。

const date = new Date();
const yyyy = date.getFullYear();
const mm = String(date.getMonth() + 1).padStart(2, '0');
const dd = String(date.getDate()).padStart(2, '0');
console.log(`${yyyy}-${mm}-${dd}`);

日本語で「年月日 曜日」形式で表示する

日本語での表現例として年月日と曜日を付けるサンプルです。曜日を日本語の配列で取り扱い、フォーマットを組み立てています。

const date = new Date();
const weekdays = ['日','月','火','水','木','金','土'];
const yyyy = date.getFullYear();
const mm = String(date.getMonth() + 1).padStart(2, '0');
const dd = String(date.getDate()).padStart(2, '0');
const wd = weekdays[date.getDay()];
console.log(`${yyyy}年${mm}月${dd}日（${wd}）`);

ロケール対応した表示例（Intl を使う）

Intl.DateTimeFormat を使えばロケールに応じたフォーマットを簡単にでき、オプションで細かい表示制御が可能です。

const date = new Date();
const options = { year:'numeric', month:'long', day:'numeric', weekday:'long' };
console.log(new Intl.DateTimeFormat('ja-JP', options).format(date));
console.log(new Intl.DateTimeFormat('en-US', options).format(date));

UTC・タイムゾーン・高精度取得の応用テクニック

時間帯の異なるユーザーの管理や、サーバーとのやり取りで正確な日時を扱う必要がある場合があります。この章ではUTC処理、高精度タイムスタンプ、そして近年導入が進む新APIなど応用的な内容を取り扱います。

UTCで日付を取得する方法

ローカル時間ではなく協定世界時で年・月・日・時刻を取得するには、 getUTCFullYear(), getUTCMonth(), getUTCHours() などのUTCメソッドを使います。これによりタイムゾーンに依存せず統一された値を得ることができます。また getTimezoneOffset() を使えばローカルとの差を分単位で取得可能です。

高精度タイムスタンプと経過時間の測定

Date.now() や new Date().getTime() はミリ秒精度で現在時刻のタイムスタンプを返しますが、さらに細かい時間（マイクロ秒など）が必要な場合には Performance API が使われます。ブラウザ環境では performance.now() によってページロードからの高精度な経過時間を扱えるようになっています。

最新のTemporal APIの紹介と移行の勧め

既存の Date オブジェクトは時刻処理で複雑さが増すため、ECMAScript の Temporal API が提案されており、最新の環境では一部サポートが進んでいます。Temporal は日付・時刻の取得・演算・フォーマットがより直感的かつ安全に行えるように設計されており、将来的に移行を視野に入れる価値があります。

実践的な用途別サンプル：使いどころとベストプラクティス

開発現場でよく直面する日付取得の目的別サンプルを紹介します。入力フォーム、API連携、表示用など用途に応じた扱い方のコツも含めます。

フォーム入力に現在日付をデフォルト設定する

HTMLの入力要素にデフォルトで今日の日付を設定したいときは JavaScript を使って value に YYYY-MM-DD 様式を設定します。これによりユーザーが日付選択なしで既定日が入力されるようになります。タイムゾーンの影響を受けないよう注意が必要です。

API とのデータ通信で統一形式（日付文字列など）を使う

バックエンドとフロントエンド間で日時情報を交換する場合、ISO 8601 形式が標準としてよく使われます。toISOString を用いることで文字列形式で日時を送信でき、サーバー側で解釈しやすくなります。タイムゾーン情報も含まれるため誤解が起きにくくなります。

UI表示でのロケールとアクセシビリティへの配慮

ユーザーによって日付形式への慣れや読みやすさは異なります。ロケールに応じた表記を自動適用すること、曜日や月名を言語別に表示することが望まれます。また、視認性を高めるため数字のゼロ埋めやパディングの統一などが有効です。

よくあるトラブルとその対処法

Date取得・フォーマットを行う際に起こりがちな問題について、原因と対策を具体的に解説します。エラー回避のための知識をここで身に付けておくことで、後々のバグ発生を防げます。

月番号が0始まりであることによる誤解

Date.getMonth() は 0 ～ 11 の範囲で月を返すため、1月は 0、12月は 11 になります。表示の際には +1 を行い、ゼロパディングなどで統一感を持たせる必要があります。この仕様を理解していないと意図しない月表示になることがあります。

Date.parse や文字列からの生成での互換性の問題

日付文字列から Date を生成する際、ISO 8601 形式はほぼすべての環境で安定していますが、非標準な形式はブラウザによって挙動が異なる可能性があります。明確な形式を使うこと、年・月・日順を守ることが互換性の鍵です。

時間帯・夏時間によるずれ

ユーザーのタイムゾーンや夏時間の影響で、ローカル時間と UTC 間にずれが生じることがあります。これを避けるには UTC メソッドを使うか、タイムゾーンオフセットを取得して調整することが有効です。またサーバーとのデータ交換ではタイムゾーンを含める形式を選ぶことが望ましいです。

比較表：主な日付取得・フォーマット方法の特徴

以下の表で、主要な取得・フォーマット手法の比較をまとめます。それぞれのメリット・注意点が一目で理解でき、用途に応じて最適な方法を選びやすくなります。

まとめ

JavaScriptで「日付を取得する」ことは基本中の基本ですが、表示フォーマット、ロケール、UTC などの条件に応じて最適な方法を選ばないと誤解やバグにつながります。Dateオブジェクトの基本メソッドを理解しつつ、Intl や ISO、そして新しい Temporal API を活用することで、より読みやすく正確な日付情報が扱えるようになります。用途やユーザー環境に応じて最善の方法を選び、日付処理を安定させましょう。