こんにちは！フロントエンドの現場を渡り歩いてきた、チーフアーキテクトの私です。
JavaScriptのコードを書いていると、「あともうちょっとだけ、この文字の左側に『0』を足して、桁数を揃えたいんだよなぁ……！」という場面、ものすごくよく遭遇しませんか？
例えば、時計の表示。「9時5分」を「09:05」と綺麗に揃えたいとき。あるいは、商品の管理番号や、ファイルの連番をきれいに並べたいとき。
昔のプログラミングの世界では、これをするためにわざわざ「今の文字の長さを測って、足りない分を計算して、ループを回して足して……」なんていう、ちょっと面倒な処理を書くのが定番でした。ぶっちゃけ、面倒くさいですよね。
でも、安心してください。今のJavaScriptには、そんなモヤモヤをたった一行でスッキリ解決してくれる、とっても頼もしい相棒がいます。それが今回ご紹介する `padStart()`（パッド・スタート） メソッドです！
難しい専門用語はなるべく置いておいて、身近な例えと一緒に、この便利なメソッドの正体に迫っていきましょう。
—
1. `padStart()` ってどんなもの？（お買い物のレシートを想像してみて）
`padStart()` をイメージしやすくするために、身近な例え話をひとつ。
スーパーのレジで発行されるレシートや整理券を思い出してみてください。
「3番」という番号があったとき、機械によっては「003番」と、必ず3桁になるように左側に「0」が埋められて印刷されることがありますよね。
あの「足りない文字数を、指定した文字で左側から埋めていく（Paddingする）」という仕事を、JavaScriptでやってくれるのが `padStart()` なんです。
- 何文字にしたい？（目標の長さ）
- 足りないときは、何の文字で埋める？
この2つを教えてあげるだけで、メソッドが自動的に足りない隙間を埋めて、きれいに整えられた新しい文字列を返してくれます。
—
2. 実際にコードを書いて動かしてみよう
百聞は一見に如かず。実際にエディタを叩くつもりで、簡単なコードを見てみましょう。
一番よくあるユースケースである「数字を2桁に揃える（ゼロ埋め）」をやってみます。
// 「5」という数字を、どうしても2桁にしたい！
let minute = “5”;
// padStart(目標の長さ, 埋める文字) を使います
let paddedMinute = minute.padStart(2, “0”);
console.log(paddedMinute); // 結果は 「05」 になります！
すごいでしょう？たったこれだけです。
「`2` 桁にしてね。足りないところは左側から `0` で埋めてね」という命令を、そのまま `padStart(2, “0”)` と書いてあげているだけなんです。
もし最初から2桁だったらどうなるの？
「じゃあ、すでに『12』っていう2桁の数字があったらどうなっちゃうの？ 変に削られたりしない？」
そんな心配性なあなた、素晴らしい着眼点です！安心してください、何もしません。
let hour = “12”;
// すでに2桁あるので、そのまま「12」が返ってきます
console.log(hour.padStart(2, “0”)); // 結果: 「12」
`padStart()` は、「目標の長さに達していなければ埋める。すでに目標の長さ（あるいはそれ以上）に達していれば、そのまま何もしない」という、すごく空気が読める優しい仕様になっています。だから、条件分岐をわざわざ書かなくても安全に使えるんですね。
—
3. 実務でよくあるつまずきポイントと注意点
現場で初心者のメンバーからよく相談を受ける「あるあるな落とし穴」を、こっそりシェアしておきますね。ここを知っておくだけで、まわりの開発者にグッと差をつけられますよ。
注意点その1：数値（Number型）のままでは使えない！
これ、本当によくあるエラーです。`padStart()` は「文字列（String）」のためのメソッドです。そのため、数値データにそのまま使おうとすると、JavaScriptから怒られてしまいます。
let count = 5;
// うっかりそのまま使おうとすると……？
// count.padStart(2, “0”);
// 💥 怒られます！ 「TypeError: count.padStart is not a function」
【解決策】
使う前に、一度文字列に変換してあげましょう。`String()` で囲うか、テンプレートリテラルを使うのが現代的でスマートです。
let count = 5;
// 文字列に変換してから padStart を呼ぶ！
let safeCount = String(count).padStart(2, “0”);
console.log(safeCount); // 「05」として無事に動きます
注意点その2：埋める文字は1文字じゃなくてもいい
「ゼロ埋め」で使うことが多いので「0」専用と思われがちですが、実は複数の文字を指定することもできます。
let text = “7”;
// 「abc」という文字列で、全体が6文字になるように左側を埋める
let result = text.padStart(6, “abc”);
console.log(result); // 結果: 「abca7」
このように、指定した文字が繰り返し使われて隙間が埋められていきます（※目標の長さに端数が生じる場合は、文字の途中までで切り詰められます）。ちょっとしたデザインの装飾なんかにも応用できたりしますよ。
—
4. まとめ：今日からあなたのコードをスッキリさせよう
今回は、文字列の先頭を指定の文字で埋めてくれる `padStart()` についてお話ししました。
- 何桁にするか と 何の文字で埋めるか を渡すだけでOK
- すでに十分な長さがある文字列は、そのままそっとしておいてくれる
- 使うときは「文字列」に変換してから呼ぶのを忘れずに！
Web制作やアプリケーション開発をしていると、日付や時刻の表示、IDのフォーマットなど、文字列の長さを揃えたいシチュエーションは本当にたくさんあります。
昔ながらの面倒な文字数計算のコードを書くのはもう卒業して、このスマートな `padStart()` をぜひあなたの武器に加えてみてください。あなたのJavaScriptライフが、ほんの少しでも快適で楽しいものになれば、チーフアーキテクトとしてこんなに嬉しいことはありません。
それでは、また次の現場の知見でお会いしましょう！
コメント