【JavaScript】0埋めとは？ゼロ埋めのやり方を初心者向けに解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptで0埋めを行う方法は複数存在します。
たとえば数値や文字列の一部を一定桁数に揃える際に、先頭を「0」で埋めてそろえるケースがあるでしょう。
注文番号やユーザーID、また日時を扱うときのフォーマットなどで0埋めが必要な場面は多く、実務でもよく目にする作業です。

とはいえ初めてプログラミングに触れる方にとっては「0埋めってなに？」「0埋めをどうやってやるの？」といった疑問が自然と湧いてくるのではないでしょうか。
今回の記事では、JavaScriptにおける0埋めの方法をわかりやすく解説し、どんな場面で役立つのかや、具体的にどのような方法で実装できるのかを紹介します。

また、現場でよく使われるpadStartやsliceなどの文字列メソッド、あるいはIntl.NumberFormatといったフォーマット用の機能を取り上げ、どの方法がどのようなケースに適しているかもあわせて説明します。
さらに、「そもそも数値と文字列をどう扱えばいいのか」や「日付や注文番号でどのように0埋めが使われるのか」など、初心者の皆さんが疑問に感じがちなポイントも含め、なるべく噛み砕いてお話ししていきます。

0埋めというと単に先頭に0をつけるだけと考えるかもしれませんが、実務での利用シーンを踏まえると、思いのほか奥が深いものです。
コードを書いた際にうまく動作しなかったり、想定していた桁数とずれてしまったりする問題も起こりやすいので、注意点をおさえながら習得していきましょう。

この記事を通じて、数値や文字列を自由に整形できるスキルを身につけていただけたらうれしいです。
それでは早速、0埋めの基本から具体的な活用方法まで順を追って確認していきましょう。

この記事を読むとわかること

0埋めの基本的な考え方
実務で必要となるシーンの例
padStartやsliceなど文字列メソッドを用いた方法
Intl.NumberFormatを使った数値フォーマットの方法
日付表示における0埋めの具体例
型変換やエラー回避などの注意点
大量データでのパフォーマンスを考慮するコツ
テストコードでのチェックポイント

これらを踏まえることで、JavaScriptの0埋めを自由に扱えるようになり、実際の業務でも混乱なく使いこなせる状態を目指せます。

JavaScriptにおける0埋めとは何か

まずは「0埋め」という言葉そのものについて理解しておきましょう。
0埋めは、主に数値や文字列の先頭を「0」で補って、桁数を揃える操作のことを指します。

たとえば、注文番号や社員番号を一律6桁に揃えたい場合を想像してください。
"123" という数字なら "000123" といった具合に、必要な桁数分だけ先頭に "0" をつけます。
こうすることで管理画面や帳票などで整然とした見た目となり、検索や整理がしやすいといった利点があります。

JavaScriptで0埋めをする場合、文字列操作として考えるのが基本です。
もし対象が数値型の場合は、一時的に文字列に変換してから0を加え、そのうえで必要なら再び数値に変換することがあります。
しかし、最終的な表示が必要な場合には文字列として扱うことがほとんどなので、文字列操作が中心になるでしょう。

文字列として取り扱うメリットは、数字以外の情報（たとえばハイフンやアルファベットなど）が混在しているIDでも同じ処理で0埋めが行える点です。
反対に、単に数値として計算するときは先頭の0が意味をなさないので、何らかのフォーマット用のステップが入ると考えるとわかりやすいかもしれません。

なぜ0埋めが注目されるのか

実は0埋めは、データの見やすさや処理のしやすさを向上させるための重要なテクニックでもあります。
たとえば、サイズの異なる数値が並んでいると視覚的に並びが揃わず管理しづらいですが、すべてを同じ桁数にしておけば、ソートや比較、検索などがスムーズになるでしょう。

また、プログラムが生成するログやレポートに目を通すときにも、整ったフォーマットになっていることでトラブルの早期発見やメンテナンス性の向上が期待できます。
実務においては、こうした小さな工夫の積み重ねがあとあと大きな生産性の差となって表れてくることがあります。

特にJavaScriptの場合、フロントエンドとサーバーサイドの両方で扱われるケースが多いため、フロント側で入力された数値をサーバーに送る前に0埋めすることもあれば、サーバーで受け取ったデータをJavaScriptで再整形して表示することもあるでしょう。
このように、あらゆる箇所で0埋めのニーズが発生するため、その方法をしっかりと理解しておくと業務でも役立つはずです。

実務シーンで役立つ0埋め

0埋めの重要性をさらに具体的にイメージするために、よくある利用シーンをいくつか見てみましょう。
実務では「こういうところに0埋めが必要なのか」と思うケースが頻繁に出てきます。

たとえば、ECサイトなどの注文番号やユーザーアカウントIDを見てみると、先頭に0がつけられているものを見かけることがあります。
注文番号の場合、1件目は「000001」、2件目は「000002」、10件目は「000010」のように並ぶことがありますね。
このように、桁を揃えておくとリスト表示がそろいやすく、人間が見てもわかりやすい形になります。

また、日付のように「月」や「日」が一桁の場合は「01」や「09」と記載したい場面も多いです。
これは0埋めの代表的な例で、特にフロントエンドの画面表示で混乱を避けるために、必ず0埋めをしておく方が便利なことが多いのです。

こうした実務的なシーンが背景にあるため、いざJavaScriptで数値や日付を扱う際、0埋めをどのように書けばいいのかを知っておくとエラーを減らし、かつメンテナンス性の高いコードを実装できるようになります。

注文番号やユーザーIDでの利用

注文番号やユーザーIDで0埋めを行うメリットは、番号が同じ桁数で統一されるため、人間がパッと見たときの判別が容易になる点です。
たとえば「12」と「12345」が混在しているよりも、「000012」「012345」のようにそろっていたほうが見やすさも向上します。

さらにシステム側でも、IDの文字列長を一定にそろえることで正規表現を用いたチェックが容易になったり、データベースへの格納において扱いやすくなったりする場合もあるでしょう。
ただし、データベースのカラムを数値型にしていると先頭の0が消えてしまうことがあるため、IDを文字列として扱うケースもよくあります。

このように、IDは文字列で管理するという方針をとるプロジェクトも少なくありません。
その際にはJavaScriptで0埋めを行うことが便利であり、padStartなどのメソッドが非常によく使われます。
次の章では、実際に文字列メソッドを使った0埋めの方法を順番に紹介していきましょう。

文字列メソッドによる0埋め

JavaScriptで0埋めを行う際、最も利用頻度が高いのはpadStartとslice、あるいはsubstringを用いた文字列の操作です。
これらを使うと、必要な桁数に満たない場合だけ先頭に「0」を足したり、長すぎる場合は適切に文字数を切り落としたりといった細かい制御が可能になります。

たとえば、padStartは「既存の文字列が指定した長さに満たなければ先頭に文字を加える」メソッドです。

"123".padStart(6, "0"); // "000123"

のように、あらかじめ決めておいた6桁にそろうまで「0」を追加する使い方が典型例です。

一方でsliceやsubstringは、文字列を一部だけ切り取るメソッドです。
「先頭に0を足したあと、逆に必要以上に長くなった場合に末尾を切り捨てる」といった操作が必要なケースで使われます。
厳密に言うと「0埋めのためのメソッド」というわけではありませんが、桁数の調整という目的のもとで非常によく使われる組み合わせといえます。

padStartを使う方法

padStartは比較的新しめのJavaScript仕様で追加されたため、以前はカスタム関数で実装するしかなかった便利な機能を1行で書けるようになりました。
呼び出し元になる文字列に対して padStart(ターゲットの長さ, 埋める文字) を指定するだけで実行できるのが特長です。

文字列の先頭に限らず末尾を埋めたい場合にはpadEndというメソッドも存在します。
今回は0埋めなので先頭に限定されるケースが多いはずですが、用途によってはpadEndも参考にすると良いでしょう。

padStartのコード例

ここでは6桁のIDを生成するサンプルコードを見てみます。


function generateId(num) {
  // 一旦、文字列に変換する
  const str = String(num);
  // 6桁に満たない場合は先頭に"0"を足す
  const padded = str.padStart(6, "0");
  return padded;
}

// テスト用の数値をいくつか試す
console.log(generateId(123));    // "000123"
console.log(generateId(45));     // "000045"
console.log(generateId(123456)); // "123456"

このコードでは、あらかじめ指定した6桁より少ない場合は先頭に0が加わりますが、すでに6桁以上の数字であればそのまま文字列になります。
実務では「6桁を超える入力が来ない想定」などがあるかもしれませんので、その場合は必要に応じてバリデーションを追加するといいでしょう。

padStartを使うだけでシンプルかつわかりやすいコードを書けるため、0埋めの最初の一歩としては十分役立つと思います。

文字列スライスを活用した0埋め

次に、sliceやsubstr、substringといった文字列操作メソッドを利用する方法を見てみます。
これらは文字列の一部分を切り出したり削除したりする際に用いられるものですが、0埋めと組み合わせると「必要以上に長い文字列を切り落とす」「指定文字数以上にならないようにする」という用途に活かせます。

たとえば、会員IDが10桁までしか受け付けないシステムだけれども、ユーザーの誤入力などで12桁の入力が来るかもしれないと想定する場合です。
そこで、最初にpadStartなどで0埋めを行ったあとに、余分に長くなった桁数をsliceでカットしてちょうど10桁に整形する、といったやり方が一般的に考えられます。

このように複数の文字列メソッドを組み合わせることで、単なる0埋め以外にもフォーマット上の柔軟性を高められます。
「先頭からN文字目まではロケーションコードで、そこからM文字目までは日付情報」というような複雑なIDでも、必要な部分だけ切り分けながら0埋めを実現できるのが利点です。

sliceとsubstrの違い

初心者の方は、JavaScriptの文字列操作メソッドに似たものが多くて戸惑うかもしれません。
sliceやsubstr、substringはいずれも文字列を切り出すメソッドですが、引数の仕様や扱い方に微妙な差があります。

slice (start, end)
startからendの手前まで切り出す
負の値をとる場合は文字列の末尾からカウント
substring (start, end)
startとendの大小に関係なく文字列を切り出す
substr (start, length)
startからlength文字分を切り出す

現在ではsliceが使いやすいとされることが多いですが、コードベースによってはsubstrやsubstringが使われているケースもあるでしょう。
理解しておけば既存のコードを読む際にも安心です。

sliceを使ったサンプルコード

具体的な例として、「最大8桁で0埋めしつつ、8桁を超えた場合は末尾を切り捨てる」ケースを想定してみましょう。


function formatId(num) {
  let str = String(num);
  // まずは8桁に満たなければ0を足す
  str = str.padStart(8, "0");
  // 必要以上に長くなった分をカット
  str = str.slice(0, 8);
  return str;
}

// 実行例
console.log(formatId(1234));      // "00001234"
console.log(formatId(12345678));  // "12345678"
console.log(formatId(123456789)); // "12345678"

str.padStart(8, "0")でとにかく8桁にそろえてから、str.slice(0, 8)で先頭から8文字分だけ取得します。
こうすることで、入力が少ないときは先頭に0が補われ、逆に多すぎるときは末尾が切り捨てられて、常に8桁の文字列が返されるわけです。

実務では、IDの桁数にはある程度ルールがあるものの、あえてゆとりを持たせたフォーマットにしておくこともあります。
その場合、このように柔軟な処理を行えると不測の事態にも対応しやすいでしょう。

数値フォーマットを使った0埋め

文字列メソッドによるアプローチだけでほとんどの0埋めは実現できますが、数値をフォーマットするための方法もいくつか存在します。
その中でも有名なのがIntl.NumberFormatという国際化対応のフォーマット機能です。

Intl.NumberFormatは通貨や言語ロケールごとの表記ゆれに対応するために用意されている仕組みですが、引数やオプション次第で小数点以下の桁数などもコントロールできます。
ただ、先頭に0を埋める用途ではやや工夫が必要なので、あまりにも単純な0埋めだけをしたいなら、前述の文字列操作のほうが扱いやすいかもしれません。

一方、大規模な数字を扱ったり、ロケールに応じて桁区切りや小数点表記を柔軟に変えたい場面があるときは、Intl.NumberFormatを試してみるのも良いでしょう。

Intl.NumberFormatを利用

Intl.NumberFormatは、たとえば以下のように記述します。


const formatter = new Intl.NumberFormat("en-US", {
  minimumIntegerDigits: 5,
  useGrouping: false,
});

console.log(formatter.format(123)); // "00123"

ここでポイントとなるのは、オプションでminimumIntegerDigitsを設定しておくことです。
これを5に設定すると、最低5桁は確保しようとするため、入力が3桁の123の場合は先頭に0が2つ足されて「00123」と表示されます。
またuseGroupingをfalseにしているのは、カンマ区切りなどを使わずそのまま連続した数字を出力するためです。

つまりIntl.NumberFormatを使うと、国際化ロケールを意識しつつ数値を整形できる点が特徴です。
ただし、ほんの少しだけ0を補うといった場合はpadStartでも十分なので、状況に応じて使い分けるといいでしょう。

Intl.NumberFormatのサンプルコード

ロケール設定のサンプルも含めて書いてみます。


function formatNumber(num) {
  // minimumIntegerDigitsで必要な桁数を指定
  const formatter = new Intl.NumberFormat("ja-JP", {
    minimumIntegerDigits: 6,
    useGrouping: false,
  });
  return formatter.format(num);
}

// 実行例
console.log(formatNumber(123));    // "000123"
console.log(formatNumber(45));     // "000045"
console.log(formatNumber(123456)); // "123456"

この例では「ja-JP」を指定しているため日本のロケールルールがベースになりますが、最小桁数が6桁というオプションを与えているので、数値が6桁に満たない場合は先頭に0が埋まるわけです。
カンマなどでの区切りは行わず、単純な数字列が得られます。

ただし、ロケール設定によっては半角英数以外の文字が挿入されるなどの違いが出ることもあるので、あくまで状況に合わせて活用するように心がけてください。

日付を扱う上での0埋め

次に、0埋めの対象として非常に多いのが日付です。
月や日が一桁の場合は先頭に0を足した形で表示したいことが多いでしょう。

たとえば、2023-1-9のように月と日が数字1桁で表示されると、システム上は問題なくとも見栄えや可読性が悪いケースがあります。
そこで「1」ではなく「01」といった形式で整形するわけです。

JavaScriptで日付を扱う場合、Dateオブジェクトを使って月や日を取得し、必要に応じて文字列として0埋めする手順を踏みます。
具体的には getMonth() で月を取得すると0〜11の数値が返るので、実際に表示するときは +1してあげてから0埋めするのが一般的です。

月や日付の0埋め

たとえば以下のように実装することが考えられます。


function formatDate(dateObj) {
  // 月は0〜11なので +1 しておく
  const month = String(dateObj.getMonth() + 1).padStart(2, "0");
  // 日はそのまま
  const day = String(dateObj.getDate()).padStart(2, "0");
  const year = dateObj.getFullYear();
  // YYYY-MM-DD形式で返す
  return `${year}-${month}-${day}`;
}

// 1月9日の例
const sampleDate = new Date(2023, 0, 9);
console.log(formatDate(sampleDate)); // "2023-01-09"

monthやdayを文字列に変換したうえで padStart(2, "0") を適用することで、必ず2桁表示になります。
先述の通り、月は getMonth() が0〜11を返す仕様なので、実際の月数に合わせるために+1し、その結果を文字列化して0埋めするわけです。

実務における日付表示フォーマット例

実務では、日付フォーマットを柔軟に切り替える必要が出ることがあります。
「YYYY-MM-DD」「YYYY/MM/DD」「MM-DD-YYYY」など、用途に応じて書き方が変わるため、以下のような簡易的なラッパ関数を用意しておくと便利です。


function formatDateWithDelimiter(dateObj, delimiter = "-") {
  const year = dateObj.getFullYear();
  const month = String(dateObj.getMonth() + 1).padStart(2, "0");
  const day = String(dateObj.getDate()).padStart(2, "0");
  
  return [year, month, day].join(delimiter);
}

const d = new Date(2023, 0, 9);
console.log(formatDateWithDelimiter(d));       // "2023-01-09"
console.log(formatDateWithDelimiter(d, "/"));  // "2023/01/09"

あらかじめ0埋めも含めて関数化しておけば、他の部分からは formatDateWithDelimiter(任意の日付, "/") のように呼び出すだけで済みます。
これによって表示形式を簡単に切り替えられるため、運用途中で仕様が変更になった場合でも柔軟に対応しやすくなるでしょう。

0埋めの注意点とトラブルシューティング

0埋めそのものはシンプルに見えますが、実務で使うときにはいくつか注意点があります。
とくに初心者の皆さんが間違えやすいポイントとして、「数値と文字列を混同してしまう」ケースが挙げられます。

たとえば、先頭に0を付けたIDを数値型として扱おうとすると「0123」などの表記はそもそも数値ではなく単なる文字列なので、思わぬエラーや型変換の問題が発生しやすいです。
また、文字列操作で0を足したつもりが、最終的に計算用に数値へ再変換する過程で0が消えてしまうこともあるでしょう。

0埋めを実装したものの、いざ使ってみたら「正しくパディングされるのは一部の数字だけ」だったり、「桁数が合わないまま画面表示されてしまう」などのトラブルに遭遇することもあります。
こうした問題を回避するために、あらかじめ「IDとして使うのか？」「数値として計算したいのか？」など、データの性質や使いどころを明確にしておくことが大切です。

文字列と数値の型変換

JavaScriptでは、Number("00123") のように文字列を数値に変換すると、先頭の0はすべて無視されてしまいます。
一方、文字列として "00123" を扱えば、そのまま先頭の0が維持されます。

つまり「最終的に先頭の0が必要なのであれば、文字列として扱う」ことが基本的な考え方になります。
数値計算が終わってから最後に文字列化し、そこで0埋めを行うのがよくあるパターンといえるでしょう。

ランタイムエラーを避けるコツ

ランタイムエラーが起きるケースは少ないですが、意図した結果と違う動作をしてバグに発展する可能性が考えられます。
たとえば、0埋めをした文字列を再び数値として演算にかけようとするときに、誤って文字列のままプラス演算をしてしまったり、parseIntを呼び出したら想定外の基数（8進数など）を解釈してしまうといった問題が起きるかもしれません。

JavaScriptでは先頭に「0」をつけた数値リテラルが8進数として認識されるという歴史的な仕様が関係する場面もありましたが、現在は 'use strict' モードなどの影響で挙動が変わるケースがあります。
そのため、0埋めをするなら基本的に文字列で扱い、数値としての計算はすべて必要な値だけ数値化する、といった責任分担を明確にするのがおすすめです。

パフォーマンスと0埋めの関係

0埋めは比較的軽量な操作なので、少数のデータに対して実行する分にはあまりパフォーマンスを気にする必要はありません。
とはいえ、大量のデータを一括で0埋めするようなケースや、極端に長い文字列を繰り返し操作するケースでは、わずかに処理速度の影響が出るかもしれません。

特にサーバー側のJavaScript（たとえばNode.js）で膨大なログやIDを生成する際、毎回 padStart や slice を実行していると、負荷が無視できないレベルになることも考えられます。
もっとも、数千件〜数万件程度なら問題ない場合が多いですが、何百万件単位をリアルタイムで処理するようなケースでは検討が必要でしょう。

大量データを扱うケース

大量のデータを扱う場合、0埋めをループのなかで繰り返すのではなく、一括でフォーマットできる方法を工夫したり、そもそも先頭の0を追加する必要があるのかを再検討するなどが考えられます。
また、フロントエンドで大量に0埋めした文字列を扱うと、ユーザーのブラウザメモリに影響することもあるかもしれません。

ただし、これらは極端な例です。
日常的なアプリケーション開発の範囲内であれば、基本的にはpadStartや文字列操作を使った0埋めで十分高速に動くケースが大半でしょう。

効果的な0埋めの実装ポイント

本当に必要な場面だけ0埋めする

すべての数値を一律で0埋めするよりも、実際に画面表示や帳票で必要となる部分だけ0埋めすれば負荷も減ります。

まとめて処理できるならまとめて行う

大量データに対してループを回すより、一度に文字列を結合してからまとめて書き出すなどの方法を検討してみるのも手です。

データの型定義を見直す

そもそもIDや注文番号を数値として扱わず、文字列型でデータベースに保存するなどの設計をすることで余計な変換を減らし、パフォーマンスを守る方法もあります。

0埋めの実践的なテスト戦略

0埋めのバグを防ぐために、テストコードをしっかり書いておくのも重要です。
どのような入力値が与えられるかわからない状況で、ちゃんと先頭に0が加わるのか、桁数オーバーした場合は正しく切り詰められるのか、といった観点をあらかじめテストしておけば安心です。

また、数値や文字列だけでなく、日付やロケールなども絡むと想像以上にテストケースが増えるかもしれません。
こういった場面で「0埋めした結果が予期せぬフォーマットになった」という事故を防ぐには、ユニットテストから統合テストまでカバーしておくと良いでしょう。

ユニットテストでのテスト観点

極端に小さい数値

例：0 や 5 などを与えたときに先頭に0が十分に付加されるか。

桁数がちょうどの場合

例：指定桁数と同じ長さの値を入れて、不要な0が付加されないか。

桁数を超える場合

例：7桁のIDに対して6桁の指定を行ったらどうなるか。

特殊文字や空文字

間違って空文字が渡されるケースや、ハイフンなどを含む文字列が来た場合でも落ちないか。

こうした細かいシチュエーションを中心にテストケースを作っておけば、実運用時に想定外の入力が混じったとしても慌てず対処できるはずです。

テストコードのサンプル例

ユニットテストフレームワークとして、ここでは簡単な例を想定した擬似的なテストを書いてみます。


function padId(num) {
  return String(num).padStart(6, "0");
}

function testPadId() {
  // case1: 小さい数値
  if (padId(5) !== "000005") {
    console.error("Test failed: case1");
  }
  // case2: 6桁ジャスト
  if (padId(123456) !== "123456") {
    console.error("Test failed: case2");
  }
  // case3: 6桁超え
  if (padId(1234567) !== "1234567") {
    console.error("Test failed: case3");
  }
  console.log("All test cases passed");
}

// テスト実行
testPadId();

ここでは非常にシンプルなテストしか書いていませんが、実務ではこれよりも多くのケースを洗い出し、エラーが起きないことを確認します。
テストコードを用意しておくと、大幅な仕様変更や関数のリファクタリングを行った際にも誤動作をすぐに検出できる点で大変便利です。

0埋めに限らず、フォーマット関連の機能は極端な入力値や思わぬ文字列が来たときの挙動をテストしておくと、開発後半でのトラブルを防ぎやすくなります。

まとめ

ここまで、JavaScriptにおける0埋めのさまざまな方法と実務での応用例を紹介してきました。
0埋めと一口にいっても、padStartやsliceといった文字列メソッド、Intl.NumberFormatを活用する数値フォーマットなど、複数のアプローチが存在します。
また、日付の月や日にちを2桁で表示する場面など、0埋めが当たり前のように使われるシーンは思いのほか多いものです。

特に初心者の方は「数字に0を足すのか、文字列に0を足すのか」の区別が曖昧になりやすいので、0埋めが最終的に視覚表現のためなのか、内部的な計算のためなのかを考えたうえで実装を進めるようにすると理解が深まるでしょう。
また、数値と文字列の型変換を混在させるとバグの原因になりやすいため、必要に応じて文字列として扱う段階と数値として計算する段階をしっかり切り分けておくと、安全かつわかりやすいコードになります。

注文番号やユーザーIDなどで桁をそろえるケースは、実務でもよくあるシチュエーションです。
少ない桁数なら padStart ひとつで対応できてしまいますし、フォーマットが複雑な場合でも slice や substring を組み合わせることで柔軟に制御できます。
大量データを一気に扱う場合は処理の流れを工夫し、パフォーマンスを確保するようにしましょう。

さらに、日付の表示フォーマットでの0埋めは非常によく使われるため、年月日をどう扱うかを定義した関数をプロジェクトに準備しておくと便利です。
そうすることで、どの場所から呼び出しても同じ形式で日付が表示され、メンテナンス性も向上します。

ぜひ、ここで紹介した内容を参考にしながら、実際のコードに取り入れてみてください。
0埋めに関する知識をしっかり身につけておくと、細かいフォーマットの要望にも柔軟に対応できるようになるはずです。
皆さんの開発プロジェクトが、今回の知識によってスムーズに進められることを願っています。