時計の表示を整えよ

師範 / 目安 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秒ごとに現在時刻を formatClock に渡し、時計として動かしてください。動かす仕掛けと整形が分かれていれば、つなぐのは1行です。

完成条件

• formatClock(h, m, s) を作る。09:05:03 のように 2桁ずつコロンでつないだ文字列 を返す
• .time-button のすべてにクリックのイベントを付ける
• 押されたら data-h data-m data-s を数にして formatClock に渡し、#clock に出す
• setInterval を使い、1秒ごとに現在時刻を formatClock に渡して #clock を更新する

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. formatClock(h, m, s) を作り、09:05:03 の形の文字列を返す
2. 1桁の数はゼロ埋めして2桁にそろえる
3. すべての .time-button にクリックのイベントを付ける
4. 押されたら data-h と data-m と data-s を数にして formatClock に渡し、#clock に出す
5. setInterval で1秒ごとに現在時刻を formatClock に渡し、#clock を更新する