なぜ今さら「パディング」なのか？：UIの品格を支える文字列操作の作法
フロントエンド開発の現場で、ふと「あ、ここデザイン崩れてるな」と感じる瞬間はありませんか？ 例えば、ユーザーIDの表示や、ダッシュボードの数値、あるいは時刻の表示。データによって文字列の長さが変わるたびにレイアウトがガタつくのは、プロの仕事としては避けたいところです。
そんな時、昔の僕らは `(“00” + num).slice(-2)` のような、少し読みづらいハックを多用していました。しかし、現代のJavaScriptには、意図が明確で堅牢な `padStart()` と `padEnd()` が標準装備されています。
今日は、中級エンジニアの皆さんが明日から迷わず使いこなせるよう、このメソッドの「現場的な使いこなし術」を紐解いていきましょう。
—
1. そもそも `padStart` / `padEnd` とは何か？
このメソッドのシグネチャは非常にシンプルです。
str.padStart(targetLength [, padString])
- `targetLength`: 最終的に何文字にしたいか。
- `padString`: 何で埋めるか（省略時は半角スペース）。
ブラウザのエンジン（V8など）は、このメソッドが呼ばれると「現在の文字列の長さ」と「目標の長さ」を比較します。もし目標に達していなければ、内部的に文字列を連結して返します。極めて単純な操作に見えますが、これが「なぜ重要か」は、UIの再現性に直結します。
なぜ `slice` よりも推奨されるのか？
かつての `(“00” + n).slice(-2)` という書き方は、`n` が 3桁以上になった瞬間に挙動が破綻したり、意図が読み取りにくかったりします。一方、`padStart` は「何桁に揃えたいか」という宣言的なコードであるため、メンテナンス性が段違いです。
—
2. 現場で使える「即戦力」サンプルコード
現場のコードレビューで「おっ、わかってるな」と思われるような、実用的なパターンをいくつか紹介します。
パターンA：日付や時刻の「ゼロ埋め」
時刻の表示は、パディングの最もポピュラーなユースケースです。
const hour = 9;
const minute = 5;
// 9:5 とならずに 09:05 と表示する
const timeString = `${String(hour).padStart(2, ‘0’)}:${String(minute).padStart(2, ‘0’)}`;
console.log(timeString); // “09:05”
パターンB：ユーザーIDやシリアルコードの整形
IDの桁数を統一すると、UIの視認性が格段に上がります。
const userId = 123;
// 8桁に満たない場合は、先頭を ‘0’ で埋める
const formattedId = String(userId).padStart(8, ‘0’);
console.log(formattedId); // “00000123”
パターンC：`padEnd` を使ったデータテーブルのレイアウト調整
`padEnd` はあまり使われないと思われがちですが、CLIツールやテキストベースのログ出力、あるいは等幅フォントを使った簡易的な表作成には非常に役立ちます。
const items = [
{ name: ‘Apple’, price: 100 },
{ name: ‘Banana’, price: 20 },
];
items.forEach(item => {
// 15文字分を確保して、残りをスペースで埋める
const name = item.name.padEnd(15, ‘ ‘);
console.log(`${name} : ¥${item.price}`);
});
/
出力結果:
Apple : ¥100
Banana : ¥20
/
—
3. シニアエンジニアからの「現場の知恵」
最後に、実務でハマりやすいポイントを一つだけ伝授します。
「`padStart` は数値に直接は呼べない」 という点です。
たまに `(123).padStart(5, ‘0’)` と書いてエラーに遭遇する若手がいますが、これは `padStart` が `String.prototype` のメソッドだからです。必ず `String()` でラップするか、`toString()` を呼んでから使うのが鉄則です。
また、`padString` に2文字以上の文字列を渡した場合の挙動も面白いですよ。例えば `padString` に `”AB”` を渡すと、`”01234ABABA”` のように、指定した文字列を繰り返して埋めてくれます。あまり使う機会はありませんが、「どう埋められるか」という仕様を深く知っておくと、デバッグ時に迷うことがなくなります。
—
結びに：コードの「質」は細部に宿る
大規模なWebアプリケーションになればなるほど、レイアウトの微妙なズレや、データの不統一がユーザーの信頼感を損ないます。「たかがパディング」と思わず、こうした標準APIを適切に使うことで、コードの意図を明確にし、誰が読んでも理解できる美しいUIを作っていきましょう。
もし明日、IDや時刻の整形に悩んだら、この記事を思い出して `padStart` を書いてみてください。それだけで、あなたのコードは一歩、プロフェッショナルに近づきます。
現場からは以上です。さあ、エディタを開いて、コードに命を吹き込みましょう。
コメント