JavaScriptを使ってウェブサイトを作成するとき、
日付や時間の表示が必要になる場面はよくありますね。
しかし、表示形式が「2024-08-29T14:30:00.000Z」など
と見慣れない形で出てくることが多いです。
本記事では、初心者でも簡単に理解できるように、
日付をフォーマットする方法を丁寧に解説していきます。
Dateオブジェクトとは？
Dateオブジェクトの概要
まず、JavaScriptで日付や時間を扱う際に
使用する「Dateオブジェクト」について知っておきましょう。
Dateオブジェクトは、
JavaScriptで日付と時刻を
操作するためのオブジェクトです。
たとえば、
現在の日付や時間を取得したり、
特定の日付を設定したり、
さらにはその日付をフォーマットして表示することができます。
const now = new Date();
console.log(now); // 現在の日付と時刻が表示されますDateオブジェクトを生成する方法
JavaScriptで日付や時間を扱う最初のステップは、
Dateオブジェクトを作成することです。
現在の日時を取得するには、new Date()というコマンドを使用します。
以下のコードでは、
現在の日付を取得して表示しています。
const now = new Date();
console.log(now); // 現在の日付と時刻が表示されます任意の日付の設定方法
また、特定の日付を設定したい場合には、new Date(年, 月, 日)のように記述することで、
任意の日付を作成することができます。
const specificDate = new Date(2024, 7, 29); // 2024年8月29日を生成
console.log(specificDate);便利なメソッド：getFullYear()やgetMonth()など
getFullYear()やgetMonth()などは
手動で日付フォーマットを作成する際に非常に役立ちます。
基本メソッドを使った日付フォーマット
getFullYear(), getMonth(), getDate()を
使ってカスタムフォーマットを作成する場合、
シンプルで柔軟な日付の操作が可能です。
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月は0始まりなので+1
const day = String(today.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // 例: 2024-08-29これにより、toISOString()を使用せずとも、
ローカルタイムに基づいた正確な日付をフォーマットできます。
追加内容: タイムゾーンの考慮と解決策
JavaScriptで日付を扱う際、
UTC（世界標準時）とローカルタイムの違いが
問題になることがあります。
特にtoISOString()を使用した場合、
時間帯によっては前日の日付が返ってくることがあります。
そのため、
以下のようにローカルタイムを使って
日付を正しく表示する方法も考慮する必要があります。
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // これで常にローカルタイムの日付が得られるこのコードではtoISOString()を使わず、
ローカルタイムでの年月日を直接取得しています。
これにより、
タイムゾーンの違いにより前日の日付が返る問題を防げます。
JavaScriptで日付をフォーマットする基本的なメソッド
JavaScriptでは、
日付を読みやすい形式で表示するために
いくつかの便利なメソッドがあります。
ここでは、代表的なものを紹介します。
toDateString()メソッド
このメソッドは、
日付を簡単に人間が読みやすい形式に変換してくれます。
たとえば、次のコードを使うと、
日付が「Thu Aug 29 2024」のように出力されます。
const today = new Date();
console.log(today.toDateString());toLocaleDateString()メソッド
もう一つの便利なメソッドがtoLocaleDateString()です。
このメソッドを使うと、指定したロケール（言語や地域）に
応じた形式で日付が表示されます。
たとえば、
日本の形式で表示するには次のようにします。
const today = new Date();
console.log(today.toLocaleDateString('ja-JP')); // 2024/8/29の形式で表示される他のロケールとフォーマットオプション
toLocaleDateString()は多くのロケールをサポートしており、
ロケールによって様々な日付形式を簡単に取得できます。
たとえば、以下のように日本語、アメリカ英語、
ドイツ語など、国ごとに異なるフォーマットを試すことができます。
const today = new Date();
console.log(today.toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' })); // 2023/04/17
console.log(today.toLocaleDateString('en-US')); // 4/17/2023
console.log(today.toLocaleDateString('de-DE')); // 17.4.2023また、オプションを指定することで、
日付だけでなく時間を含めた表示にすることもできます。
const today = new Date();
console.log(today.toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }));
// 2023/04/17 14:30:15これにより、フォーマットの柔軟性が広がり、
ユーザーがニーズに合わせた日付表示を行いやすくなります。
toISOString()メソッド
JavaScriptのtoISOString()メソッドは、
日付オブジェクトをISO 8601形式（国際標準形式）で
文字列に変換するためのメソッドです。
この形式は、
サーバーとの通信やデータベースに
日付を保存する際によく使われます。
例えば、2024-08-29T14:30:00.000Zのように、
世界標準時（UTC）での日時が出力されます。
toISOString()メソッドの使い方
const today = new Date();
console.log(today.toISOString()); // 2024-08-29T14:30:00.000Z のように出力されるこのコードを実行すると、
ISO 8601形式の日時が返されます。
ISO 8601形式は、
年（YYYY）、月（MM）、日（DD）、
T（時間の区切り文字）、時間（HH:MM.mmmZ）、
Z（UTCタイムゾーンの指標）の順に並んでいます。
toISOString()メソッドの注意点
toISOString()は、
常にUTC（世界標準時）で出力されるため、
ローカルタイムゾーンの時間と異なる場合があります。
例えば、日本で午前10時に実行しても、
UTCでは9時間前の時刻が表示されるため、
前日の日付が返されることもあります。
const today = new Date('2024-08-29T14:30:00Z');
console.log(today.toISOString()); // 2024-08-29T14:30:00.000Z（常にUTCで表示）この場合、
タイムゾーンを考慮せずに日付をフォーマットしたい場合は、toISOString()ではなく、toLocaleDateString()やカスタムフォーマットを
利用することが推奨されます。
カスタムフォーマットの作成方法
日付フォーマットをもっと細かく調整したい場合は、
手動でフォーマットを組み合わせることもできます。
これにより、特定の形式に合わせた日付を表示することが可能です。
年月日を「YYYY/MM/DD」でフォーマットする
例えば、
年月日を「YYYY/MM/DD」の形式で
表示したい場合、以下のように書きます。
const today = new Date();
const formattedDate = today.getFullYear() + '/' + (today.getMonth() + 1) + '/' + today.getDate();
console.log(formattedDate); // 2024/8/29の形式で表示されるポイントは、getMonth()は0から始まるため、+1する必要があることです。
時分秒を「hh:mm」でフォーマットする
同様に、
時刻部分も以下のコードでフォーマットできます。
const today = new Date();
const formattedTime = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
console.log(formattedTime); // 14:30:15などの形式で表示される他のフォーマット方法
Moment.jsを利用する方法
手動でフォーマットするのが面倒な場合や、
より高度なフォーマットが必要な場合には、
外部ライブラリであるMoment.jsを利用することもおすすめです。
Moment.jsは、多くの形式で日付を扱うのに便利なライブラリです。
// Moment.jsを使ったフォーマット例
const moment = require('moment');
console.log(moment().format('YYYY/MM/DD')); // 2024/08/29の形式で表示される自作関数を作成する方法：例「YYYY-MM-DD」
独自のフォーマット関数を作成して、
再利用可能な形にするのも良い方法です。
以下は、日付を「YYYY-MM-DD」で
フォーマットする関数の例です。
function formatDate(date) {
return date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2);
}
console.log(formatDate(new Date())); // 2024-08-29の形式で表示される日付を比較・操作する方法
日付の比較
JavaScriptでは、
日付の前後関係を簡単に比較することもできます。getTime()メソッドを使うと、
1970年1月1日からのミリ秒数を取得できるので、
2つの日付の差を計算できます。
const date1 = new Date('2024-08-29');
const date2 = new Date('2023-08-29');
console.log(date1.getTime() > date2.getTime()); // trueが返される日付の加算・減算
例えば、
1週間後の日付を取得するには、
次のようにミリ秒数を足します。
const today = new Date();
const nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
console.log(nextWeek); // 1週間後の日付が表示される実際に利用される場面
日付フォーマットは、
フロントエンドやバックエンドの開発において頻繁に使用されます。
特に以下のようなシチュエーションでは、
日付を適切な形式に変換することが重要になります。
ユーザーインターフェースでの表示
ウェブサイトやアプリケーションの
ユーザーインターフェース（UI）では、
日付の表示がユーザーにとってわかりやすい形式であることが重要です。
たとえば、
ブログやニュースサイトで記事の公開日を表示する場合、2024-08-29というISO形式ではなく、2024年8月29日といった形式のほうが、
ユーザーにとって読みやすく、親しみやすいものとなります。
const formattedDate = new Date().toLocaleDateString('ja-JP', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
// 出力: 2024年8月29日このように、
適切なフォーマットを使用することで、
ユーザーエクスペリエンスが向上します。
APIとのデータやり取り
APIを使ってデータを送受信する際には、
日付フォーマットが非常に重要です。
多くのAPIでは、ISO 8601形式（toISOString()）を
使用して日時を送ることが推奨されています。
たとえば、予約システムやカレンダーアプリでは、
日時をISO形式で扱うことで、
異なるタイムゾーン間でも一貫性のあるデータ処理が可能になります。
const dateForAPI = new Date().toISOString();
console.log(dateForAPI); // 2024-08-29T14:30:00.000Z
この形式を使用することで、
サーバーとクライアントの間で
日時を正確にやり取りすることができます。
データベースでの日付保存
バックエンドで日付をデータベースに保存する場合も、
ISO 8601形式が広く利用されています。
例えば、
MySQLやPostgreSQLなどのデータベースに
日付を保存する際、ISO 8601形式を用いることで、
後からデータをクエリしても一貫性のある形式で取得できます。
特に、
世界中のユーザーを対象としたアプリケーションでは、
タイムゾーンを意識したデータの保存が不可欠です。
// 日付をISO形式でデータベースに保存
const isoDate = new Date().toISOString();
// データベースにisoDateを保存する書類の自動生成やレポート作成
ビジネスシステムや業務アプリケーションでは、
レポートや書類を自動生成することが多くあります。
その際、
書類の日付が適切にフォーマットされていなければ、
ビジネス上の混乱を招く可能性があります。
たとえば、YYYY/MM/DD形式で日付を表示するのが
標準となっている企業では、
独自のフォーマットで日付を表示する必要があり、
それをJavaScriptで簡単に実現できます。
const reportDate = new Date();
const formattedReportDate = `${reportDate.getFullYear()}/${String(reportDate.getMonth() + 1).padStart(2, '0')}/${String(reportDate.getDate()).padStart(2, '0')}`;
console.log(formattedReportDate); // 2024/08/29
これらの場面において、
日付フォーマットは開発の重要な要素であり、
正確で一貫したフォーマットを使用することで、
システム全体の信頼性と使いやすさが向上します。
まとめ
今回は、
JavaScriptで日付をフォーマットする方法について、
基本から応用まで解説しました。toDateString()やtoLocaleDateString()などの
標準メソッドや、カスタムフォーマット、
Moment.jsを使った方法など、
さまざまな方法で日付を操作できることがわかったと思います。
日付フォーマットは、
どのウェブサイトでも必要になる基本的なスキルですので、
ぜひ活用してください！
