ゼロ埋めマスターになろう! JavaScriptの完全ガイド7選

はじめに
●ゼロ埋めとは
- ○JavaScriptでのゼロ埋め
●ゼロ埋めの基本的な使い方
- ○サンプルコード1：数値をゼロ埋めする
- ○サンプルコード2：文字列をゼロ埋めする
●ゼロ埋めの応用例
- ○サンプルコード3：日付の表示をゼロ埋めする
- ○サンプルコード4：カウントダウンタイマーにゼロ埋めを適用する
●注意点
●対処法
- ○サンプルコード5：負の数値に対応したゼロ埋め
●カスタマイズ方法
- ○サンプルコード6：任意の桁数でゼロ埋めする
- ○サンプルコード7：任意の文字で埋める
まとめ

はじめに

この記事を読めば、JavaScriptでゼロ埋めを行う方法が習得できるようになります。

ゼロ埋めは、データの見た目を整えるためによく使われる技術です。

本記事では、ゼロ埋めの基本的な使い方から、応用例、注意点、対処法、カスタマイズ方法まで、初心者にも分かりやすく解説します。

●ゼロ埋めとは

ゼロ埋めとは、数値や文字列の左側に「0」を追加して、一定の桁数に揃えることです。

例えば、1桁の数値「3」を2桁に揃える場合、左側に「0」を追加して「03」とします。

これにより、データの見た目が整ったり、比較や計算が容易になったりします。

○JavaScriptでのゼロ埋め

JavaScriptでは、ゼロ埋めを行うための専用の関数はありませんが、独自の関数を作成することで実現できます。

本記事では、JavaScriptを使ったゼロ埋めの方法やサンプルコード、注意点、カスタマイズ方法を詳しく解説します。

●ゼロ埋めの基本的な使い方

○サンプルコード1：数値をゼロ埋めする

数値を指定した桁数にゼロ埋めする関数「zeroPadding」を定義したサンプルコードです。

function zeroPadding(num, digit) {
  // 数値を文字列に変換
  let strNum = String(num);
  // 指定した桁数になるまで0を追加
  while (strNum.length < digit) {
    strNum = '0' + strNum;
  }
  return strNum;
}

// 使用例
console.log(zeroPadding(7, 3)); // "007"

このサンプルコードでは、引数として数値（num）と桁数（digit）を受け取り、文字列に変換してから左側に「0」を追加して指定の桁数に揃えます。

○サンプルコード2：文字列をゼロ埋めする

次に、文字列を指定した桁数にゼロ埋めする関数「zeroPaddingStr」を定義したサンプルコードを見ていきましょう。

function zeroPaddingStr(str, digit) {
  // 指定した桁数になるまで0を追加
  while (str.length < digit) {
    str = '0' + str;
  }
  return str;
}

// 使用例
console.log(zeroPaddingStr('abc', 5)); // "00abc"

こちらも引数として文字列（str）と桁数（digit）を受け取り、左側に「0」を追加して指定の桁数に揃えます。

●ゼロ埋めの応用例

○サンプルコード3：日付の表示をゼロ埋めする

JavaScriptで日付を取得し、月や日などをゼロ埋めして表示することもできます。

// ゼロ埋め関数
function zeroPadding(num, digit) {
  let strNum = String(num);
  while (strNum.length < digit) {
    strNum = '0' + strNum;
  }
  return strNum;
}

// 日付を取得
const date = new Date();
const year = date.getFullYear();
const month = zeroPadding(date.getMonth() + 1, 2); // 月は0から始まるため、+1する
const day = zeroPadding(date.getDate(), 2);

// ゼロ埋めした日付を表示
console.log(`${year}-${month}-${day}`); // 例: "2023-04-26"

このサンプルコードでは、Dateオブジェクトを使って現在の日付を取得し、年、月、日をゼロ埋めして表示します。

○サンプルコード4：カウントダウンタイマーにゼロ埋めを適用する

カウントダウンタイマーにもゼロ埋めを適用して、見やすい表示にすることができます。

// ゼロ埋め関数
function zeroPadding(num, digit) {
  let strNum = String(num);
  while (strNum.length < digit) {
    strNum = '0' + strNum;
  }
  return strNum;
}

// カウントダウンタイマー
function countdownTimer(seconds) {
  let remaining = seconds;

  const timerId = setInterval(() => {
    remaining--;

    const min = zeroPadding(Math.floor(remaining / 60), 2);
    const sec = zeroPadding(remaining % 60, 2);

    console.log(`${min}:${sec}`);

    if (remaining <= 0) {
      clearInterval(timerId);
      console.log('タイマー終了');
    }
  }, 1000);
}

// 使用例
countdownTimer(180); // 3分間のカウントダウンタイマー

このコードでは、指定された秒数をカウントダウンするタイマーを作成し、分と秒をゼロ埋めして表示します。

●注意点

ゼロ埋めを行う際、負の数値に対応していない場合があります。

その場合、負の数値の左側に「0」が追加されると、結果が正しくなくなります。

●対処法

○サンプルコード5：負の数値に対応したゼロ埋め

負の数値に対応するために、次のようにゼロ埋め関数を改良します。

// 負の数値に対応したゼロ埋め関数
function zeroPaddingWithNegative(num, digit) {
  const isNegative = num < 0;
  const absNum = Math.abs(num);
  let strNum = zeroPadding(absNum, digit - (isNegative ? 1 : 0));
  return isNegative ? '-' + strNum : strNum;
}

// 使用例
console.log(zeroPaddingWithNegative(-42, 5)); // "-00042"

この関数では、まず数値が負かどうか判定し、その後絶対値を取得してゼロ埋めを行います。

最後に、元の数値が負であれば「-」を付けて戻ります。

●カスタマイズ方法

○サンプルコード6：任意の桁数でゼロ埋めする

任意の桁数でゼロ埋めを行いたい場合、引数に桁数を指定して関数を呼び出すことができます。

console.log(zeroPadding(123, 6)); // "000123"

○サンプルコード7：任意の文字で埋める

ゼロ埋めではなく、任意の文字で埋めたい場合、関数を次のように変更します。

function customPadding(num, digit, paddingChar) {
  let strNum = String(num);
  while (strNum.length < digit) {
    strNum = paddingChar + strNum;
  }
  return strNum;
}

// 使用例
console.log(customPadding(42, 5, 'X')); // "XXX42"

この関数では、引数に埋める文字を追加し、ゼロではなくその文字で埋める処理を行います。