営業中か準備中かを判定せよ

師範 / 目安 30分

「いま開いてますか、っていう電話が1日に何本も来るの」と陽葵さん。「サイトを見たら分かるようにしたい。7時から22時までが営業中、それ以外は準備中よ」

素直に書けば new Date().getHours() で現在の時刻を取ってきて、そのまま判定すればよさそうに見えます。ところが、その形で書くと 自分で動かして確かめられない という問題が出ます。いま14時なら営業中しか見られず、準備中の表示が正しいかどうかは夜まで確かめようがありません。

そこで師範の教えが効いてきます。時刻を「取ってくる」処理と、時刻から「判定する」処理を分けるのです。判定のほうを isOpen(hour) という関数にして、時刻を引数で受け取る形にすれば、7時でも23時でも好きなだけ試せます。現在時刻を渡すのは、いちばん外側で1回だけやればいい。

この分け方は、あとで自動テストを書くときにそのまま効いてきます。引数で受け取る関数は何度でも同じ答えを返しますが、中で現在時刻を読む関数は実行するたびに答えが変わり、テストのしようがありません。

HTML は読み取り専用で、時刻を試すためのボタンを並べてあります。それぞれ data-hour に時刻が入っているので、押されたら isOpen(hour) に渡してバッジを書き換えてください。data-hour から読んだ値は文字列なので、数として比べるなら Number() を通してください。

完成条件

• isOpen(hour) という関数を作る。7以上22未満なら true、それ以外は false を返す
• .hour-button のすべてにクリックのイベントを付ける
• 押されたら、その data-hour を数にして isOpen に渡す
• true なら #status の文字を「営業中」にして open クラスを付け、closed クラスを外す
• false なら「準備中」にして closed クラスを付け、open クラスを外す

進め方

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

1. isOpen(hour) を作り、7以上22未満なら true、それ以外は false を返す
2. すべての .hour-button にクリックのイベントを付ける
3. 押されたら data-hour を Number() で数にして isOpen に渡す
4. 営業中なら #status を営業中にして open クラスを付け、closed を外す
5. 準備中なら #status を準備中にして closed クラスを付け、open を外す