【JavaScript】文字列の桁数を揃える！padStartとpadEndでゼロ埋め・整列を行う方法

2026年1月24日

概要

ID番号の「ゼロ埋め（001, 002…）」や、日時表示のフォーマット（hh:mm:ss）、あるいはコンソールログの見た目を整えるための「桁合わせ」は、Webアプリ開発で頻出する処理です。

かつては独自の関数を実装していましたが、ES2017で標準化された padStart と padEnd を使えば、非常に簡潔かつ安全に文字列の長さを制御できます。本記事では、サーバーの稼働時間モニター作成を通じて、これらのメソッドの実践的な使い方を解説します。

仕様（入出力）

`padStart` / `padEnd` メソッド

メソッド	動作	戻り値	主な用途
`padStart(targetLength, padString)`	文字列の先頭を指定文字で埋めて、指定長にする	String	IDゼロ埋め、日時整形
`padEnd(targetLength, padString)`	文字列の末尾を指定文字で埋めて、指定長にする	String	ログ整列、固定長テキスト生成

入力:
- targetLength: 完成後の文字列の長さ（数値）。
- padString (省略可): 埋めるのに使う文字列（デフォルトは半角スペース）。
出力: 指定の長さになるようパディングされた新しい文字列。元の文字列が指定長より長い場合は、元の文字列がそのまま（または切り詰められずに）返されます。

基本の使い方

1. 先頭を埋める（ゼロパディング）

数値IDや日付を固定桁数に揃える最も一般的なパターンです。

const id = '5';
// 3桁になるまで先頭を'0'で埋める
console.log(id.padStart(3, '0')); // "005"

const time = '9';
console.log(time.padStart(2, '0')); // "09"

2. 末尾を埋める（レイアウト調整）

ログ出力やリスト表示で見出しの長さを揃える際に便利です。

const label = 'Error';
// 10文字になるまで末尾を'.'で埋める
console.log(label.padEnd(10, '.')); // "Error....."

コード全文（HTML / JavaScript）

サーバーの「稼働時間（Uptime）」を HH:MM:SS 形式で表示し、下部にステータスログを整列して表示するダッシュボードの例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server Uptime Monitor</title>
    <style>
        body {
            background-color: #1e1e1e;
            color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .dashboard {
            background-color: #2d2d2d;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            text-align: center;
            width: 320px;
        }
        h2 { margin: 0 0 1rem 0; font-size: 1rem; color: #aaa; }
        .uptime-display {
            font-family: 'Courier New', Courier, monospace;
            font-size: 2.5rem;
            font-weight: bold;
            color: #4caf50;
            margin-bottom: 1.5rem;
            letter-spacing: 2px;
        }
        .log-area {
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            text-align: left;
            background: #000;
            padding: 10px;
            border-radius: 4px;
            color: #888;
        }
    </style>
</head>
<body>

<div class="dashboard">
    <h2>SERVER UPTIME</h2>
    <div class="uptime-display">
        <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
    </div>
    
    <div id="status-log" class="log-area">
        Initializing...
    </div>
</div>

<script src="uptime.js"></script>
</body>
</html>

JavaScript

/**
 * 数値を指定した桁数の文字列に変換するユーティリティ
 * @param {number} num - 対象の数値
 * @param {number} length - 桁数
 * @returns {string} ゼロ埋めされた文字列
 */
const formatTime = (num, length = 2) => {
    return String(num).padStart(length, '0');
};

// DOM要素の取得
const elHours = document.getElementById('hours');
const elMinutes = document.getElementById('minutes');
const elSeconds = document.getElementById('seconds');
const elLog = document.getElementById('status-log');

// 擬似的なサーバー起動時刻（例: 本日の0時0分0秒）
const startTime = new Date();
startTime.setHours(0, 0, 0, 0);

/**
 * 画面更新処理
 */
function updateMonitor() {
    const now = new Date();
    // 経過秒数を計算
    const diffBytes = now - startTime;
    const totalSeconds = Math.floor(diffBytes / 1000);

    // 時・分・秒への変換
    const h = Math.floor(totalSeconds / 3600);
    const m = Math.floor((totalSeconds % 3600) / 60);
    const s = totalSeconds % 60;

    // padStartを使って2桁固定表示 (例: 5 -> "05")
    elHours.innerText = formatTime(h);
    elMinutes.innerText = formatTime(m);
    elSeconds.innerText = formatTime(s);

    // padEndを使ったログメッセージの整形デモ
    // 偶数秒と奇数秒でステータス表示を切り替え
    const statusLabel = s % 2 === 0 ? "Network" : "Database";
    const statusValue = "OK";
    
    // "Network..." のように12文字になるまでドットで埋める
    const logMessage = `${statusLabel.padEnd(12, '.')} ${statusValue}`;
    elLog.innerText = logMessage;

    // 次のフレームで再実行
    requestAnimationFrame(updateMonitor);
}

// 実行開始
updateMonitor();

カスタムポイント

埋める文字の変更:padString 引数を変更することで、ゼロ以外の文字で埋めることができます。例: String(price).padStart(5, '_') → __500
桁数の調整:formatTime 関数の length 引数を変更すれば、ミリ秒（3桁）などの表示にも対応可能です。例: String(ms).padStart(3, '0')
右寄せレイアウト:padEnd ではなく padStart を使い、スペースで左側を埋めることで、等幅フォント環境における「右寄せ表示」を実現できます。

注意点

対象は文字列（String）のみ数値型（Number）には padStart メソッドが存在しません。必ず String(num) や num.toString() で文字列化してから呼び出してください。
元の文字列が長い場合指定した targetLength よりも元の文字列の方が長い場合、パディングは行われず、文字列は切り詰められずにそのまま返されます。例: '12345'.padStart(3, '0') → '12345'（’123’にはならない）
全角文字の扱いlength は「文字数」でカウントされます。「バイト数」や「表示幅」ではないため、全角文字が混ざるとレイアウトが崩れる場合があります。厳密なコンソール整列が必要な場合は、文字幅を考慮した別途ロジックが必要です。

応用

クレジットカード番号のマスク表示

padEnd ではありませんが、padStart を応用して、セキュリティ上重要な情報を隠す処理に使えます。

const creditCard = '1234567812345678';
const last4Digits = creditCard.slice(-4); // 末尾4桁を取得 "5678"

// 全体の長さになるまで、先頭を '*' で埋める
const masked = last4Digits.padStart(creditCard.length, '*');
console.log(masked); // "************5678"