メニューの絞り込み

中段 / 目安 25分

「メニューが8品まで増えたの」と陽葵さんは誇らしげですが、すぐ困り顔になりました。「そうしたら『ドリンクだけ見たい』っておっしゃるお客様がいて。カテゴリで絞り込めない?」

script.js には8品ぶんのデータが menu という配列で用意してあります。1件は name price category の3つを持つオブジェクトです。category に入るのは drink food sweets の3種類です。

HTML 側の #menu-list は空っぽの ul です。カテゴリのボタンにはそれぞれ data-category が付いていて、すべてを出すボタンだけ all になっています。

この問題の型は「データを絞って、描き直す」です。まず全件を描く関数を1つ作り、その関数に「どのカテゴリか」を渡せるようにします。ボタンが押されたら、押されたボタンのカテゴリでその関数を呼び直します。描き直すときは、前に描いたものを一度消してから並べ直してください。消さずに足すと、押すたびに増えていきます。

ページを開いた直後は8品すべてが並んでいる状態にします。

完成条件

• 開いた直後は8品すべてが #menu-list に並ぶ
• 1件は class="menu-item" の li として描く
• 各件に商品名（class="name"）と価格（class="price"）を入れる
• カテゴリのボタンを押すと、そのカテゴリの品だけが並ぶ
• 「すべて」を押すと8品に戻る

進め方

配列から条件に合うものだけを取り出すのは filter です。all のときだけは絞らず配列をそのまま使います。

描き直しの最初にやるのは list.innerHTML = "" です。これで前回ぶんが消えます。そのうえで forEach で1件ずつ li を作り、appendChild で足していきます。

押されたボタンのカテゴリは、そのボタンの dataset.category から読めます。ボタン4つそれぞれに待ち伏せを仕掛けるには querySelectorAll で集めて forEach を回すのが素直です。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. 開いた直後は8品すべてを #menu-list に描く
2. 1件を class="menu-item" の li として描き、.name と .price を中に入れる
3. カテゴリのボタンを押すとそのカテゴリの品だけに絞り込む
4. 「すべて」のボタンで8品に戻す