時計の表示を整えよ

師範 / 目安 30分

「ヘッダーに時計が欲しいの。秒まで動くやつ」と陽葵さん。「カフェって時間が大事だから。あと5分で焼き上がり、とか」

時計は2つの部品でできています。1つは 1秒ごとに動かす仕掛け、もう1つは 時分秒をきれいな文字に整える処理 です。この2つを混ぜて書くと、途端に確かめられなくなります。前の問題と同じ話です。動かす仕掛けの中に整形が埋まっていると、正しく整形できているかは実際に1秒待たないと分かりません。

そこで、整形のほうを formatClock(h, m, s) として切り出します。時・分・秒を受け取り、09:05:03 の形の文字列を返す関数です。これなら好きな値を渡して一瞬で確かめられます。

整形でつまずくのはゼロ埋めです。5時3分は 5:3 ではなく 05:03 と書きたい。数を2桁にそろえるには String(m).padStart(2, "0") を使います。数のままでは padStart は使えないので、いったん String() で文字にしてから渡します。

HTML は読み取り専用です。整形を確かめるためのボタンを置いてあるので、押されたら data-h data-m data-s の3つを formatClock に渡して #clock に出してください。dataset で読んだ値は文字列なので、数として扱うなら Number() を通します。

確認ボタンと、setInterval による1秒ごとの更新はひな形にあります。tick は new Date() で現在の日時を取り、getHours() で時、getMinutes() で分、getSeconds() で秒を読んで formatClock に渡します。たとえば const date = new Date(); console.log(date.getMinutes()); で現在の分を確認できます。setInterval(tick, 1000) は tick を1000ミリ秒ごとに呼ぶ指定です。ここは書き直さず、整形に集中してください。

完成条件

• formatClock(h, m, s) を作る。09:05:03 のように 2桁ずつコロンでつないだ文字列 を返す
• 用意済みの .time-button のクリック処理で整形を確かめる
• ボタンの値の数値化と #clock への表示は補助コードに任せる
• 用意済みの setInterval が同じ整形関数で1秒ごとに時計を更新する

進め方

ひな形の formatClock の仮の戻り値を置き換えます。時・分・秒それぞれの文字列を変数に受け取り、最後に連結すると、どの値を整えたか確認できます。

時計とは別の、整理券番号で試してみましょう。

const ticket = 4;
const digits = String(ticket).padStart(3, "0");
console.log("券番号 " + digits); // 券番号 004

padStart は指定の桁数まで左側を補います。すでに桁数が足りている文字列は変わりません。今回の時計は各部分を2桁にします。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. 編集するのは formatClock(h, m, s) の中だけ。引数には数値の時・分・秒が入る
2. それぞれを String と padStart でゼロ埋めして2桁にする
3. 2桁ずつを「時、分、秒」の順でコロン区切りの文字列にして返す
4. 確認ボタンと setInterval の更新は補助コードに任せる