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

師範 / 目安 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 を返す
• 用意済みのクリック登録の中で、値を判定へ渡す
• 押されたら、その data-hour を数にして isOpen に渡す
• 補助関数は true なら #status の文字を「営業中」にして open クラスを付け、closed クラスを外す
• 補助関数は false なら「準備中」にして closed クラスを付け、open クラスを外す

進め方

編集するのは isOpen の戻り値と、クリックの関数の中だけです。showStatus(open) は真偽値を受け取り、文字と両方のクラスを切り替えます。ボタン登録と現在時刻の取得は用意済みです。

&& は左右の条件が両方とも成り立つときに true になります。たとえば const childFare = age >= 6 && age < 12; は、6歳以上12歳未満を表します。return でこのような式を返せば、真偽値を返す関数になります。

dataset と Number の組合せも確かめておきましょう。<button data-seats="4">4席</button> なら button.dataset.seats は文字列の "4"、Number(button.dataset.seats) は数値の 4 です。new Date().getHours() は現在の「時」を数値で取得します。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. isOpen(hour) の return false を、7以上22未満なら true、それ以外は false を返す式に置き換える
2. クリックの関数の中で button.dataset.hour を Number() で数にする
3. isOpen にその数を渡し、返った真偽値を showStatus に渡す
4. 文字と open・closed クラスの切替、初回の現在時刻表示は補助コードに任せる