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

中段 / 目安 25分

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

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

やることは2つに分かれます。1つ目は、メニューの中身を 配列 として持つこと。名前・価格・説明の3つを持ったオブジェクトが6件、ひな形の menus に入っています。データの書き直しは不要です。2つ目は、その配列を forEach で1件ずつ取り出し、補助関数 createMenuCard(name, price, text) へ3つの値を渡し、返ったカードを appendChild で一覧に追加することです。

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

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

完成条件

• 用意済みの6件の menus 配列を使う。1件は名前・価格・説明を持つ
• 配列を forEach でまわし、1件につき1枚のカード要素を作る
• 補助関数が返すカードを #menu-list の中に appendChild する
• 名前・価格・説明を補助関数へ渡す。子要素とクラスは補助関数が用意する
• 価格は「580円」のように、数値のうしろに円を付けて出す

進め方

書くのは末尾のコメントの位置です。createMenuCard は要素を返すだけで、一覧にはまだ追加しません。返った要素を変数で受け取り、menuList に追加するところは自分で書きます。

forEach の引数の関数には、配列の要素が1件ずつ渡されます。たとえば写真の一覧なら次の形です。

const photos = [{ title: "海", file: "sea.jpg" }, { title: "森", file: "forest.jpg" }];
photos.forEach(function (photo) {
  console.log(photo.title, photo.file);
});

補助関数が返した要素も、普通の要素と同じように扱えます。たとえば const notice = makeNotice("休館日"); で要素を受け取ったら、noticeArea.appendChild(notice); で追加できます。今回の補助関数は、名前、数値の価格、説明の順で受け取ります。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. 用意済みの menus 配列と createMenuCard(name, price, text) は編集しなくてよい
2. menus.forEach で1件ずつ取り出し、menu.name・menu.price・menu.text の順で createMenuCard に渡す
3. 返ったカードを menuList.appendChild で一覧に追加する
4. 6件それぞれの名前・価格・説明を含むカードが1枚ずつ並ぶ。クラス付与と「円」の追加は補助関数に任せる