ITスキル・ノウハウ

【コピペで使える】JavaScriptの様々なDateフォーマットを紹介

JavaScript-Date

こんにちは、ラーメン好きなフリーランスエンジニアの”ぽんねぐ”です。

JavaScriptをのDateオブジェクトを用いて様々な日付型を扱いたい人に向けてDateオブジェクトのフォーマットをまとめました。

それぞれの用途に合わせてコピペで使って貰えたらと思います。

本記事を最後まで読んで頂くことで以下のようなお悩みを解決できます。

この記事で解決できるお悩み

以下の関連記事についても一緒にご確認頂けるとJavaScriptのことがもっと理解できます。

まずは簡単に私のことを紹介します。

プロフィール

・システムエンジニア歴：6年（会社員：5年、フリーランス：1年）

・退職後すぐに案件獲得に成功し、1年間継続中

・独立後の年収は正社員時代の2倍を達成

それでは始めていきましょう。

JavaScriptにおける日付の基本

JavaScriptで日付を扱うには、Dateオブジェクトを使います。

現在の日付を取得：

JavaScript
const now = new Date();
console.log(now); // 例: 2024-11-19T10:23:45.000Z

標準的な日付フォーマット：

JavaScript
console.log(now.toString()); // 例: Tue Nov 19 2024 19:23:45 GMT+0900 (日本標準時)
console.log(now.toLocaleString()); // 例: 2024/11/19 19:23:45

カスタムフォーマットを作成

基本的な構成要素

  • 年（getFullYear(), getYear()）
  • 月（getMonth()）※0基準なので+1が必要
  • 日（getDate()）
  • 曜日（getDay()）※0が日曜日
  • 時間（getHours(), getMinutes(), getSeconds(), getMilliseconds()）

事例集（コピペで使えるフォーマット集）

YYYY-MM-DD

データベースの保存用やAPIのリクエストで使用します。

JavaScript
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
console.log(formatDate(now)); // 2024-11-19

DD/MM/YYYY

国際取引やヨーロッパ形式の日付表示に対応する場合に使用します。

JavaScript
const formatDDMMYYYY = (date) => {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
};
console.log(formatDDMMYYYY(now)); // 19/11/2024

YYYY年MM月DD日

日本語の書類や報告書に日付を記載する場合に使用します。

JavaScript
const formatJapaneseDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}年${month}月${day}日`;
};
console.log(formatJapaneseDate(now)); // 2024年11月19日

HH:mm

ログのタイムスタンプや処理時間を記録する際に使用します。

JavaScript
const formatTime = (date) => {
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${hours}:${minutes}:${seconds}`;
};
console.log(formatTime(now)); // 19:23:45

YYYY/MM/DD HH:mm

ユーザーインターフェースに日時をフル形式で表示したい場合に使用します。

JavaScript
const formatFullDateTime = (date) => {
  return `${formatDate(date)} ${formatTime(date)}`;
};
console.log(formatFullDateTime(now)); // 2024-11-19 19:23:45

YYYY年MM月DD日（曜日）

カレンダーアプリやスケジュール表示に曜日を添える場合に使用します。

JavaScript
const formatWithWeekday = (date) => {
  const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
  const weekday = weekdays[date.getDay()];
  return `${formatJapaneseDate(date)} (${weekday})`;
};
console.log(formatWithWeekday(now)); // 2024年11月19日 (火)

その他便利な使い方

時間計測に利用

Unixタイムスタンプ（エポック時間）

サーバー間通信や一意の識別子生成、時間計算に使用します。

例: 1700405025（秒単位）

JavaScript
const unixTimestamp = Math.floor(Date.now() / 1000); 
console.log(unixTimestamp); // 例: 1700405025

ミリ秒単位のUnixタイムスタンプ

高精度な時間測定やログ記録に使用します。

例: 1700405025123（ミリ秒単位）

JavaScript
const unixMilliseconds = Date.now(); 
console.log(unixMilliseconds); // 例: 1700405025123

日付と時間の分離

日付や時間を個別に記録・検索したい場合に使用します。

例: 2024-11-19（日付）と 19:23:45（時間）

JavaScript
const datePart = formatDate(now); // YYYY-MM-DD
const timePart = formatTime(now); // HH:mm:ss
console.log({ datePart, timePart }); 
// { datePart: "2024-11-19", timePart: "19:23:45" }

カスタム区切り（ログ用）

ログファイルやデバッグ出力で使用します。

例: 2024/11/19|19:23:45

JavaScript
const customLogFormat = `${formatDate(now)}|${formatTime(now)}`;
console.log(customLogFormat); // 2024/11/19|19:23:45

ファイル名用（タイムスタンプ付）

ファイルの一意性を保つために使用します。

例:backup_20241119_192345

JavaScript
const formatForFilename = (date) => {
  const datePart = formatDate(date).replace(/-/g, '');
  const timePart = formatTime(date).replace(/:/g, '');
  return `backup_${datePart}_${timePart}`;
};
console.log(formatForFilename(now)); // backup_20241119_192345

まとめ

本記事では、JavascriptのDateオブジェクトについて様々なフォーマットを紹介しました。

コピペで使えますので、ぜひシステム開発時に利用頂けたらと思います。

何か不明点などございましたらコメント欄に記載頂けたらと思います！

以上、最後までお読みいただきありがとうございました。

-ITスキル・ノウハウ