日付を0埋め（前ゼロ/ゼロパディング）にして桁数を揃える方法【JavaScript】

ゼロパディング（前ゼロ）とは？

ゼロパディングとは、数値やデータを表示・処理する際に、指定された桁数に満たない部分を「0」で埋める手法を指します。これにより、桁数を揃えたりデータ形式を統一したりすることが可能になります。

たとえば、
1 → 01
9 → 09
このように桁数をそろえることで、見た目が美しくなり、ソートや比較といった処理もスムーズになります。
日付や時刻、ファイル名、ログデータなどでは、ゼロパディングが非常に重要です。

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

padStart() を使う方法（推奨）

JavaScriptでは、文字列メソッドの padStart() を使うことで簡単にゼロパディングが可能です。

JavaScript

    const day = String(8).padStart(2, '0');
    console.log(day); // "08"

このコードでは、まず8をString()で文字列に変換し、それを padStart(2, '0') で「2桁になるまで'0'を左に追加する」処理をしています。

三項演算子を使う旧来の方法

古い書き方では、次のような方法もよく使われていました。

JavaScript

const day = 8;
const paddedDay = day < 10 ? '0' + day : String(day);
console.log(paddedDay); // "08"

こちらも同様の結果が得られますが、可読性や保守性の面で padStart() を使う方がおすすめです。

日付を「YYYY-MM-DD」形式に整える

JavaScriptのDateオブジェクトを使って、現在の日付を「2024-04-08」のような形式に整える方法を紹介します。

JavaScript

const date = new Date();

const year = date.getFullYear();
const month = String(date.getMonth()+ 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');

const formatted = `${year}-${month}-${day}`;
console.log(formatted); // 例: "2024-04-08"

date.getMonth()に注意の注意点

date.getMonth() は0（1月）〜11（12月）を返すため、月として表示する際には+1を忘れずに加える必要があります。

再利用しやすいように関数を作る

日付フォーマット処理は何度も使う場面があるため、関数化しておくと非常に便利です。

JavaScript

function formatDate(date){
    if (!(date instanceof Date)|| isNaN(date))return null;
    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}`;
}

const today = new Date();
console.log(formatDate(today)); // 例: "2024-04-08"

この関数を使えば、任意の日付オブジェクトを「YYYY-MM-DD」の形式で出力できます。ログ出力、ファイル命名、ユーザー表示など、あらゆる場面で使えます。

日付オブジェクトでない場合はNULLを返す

以下のようにガード節を追加して、引数が日付オブジェクトでない場合に null を返すようにできます。
instanceof Dateを使用して、引数がDateオブジェクトかどうかを判定します。

ガード節（Guard Clause）とは

ガード節とは、プログラムにおける条件分岐のテクニックで、特定の条件が満たされた場合に早期に処理を終了させる方法を指します。これにより、コードのネストを浅くし、可読性や保守性を向上させることができます。

JavaScript

if (!(date instanceof Date)|| isNaN(date))return null;

1. 型チェックdate instanceof Dateを使って、引数がDateオブジェクトかどうかを確認します。
2. 有効な日付かの確認isNaN(date) を使って、無効な日付（例: new Date('invalid')）の場合も検出します。

JavaScrip

console.log(formatDate(new Date())); // 現在の日付をフォーマット (例: "2025-04-09")
console.log(formatDate("2025-04-09")); // null (日付オブジェクトではない)
console.log(formatDate(new Date("invalid"))); // null (無効な日付)

このコードは、引数が正しい日付オブジェクトである場合のみフォーマットを行い、それ以外の場合は安全に null を返します。

よくある注意点・間違いやすいポイント

padStart()は数値には使えない

padStart()は文字列メソッドのため、数値には直接使えません。

JavaScrip

String(5).padStart(2, '0'); // OK
5.padStart(2, '0'); // エラー

padStart()古いブラウザでは非対応

padStart() はES2017（ES8）から利用可能です。Internet Explorerでは動作しないため、必要に応じてポリフィルや別の方法を検討しましょう。

この記事に関連するよくあるご質問

まとめ

いかでしたでしょうか？
今回の記事では、avaScriptで日付をゼロパディングして桁数を揃える方法を、基本から実践的なコード例まで詳しくご紹介しました。

今回のポイントをまとめますと、次のとおりです。

他にもJavaScriptに関する技術や実用テクニックを随時発信しています。
「役に立った」と思っていただけた方は、ぜひブックマークやSNSでのシェアをお願いいたします！

最後までお読みいただきありがとうございました！