JavaScript Tips | 文字列ユーティリティ：業務用 － 日付文字列生成

JavaScript JavaScript
スポンサーリンク

何をしたいユーティリティか：「日付文字列生成」

ここで目指すのは、「Date を、業務でよく使うフォーマットの文字列に変換する処理」を関数にまとめることです。
画面表示、CSV 出力、ログ、固定長ファイルなど、日付の「見た目」はあちこちで必要になりますが、
毎回バラバラに書くと、必ず表記ゆれが起きます。

だから、

formatDateYmd(new Date());        // "2024-01-05"
formatDateYmdCompact(new Date()); // "20240105"
formatDateTime(new Date());       // "2024-01-05 09:30:15"
JavaScript

のように、「日付文字列はこのユーティリティを通す」と決めてしまうのがゴールです。

業務でよく使う日付フォーマットを決める

代表的なパターンを先に決めてしまう

業務システムでよく出てくるのは、だいたいこのあたりです。

YYYY-MM-DD（例: "2024-01-05"）
YYYY/MM/DD（例: "2024/01/05"）
YYYYMMDD（例: "20240105"）
YYYY-MM-DD HH:mm:ss（例: "2024-01-05 09:30:15"）

これを「プロジェクトの標準フォーマット」として決めてしまい、
それぞれに対応する関数を用意します。

ゼロ埋めを使った基本実装の型を作る

共通の「ゼロ埋め」ヘルパー

日付の月・日・時・分・秒は、2 桁でそろえたいので、
まずはゼロ埋めの小さな関数を用意します。

function padZero(value, length = 2) {
  return String(value).padStart(length, "0");
}
JavaScript

これで、

padZero(1);    // "01"
padZero(9);    // "09"
padZero(12);   // "12"
padZero(5, 3); // "005"
JavaScript

のように、日付フォーマットで使える「桁そろえ」ができます。

YYYY-MM-DD 形式の日付文字列生成

formatDateYmd の実装

function formatDateYmd(date) {
  if (!date) {
    return "";
  }

  const d = date instanceof Date ? date : new Date(date);
  if (Number.isNaN(d.getTime())) {
    return "";
  }

  const y = d.getFullYear();
  const m = padZero(d.getMonth() + 1, 2);
  const day = padZero(d.getDate(), 2);

  return `${y}-${m}-${day}`;
}
JavaScript

重要ポイントの解説

最初に、「Date かどうか」「有効な日付かどうか」をチェックしています。

const d = date instanceof Date ? date : new Date(date);
if (Number.isNaN(d.getTime())) {
  return "";
}
JavaScript

ここで new Date(date) を通すことで、
"2024-01-05" のような文字列も受け付けられます。
getTime() が NaN なら「不正な日付」と判断して空文字を返しています。

次に、年月日を取り出してゼロ埋めします。

const y = d.getFullYear();
const m = padZero(d.getMonth() + 1, 2);
const day = padZero(d.getDate(), 2);
JavaScript

getMonth() は 0 始まりなので、+ 1 を忘れないことが重要です。
ここを一度ユーティリティに閉じ込めてしまえば、以降は毎回悩まなくて済みます。

最後に、テンプレート文字列で組み立てます。

return `${y}-${m}-${day}`;
JavaScript

これで "2024-01-05" のような文字列が得られます。

YYYY/MM/DD・YYYYMMDD などのバリエーション

スラッシュ区切り版

function formatDateYmdSlash(date) {
  if (!date) {
    return "";
  }

  const d = date instanceof Date ? date : new Date(date);
  if (Number.isNaN(d.getTime())) {
    return "";
  }

  const y = d.getFullYear();
  const m = padZero(d.getMonth() + 1, 2);
  const day = padZero(d.getDate(), 2);

  return `${y}/${m}/${day}`;
}
JavaScript

連結版（YYYYMMDD）

function formatDateYmdCompact(date) {
  if (!date) {
    return "";
  }

  const d = date instanceof Date ? date : new Date(date);
  if (Number.isNaN(d.getTime())) {
    return "";
  }

  const y = d.getFullYear();
  const m = padZero(d.getMonth() + 1, 2);
  const day = padZero(d.getDate(), 2);

  return `${y}${m}${day}`;
}
JavaScript

どちらも、年月日の取り出しロジックは同じで、
「区切り文字をどうするか」だけが違います。

ここで大事なのは、「どのフォーマットをどの関数名にするか」を決めておくことです。
formatDateYmd / formatDateYmdSlash / formatDateYmdCompact のように、
名前を見ただけでフォーマットが分かると、後から読んだときに迷いません。

日時（YYYY-MM-DD HH:mm:ss）文字列生成

formatDateTime の実装

function formatDateTime(date) {
  if (!date) {
    return "";
  }

  const d = date instanceof Date ? date : new Date(date);
  if (Number.isNaN(d.getTime())) {
    return "";
  }

  const y = d.getFullYear();
  const m = padZero(d.getMonth() + 1, 2);
  const day = padZero(d.getDate(), 2);
  const h = padZero(d.getHours(), 2);
  const min = padZero(d.getMinutes(), 2);
  const s = padZero(d.getSeconds(), 2);

  return `${y}-${m}-${day} ${h}:${min}:${s}`;
}
JavaScript

どこで使うか

この形式は、ログや画面表示、CSV 出力などでよく使います。

formatDateTime(new Date("2024-01-05T09:30:15"));
// "2024-01-05 09:30:15"
JavaScript

「日付だけ」ではなく「時間まで」欲しいときは、
必ずこの関数を通す、と決めておくと表記が揃います。

実際の動きをまとめて確認する

const d = new Date("2024-01-05T09:30:15");

formatDateYmd(d);         // "2024-01-05"
formatDateYmdSlash(d);    // "2024/01/05"
formatDateYmdCompact(d);  // "20240105"
formatDateTime(d);        // "2024-01-05 09:30:15"
JavaScript

同じ Date から、用途に応じた文字列を安定して生成できているのが分かると思います。

実務で意識してほしい設計のポイント

「日付の見た目」は必ずユーティリティを通す

画面や CSV のコードの中で、直接

`${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
JavaScript

のように書き始めると、
どこかでゼロ埋めを忘れたり、+ 1 を忘れたり、/ と - が混ざったりします。

「日付を文字列にするときは必ず formatDateXXX を使う」
というルールにしておくと、表記ゆれとバグが一気に減ります。

タイムゾーンの扱いをチームで決める

ここまでの例は「実行環境のローカルタイムゾーン」をそのまま使っています。
業務によっては「全部 UTC で扱う」「全部日本時間で固定する」などのルールが必要です。

その場合は、getHours() ではなく getUTCHours() を使う、
あるいはライブラリ（dayjs / date-fns など）を使う、という選択肢も出てきます。

大事なのは、「日付文字列生成のルールを 1 箇所に閉じ込める」ことです。
タイムゾーンを変えたくなったら、そのユーティリティだけ直せばよい、という状態を作っておきましょう。

入力と出力のフォーマットをセットで考える

"2024-01-05" のような文字列を受け取って Date にする処理（パース）と、
Date から "2024-01-05" を作る処理（フォーマット）は、
ペアで設計しておくと安全です。

例えば、

function parseDateYmd(str) { ... }
function formatDateYmd(date) { ... }
JavaScript

のように、「このフォーマットはこの 2 関数で往復できる」と決めておくと、
「文字列 → Date → 文字列」の変換で崩れにくくなります。

少し手を動かして感覚をつかむ

コンソールで、次のようなコードを実際に打ってみてください。

const d = new Date("2024-01-05T09:30:15");

formatDateYmd(d);
formatDateYmdSlash(d);
formatDateYmdCompact(d);
formatDateTime(d);

formatDateYmd("2024-12-31");
formatDateTime("2024-12-31T23:59:59");
formatDateYmd("不正な日付");
JavaScript

どの入力が空文字になるか、どの入力が期待通りの文字列になるかを確認してみてください。

そのうえで、自分のプロジェクトに

export function formatDateYmd(...) { ... }
export function formatDateYmdSlash(...) { ... }
export function formatDateYmdCompact(...) { ... }
export function formatDateTime(...) { ... }
JavaScript

を置き、

「日付を文字列にしたくなったら、必ずここを通す」

というルールを作ってみてください。
それだけで、あなたのシステムの日付表示は、場当たり的な書き方から、
意図と一貫性を備えた「業務レベルの日付文字列生成ユーティリティ」に変わっていきます。

スポンサーリンク
タイトルとURLをコピーしました