総合 予約ページ完成

師範 / 目安 25分

陽葵さんが、いつになく静かな顔で座っています。「最後のお願い。予約ページを本気で作りたいの。人数を選んで、名前と時間を入れて、間違いがあったら教えてくれて、送ったら確認画面が出て、その時間が営業時間外なら止めてくれる。ぜんぶ入りで」

道場の10問目、最後の依頼です。

ここまでの9問で使った部品はひな形にあります。自分で書くのは、名前と営業時間を順番に確かめて、通ったときだけ確認画面へ進む処理です。人数の増減はボタンのクリック、入力の検証は submit と preventDefault、確認画面の出し入れは hidden クラスの付け外し、営業時間の判定は問8の isOpen(hour)。持っている部品を正しい順に並べられるか、それだけを問います。

人数の増減、isOpen、送信停止、入力の整形は用意済みです。まず名前の検証を書いて試し、次に営業時間の検証を追加します。最後まで通ったときだけ、用意済みの showConfirmation を呼びます。

検証の順序にも意味があります。エラーは1つ見つかったら、その時点で止めて確認画面を出さない。名前が空なのに確認画面が出てしまうと、お客さんは送信できたと思ってしまいます。エラーのときは前の確認画面も必ず閉じてください。逆に、通ったときはエラー文を消すのを忘れないでください。エラー文は自分で消さないかぎり残ります。

HTML と CSS は読み取り専用です。人数の増減ボタン、名前と時刻の入力欄、送信ボタン、エラーの行、そして最初は hidden が付いた確認画面が用意してあります。

完成条件

人数の増減

• 人数は 1 から始め、#count-up で1増やし、#count-down で1減らして #guests に出す
• 1未満と6より大きい人数にはしない

検証

• form の submit を e.preventDefault() で止める
• 名前が空（空白だけを含む）なら #error に「お名前を入力してください」を出し、確認画面は出さない
• 時刻が営業時間 (7以上22未満) の外なら #error に「営業時間は7時から22時までです」を出し、確認画面は出さない。用意済みの isOpen(hour) を使う

確認画面

• すべて通ったら #error を空にし、#confirm から hidden を外す
• #confirm-text に、名前・人数・時刻の3つが読み取れる文を出す

進め方

編集するのは submit の末尾のコメントの位置です。guestName には前後の空白を除いた名前、visitHour には数値の時刻が入っています。isOpen(hour) は営業時間内なら true を返します。showError(message) はエラー文を表示して確認画面を閉じ、showConfirmation(name, hour) はエラーを消して確認画面を出します。これらの中身は編集しなくてかまいません。

表示用の関数を呼んでから終了することは、return 関数呼び出し; とまとめられます。たとえば印刷の枚数を確かめる処理なら次の形です。

function checkCopies(copies) {
  if (copies <= 0) {
    return showNotice("枚数を選んでください");
  }
  startPrinting(copies);
}

showNotice を実行してから、checkCopies の処理を終了します。表示関数が値を返さなくても、この早期終了には使えます。! は真偽を反転する記号です。!isOpen(visitHour) は「営業時間内ではない」を表します。名前を先に、営業時間を次に確かめ、それぞれのエラーで終了してください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

これで10問すべてです。陽葵さんは予約フォームに自分で名前を入れて、確認画面が出るのを見届けると、両手で頬をおさえて言いました。「ハレノヒ珈琲、ネット予約始めました!」

師範が奥から一枚の紙を持って出てきます。そこには JavaScript道場・師範代を允許する と書かれていました。ボタンひとつで挨拶を出すところから始めて、いまあなたは、用意した部品をつなぎ、検証を通ったときだけ進む予約フローを作れます。

1. 編集するのは submit の末尾のコメントの位置だけ。要素取得、人数の1〜6名の操作、送信停止、入力の整形は用意済み
2. 空白を除いた guestName が空なら showError("お名前を入力してください") を呼び、その場で return する
3. 次に、用意済みの isOpen(visitHour) で7以上22未満かを確かめ、営業時間外なら showError("営業時間は7時から22時までです") を呼んで return する
4. 名前と営業時間が両方とも通ったときだけ showConfirmation(guestName, visitHour) を呼ぶ
5. エラー時に前の確認画面を閉じ、成功時にエラーを消して名前・人数・時刻を出す処理は補助関数に任せる