配列からメニューを描画せよ

中段 / 目安 25分

陽葵さんがノートを開いて、ため息をつきました。「新メニューを出すたびに、HTML に同じ形のカードを書き足してるの。抹茶ラテのときも、レモネードのときも。書き写してるだけなのに、毎回どこか間違えるのよ」

それは間違えて当然です。同じ形のものを手で6回書けば、6回ぶんの間違える機会があるからです。プログラムに任せるべき仕事の、一番わかりやすい形がこれです。

やることは2つに分かれます。1つ目は、メニューの中身を 配列 として持つこと。名前・価格・説明の3つを持ったオブジェクトを、品数のぶんだけ並べます。2つ目は、その配列を forEach で1件ずつ取り出し、document.createElement でカードの要素を組み立てて appendChild で画面にぶら下げることです。

1件ぶんを作る処理さえ書けたら、残りは配列が勝手に増やしてくれます。10品でも100品でも、書く JavaScript の量は変わりません。ここが手書きの HTML との決定的な差です。

HTML には空の <div id="menu-list"> だけが置いてあります。この中にカードを流し込んでください。HTML と CSS は読み取り専用です。カードの見た目 (.menu-card) はすでに CSS 側で用意してあるので、あなたが作る要素に menu-card というクラスを付ければ、そのまま整った形で出ます。

完成条件

• メニューを配列で持つ。1件は名前・価格・説明を持ったオブジェクトにし、6件以上 並べる
• 配列を forEach でまわし、1件につき1枚のカード要素を作る
• カードには menu-card クラスを付け、#menu-list の中に appendChild する
• カードの中に、名前・価格・説明をそれぞれ別の要素で入れる。名前は menu-name、価格は menu-price クラスを付ける
• 価格は「580円」のように、数値のうしろに円を付けて出す

進め方

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

1. メニューを配列で持ち、1件を名前・価格・説明のオブジェクトにして6件以上並べる
2. 配列を forEach でまわし、1件につき1枚のカード要素を作る
3. カードに menu-card クラスを付け、#menu-list の中に appendChild する
4. カードの中に名前 (menu-name) と価格 (menu-price) と説明をそれぞれ別の要素で入れる
5. 価格は 580円 のように数値のうしろに円を付けて表示する