【徹底解説】JavaScriptで日付を整形する方法：ゼロパディングから書式指定まで

2024-06-14

JavaScriptで日付にゼロパディングを行う方法

String.prototype.padStart() メソッドは、文字列の先頭に指定した文字数分の空白文字を追加します。日付を文字列に変換してから、このメソッドを使用してゼロパディングを行うことができます。

const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1; // 月は0から始まるため、1を足す
const day = date.getDate();

const formattedDate = `${year.toString().padStart(4, '0')}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;

console.log(formattedDate); // 例: 2024-06-14

手動でフォーマットする

String.prototype.padStart() メソッドを使用せずに、手動で日付をフォーマットすることもできます。

const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();

const formattedDate = `${year}-${(month < 10 ? '0' : '') + month}-${(day < 10 ? '0' : '') + day}`;

console.log(formattedDate); // 例: 2024-06-14

String.prototype.padStart() メソッドは、より簡潔で読みやすいコードになります。
手動でフォーマットする方法は、より柔軟性に富んでいます。日付フォーマットを独自に定義したい場合などに役立ちます。

補足

JavaScriptでは、Date オブジェクトを使用して日付を処理することができます。
Date オブジェクトには、getFullYear(), getMonth(), getDate() などのメソッドがあり、それぞれ年、月、日を取得することができます。
日付を文字列に変換するには、toString() メソッドを使用することができます。

function formatDate(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  const formattedDate = `${year.toString().padStart(4, '0')}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
  return formattedDate;
}

const today = new Date();
const formattedToday = formatDate(today);
console.log(formattedToday); // 例: 2024-06-14

function formatDate(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  const formattedDate = `${year}-${(month < 10 ? '0' : '') + month}-${(day < 10 ? '0' : '') + day}`;
  return formattedDate;
}

const today = new Date();
const formattedToday = formatDate(today);
console.log(formattedToday); // 例: 2024-06-14

説明

上記のコードは、formatDate という関数を定義します。
この関数は、Date オブジェクトを引数として受け取り、その日付をフォーマットされた文字列として返します。
フォーマットされた文字列は、YYYY-MM-DD形式になります。
手動でフォーマットする場合、条件式を使用して、月と日の桁数が1桁の場合は頭に0を追加します。

使い方

上記コードを以下のように使用することができます。

const today = new Date();
const formattedToday = formatDate(today);
console.log(formattedToday); // 例: 2024-06-14

このコードを実行すると、現在の日付がYYYY-MM-DD形式で出力されます。

応用例

日付をデータベースに格納する場合
日付をAPIで送受信する場合
日付をユーザーインターフェースに表示する場合

上記のコードはあくまで一例です。必要に応じて、フォーマットや機能を拡張することができます。
JavaScriptには、日付処理に役立つライブラリがいくつかあります。より複雑な日付処理が必要な場合は、ライブラリの使用を検討することもできます。

JavaScriptで日付にゼロパディングを行うその他の方法

toLocaleDateString() メソッドは、日付オブジェクトをロケールに基づいて文字列に変換します。このメソッドには、オプションでフォーマットを指定することができます。

const date = new Date();
const formattedDate = date.toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' });
console.log(formattedDate); // 例: 2024/06/14

Intl オブジェクトは、国際化に関連する機能を提供します。このオブジェクトを使用して、日付をフォーマットすることもできます。

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' });
const formattedDate = formatter.format(date);
console.log(formattedDate); // 例: 2024/06/14

シンプルなゼロパディングであれば、String.prototype.padStart() メソッドまたは toLocaleDateString() メソッドを使用するのが簡単です。
より複雑なフォーマットが必要な場合は、Intl オブジェクトまたはライブラリを使用する方が柔軟性に富んでいます。

上記以外にも、さまざまな方法でJavaScriptで日付にゼロパディングを行うことができます。自分に合った方法を見つけて、活用してください。

javascript date date-format